@extends('user.layout.main')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-3 text-gray-800 font-weight-bold">Dashboard Monitoring Jumlah Stok PeGas</h1>

    <div class="row">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-primary shadow-sm h-100 py-1">
                <div class="card-body py-2">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-0">Total Jual</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">{{ number_format($totalPenjualan) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-lg text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-success shadow-sm h-100 py-1">
                <div class="card-body py-2">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-0">Saran Besok</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800" style="{{ !$estimasiBesok ? 'font-size: 0.85rem;' : '' }}">
                                @if ($estimasiBesok)
                                    {{ round($estimasiBesok->batas_bawah) }} - {{ round($estimasiBesok->batas_atas) }} Tabung
                                @else
                                    Prediksi belum dilakukan
                                @endif
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-lightbulb fa-lg text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-info shadow-sm h-100 py-1">
                <div class="card-body py-2">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-0">Riwayat</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">{{ $jumlahRiwayat }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-invoice fa-lg text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-warning shadow-sm h-100 py-1">
                <div class="card-body py-2">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-0">Bantuan</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">{{ $jumlahHelpdesk }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-headset fa-lg text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow-sm mb-4">
                <div class="card-header py-2 bg-white">
                    <h6 class="m-0 font-weight-bold text-primary small">Tren Penjualan (7 Hari)</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-center" style="height: 200px; position: relative;">
                        @if($chartHistori->isEmpty())
                            <div class="text-muted small font-italic text-center">Tidak ada data untuk menampilkan tren harian</div>
                        @else
                            <canvas id="chartHistori"></canvas>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow-sm mb-4">
                <div class="card-header py-2 bg-white">
                    <h6 class="m-0 font-weight-bold text-primary small">Intensitas Hari Jual</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-center" style="height: 160px; position: relative;">
                        @if(array_sum($distribusi) == 0)
                            <div class="text-muted small font-italic text-center">Tidak ada data distribusi intensitas penjualan</div>
                        @else
                            <canvas id="chartDistribusi"></canvas>
                        @endif
                    </div>
                    <div class="mt-3 text-center small">
                        <div class="mb-1 text-muted font-italic">Berdasarkan Jumlah Tabung Terjual:</div>
                        <span class="mr-2"><i class="fas fa-circle text-danger"></i> < 10</span>
                        <span class="mr-2"><i class="fas fa-circle text-warning"></i> 10-15</span>
                        <span class="mr-2"><i class="fas fa-circle text-success"></i> > 15</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header py-2 bg-white">
            <h6 class="m-0 font-weight-bold text-success small">Estimasi 15 Hari Mendatang</h6>
        </div>
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-center" style="height: 180px; position: relative;">
                @if($chartPrediksi->isEmpty())
                    <div class="text-muted small font-italic text-center">Tidak ada data untuk ditampilkan (Silahkan lakukan prediksi terlebih dahulu)</div>
                @else
                    <canvas id="chartPrediksi"></canvas>
                @endif
            </div>
        </div>
    </div>

    <div class="card shadow-sm mb-4 border-left-info">
        <div class="card-body py-3">
            <h6 class="font-weight-bold text-info mb-1">
                <i class="fas fa-info-circle mr-1"></i> Catatan Cara Kerja Sistem
            </h6>
            <p class="text-muted small mb-2">
                Sistem ini menggunakan machine learning untuk menganalisis histori penjualan pangkalan. 
                Data yang ditampilkan merupakan hasil perhitungan statistik berdasarkan pola data historis.
            </p>
            <div class="alert alert-warning py-1 px-3 mb-0" style="font-size: 0.75rem;">
                <strong>Disclaimer:</strong> Hasil prediksi adalah alat bantu, bukan kepastian mutlak. 
                Keputusan stok tetap berada pada kebijakan pangkalan.
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    Chart.defaults.font.size = 10;

    @if(!$chartHistori->isEmpty())
    new Chart(document.getElementById('chartHistori'), {
        type: 'line',
        data: {
            labels: {!! json_encode($chartHistori->pluck('tanggal')->map(fn($t) => date('d/m', strtotime($t)))) !!},
            datasets: [{
                label: 'Data Penjualan Nyata',
                data: {!! json_encode($chartHistori->pluck('jumlah')) !!},
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                fill: true,
                tension: 0.3
            }]
        },
        options: { 
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0,
                        stepSize: 1,
                        callback: function(value) {
                            if (Math.floor(value) === value) {
                                return value;
                            }
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += Math.round(context.parsed.y) + ' Tabung';
                            }
                            return label;
                        }
                    }
                }
            }
        }
    });
    @endif

    @if(!$chartPrediksi->isEmpty())
    new Chart(document.getElementById('chartPrediksi'), {
        type: 'line',
        data: {
            labels: {!! json_encode($chartPrediksi->pluck('tanggal')->map(fn($t) => date('d/m', strtotime($t)))) !!},
            datasets: [
                {
                    label: 'Estimasi',
                    data: {!! json_encode($chartPrediksi->pluck('estimasi')) !!},
                    borderColor: '#1cc88a',
                    backgroundColor: 'rgba(28, 200, 138, 0.08)',
                    fill: true, 
                    tension: 0.4, 
                    pointRadius: 3
                },
                {
                    label: 'Batas Atas',
                    data: {!! json_encode($chartPrediksi->pluck('batas_atas')) !!},
                    borderColor: '#36b9cc', 
                    borderDash: [5, 5], 
                    fill: false, 
                    tension: 0.4, 
                    pointRadius: 2
                },
                {
                    label: 'Batas Bawah',
                    data: {!! json_encode($chartPrediksi->pluck('batas_bawah')) !!},
                    borderColor: '#e74a3b', 
                    borderDash: [5, 5], 
                    fill: false, 
                    tension: 0.4, 
                    pointRadius: 2
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            plugins: { 
                legend: { display: true },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += Math.round(context.parsed.y) + ' Tabung';
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0,
                        stepSize: 1,
                        callback: function(value) {
                            if (Math.floor(value) === value) {
                                return value;
                            }
                        }
                    }
                }
            }
        }
    });
    @endif

    @if(array_sum($distribusi) > 0)
    new Chart(document.getElementById('chartDistribusi'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($distribusi)) !!},
            datasets: [{
                data: {!! json_encode(array_values($distribusi)) !!},
                backgroundColor: ['#e74a3b', '#f6c23e', '#1cc88a']
            }]
        },
        options: {
            maintainAspectRatio: false,
            cutout: '75%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: (ctx) => ` Rentang ${ctx.label}: ${Math.round(ctx.raw)} Hari`
                    }
                }
            }
        }
    });
    @endif
</script>
@endpush
@endsection