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

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

    <div class="container-fluid py-4">
        <div class="card bg-gradient-primary mb-4">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-white">
                        <h5 class="text-white mb-1">Selamat datang, {{ $supplierName ?? 'Supplier' }}</h5>
                        <p class="text-white opacity-8 mb-0">
                            Lengkapi dokumen material dan segera tindak lanjuti dokumen yang memerlukan revisi.
                        </p>
                    </div>
                    <a href="{{ URL::to('inpdoc') }}" class="btn btn-white mb-0">
                        <i class="fas fa-folder-open me-1"></i> Buka Semua Tugas
                    </a>
                </div>
            </div>
        </div>

        {{-- Ringkasan tugas --}}
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card supplier-filter-card" data-status="All" 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 Tugas</p>
                                <h5 class="font-weight-bolder mb-0">{{ $totalTasks ?? 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 supplier-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 Dikerjakan</p>
                                <h5 class="font-weight-bolder text-warning mb-0">{{ $actionRequiredCount ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-warning text-center rounded-circle">
                                <i class="fas fa-exclamation-circle text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card supplier-filter-card" data-status="under_review" 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 Review</p>
                                <h5 class="font-weight-bolder text-info mb-0">{{ $underReviewCount ?? 0 }}</h5>
                            </div>
                            <div class="icon icon-shape bg-gradient-info text-center rounded-circle">
                                <i class="fas fa-clock text-lg opacity-10"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card supplier-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 status tugas --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Progres Dokumen Material</h6>
                        <p class="text-sm mb-0">Klik segmen atau legenda untuk memfilter tabel tugas</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="supplier-task-chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabel tugas --}}
        <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">Tugas Dokumen Material</h6>
                            <p class="text-sm mb-0">Kerjakan unggahan baru, lanjutkan draft, atau perbaiki revisi</p>
                        </div>
                        @if (($revisionCount ?? 0) > 0)
                            <span class="badge bg-gradient-danger">{{ $revisionCount }} perlu revisi</span>
                        @endif
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div id="supplier-task-table" class="p-4">
                            @include('pages.dashboard.supplierDashboard.partials._document_table', [
                                'tasks' => $tasks,
                            ])
                        </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('supplier-task-table');
            const taskStatuses = ['not_started', 'draft', 'under_review', 'revision', 'approved'];
            const taskValues = @json(array_values($taskStatusSummary ?? []));

            function fetchTasks(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 supplier tasks:', error);
                        tableContainer.innerHTML =
                            '<p class="text-center text-danger py-4">Gagal memuat tugas dokumen.</p>';
                    });
            }

            new Chart(document.getElementById('supplier-task-chart'), {
                type: 'doughnut',
                data: {
                    labels: [
                        'Belum Dikerjakan',
                        'Draft',
                        'Menunggu Review',
                        'Perlu Revisi',
                        'Disetujui'
                    ],
                    datasets: [{
                        data: taskValues,
                        backgroundColor: ['#8392ab', '#344767', '#11cdef', '#f5365c', '#2dce89'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    onClick: function(event, elements) {
                        if (!elements.length) return;
                        const status = taskStatuses[elements[0].index];
                        fetchTasks(`{{ route('dashboard.supplier.filter') }}?filter_status=${status}`);
                    },
                    onHover: function(event, elements) {
                        event.native.target.style.cursor = elements.length ? 'pointer' : 'default';
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            onClick: function(event, legendItem) {
                                const status = taskStatuses[legendItem.index];
                                fetchTasks(
                                    `{{ route('dashboard.supplier.filter') }}?filter_status=${status}`
                                );
                            }
                        }
                    }
                }
            });

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

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