@extends('layouts.master')

@section('title', 'Tenant Dashboard')

@section('content')

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

<!-- Filters -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title mb-3">Filters</h4>

                <form method="GET" action="{{ route('tenant.dashboard', $tenant->id) }}">
                    <div class="row">

                        <!-- Date From -->
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Date From</label>
                                <input type="date" class="form-control"
                                       name="start_date"
                                       value="{{ request('start_date') ?? $startDate->format('Y-m-d') }}">
                            </div>
                        </div>

                        <!-- Date To -->
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Date To</label>
                                <input type="date" class="form-control"
                                       name="end_date"
                                       value="{{ request('end_date') ?? $endDate->format('Y-m-d') }}">
                            </div>
                        </div>

                        <!-- Branch Filter -->
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Branch</label>
                                <select name="branch_id" class="form-select">
                                    <option value="">All Branches</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}"
                                            {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                            {{ $branch->branch_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>

                    <button class="btn btn-primary mt-2">
                        <i class="bx bx-filter"></i> Apply Filters
                    </button>

                </form>

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

<!-- Stats Cards -->
<div class="row">

    <!-- Total Branches -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">Total Branches</p>
                <h4>{{ $stats['total_branches'] }}</h4>
            </div>
        </div>
    </div>

    <!-- Queue Entries -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">Total Queue Entries</p>
                <h4>{{ $stats['total_queue_entries'] }}</h4>
            </div>
        </div>
    </div>

    <!-- Guests Served -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">Guests Served</p>
                <h4>{{ $stats['total_guests_served'] }}</h4>
            </div>
        </div>
    </div>

    <!-- Avg Wait Time -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">Avg Wait Time</p>
                <h4>{{ $stats['avg_wait_time'] }} mins</h4>
            </div>
        </div>
    </div>

</div>

<div class="row">

    <!-- WhatsApp Adoption -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">WhatsApp Adoption</p>
                <h4>{{ $stats['whatsapp_adoption'] }}%</h4>
            </div>
        </div>
    </div>

    <!-- Repeat Customers -->
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <p class="text-muted fw-medium mb-2">Repeat Customers</p>
                <h4>{{ $stats['repeat_customers'] }}%</h4>
            </div>
        </div>
    </div>

</div>

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

    <!-- Bookings Trend -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Bookings Trend</h4>
                <div id="bookings-trend-chart" class="apex-charts" style="height: 300px;"></div>
            </div>
        </div>
    </div>

    <!-- Group Size Distribution -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Group Size Distribution</h4>
                <div id="group-size-chart" class="apex-charts" style="height: 300px;"></div>
            </div>
        </div>
    </div>

</div>

<!-- Top Branches -->
<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title mb-3">Top Branches (By Volume)</h4>

                <ul class="list-group">
                    @foreach($topBranches as $branch)
                        <li class="list-group-item d-flex justify-content-between">
                            <span>{{ $branch->branch_name }}</span>
                            <span class="badge bg-success">{{ $branch->booking_count }} bookings</span>
                        </li>
                    @endforeach
                </ul>

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

    <!-- Peak Hours -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title mb-3">Peak Hours</h4>

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

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

</div>

@endsection


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

<script>
    // Bookings Trend Chart
    var bookingTrendOptions = {
        series: [{
            name: 'Bookings',
            data: @json($chartData['bookings']['values'])
        }],
        chart: { type: 'line', height: 300, toolbar: { show: false }},
        xaxis: { categories: @json($chartData['bookings']['labels']) },
        stroke: { curve: 'smooth', width: 3 },
        colors: ['#556ee6']
    };
    new ApexCharts(document.querySelector("#bookings-trend-chart"), bookingTrendOptions).render();


    // Group Size Distribution Chart
    var groupSizeOptions = {
        series: [
            {{ $chartData['group_sizes']['size_1_to_2'] }},
            {{ $chartData['group_sizes']['size_3_to_5'] }},
            {{ $chartData['group_sizes']['size_6_plus'] }}
        ],
        chart: { type: 'donut', height: 300 },
        labels: ['1-2 People', '3-5 People', '6+ People'],
        colors: ['#34c38f', '#556ee6', '#f46a6a']
    };
    new ApexCharts(document.querySelector("#group-size-chart"), groupSizeOptions).render();
</script>

@endsection