@extends('layouts.master')
@section('title', 'Products Dashboard')

@section('style')
    <style>
        .chart-container {
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('topProductsChart').getContext('2d');

            const labels = @json($topProducts->pluck('product_name'));
            const quantities = @json($topProducts->pluck('total_quantity'));

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'จำนวนที่เบิก',
                        data: quantities,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(153, 102, 255, 0.7)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Top 5 สินค้าที่ถูกเบิกมากที่สุด'
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }
                }
            });
        });
    </script>
@endsection

@section('content')
    @include('layouts.header')
    @include('layouts.title')

    <section>
        <div class="container py-4">
            <h2 class="mb-4">Top 5 Most Requisitioned Souvenirs</h2>

            <form method="GET" action="{{ route('productdashboard') }}" class="row g-3 mb-4">
                <div class="col-md-3">
                    <label for="start_date" class="form-label">วันที่เริ่มต้น</label>
                    <input type="date" id="start_date" name="start_date" value="{{ request('start_date') }}"
                        class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="end_date" class="form-label">วันที่สิ้นสุด</label>
                    <input type="date" id="end_date" name="end_date" value="{{ request('end_date') }}"
                        class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="product_name" class="form-label">ชื่อของที่ระลึก</label>
                    <input type="text" id="product_name" name="product_name" value="{{ request('product_name') }}"
                        class="form-control" placeholder="ค้นหาชื่อสินค้าบางส่วน">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">ค้นหา</button>
                </div>
            </form>

            <div class="chart-container">
                <canvas id="topProductsChart"></canvas>
            </div>
        </div>
    </section>

    @include('layouts.footer')
@endsection