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

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

    <div class="container-fluid py-4">
        {{-- Ringkasan pekerjaan Tim Halal --}}
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card halal-filter-card" data-status="Total" style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-sm text-uppercase font-weight-bold mb-0">Total Dokumen</p>
                                <h5 class="font-weight-bolder mb-0">{{ $totalDocs ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-secondary text-center rounded-circle">
                                <i class="fas fa-folder-open text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card halal-filter-card border border-warning" data-status="action_required"
                    style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-sm text-uppercase font-weight-bold mb-0">Perlu Direview</p>
                                <h5 class="font-weight-bolder text-warning mb-0">{{ $reviewQueueCount ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-warning text-center rounded-circle">
                                <i class="fas fa-search text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card halal-filter-card" data-status="Rejected" style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-sm text-uppercase font-weight-bold mb-0">Menunggu Supplier</p>
                                <h5 class="font-weight-bolder text-danger mb-0">{{ $rejectedCount ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-danger text-center rounded-circle">
                                <i class="fas fa-undo text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card halal-filter-card" data-status="Approved" style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-sm text-uppercase font-weight-bold mb-0">Disetujui</p>
                                <h5 class="font-weight-bolder text-success mb-0">{{ $approvedCount ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-success text-center rounded-circle">
                                <i class="fas fa-check-circle text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Grafik progres --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Status Verifikasi Dokumen</h6>
                        <p class="text-sm mb-0">Klik segmen atau legenda untuk memfilter antrean dokumen</p>
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-lg-5 col-md-7">
                                <div style="height: 300px;">
                                    <canvas id="halal-document-chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Antrean review --}}
        <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">
                        <div>
                            <h6 class="mb-0">Antrean Verifikasi Dokumen</h6>
                            <p class="text-sm mb-0">Dokumen revisi dan dokumen baru diprioritaskan untuk direview</p>
                        </div>
                        @if (($reviewQueueCount ?? 0) > 0)
                            <span class="badge bg-gradient-warning">{{ $reviewQueueCount }} perlu direview</span>
                        @endif
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div id="halal-document-table">
                            @include('pages.dashboard.timHalalDashboard.partials._document_table', [
                                'documents' => $documents,
                            ])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableContainer = document.getElementById('halal-document-table');
            const halalStatuses = ['Pending', 'Revisi', 'Rejected', 'Approved'];
            const halalStatusValues = @json(array_values($halalStatusSummary ?? []));

            function fetchDocuments(url) {
                tableContainer.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 => {
                        tableContainer.innerHTML = html;
                        tableContainer.closest('.card').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching halal documents:', error);
                        tableContainer.innerHTML =
                            '<p class="text-center text-danger py-4">Gagal memuat dokumen.</p>';
                    });
            }

            new Chart(document.getElementById('halal-document-chart'), {
                type: 'doughnut',
                data: {
                    labels: [
                        'Belum Direview',
                        'Sudah Direvisi',
                        'Menunggu Perbaikan Supplier',
                        'Disetujui'
                    ],
                    datasets: [{
                        data: halalStatusValues,
                        backgroundColor: ['#fb6340', '#11cdef', '#f5365c', '#2dce89'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    onClick: function(event, elements) {
                        if (!elements.length) return;
                        const status = halalStatuses[elements[0].index];
                        fetchDocuments(
                            `{{ route('dashboard.halal.filter') }}?filter_status_halal=${status}`
                        );
                    },
                    onHover: function(event, elements) {
                        event.native.target.style.cursor = elements.length ? 'pointer' : 'default';
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            onClick: function(event, legendItem) {
                                const status = halalStatuses[legendItem.index];
                                fetchDocuments(
                                    `{{ route('dashboard.halal.filter') }}?filter_status_halal=${status}`
                                );
                            }
                        }
                    }
                }
            });

            document.querySelectorAll('.halal-filter-card').forEach(card => {
                card.addEventListener('click', function() {
                    fetchDocuments(
                        `{{ route('dashboard.halal.filter') }}?filter_status_halal=${this.dataset.status}`
                    );
                });
            });

            document.addEventListener('click', function(event) {
                const paginationLink = event.target.closest('#halal-document-table .pagination a');
                if (paginationLink) {
                    event.preventDefault();
                    fetchDocuments(paginationLink.href);
                }
            });
        });
    </script>
@endpush