@extends('layouts.master')
@section('title', 'Stock Levels Dashboard (ปรับปรุง)')

@section('style')
    <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;
        }

        .summary-card {
            border-radius: 18px;
            padding: 22px;
            color: #fff;
            position: relative;
            overflow: hidden;
            transition: all 0.35s ease;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        /* Hover effect ลอย + glow */
        .summary-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        }

        /* Gradient */
        .bg-out-of-stock {
            background: linear-gradient(135deg, #ff6b6b, #ff3b3b);
        }

        .bg-low-stock {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
        }

        .bg-normal-stock {
            background: linear-gradient(135deg, #34d399, #10b981);
        }

        /* Glow effect */
        .summary-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        /* Title */
        .summary-title {
            font-size: 20px;
            opacity: 0.85;
            letter-spacing: 0.5px;
        }

        /* Value */
        .summary-value {
            font-size: 32px;
            font-weight: 700;
            margin-top: 5px;
        }

        /* Sub text */
        .summary-sub {
            font-size: 16px;
            opacity: 0.8;
        }
    </style>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('stockChart').getContext('2d');
            // Keeping the Pie Chart as requested ("ยังคง Pin Chart ไว้")
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: @json($stocks->pluck('product_name')),
                    datasets: [{
                        label: 'จำนวนคงเหลือ',
                        data: @json($stocks->pluck('product_current_stock')),
                        backgroundColor: [
                            '#36A2EB', '#FF6384', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
                        ]
                    }]
                },
                options: {
                    responsive: true
                }
            });

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

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

    <section class="wrapper bg-light">
        <div class="container py-10">
            <div class="row">
                <div class="col-md-12 mb-5">
                    <h5 class="display-1" style="font-size: 30px">@yield('title')</h5>
                </div>

                <div class="col-lg-12">
                    <div class="card mb-5">
                        <div class="card-body">
                            <form method="GET" action="{{ route('stocklevelsdashboard') }}" class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">เริ่มวันที่</label>
                                    <input type="date" name="start_date" class="form-control"
                                        value="{{ request('start_date') }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">สิ้นสุดวันที่</label>
                                    <input type="date" name="end_date" class="form-control"
                                        value="{{ request('end_date') }}">
                                </div>
                                <div class="col-md-4">
                                    <label 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>
                    </div>

                    <div class="row mb-4">
                        @php
                            $outOfStock = $stocks->where('product_current_stock', 0)->count();
                            $lowStock = $stocks
                                ->where('product_current_stock', '>', 0)
                                ->where('product_current_stock', '<', 10)
                                ->count();
                            $normalStock = $stocks->where('product_current_stock', '>=', 10)->count();
                        @endphp

                        <div class="col-md-4">
                            <div class="summary-card bg-out-of-stock">
                                <div class="summary-title">หมดสต๊อก</div>
                                <div class="summary-value">{{ $outOfStock }}</div>
                                <small>รายการ</small>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="summary-card bg-low-stock">
                                <div class="summary-title">เหลือน้อย</div>
                                <div class="summary-value">{{ $lowStock }}</div>
                                <small>รายการ</small>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="summary-card bg-normal-stock">
                                <div class="summary-title">ปกติ</div>
                                <div class="summary-value">{{ $normalStock }}</div>
                                <small>รายการ</small>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-5">
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="stockChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ลำดับ (No.)</th>
                                            <th>ชื่อ (Name)</th>
                                            <th>จำนวนคงเหลือ (Balance)</th>
                                            <th>ค่าต่ำสุด (Min)</th>
                                            <th>ค่าสูงสุด (Max)</th>
                                            <th>หน่วยนับ (Unit)</th>
                                            <th>ความถี่การเบิก (ครั้ง/เดือน)</th>
                                            <th>อัตราเบิกเฉลี่ย (ชิ้น/เดือน)</th>
                                            <th>สถานะ (Status)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($stocks as $index => $product)
                                            @php
                                                $balance = $product->product_current_stock ?? 0;
                                                // Status Logic according to image
                                                if ($balance == 0) {
                                                    $statusLabel = 'Out of Stock';
                                                    $statusClass = 'bg-danger';
                                                } elseif ($balance < 10) {
                                                    $statusLabel = 'เหลือน้อย';
                                                    $statusClass = 'bg-warning text-dark';
                                                } else {
                                                    $statusLabel = 'ปกติ';
                                                    $statusClass = 'bg-success';
                                                }
                                            @endphp
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $product->product_name }}</td>
                                                <td class="fw-bold">{{ $balance }}</td>
                                                <td>{{ $product->product_min_stock_level ?? '-' }}</td>
                                                <td>{{ $product->product_max_stock_level ?? '-' }}</td>
                                                <td>{{ $product->name ?? 'ชิ้น' }}</td>
                                                <td>{{ $product->withdraw_frequency ?? 0 }}</td>
                                                <td>{{ $product->avg_withdraw_rate ?? 0 }}</td>
                                                <td>
                                                    <span class="badge {{ $statusClass }}">{{ $statusLabel }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center">ไม่พบข้อมูล</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('layouts.footer')
@endsection