{{-- ========================================================== --}}
{{--        INI ADALAH ISI LENGKAP UNTUK SHARED_DASHBOARD.BLADE.PHP --}}
{{-- ========================================================== --}}

{{-- BARIS KARTU METRIK DOKUMEN --}}
<div class="row">
    {{-- Card Total Documents --}}
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card filter-card-halal" data-status="Total" style="cursor: pointer;">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold opacity-7">Total Documents</p>
                        {{-- Gunakan '?? 0' sebagai pengaman jika variabel tidak ada --}}
                        <h4 class="font-weight-bolder mb-0">{{ $totalDocs ?? 0 }}</h4>
                    </div>
                    <div class="icon icon-shape icon-md bg-gradient-secondary text-center rounded-circle">
                        <i class="ni ni-collection text-lg opacity-10"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Card Approved --}}
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card filter-card-halal" data-status="Approved" style="cursor: pointer;">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold opacity-7">Approved</p>
                        <h4 class="font-weight-bolder mb-0">{{ $approvedCount ?? 0 }}</h4>
                    </div>
                    <div class="icon icon-shape icon-md bg-gradient-success text-center rounded-circle">
                        <i class="ni ni-check-bold text-lg opacity-10"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Card In Progress --}}
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card filter-card-halal" data-status="Pending" style="cursor: pointer;">
             <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold opacity-7">In Progress</p>
                        <h4 class="font-weight-bolder mb-0">{{ $pendingCount ?? 0 }}</h4>
                    </div>
                    <div class="icon icon-shape icon-md bg-gradient-warning text-center rounded-circle">
                        <i class="ni ni-time-alarm text-lg opacity-10"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Card Rejected --}}
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card filter-card-halal" data-status="Rejected" style="cursor: pointer;">
             <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold opacity-7">Rejected</p>
                        <h4 class="font-weight-bolder mb-0">{{ $rejectedCount ?? 0 }}</h4>
                    </div>
                    <div class="icon icon-shape icon-md bg-gradient-danger text-center rounded-circle">
                        <i class="ni ni-fat-remove text-lg opacity-10"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- TABEL DOKUMEN --}}
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Data Status Dokumen</h6>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div id="document-table-container">
                     {{-- Kita panggil partial tabelnya di sini --}}
                     @include('pages.dashboard.timHalalDashboard.partials._document_table', ['documents' => $documents ?? collect([])])
                </div>
            </div>
        </div>
    </div>
</div>


{{-- SCRIPT KHUSUS UNTUK DASHBOARD INI --}}
@push('js')
<script>
    // Pastikan listener hanya ditambahkan sekali untuk mencegah duplikasi
    if (!window.sharedDashboardListenersAdded) {
        document.addEventListener('DOMContentLoaded', function () {
            // Target kontainer tabel dokumen yang spesifik
            const docTableContainer = document.getElementById('document-table-container');

            // FUNGSI DIBERI NAMA UNIK untuk menghindari konflik
            function fetchSharedDocumentData(url) {
                if (!docTableContainer) return; // Pengaman jika elemen tidak ada
                docTableContainer.innerHTML = `<div class="text-center p-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>`;

                fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(response => response.text())
                    .then(html => {
                        docTableContainer.innerHTML = html;
                        // Panggil fungsi listener dengan nama yang baru
                        addSharedPaginationListeners();
                    })
                    .catch(error => {
                        console.error('Error fetching shared data:', error);
                        docTableContainer.innerHTML = '<p class="text-center text-danger">Gagal memuat data dokumen.</p>';
                    });
            }

            // FUNGSI DIBERI NAMA UNIK untuk menghindari konflik
            function addSharedPaginationListeners() {
                // SELEKTOR DIBUAT SANGAT SPESIFIK: hanya cari link pagination di dalam #document-table-container
                document.querySelectorAll('#document-table-container .pagination a').forEach(link => {
                    link.addEventListener('click', function (e) {
                        e.preventDefault();
                        // Panggil fungsi fetch dengan nama yang baru
                        fetchSharedDocumentData(this.href);
                    });
                });
            }

            document.querySelectorAll('.filter-card-halal').forEach(card => {
                card.addEventListener('click', function () {
                    const status = this.dataset.status;
                    // Pastikan route ini benar untuk memfilter data dokumen
                    const url = `{{ route('dashboard.halal.filter') }}?filter_status_halal=${status}`;
                    fetchSharedDocumentData(url);
                });
            });

            // Panggil listener untuk pertama kali
            addSharedPaginationListeners();
        });

        // Tandai bahwa listener sudah ditambahkan
        window.sharedDashboardListenersAdded = true;
    }
</script>
@endpush