@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'));

            // สร้างสีอัตโนมัติตามจำนวนสินค้า
            const colors = labels.map(() => {
                return `hsl(${Math.floor(Math.random() * 360)}, 70%, 65%)`;
            });

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'จำนวนที่เบิก',
                        data: quantities,
                        backgroundColor: colors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'สินค้าที่ถูกเบิก (เรียงจากมากไปน้อย)'
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        });
    </script>
@endsection

@section('content')
    @include('layouts.sidebar')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12">

                <div class="col-md-12">
                    <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
                </div>

                <div class="col-lg-12">
                    <div class="blog single">
                        <div class="card">
                            <div class="card-body">
                                <h2 class="mb-4">Most Frequently Requested 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>

                                <hr class="my-8">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th style="width: 8%">ลำดับ (No.)</th>
                                                <th>ชื่อ (Name)</th>
                                                <th style="width: 15%">ความถี่การเบิก (ครั้ง)</th>
                                                <th style="width: 15%">จำนวนที่เบิกสุทธิ (ชิ้น)</th>
                                                <th style="width: 20%">อัตราเบิกเฉลี่ย (ชิ้น/เดือน)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                // คำนวณจำนวนเดือนจาก Filter เพื่อหาค่าเฉลี่ย
                                                $start = request('start_date')
                                                    ? \Carbon\Carbon::parse(request('start_date'))
                                                    : now()->startOfYear();
                                                $end = request('end_date')
                                                    ? \Carbon\Carbon::parse(request('end_date'))
                                                    : now();
                                                $monthsDiff = max(1, $start->diffInMonths($end) + 1);
                                            @endphp

                                            @forelse($topProducts as $index => $product)
                                                <tr>
                                                    <td class="text-center">{{ $index + 1 }}</td>
                                                    <td>{{ $product->product_name }}</td>
                                                    <td class="text-center">{{ $product->request_count ?? 0 }}</td>
                                                    <td class="text-center">{{ $product->total_quantity }}</td>
                                                    <td class="text-center">
                                                        {{ number_format($product->total_quantity / $monthsDiff, 2) }}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center">ไม่พบข้อมูลในช่วงเวลาที่เลือก
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('layouts.footer')
@endsection