@extends('back.layout')

@section('title')
    {{ __('i43') }} - {{ __('n1') }}
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between dir">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('i44') }}</h1>
            </div>
            <div>
                <a href="" data-bs-toggle="modal" data-bs-target="#add" class="btn btn-success fw-bold"><i class="fa-solid fa-plus"></i></a>
            </div>
        </div>
        <div class="page-content dir" style="overflow-x: scroll">

            {{-- All Feeds --}}
            @if (count($faq) > 0)
                <div id="feeds" style="width: 100vh">
                    <input class="search form-control text-center fw-bold mb-2 shadow-none" placeholder="{{ __('j3') }}" />
                    <table class="table w-100">
                        <thead>
                            <tr>
                                <th class="fs-6 fw-bold text-center sort" data-sort="id">#</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="name">{{ __('i45') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="email">{{ __('i46') }}</th>
                                <th class="fs-6 fw-bold text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($faq as $f)
                                <tr>
                                    <td class="fs-6 fw-bold text-center id">{{ $f->id }}</td>
                                    <td class="fs-6 fw-bold text-center name">{{ $f->title1 }}</td>
                                    <td class="fs-6 fw-bold text-center email">{{ $f->text1 }}</td>
                                    <td>
                                        <form action="{{ route('deleteFAQ', $f->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                class="btn btn-danger fs-6 submitForm">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <ul class="pagination"></ul>
                </div>
            @else
                <p class="fw-bold text-center text-dark fs-4">
                {{ __('i47') }}
                </p>
            @endif

        </div>
    </div>

    {{-- Modals --}}

    {{-- Withdraw --}}
    <div class="modal fade" id="add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content ">
                <div class="modal-header dir">
                    <h5 class="modal-title fw-bold" id="exampleModalLabel">{{ __('i48') }}</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('storeFAQ') }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="mb-3">
                            <label for="title1" class="fw-bold text-dark mb-2">{{ __('i49') }} <span class="text-danger">*</span></label>
                            <input type="text" name="title1" id="title1" class="form-control fw-bold shadow-none" required>
                        </div>

                        <div class="mb-3">
                            <label for="text1" class="fw-bold text-dark mb-2">{{ __('i50') }} <span class="text-danger">*</span></label>
                            <textarea type="text" name="text1" id="text1" class="form-control fw-bold shadow-none" required></textarea>
                        </div>

                        <button type="submit" class="btn btn-success shadow-none fw-bold submitForm">{{ __('j1') }}</button>
                        <button type="button" class="btn btn-secondary shadow-none fw-bold" data-bs-dismiss="modal">{{ __('j2') }}</button>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jss')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"
        integrity="sha512-MT5YyrGWqMGkIbwkVUZEWGrRDjlNx8loukEdFyzLo4s8INKVxnDQy2eFcpmnWGrFwJ+X8mRTQOJpWCayXz7+Og=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var options = {
            valueNames: ['id', 'name', 'email', 'text', 'status'],
            page: 50,
            pagination: true
        };

        var userList = new List('feeds', options);
    </script>
@endsection