@extends('layouts.app')
@section('title_header')
    Dashboard
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/']]" />
@endsection

@push('style')
@endpush

@section('content')
    <section class="space-y-3">
        <div class="grid lg:grid-cols-3 grid-cols-1 gap-3">
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 bg-green-400 rounded-2xl flex items-center justify-center">
                        <span class="text-2xl">📺</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Total Produk</h3>
                        <span class="text-md font-medium text-gray-500">{{ $totalProducts }} Items</span>
                    </div>
                </div>
            </div>
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 bg-fuchsia-300 rounded-2xl flex items-center justify-center">
                        <span class="text-3xl">🛠️</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Sedang Di Kerjakan</h3>
                        <span class="text-md font-medium text-gray-500">{{ $totalOnProgress }} Items</span>
                    </div>
                </div>
            </div>
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 border border-slate-200 rounded-2xl flex items-center justify-center">
                        <span class="text-2xl">✅</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Selesai Di Kerjakan</h3>
                        <span class="text-md font-medium text-gray-500">{{ $totalSuccess }} Items</span>
                    </div>
                </div>
            </div>
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 bg-yellow-200 rounded-2xl flex items-center justify-center">
                        <span class="text-3xl">💰</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Sudah di bayar</h3>
                        <span class="text-md font-medium text-gray-500">RM {{ $totalPayed }}</span>
                    </div>
                </div>
            </div>
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 bg-red-200 rounded-2xl flex items-center justify-center">
                        <span class="text-3xl">💲</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Belum di bayar</h3>
                        <span class="text-md font-medium text-gray-500">RM {{ $totalUnPayed }}</span>
                    </div>
                </div>
            </div>
            <div class="card card-border bg-white h-24">
                <div class="card-body flex flex-row items-center">
                    <div class="w-12 h-12 bg-gray-200 rounded-2xl flex items-center justify-center">
                        <span class="text-2xl">👥</span>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">Total Pelanggan</h3>
                        <span class="text-md font-medium text-gray-500">{{ $totalProducts }} Orang</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-3 grid-rows-1 gap-3">
            <div class="col-span-2 card card-border bg-white">
                <div class="card-body">
                    <div class="flex items-center justify-between">
                        <div class="dropdown dropdown-start">
                            <div tabindex="0" role="button" class="btn m-1 bg-white"> <i data-lucide="funnel"
                                    class="w-4 h-4"></i> Filter</div>
                            <ul tabindex="0" class="dropdown-content menu bg-white rounded-box z-1 w-52 p-2 shadow-sm">
                                <li><a href="#" data-filter="yearly">Yearly</a></li>
                                <li><a href="#" data-filter="monthly">Monthly</a></li>
                                <li><a href="#" data-filter="daily">Dayly</a></li>
                            </ul>
                        </div>
                    </div>
                    <canvas id="myChart" width="400" height="200"></canvas>
                </div>
            </div>
            <div class="col-start-3 card card-border bg-white">
                <div class="card-body flex items-center justify-center flex-col">
                    <h1 class="card-title">Status Pengerjaan</h1>
                    <canvas id="statusPieChart" width="100" height="100" class="mt-5"></canvas>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let myChart = null;
        let statusPieChart = null;
        document.addEventListener('DOMContentLoaded', function() {
            let myChart = null;
            let statusPieChart = null;

            const ctx = document.getElementById('myChart').getContext('2d');
            const pieCtx = document.getElementById('statusPieChart').getContext('2d');

            const chartConfigs = {
                yearly: {
                    labels: {!! json_encode($yearLabels) !!},
                    received: {!! json_encode($yearReceivedData) !!}, // Data TV diterima per tahun
                    ready: {!! json_encode($yearReadyData) !!}, // Data TV siap per tahun
                    paid: {!! json_encode($yearPaidData) !!} // Data TV dibayar per tahun
                },
                monthly: {
                    labels: {!! json_encode($monthLabels) !!},
                    received: {!! json_encode($monthReceivedData) !!}, // Data TV diterima per bulan
                    ready: {!! json_encode($monthReadyData) !!}, // Data TV siap per bulan
                    paid: {!! json_encode($monthPaidData) !!} // Data TV dibayar per bulan
                },
                daily: {
                    labels: {!! json_encode($dailyLabels) !!},
                    received: {!! json_encode($dailyReceivedData) !!}, // Data TV diterima per hari
                    ready: {!! json_encode($dailyReadyData) !!}, // Data TV siap per hari
                    paid: {!! json_encode($dailyPaidData) !!} // Data TV dibayar per hari
                }
            };

            function createChart(config) {
                if (myChart) myChart.destroy();
                myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: config.labels,
                        datasets: [{
                                label: 'TV Diterima',
                                data: config.received,
                                backgroundColor: 'rgba(34, 197, 94, 0.6)', // Green
                                borderColor: 'rgba(34, 197, 94, 1)',
                                borderWidth: 1
                            },
                            {
                                label: 'TV Status Siap',
                                data: config.ready,
                                backgroundColor: 'rgba(251, 191, 36, 0.6)', // Yellow
                                borderColor: 'rgba(251, 191, 36, 1)',
                                borderWidth: 1
                            },
                            {
                                label: 'TV Sudah Dibayar',
                                data: config.paid,
                                backgroundColor: 'rgba(54, 162, 235, 0.6)', // Blue
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        }
                    }
                });
            }

            // Buat Pie Chart Status (tetap sama)
            function createStatusPieChart() {
                if (statusPieChart) statusPieChart.destroy();
                statusPieChart = new Chart(pieCtx, {
                    type: 'pie',
                    data: {
                        labels: ['Selesai', 'Sedang Dikerjakan', 'Belum Dikerjakan'],
                        datasets: [{
                            label: 'Status Perbaikan',
                            data: [{{ $totalSuccess }}, {{ $totalOnProgress }},
                                {{ $totalProducts - $totalSuccess - $totalOnProgress }}
                            ],
                            backgroundColor: [
                                'rgba(34, 197, 94, 0.6)', // green
                                'rgba(192, 38, 211, 0.6)', // fuchsia
                                'rgba(251, 191, 36, 0.6)' // yellow
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            }
                        }
                    }
                });
            }

            // Init charts
            createChart(chartConfigs.monthly);
            createStatusPieChart();

            document.querySelectorAll('[data-filter]').forEach(el => {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    const filter = this.dataset.filter;
                    createChart(chartConfigs[filter]);
                });
            });
        });
    </script>
@endpush