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

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

    <style>
        table.table thead tr th {
            text-align: center !important;
        }
        table.table tbody tr td {
            text-align: left !important;
        }
    </style>

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

                <div class="row mx-1">
                    <div class="card">

                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>

                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>

                        <hr class="horizontal dark mt-0">

                        {{-- ===== TABEL SECTION ===== --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">

                                <table class="table display" id="list_faq_konten" style="width: 100%;">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="240" class="text-nowrap text-center">Action</th>
                                            <th width="50" class="text-nowrap text-center">No</th>
                                            <th>Nama Seksi / Pengaturan</th>
                                            <th>Keterangan Tipe</th>
                                            <th width="100" class="text-nowrap text-center">Status</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @php $no = 1; @endphp
                                        @foreach ($sections as $key => $section)
                                            @php
                                                $isactive = $visibility[$key] ?? 1;
                                            @endphp
                                            <tr {{ $isactive == 0 ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal text-center align-middle">
                                                    <div class="d-flex justify-content-center gap-2">
                                                        <button
                                                            class="btn btn-primary btn-xs mb-0 px-3 btn-detail-section"
                                                            type="button"
                                                            data-key="{{ $key }}"
                                                        >
                                                            <i class="fas fa-eye me-1"></i>
                                                            <span class="font-weight-bold"> Detail</span>
                                                        </button>

                                                        <form
                                                            action="{{ url('/faq-konten/toggle/' . $key) }}"
                                                            method="POST"
                                                            style="display: inline"
                                                        >
                                                            @csrf
                                                            <button
                                                                type="submit"
                                                                class="btn btn-xs mb-0 px-3 btn-{{ $isactive == 1 ? 'danger' : 'success' }}"
                                                                onclick="return toggleSection(event, '{{ $section['label'] }}', '{{ $isactive == 1 ? 'Non Aktifkan' : 'Aktifkan' }}')"
                                                            >
                                                                <i class="fas fa-random me-1"></i>
                                                                <span class="font-weight-bold">
                                                                    {{ $isactive == 1 ? 'Non Aktifkan' : 'Aktifkan' }}
                                                                </span>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>

                                                <td class="text-center font-weight-bold align-middle">{{ $no++ }}</td>
                                                <td class="align-middle fw-bold text-dark">{{ $section['label'] }}</td>
                                                <td class="align-middle text-sm text-secondary">{{ $section['keterangan'] }} ({{ ucfirst($section['type']) }})</td>
                                                <td class="text-center align-middle">
                                                    <span class="badge bg-{{ $isactive == 1 ? 'success' : 'danger' }}">
                                                        {{ $isactive == 1 ? 'Aktif' : 'Non Aktif' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>

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

                    </div>
                </div>

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

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

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

    $('#list_faq_konten').DataTable({
        paging: false,
        searching: false,
        info: false,
        responsive: true,
        scrollX: true,
        autoWidth: false,
        dom: 'rt'
    });

    $(document).on('click', '.btn-detail-section', function() {
        const key = $(this).data('key');
        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 seksi...</div>');

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

        $.ajax({
            url: `{{ url('/faq-konten/detail') }}/${key}`,
            method: 'GET',
            success: function(html) {
                $area.html(html);
            },
            error: function() {
                $area.html('<div class="alert alert-danger mb-0">Gagal memuat detail seksi.</div>');
            }
        });
    });
</script>
@endpush