@extends('admin.layouts.main')
@section('content')

@php
$cards = [
        [
            'title' => 'Jumlah Produk',
            'value' => $jumlahProduk,
            'icon'  => 'fas fa-box',
            'color' => 'linear-gradient(135deg,#d4af37,#b8860b)'
        ],
        [
            'title' => 'Jumlah Pelanggan',
            'value' => $jumlahPelanggan,
            'icon'  => 'fas fa-users',
            'color' => 'linear-gradient(135deg,#c8a24a,#8b6914)'
        ],
        [
            'title' => 'Pesanan Masuk',
            'value' => $jumlahPesananMasuk,
            'icon'  => 'fas fa-shopping-bag',
            'color' => 'linear-gradient(135deg,#e5c76b,#b58a1b)'
        ]
    ];
@endphp

<div class="container-fluid py-4 px-4 dashboard-wrapper">
    <div class="row g-4 mb-4">
        @foreach ($cards as $card)
            <div class="col-lg-4">
                <div class="dashboard-card stat-card">
                    <div class="stat-icon" style="background: {{ $card['color'] }}">
                        <i class="{{ $card['icon'] }}"></i>
                    </div>
                    <div>
                        <p>{{ $card['title'] }}</p>
                        <h2>{{ $card['value'] }}</h2>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="dashboard-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Grafik Penjualan</h5>
                    <div class="d-flex gap-2">
                        <a href="{{ request()->fullUrlWithQuery(['bulan' => \Carbon\Carbon::parse($bulan)->subMonth()->format('Y-m')]) }}"
                           class="btn btn-sm btn-outline-secondary">←</a>
                        <form method="GET">
                            <input type="month" name="bulan" value="{{ $bulan }}"
                                   class="form-control form-control-sm"
                                   onchange="this.form.submit()">
                        </form>
                        <a href="{{ request()->fullUrlWithQuery(['bulan' => \Carbon\Carbon::parse($bulan)->addMonth()->format('Y-m')]) }}"
                           class="btn btn-sm btn-outline-secondary">→</a>
                    </div>
                </div>
                <div class="chart-wrapper">
                    <canvas id="grafikPenjualan"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="d-flex flex-column gap-4">
                <div class="dashboard-card total-sales-card">
                    <p>Total Penjualan</p>
                    <h2>Rp {{ number_format($totalPenjualan, 0, ',', '.') }}</h2>
                    <small>{{ now()->translatedFormat('d F Y') }}</small>
                </div>
                <div class="dashboard-card">
                    <h5>Transaksi Terbaru</h5>
                    @forelse($transaksiTerbaru as $trx)
                        <div class="d-flex justify-content-between border-bottom py-2">
                            <span>{{ $trx->created_at->format('d M') }}</span>
                            <strong>Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</strong>
                        </div>
                    @empty
                        <small class="text-muted">Belum ada transaksi</small>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4 mt-2">
        <div class="col-lg-12">
            <div class="dashboard-card">
                <h5>Grafik Penjualan Bulanan - {{ $tahun }}</h5>
                <form method="GET" class="mb-3">
                    <select name="tahun" class="form-select form-select-sm w-auto"
                            onchange="this.form.submit()">
                        @for($i = now()->year; $i >= now()->year - 5; $i--)
                            <option value="{{ $i }}" {{ $tahun == $i ? 'selected' : '' }}>
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                </form>
                <div class="chart-wrapper">
                    <canvas id="grafikBulanan"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4 mt-2">
        <div class="col-lg-6">
            <div class="dashboard-card">
                <h5>Status Pesanan</h5>
                <div class="small-chart">
                    <canvas id="chartStatus"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="dashboard-card">
                <h5>Metode Pembayaran (LUNAS)</h5>
                <div class="small-chart">
                    <canvas id="chartPembayaran"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .dashboard-wrapper{
        min-height:100vh;
        padding:18px;
        background:
            radial-gradient(circle at top right, rgba(200,154,75,.10), transparent 30%),
            radial-gradient(circle at bottom left, rgba(200,154,75,.08), transparent 35%),
            linear-gradient(135deg,#FDFBF7,#FCF8F2,#F8F2E8);
    }
    .dashboard-card{
        background:#FFFFFF;
        border:1px solid #E9DDC8;
        border-radius:20px;
        padding:18px;
        box-shadow:0 8px 18px rgba(0,0,0,.05);
        transition:.3s;
        height:100%;
    }
    .dashboard-card:hover{
        transform:translateY(-3px);
        border-color:#C89A4B;
        box-shadow:0 12px 24px rgba(200,154,75,.15);
    }
    .dashboard-card h5{
        color:#8B6B2E;
        font-size:18px;
        font-weight:700;
        margin-bottom:12px;
    }
    .dashboard-card p{
        color:#7A6C57;
        margin-bottom:4px;
        font-size:14px;
    }
    .dashboard-card small{
        color:#9A8B75;
        font-size:12px;
    }
    .stat-card{
        display:flex;
        align-items:center;
        gap:14px;
    }
    .stat-card h2{
        color:#4B3A25;
        font-size:28px;
        font-weight:700;
        margin:0;
    }
    .stat-icon{
        width:58px;
        height:58px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(135deg,#C89A4B,#D9B66A)!important;
        color:#fff;
        font-size:22px;
        box-shadow:0 8px 18px rgba(200,154,75,.22);
    }
    .chart-wrapper{
        height:260px;
    }
    .small-chart{
        position:relative;
        height:220px;
        max-width:220px;
        margin:auto;
    }
    .small-chart canvas{
        width:100%!important;
        height:100%!important;
    }
    .total-sales-card{
        background:linear-gradient(135deg,#C89A4B,#E4C87D);
        color:#fff;
        text-align:center;
        overflow:hidden;
    }
    .total-sales-card h2{
        font-size:32px;
        margin-bottom:6px;
    }
    .total-sales-card p,
    .total-sales-card small{
        color:#fff;
    }
    .form-control,
    .form-select{
        height:38px;
        font-size:14px;
        background:#fff!important;
        color:#4B3A25!important;
        border:1px solid #E4D6BE!important;
        border-radius:12px;
    }
    .form-control:focus,
    .form-select:focus{
        border-color:#C89A4B!important;
        box-shadow:0 0 0 .18rem rgba(200,154,75,.18);
    }
    .btn-outline-secondary{
        height:38px;
        color:#8B6B2E;
        border:1px solid #C89A4B;
        border-radius:10px;
        background:#fff;
    }
    .btn-outline-secondary:hover{
        background:#C89A4B;
        color:#fff;
    }
    .border-bottom{
        border-color:#F0E5D3!important;
    }
    ::-webkit-scrollbar{
        width:8px;
    }
    ::-webkit-scrollbar-thumb{
        background:#C89A4B;
        border-radius:20px;
    }
    ::-webkit-scrollbar-track{
        background:#F5EFE4;
    }
    /* ================= MOBILE ================= */
        @media (max-width: 768px){

        .dashboard-wrapper{
            padding:12px !important;
        }

        .dashboard-card{
            padding:14px;
            border-radius:14px;
        }

        .dashboard-card h5{
            font-size:15px;
            margin-bottom:10px;
        }

        .dashboard-card p{
            font-size:12px;
        }

        .dashboard-card small{
            font-size:11px;
        }

        /* Card statistik */
        .stat-card{
            gap:10px;
        }

        .stat-icon{
            width:46px;
            height:46px;
            border-radius:12px;
            font-size:18px;
        }

        .stat-card h2{
            font-size:22px;
        }

        /* Total penjualan */
        .total-sales-card h2{
            font-size:24px;
        }

        /* Grafik */
        .chart-wrapper{
            height:220px;
        }

        .small-chart{
            max-width:170px;
            height:170px;
        }

        /* Header grafik */
        .dashboard-card .d-flex.justify-content-between{
            flex-direction:column;
            align-items:flex-start !important;
            gap:10px;
        }

        .dashboard-card .d-flex.gap-2{
            width:100%;
            justify-content:space-between;
            flex-wrap:wrap;
        }

        /* Input bulan */
        .form-control,
        .form-select{
            height:34px;
            font-size:12px;
        }

        /* Tombol */
        .btn-outline-secondary{
            height:34px;
            padding:0 12px;
            font-size:12px;
        }

        /* Riwayat transaksi */
        .border-bottom{
            font-size:12px;
        }

        /* Bar chart */
        #grafikBulanan{
            max-height:220px;
        }

        /* Line chart */
        #grafikPenjualan{
            max-height:220px;
        }
    }
    @media (max-width:576px){

        .dashboard-wrapper{
            padding:10px !important;
        }

        .dashboard-card{
            padding:12px;
        }

        .stat-icon{
            width:42px;
            height:42px;
            font-size:16px;
        }

        .stat-card h2{
            font-size:20px;
        }

        .dashboard-card h5{
            font-size:14px;
        }

        .chart-wrapper{
            height:180px;
        }

        .small-chart{
            width:150px;
            height:150px;
        }

        .total-sales-card h2{
            font-size:20px;
        }

        .form-control,
        .form-select,
        .btn-outline-secondary{
            font-size:11px;
            height:32px;
        }
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // GRAFIK PENJUALAN HARIAN
        new Chart(document.getElementById('grafikPenjualan'), {
            type: 'line',
            data: {
                labels: {!! json_encode($pesananPerHari->pluck('tanggal')) !!},
                datasets: [{
                    label: 'Penjualan Selesai',
                    data: {!! json_encode($pesananPerHari->pluck('total')) !!},
                    borderColor: '#d4af37',
                    backgroundColor: 'rgba(212,175,55,.12)',
                    fill: true,
                    tension: 0.45,
                    pointBackgroundColor: '#f7d56d',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 8,
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                        labels: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {
                        backgroundColor: '#111111',
                        borderColor: '#d4af37',
                        borderWidth: 1,
                        titleColor: '#f5d77b',
                        bodyColor: '#ffffff',
                        displayColors: false,
                        callbacks: {
                            label: function(context){
                                return " Rp " + context.raw.toLocaleString('id-ID');
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#4B3A25',
                            font: {
                                size: 13,
                                weight: 'bold'
                            }
                        },
                        grid: {
                            color: 'rgba(75,58,37,.08)'
                        },
                        border: {
                            color: '#C89A4B'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#4B3A25',
                            font: {
                                size: 13,
                                weight: 'bold'
                            },
                            callback: function(value){
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        },
                        grid: {
                            color: 'rgba(75,58,37,.08)'
                        },
                        border: {
                            color: '#C89A4B'
                        }
                    }
                }
            }
        });
        // STATUS PESANAN
        new Chart(document.getElementById('chartStatus'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($statusPesanan->keys()) !!},
                datasets: [{
                    data: {!! json_encode($statusPesanan->values()) !!},

                    backgroundColor: [
                        '#C89A4B',
                        '#F59E0B',
                        '#3B82F6',
                        '#22C55E'
                    ],
                    borderWidth:0,
                    hoverOffset:18,
                    borderRadius:10
                }]
            },
            options:{
                responsive:true,
                maintainAspectRatio:false,
                cutout:'72%',
                animation:{
                    animateRotate:true,
                    duration:1200
                },
                plugins:{
                    centerText:{},
                    legend:{
                        position:'bottom',
                        labels:{
                            color:'#4B3A25',
                            usePointStyle:true,
                            pointStyle:'circle',
                            boxWidth:12,
                            padding:18,
                            font:{
                                size:13,
                                weight:'600'
                            }
                        }
                    },
                    tooltip:{
                        backgroundColor:'#fff',
                        titleColor:'#8B6B2E',
                        bodyColor:'#444',
                        borderColor:'#E9DDC8',
                        borderWidth:1,
                        padding:12
                    }
                }
            }

        });
        // METODE PEMBAYARAN
        new Chart(document.getElementById('chartPembayaran'), {
            type: 'doughnut',
            data: {
                labels: ['Transfer', 'COD'],
                datasets: [{
                    data: [
                        {{ $metodePembayaran['transfer'] ?? 0 }},
                        {{ $metodePembayaran['cod'] ?? 0 }}
                    ],
                    backgroundColor: [
                        '#C89A4B',
                        '#6B7280'
                    ],
                    borderWidth: 0,
                    hoverOffset: 18,
                    borderRadius: 10
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '72%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#4B3A25',
                            usePointStyle: true,
                            pointStyle: 'circle',
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        }
                    }
                }
            }

        });
        // GRAFIK PENJUALAN BULANAN
        const ctx = document.getElementById('grafikBulanan').getContext('2d');
        const gradient = ctx.createLinearGradient(0,0,0,350);
        gradient.addColorStop(0,'#f8e39a');
        gradient.addColorStop(.55,'#d4af37');
        gradient.addColorStop(1,'#8b6914');
        new Chart(ctx, {
            type:'bar',
            data:{
                labels:{!! json_encode($penjualanPerBulan->pluck('nama_bulan')) !!},
                datasets:[{
                    data:{!! json_encode($penjualanPerBulan->pluck('total')) !!},
                    backgroundColor:gradient,
                    borderRadius:15,
                    borderSkipped:false,
                    barThickness:40
                }]
            },
            options:{
                responsive:true,
                maintainAspectRatio:false,
                plugins:{
                    legend:{
                        display:false
                    },
                    tooltip:{
                        backgroundColor:'#111111',
                        borderColor:'#d4af37',
                        borderWidth:1,
                        titleColor:'#f5d77b',
                        bodyColor:'#ffffff',
                        padding:12,
                        displayColors:false,
                        callbacks:{
                            label:function(context){
                                return 'Rp ' + context.raw.toLocaleString('id-ID');
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#4B3A25',
                            font: {
                                size: 13,
                                weight: 'bold'
                            }
                        },
                        grid: {
                            display: false
                        },
                        border: {
                            color: '#C89A4B'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#4B3A25',
                            font: {
                                size: 13,
                                weight: 'bold'
                            },
                            callback: function(value){
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        },
                        grid: {
                            color: 'rgba(75,58,37,.08)'
                        },
                        border: {
                            color: '#C89A4B'
                        }
                    }
                }
            }
        });
    });
</script>

@endsection