@extends('layouts.master')

@section('title', 'Dashboard')

@section('css')
    <style>
        .chart-container {
            position: relative;
            height: 340px;
            width: 100%;
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="w-full space-y-6">
        <!-- Header & Date Filter Form -->
        <div class="bg-white p-5 rounded-lg shadow flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Sales Dashboard</h1>
                <p class="text-sm text-gray-500">Overview of Shopee & Sales Invoice performance</p>
            </div>

            <form action="{{ route('dashboard') }}" method="GET" class="flex flex-wrap items-center gap-3">
                <div>
                    <label class="block text-xs text-gray-600 font-semibold mb-1">Date From</label>
                    <input type="date" name="date_from" value="{{ $startDate }}" class="form-control date-picker">
                </div>
                <div>
                    <label class="block text-xs text-gray-600 font-semibold mb-1">Date To</label>
                    <input type="date" name="date_to" value="{{ $endDate }}" class="form-control date-picker">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-1.5 rounded text-sm transition">
                        Filter
                    </button>
                </div>
            </form>
        </div>

        <!-- 1 & 2. Total Sales KPI Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

            <!-- Date Range Sales -->
            <div class="bg-white p-5 rounded-lg shadow border-l-4 border-blue-500">
                <h2 class="text-xs uppercase font-bold text-gray-500 tracking-wider">Total Sales (Selected Range)</h2>
                <div class="text-3xl font-extrabold text-gray-800 my-2">
                    Rp {{ number_format($grandTotal, 0, ',', '.') }}
                </div>
                <div class="grid grid-cols-2 gap-2 pt-3 border-t text-sm">
                    <div>
                        <span class="text-gray-500 block text-xs">Sales Invoice</span>
                        <span class="font-bold text-gray-700">Rp {{ number_format($salesInvoiceTotal, 0, ',', '.') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 block text-xs">Shopee Invoice</span>
                        <span class="font-bold text-orange-600">Rp {{ number_format($shopeeInvoiceTotal, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

            <!-- Monthly Sales -->
            <div class="bg-white p-5 rounded-lg shadow border-l-4 border-emerald-500">
                <h2 class="text-xs uppercase font-bold text-gray-500 tracking-wider">Monthly Sales ({{ \Carbon\Carbon::parse($startDate)->format('F Y') }})</h2>
                <div class="text-3xl font-extrabold text-gray-800 my-2">
                    Rp {{ number_format($monthlyGrandTotal, 0, ',', '.') }}
                </div>
                <div class="grid grid-cols-2 gap-2 pt-3 border-t text-sm">
                    <div>
                        <span class="text-gray-500 block text-xs">Sales Invoice</span>
                        <span class="font-bold text-gray-700">Rp {{ number_format($monthlySalesInvoice, 0, ',', '.') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 block text-xs">Shopee Invoice</span>
                        <span class="font-bold text-orange-600">Rp {{ number_format($monthlyShopeeInvoice, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>
            <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-amber-500">
                <h2 class="text-xs uppercase font-bold text-gray-400 tracking-wider">Shopee Net Income (Escrow)</h2>
                <div class="text-2xl font-extrabold text-orange-600 my-2">
                    Rp {{ number_format($shopeeNetIncome, 0, ',', '.') }}
                </div>
                <div class="grid grid-cols-1 gap-2 pt-3 border-t border-gray-100 text-xs">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500">Monthly Net Income</span>
                        <span class="font-bold text-gray-800">Rp {{ number_format($monthlyShopeeNetIncome, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Charts Section: Nominal Comparison -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            <!-- 3. Top 5 Shopee by Nominal -->
            <div class="bg-white p-5 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
                    <span class="w-3 h-3 bg-orange-500 rounded-full"></span> Top 5 Shopee Items (By Nominal)
                </h3>
                <div class="h-64">
                    <canvas id="chartShopeeNominal"></canvas>
                </div>
            </div>

            <!-- 4. Top 5 Sales Invoice by Nominal -->
            <div class="bg-white p-5 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
                    <span class="w-3 h-3 bg-blue-500 rounded-full"></span> Top 5 Sales Invoice Items (By Nominal)
                </h3>
                <div class="h-64">
                    <canvas id="chartSalesNominal"></canvas>
                </div>
            </div>

        </div>

        <!-- Charts Section: Quantity Comparison -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            <!-- 5. Top 5 Shopee by Qty -->
            <div class="bg-white p-5 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
                    <span class="w-3 h-3 bg-orange-500 rounded-full"></span> Top 5 Shopee Items (By Quantity)
                </h3>
                <div class="h-64">
                    <canvas id="chartShopeeQty"></canvas>
                </div>
            </div>

            <!-- 6. Top 5 Sales Invoice by Qty -->
            <div class="bg-white p-5 rounded-lg shadow">
                <h3 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
                    <span class="w-3 h-3 bg-blue-500 rounded-full"></span> Top 5 Sales Invoice Items (By Quantity)
                </h3>
                <div class="h-64">
                    <canvas id="chartSalesQty"></canvas>
                </div>
            </div>

        </div>

    </div>
</div>
@endsection

@section('scripts')
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Chart Rendering Script -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            // Helper configuration function for horizontal bar charts
            function createChart(canvasId, labels, data, labelName, color, isCurrency = false) {
                const ctx = document.getElementById(canvasId).getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: labelName,
                            data: data,
                            backgroundColor: color,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    callback: function(value) {
                                        return isCurrency ? 'Rp ' + value.toLocaleString() : value;
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 3. Shopee Nominal Chart
            createChart(
                'chartShopeeNominal',
                {!! json_encode($topShopeeNominal->pluck('item_name')) !!},
                {!! json_encode($topShopeeNominal->pluck('total_nominal')) !!},
                'Nominal',
                'rgba(249, 115, 22, 0.85)',
                true
            );

            // 4. Sales Invoice Nominal Chart
            createChart(
                'chartSalesNominal',
                {!! json_encode($topSalesNominal->map(fn($i) => $i->item_name??$i->item_id)) !!},
                {!! json_encode($topSalesNominal->pluck('total_nominal')) !!},
                'Nominal',
                'rgba(59, 130, 246, 0.85)',
                true
            );

            // 5. Shopee Qty Chart
            createChart(
                'chartShopeeQty',
                {!! json_encode($topShopeeQty->pluck('item_name')) !!},
                {!! json_encode($topShopeeQty->pluck('total_qty')) !!},
                'Qty',
                'rgba(249, 115, 22, 0.85)',
                false
            );

            // 6. Sales Invoice Qty Chart
            createChart(
                'chartSalesQty',
                {!! json_encode($topSalesQty->map(fn($i) => $i->item_name??$i->item_id)) !!},
                {!! json_encode($topSalesQty->pluck('total_qty')) !!},
                'Qty',
                'rgba(59, 130, 246, 0.85)',
                false
            );
        });
    </script>
@endsection