@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">

                @include('components.alert')

                {{-- ===== TABEL DAFTAR PERTANYAAN & JAWABAN FAQ ===== --}}
                <div class="row mx-1 mb-4">
                    <div class="card shadow-sm border-0">

                        <div class="card-header border-bottom py-3">
                            <h5 class="mb-0 fw-bold text-dark">
                                Daftar Pertanyaan & Jawaban FAQ
                            </h5>
                        </div>

                        {{-- ===== TAMBAH, EXCEL, PDF, SEARCH ===== --}}
                        <div class="row px-4 pt-3 pb-2">
                            <div class="col-lg d-flex flex-wrap gap-2 align-items-center">

                                <a href="{{ url('/faq-master/edit') }}" class="btn btn-primary btn-sm mb-0">
                                    <i class="fas fa-plus me-1"></i><span class="font-weight-bold"> Tambah</span>
                                </a>

                                <a href="{{ url('/faq-master') }}?export=excel" class="btn btn-secondary btn-sm mb-0">
                                    <i class="fas fa-file-excel me-1 text-success"></i><span class="font-weight-bold"> Excel</span>
                                </a>

                                <a href="{{ url('/faq-master') }}?export=pdf" class="btn btn-secondary btn-sm mb-0">
                                    <i class="fas fa-file-pdf me-1 text-danger"></i><span class="font-weight-bold"> PDF</span>
                                </a>

                                <div class="ms-auto d-flex align-items-center">
                                    <input
                                        type="text"
                                        id="customSearchFaq"
                                        class="form-control form-control-sm"
                                        style="width: 220px;"
                                        placeholder="Cari data..."
                                    >
                                </div>

                            </div>
                        </div>

                        {{-- ===== TABEL FAQ LIST ===== --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                @if ($faqs->isEmpty())
                                    <p class="text-center text-muted py-4">Belum ada data FAQ.</p>
                                @else
                                    <table class="table display align-middle mb-0" id="list_faq" style="width: 100%; min-width: 1000px;">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="300" class="text-center text-nowrap">Action</th>
                                                <th width="60" class="text-center text-nowrap">No</th>
                                                <th>Pertanyaan (ID)</th>
                                                <th>Jawaban Ringkas (ID)</th>
                                                <th width="80" class="text-center text-nowrap">Urutan</th>
                                                <th width="100" class="text-center text-nowrap">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($faqs as $item)
                                                @php $l = $lang[$item->idfaq] ?? null; @endphp
                                                <tr {{ $item->isactive == 0 ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                    <td class="text-center text-nowrap align-middle">
                                                        <div class="d-flex justify-content-center gap-2">
                                                            <button class="btn btn-primary btn-xs mb-0 px-3 btn-faq-detail" type="button" data-id="{{ $item->idfaq }}">
                                                                <i class="fas fa-eye me-1"></i><span class="font-weight-bold"> Detail</span>
                                                            </button>

                                                            <a href="{{ url('/faq-master/edit/' . $item->idfaq) }}" class="btn btn-warning btn-xs mb-0 px-3">
                                                                <i class="fas fa-edit me-1"></i><span class="font-weight-bold"> Edit</span>
                                                            </a>

                                                            <form action="{{ url('/faq-master/toggle/' . $item->idfaq) }}" method="POST" style="display:inline">
                                                                @csrf
                                                                <button type="submit" class="btn btn-xs mb-0 px-3 btn-{{ $item->isactive == '0' ? 'success' : 'danger' }}"
                                                                    onclick="return toggleItem(event, '{{ $l->pertanyaan ?? 'FAQ' }}', '{{ $item->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                    <i class="fas fa-random me-1"></i><span class="font-weight-bold">
                                                                        {{ $item->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                                </button>
                                                            </form>

                                                            <form action="{{ url('/faq-master/destroy/' . $item->idfaq) }}" method="POST" style="display:inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-danger btn-xs mb-0 px-3" onclick="return confirm('Apakah Anda yakin ingin menghapus FAQ ini?')">
                                                                    <i class="fas fa-trash me-1"></i><span class="font-weight-bold"> Hapus</span>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                    <td class="text-center font-weight-bold align-middle">{{ $loop->iteration }}</td>
                                                    <td class="align-middle fw-bold text-dark text-wrap">{{ $l->pertanyaan ?? '-' }}</td>
                                                    <td class="align-middle text-sm text-secondary text-wrap">{{ \Illuminate\Support\Str::limit(strip_tags($l->jawaban ?? ''), 80) }}</td>
                                                    <td class="text-center font-weight-bold align-middle">{{ $item->urutan }}</td>
                                                    <td class="align-middle text-center">
                                                        <span class="badge bg-{{ $item->isactive == 1 ? 'success' : 'danger' }}">
                                                            {{ $item->isactive == 1 ? 'Aktif' : 'Non Aktif' }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </div>
                        </div>

                        <div class="card-footer bg-white border-0 py-3"></div>

                    </div>
                </div>

                {{-- Area Detail Inline Data FAQ --}}
                <div id="section-detail-area" class="mt-4"></div>

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

@push('js')
<script>
    function toggleItem(event, name, msg) {
        event.preventDefault();
        Swal.fire({
            title: 'Konfirmasi',
            text: `Apakah Anda Yakin ${msg} "${name}" ini?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `Ya, ${msg}`,
            cancelButtonText: 'Batal',
            confirmButtonColor: '#028284'
        }).then((result) => {
            if (result.isConfirmed) {
                event.target.closest('form').submit();
            }
        });
    }

    $(document).on('click', '.btn-faq-detail', function() {
        const id = $(this).data('id');
        const $area = $('#section-detail-area');
        $area.html('<div class="card shadow-sm border-0 p-4 text-center text-muted"><i class="fas fa-spinner fa-spin fa-2x mb-2"></i><br>Memuat detail data FAQ...</div>');

        $('html, body').animate({
            scrollTop: $area.offset().top - 100
        }, 300);

        $.ajax({
            url: `{{ url('/faq-master/detail') }}/${id}`,
            method: 'GET',
            success: function(html) {
                $area.html(html);
            },
            error: function() {
                $area.html('<div class="alert alert-danger mb-0">Gagal memuat detail data FAQ.</div>');
            }
        });
    });

    @if ($faqs->isNotEmpty())
    $('#list_faq').DataTable({
        paging: true,
        info: true,
        searching: true,
        responsive: true,
        scrollX: true,
        autoWidth: false,
        dom: 'rtip',
        language: { zeroRecords: "Maaf - Data FAQ tidak ditemukan" },
        initComplete: function () {
            $('.dataTables_filter').remove();
            $('#customSearchFaq').on('keyup', function () {
                $('#list_faq').DataTable().search(this.value).draw();
            });
        }
    });
    @endif
</script>
@endpush