@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,
    ])

    <div class="container-fluid py-4">
        <div class="row">
            {{-- Card untuk Total Materials --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                {{-- Gunakan class "filter-card" dan data-status "Total" --}}
                <div class="card filter-card" data-status="Total" style="cursor:pointer;">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                {{-- Gunakan variabel baru dari controller --}}
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Material</p>
                                <h5 class="font-weight-bolder">{{ $totalMaterials ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div
                                    class="icon icon-shape bg-gradient-secondary shadow-secondary text-center rounded-circle">
                                    <i class="ni ni-collection text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Card untuk Completed --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card filter-card" id="completed-card" data-status="supplier_assigned"
                    style="cursor:pointer;">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Supplier Sudah Ditentukan</p>
                                <h5 class="font-weight-bolder">{{ $materialCompletedCount ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-check-bold text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Card untuk Pending --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card filter-card" id="pending-card" data-status="waiting_supplier"
                    style="cursor:pointer;">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Menunggu Penentuan Supplier</p>
                                <h5 class="font-weight-bolder">{{ $materialPendingCount ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="ni ni-time-alarm text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Ringkasan visual --}}
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Progres Material</h6>
                        <p class="text-sm mb-0">Posisi material dalam proses kelengkapan dokumen</p>
                    </div>
                    <div class="card-body">
                        <div style="height: 300px;">
                            <canvas id="material-status-chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Distribusi Rencana Line</h6>
                        <p class="text-sm mb-0">Jumlah material pada setiap line produksi</p>
                    </div>
                    <div class="card-body">
                        <div style="height: 300px;">
                            <canvas id="material-line-chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Data Material</h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div id="ppic-table-container">
                            {{-- table dipisah ke partial --}}
                            @include('pages.dashboard.ppicDashboard.partials._ppic_table', [
                                'materials' => $materials,
                            ])
                        </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('ppic-table-container');
            const statusSummary = @json(array_values($statusSummary ?? []));
            const lineLabels = @json(($lineDistribution ?? collect())->keys()->values());
            const lineValues = @json(($lineDistribution ?? collect())->values());
            const materialStatuses = [
                'waiting_supplier',
                'waiting_document',
                'under_review',
                'revision',
                'approved'
            ];

            new Chart(document.getElementById('material-status-chart'), {
                type: 'doughnut',
                data: {
                    labels: [
                        'Menunggu Supplier',
                        'Menunggu Dokumen',
                        'Sedang Diperiksa',
                        'Perlu Revisi',
                        'Disetujui'
                    ],
                    datasets: [{
                        data: statusSummary,
                        backgroundColor: ['#8392ab', '#fb6340', '#11cdef', '#f5365c', '#2dce89'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    onClick: function(event, elements) {
                        if (!elements.length) {
                            return;
                        }

                        const status = materialStatuses[elements[0].index];
                        const url = `{{ route('dashboard.ppic.filter') }}?status=${status}`;
                        fetchData(url);

                        tableContainer.closest('.card').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    },
                    onHover: function(event, elements) {
                        event.native.target.style.cursor = elements.length ? 'pointer' : 'default';
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            onClick: function(event, legendItem, legend) {
                                const status = materialStatuses[legendItem.index];
                                const url = `{{ route('dashboard.ppic.filter') }}?status=${status}`;
                                fetchData(url);

                                tableContainer.closest('.card').scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'start'
                                });
                            }
                        }
                    }
                }
            });

            new Chart(document.getElementById('material-line-chart'), {
                type: 'bar',
                data: {
                    labels: lineLabels,
                    datasets: [{
                        label: 'Jumlah Material',
                        data: lineValues,
                        backgroundColor: '#5e72e4',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            function fetchData(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;
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                        tableContainer.innerHTML = '<p class="text-center text-danger">Gagal memuat data.</p>';
                    });
            }

            // 1. Event listener untuk filter card
            document.querySelectorAll('.filter-card').forEach(card => {
                card.addEventListener('click', function() {
                    const status = this.dataset.status;
                    const url = `{{ route('dashboard.ppic.filter') }}?status=${status}`;
                    fetchData(url);
                });
            });

            // 2. Event listener untuk pagination (menggunakan event delegation)
            document.addEventListener('click', function(e) {
                // Cek jika yang diklik adalah link pagination di dalam container tabel
                if (e.target.closest('#ppic-table-container .pagination a')) {
                    e.preventDefault(); // Mencegah browser pindah halaman
                    const link = e.target.closest('a');
                    fetchData(link.href);
                }
            });
        });
    </script>
@endpush