@extends('layouts.master')

@section('title', 'Food Court Dashboard')

@section('content')

@component('components.breadcrumb')
    @slot('li_1') Dashboard @endslot
    @slot('title') Food Court Dashboard @endslot
@endcomponent

<!-- FILTERS -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">

                <form method="GET" action="{{ url()->current() }}">

                    <div class="row">

                        <!-- Vendor Filter -->
                        <div class="col-md-4">
                            <label class="form-label">Outlet (Vendor)</label>
                            <select name="vendor" class="form-select">
                                <option value="">All Outlets</option>
                                @foreach($vendors as $v)
                                    <option value="{{ $v->id }}" 
                                        {{ request('vendor') == $v->id ? 'selected' : '' }}>
                                        {{ $v->outlet_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Start Date -->
                        <div class="col-md-3">
                            <label class="form-label">Start Date</label>
                            <input type="date" 
                                   name="start" 
                                   class="form-control"
                                   value="{{ $dateRange['start']->format('Y-m-d') }}">
                        </div>

                        <!-- End Date -->
                        <div class="col-md-3">
                            <label class="form-label">End Date</label>
                            <input type="date" 
                                   name="end" 
                                   class="form-control"
                                   value="{{ $dateRange['end']->format('Y-m-d') }}">
                        </div>

                        <!-- Filter Button -->
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-primary w-100">
                                <i class="bx bx-filter"></i> Apply
                            </button>
                        </div>

                    </div>

                </form>

            </div>
        </div>
    </div>
</div>


<!-- ====================== STATS CARDS ====================== -->

<div class="row">

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Total Food Courts</p>
            <h4>{{ $totalFoodCourts }}</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Active Outlets</p>
            <h4>{{ $activeOutlets }}</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Total Footfall</p>
            <h4>{{ $totalFootfall }}</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Queue Entries</p>
            <h4>{{ $queueEntries }}</h4>
        </div></div>
    </div>

</div>

<div class="row">

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Avg Wait Time</p>
            <h4>{{ round($avgWaitTime) }} mins</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">P95 Wait Time</p>
            <h4>{{ $p95WaitTime }} mins</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Cross Vendor %</p>
            <h4>{{ $crossVendorPercentage }}%</h4>
        </div></div>
    </div>

    <div class="col-md-3">
        <div class="card mini-stats-wid"><div class="card-body">
            <p class="text-muted mb-2">Avg Fulfillment Time</p>
            <h4>{{ round($avgFulfillmentTime) }} mins</h4>
        </div></div>
    </div>

</div>


<!-- ====================== CHARTS ====================== -->
<div class="row">

    <!-- Top Vendors -->
    <div class="col-xl-6">
        <div class="card"><div class="card-body">
            <h4 class="card-title mb-4">Top Vendors</h4>
            <div id="top-vendors-chart"></div>
        </div></div>
    </div>

    <!-- Peak Hours -->
    <div class="col-xl-6">
        <div class="card"><div class="card-body">
            <h4 class="card-title mb-4">Peak Hours</h4>
            <div id="peak-hours-chart"></div>
        </div></div>
    </div>

</div>


<!-- ====================== TABLES ====================== -->
<div class="row">

    <!-- Peak Hours Table -->
    <div class="col-xl-6">
        <div class="card"><div class="card-body">
            <h4 class="card-title mb-3">Top 10 Peak Hours</h4>

            <ul class="list-group">
                @foreach($peakHoursTable as $p)
                    <li class="list-group-item d-flex justify-content-between">
                        <span>{{ $p['time_range'] }}</span>
                        <span class="badge bg-success">{{ $p['orders'] }} orders</span>
                    </li>
                @endforeach
            </ul>
        </div></div>
    </div>

    <!-- Staff -->
    <div class="col-xl-6">
        <div class="card"><div class="card-body">
            <h4 class="card-title mb-3">Outlet Staff</h4>

            <ul class="list-group">
                @foreach($users as $u)
                    <li class="list-group-item d-flex justify-content-between">
                        <span>{{ $u->name }} ({{ $u->outlet->outlet_name ?? 'N/A' }})</span>
                        <span class="badge bg-info">{{ $u->email }}</span>
                    </li>
                @endforeach
            </ul>

        </div></div>
    </div>

</div>

@endsection



@section('script')
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>

<script>
    // Top Vendors
    new ApexCharts(document.querySelector("#top-vendors-chart"), {
        chart: { type: 'bar', height: 300 },
        series: [{
            name: 'Orders',
            data: {!! json_encode($topVendors->pluck('order_count')) !!}
        }],
        xaxis: {
            categories: {!! json_encode($topVendors->pluck('vendor_name')) !!}
        }
    }).render();


    // Peak Hours
    new ApexCharts(document.querySelector("#peak-hours-chart"), {
        chart: { type: 'area', height: 300 },
        series: [{
            name: 'Orders',
            data: {!! json_encode($peakHours->pluck('count')) !!}
        }],
        xaxis: {
            categories: {!! json_encode($peakHours->pluck('label')) !!}
        },
        stroke: { curve: 'smooth' }
    }).render();
</script>

@endsection