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

@section('style')
    <!-- Import Select2 CSS (ถ้ายังไม่ได้ include ใน layouts.master) -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .chart-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
@endsection

@section('script')
    <!-- โหลด Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- โหลด Select2 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        // เริ่มเมื่อ DOM โหลดเสร็จ
        document.addEventListener('DOMContentLoaded', function() {

            // แสดงกราฟ Stock Levels ด้วย Chart.js
            const ctx = document.getElementById('stockChart').getContext('2d');
            const labels = @json($stocks->pluck('product_name'));
            const quantities = @json($stocks->pluck('product_quantity'));

            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'จำนวนคงเหลือ',
                        data: quantities,
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(153, 102, 255, 0.7)',
                            'rgba(255, 159, 64, 0.7)'
                        ],
                        borderColor: '#fff',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    // scales: {
                    //     y: {
                    //         beginAtZero: true
                    //     }
                    // },
                    plugins: {
                        title: {
                            display: true,
                            text: 'ระดับสต๊อกของของที่ระลึก'
                        }
                    }
                }
            });

            // ใช้งาน Select2 บน select ที่มี id="product_id"
            $('#product_id').select2({
                placeholder: "เลือกรายการของที่ระลึก",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection

@section('content')

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

    <section>
        <div class="container py-4">
            <h2 class="mb-4">Stock Levels Dashboard</h2>

            <!-- ฟอร์มค้นหา -->
            <form method="GET" action="{{ route('stocklevelsdashboard') }}" 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" class="form-control"
                        value="{{ request('start_date') }}">
                </div>

                <div class="col-md-3">
                    <label for="end_date" class="form-label">สิ้นสุดวันที่</label>
                    <input type="date" id="end_date" name="end_date" class="form-control"
                        value="{{ request('end_date') }}">
                </div>

                <div class="col-md-4">
                    <label for="product_id" class="form-label">เลือกรายการของที่ระลึก</label>
                    <select name="product_id" id="product_id" class="form-select">
                        <option value="">-- แสดงทั้งหมด --</option>
                        @foreach ($allProducts as $p)
                            <option value="{{ $p->product_id }}"
                                {{ request('product_id') == $p->product_id ? 'selected' : '' }}>
                                {{ $p->product_name }}
                            </option>
                        @endforeach
                    </select>
                </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 mb-5">
                <canvas id="stockChart"></canvas>
            </div>

            <!-- ตารางแสดงข้อมูล -->
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>ชื่อของที่ระลึก</th>
                            <th>จำนวนคงเหลือ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($stocks as $index => $product)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $product->product_name }}</td>
                                <td>{{ $product->product_quantity }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center">ไม่พบข้อมูล</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>
    </section>

    @include('layouts.footer')
@endsection