@extends('layouts.app')

@section('title', 'Dashboard - ' . $branch->branch_name)
@section('page-title', 'Dashboard')

@section('header-action')
    <div class="d-flex gap-2 align-items-center">
        <form method="GET" action="{{ route('location-manager.dashboard') }}" id="filterForm" class="d-flex gap-2">
            <div class="position-relative">
                <input type="text" class="form-control form-control-sm ps-3 pe-5" id="daterange" name="date_range"
                    value="{{ $startDate->format('d M Y') }} to {{ $endDate->format('d M Y') }}" readonly>
                <i class="fas fa-calendar-alt position-absolute end-0 top-50 translate-middle-y me-3"
                    style="font-size: 0.875rem;"></i>
                <input type="hidden" name="start_date" id="start_date" value="{{ $startDate->format('Y-m-d') }}">
                <input type="hidden" name="end_date" id="end_date" value="{{ $endDate->format('Y-m-d') }}">
            </div>
        </form>
    </div>
@endsection

@push('styles')
    <link href="https://fonts.googleapis.com/css2?family=Figtree&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        body {
            background: #f8f9fa;
            font-family: 'Figtree', sans-serif;
        }

        .metric-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
            position: relative;
            border: none;
        }

        .metric-value {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 4px;
            line-height: 1;
        }

        .metric-value .unit {
            font-size: 14px;
            font-weight: 400;
            color: #666;
            margin-left: 2px;
        }

        .metric-label {
            font-size: 12px;
            color: #666;
            font-weight: 400;
        }

        .chart-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
            border: none;
        }

        .chart-title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .peak-hours-table thead th {
            background: #f9fafb;
            color: #666;
            font-weight: 600;
            font-size: 13px;
        }

        .peak-hours-table tbody td {
            color: #1a1a1a;
            font-size: 14px;
        }

        .peak-hours-table tbody td:last-child {
            text-align: right;
            /* font-weight: 600; */
        }

        #daterange {
            min-width: 260px;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            #daterange {
                min-width: 200px;
            }

            .metric-value {
                font-size: 24px;
            }
        }

        .table-responsive {
            border: 1px solid #e5e5e7;
            /* Outer border only */
            border-radius: 12px;
        }

        .metric-arrow {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #b3b3b3;
            transition: .2s;
        }

        .metric-card:hover .metric-arrow {
            color: #000;
            transform: translateY(-50%) translateX(3px);
        }
    </style>
@endpush

@section('content')
    <!-- Metrics Grid -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['guests_served_today'] }}</div>
                    <div class="metric-label">Guests Served</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['queue_entries_today'] }}</div>
                    <div class="metric-label">Queue Entries</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3" id="cardWaitTime" style="cursor:pointer;">

                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['average_wait_time'] }}<span class="unit">min</span></div>
                    <div class="metric-label">Avg Wait Time</div>
                    <span class="metric-arrow">›</span>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3" id="cardSeated" style="cursor:pointer;">

                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['seated_under_5_min'] }}</div>
                    <div class="metric-label">Seated in 5 min</div>
                    <span class="metric-arrow">›</span>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['large_group_percent'] }}%</div>
                    <div class="metric-label">Large Groups</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['whatsapp_opt_in'] }}%</div>
                    <div class="metric-label">WhatsApp Adoption</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['cancellation_rate'] }}%</div>
                    <div class="metric-label">Cancellation</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-3 col-lg">
            <div class="card metric-card h-100 p-3">
                <div class="card-body p-0">
                    <div class="metric-value">{{ $stats['no_show_rate'] }}%</div>
                    <div class="metric-label">No Show</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Container -->
    <div class="row g-3 mb-4">
        <!-- Wait Time Chart -->
        <div class="col-12 col-lg-8">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="chart-title mb-0">Wait Time</h5>
                    </div>
                    <div id="waitTimeChart"></div>
                </div>
            </div>
        </div>

        <!-- Group Size Chart -->
        <div class="col-12 col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="chart-title mb-0">Group Size</h5>
                    </div>
                    <div id="groupSizeChart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Grid -->
    <div class="row g-3">
        <!-- WhatsApp Adoption Chart -->
        <div class="col-12 col-lg-8">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="chart-title mb-0">WhatsApp Adoption</h5>
                    </div>
                    <div id="whatsappChart"></div>
                </div>
            </div>
        </div>

        <!-- Peak Hours -->
        <div class="col-12 col-lg-4">
            <div class="card chart-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="chart-title mb-0">Peak Hours</h5>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover peak-hours-table mb-0">
                            <thead class="border-bottom">
                                <tr>
                                    <th class="border-0">Hours</th>
                                    <th class="border-0 text-end">Orders</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($peakHours as $peak)
                                    <tr>
                                        <td>{{ $peak['hours'] }}</td>
                                        <td class="text-end">{{ $peak['orders'] }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center py-5 text-muted">
                                            No data available
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Wait Time Modal -->
    <div class="modal fade" id="waitTimeModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title">Average Wait Time Trend</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div id="waitTimeModalChart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Seated Under 5 Min Modal -->
    <div class="modal fade" id="seatedModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title">Seated Under 5 Minutes Trend</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div id="seatedModalChart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        $(function() {
            // Date Range Picker
            $('#daterange').daterangepicker({
                opens: 'left',
                startDate: moment('{{ $startDate->format('Y-m-d') }}'),
                endDate: moment('{{ $endDate->format('Y-m-d') }}'),
                locale: {
                    format: 'DD MMM YYYY'
                }
            }, function(start, end, label) {
                $('#start_date').val(start.format('YYYY-MM-DD'));
                $('#end_date').val(end.format('YYYY-MM-DD'));
                $('#filterForm').submit();
            });

            // Wait Time Bar Chart
            var waitTimeOptions = {
                series: [{
                    name: 'Wait Time',
                    data: {!! json_encode($chartData['bookings']['values']) !!}
                }],
                chart: {
                    type: 'bar',
                    height: 320,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'Figtree, sans-serif'
                },
                plotOptions: {
                    bar: {
                        borderRadius: 6,
                        columnWidth: '45%',
                        distributed: false,
                        dataLabels: {
                            position: 'top'
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val;
                    },
                    offsetY: -20,
                    style: {
                        fontSize: '12px',
                        fontWeight: 600,
                        colors: ['#1a1a1a']
                    }
                },
                colors: ['#7c3aed'],
                xaxis: {
                    categories: {!! json_encode($chartData['bookings']['labels']) !!},
                    labels: {
                        style: {
                            colors: '#999',
                            fontSize: '11px'
                        }
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#000000',
                            fontSize: '11px'
                        }
                    }
                },
                grid: {
                    borderColor: '#827f7f',
                    strokeDashArray: 4
                },
                tooltip: {
                    theme: 'light',
                    y: {
                        formatter: function(val) {
                            return val + ' min';
                        }
                    }
                }
            };

            var waitTimeChart = new ApexCharts(document.querySelector("#waitTimeChart"), waitTimeOptions);
            waitTimeChart.render();

            // Group Size Donut Chart
            @php
                $total = $chartData['group_sizes']['total'] ?: 1;
                $percent1 = round(($chartData['group_sizes']['size_1_to_2'] / $total) * 100);
                $percent2 = round(($chartData['group_sizes']['size_3_to_5'] / $total) * 100);
                $percent3 = round(($chartData['group_sizes']['size_more_than_6'] / $total) * 100);
            @endphp

            var groupSizeOptions = {
                series: [
                    {{ $chartData['group_sizes']['size_1_to_2'] }},
                    {{ $chartData['group_sizes']['size_3_to_5'] }},
                    {{ $chartData['group_sizes']['size_more_than_6'] }}
                ],
                chart: {
                    type: 'donut',
                    height: 350,
                    fontFamily: 'Figtree, sans-serif'
                },
                labels: ['1 to 2 People', '3 to 5 People', 'More than 6'],
                colors: ['#007aff', '#ff2d55', '#af52de'],
                dataLabels: {
                    enabled: true,
                    formatter: function(val, opts) {
                        return opts.w.config.series[opts.seriesIndex];
                    },
                    style: {
                        fontSize: '14px',
                        fontWeight: 600,
                        colors: ['#fff']
                    },
                    dropShadow: {
                        enabled: false
                    }
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '70%',
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    fontSize: '13px',
                                    color: '#666',
                                    offsetY: -10
                                },
                                value: {
                                    show: true,
                                    fontSize: '24px',
                                    fontWeight: 700,
                                    color: '#1a1a1a',
                                    offsetY: 5,
                                    formatter: function(val) {
                                        return val;
                                    }
                                },
                                total: {
                                    show: true,
                                    label: 'Total',
                                    fontSize: '13px',
                                    color: '#666',
                                    formatter: function(w) {
                                        return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                    }
                                }
                            }
                        }
                    }
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                    fontSize: '13px',
                    fontWeight: 500,
                    labels: {
                        colors: '#1a1a1a'
                    },
                    markers: {
                        width: 15,
                        height: 15,
                        radius: 12
                    },
                    itemMargin: {
                        horizontal: 12,
                        vertical: 8
                    },
                    formatter: function(seriesName, opts) {
                        const value = opts.w.config.series[opts.seriesIndex];
                        const total = opts.w.config.series.reduce((a, b) => a + b, 0);
                        const percent = Math.round((value / total) * 100);
                        return seriesName + ': ' + value + ' (' + percent + '%)';
                    }
                },
                stroke: {
                    width: 0
                },
                tooltip: {
                    theme: 'light',
                    y: {
                        formatter: function(val) {
                            return val + ' guests';
                        }
                    }
                }
            };

            var groupSizeChart = new ApexCharts(document.querySelector("#groupSizeChart"), groupSizeOptions);
            groupSizeChart.render();

            // WhatsApp Adoption Line Chart
            var whatsappOptions = {
                series: [{
                    name: 'Adoption Rate',
                    data: {!! json_encode($whatsappAdoption['values']) !!}
                }],
                chart: {
                    type: 'area',
                    height: 300,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'Figtree, sans-serif'
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2,
                    colors: ['#818cf8']
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.4,
                        opacityTo: 0.1,
                        stops: [0, 90, 100]
                    },
                    colors: ['#818cf8']
                },
                xaxis: {
                    categories: {!! json_encode($whatsappAdoption['labels']) !!},
                    labels: {
                        style: {
                            colors: '#999',
                            fontSize: '11px'
                        }
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    min: 0,
                    max: 100,
                    labels: {
                        formatter: function(val) {
                            return val + '%';
                        },
                        style: {
                            colors: '#999',
                            fontSize: '11px'
                        }
                    }
                },
                grid: {
                    borderColor: '#f3f4f6',
                    strokeDashArray: 4
                },
                tooltip: {
                    theme: 'light',
                    y: {
                        formatter: function(val) {
                            return val + '%';
                        }
                    }
                },
                markers: {
                    size: 4,
                    colors: ['#818cf8'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 6
                    }
                }
            };

            var whatsappChart = new ApexCharts(document.querySelector("#whatsappChart"), whatsappOptions);
            whatsappChart.render();
        });


        // CLICK EVENT LISTENERS
        document.getElementById("cardWaitTime").addEventListener("click", function() {
            var waitModal = new bootstrap.Modal(document.getElementById("waitTimeModal"));
            waitModal.show();
            renderWaitTimeModalChart();
        });

        document.getElementById("cardSeated").addEventListener("click", function() {
            var seatedModal = new bootstrap.Modal(document.getElementById("seatedModal"));
            seatedModal.show();
            renderSeatedModalChart();
        });


        // CHART RENDER – AVERAGE WAIT TIME
        function renderWaitTimeModalChart() {
            let options = {
                series: [{
                    name: "Avg Wait Time",
                    data: {!! json_encode($chartData['bookings']['values']) !!}
                }],
                chart: {
                    type: "line",
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                stroke: {
                    width: 3,
                    curve: "smooth",
                    colors: ["#7c3aed"]
                },

                // 🔥 SHOW POINTS
                markers: {
                    size: 6,
                    colors: ['#7c3aed'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 8
                    }
                },

                xaxis: {
                    categories: {!! json_encode($chartData['bookings']['labels']) !!}
                },
                tooltip: {
                    enabled: true
                }
            };

            document.querySelector("#waitTimeModalChart").innerHTML = "";
            let chart = new ApexCharts(document.querySelector("#waitTimeModalChart"), options);
            chart.render();
        }



        // CHART RENDER – SEATED IN 5 MINUTES
        function renderSeatedModalChart() {
            let seatedValues = {!! json_encode(array_fill(0, count($chartData['bookings']['labels']), $stats['seated_under_5_min'])) !!};

            let options = {
                series: [{
                    name: "Seated in 5 Min",
                    data: seatedValues
                }],
                chart: {
                    type: "line",
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                stroke: {
                    width: 3,
                    curve: "smooth",
                    colors: ["#10b981"]
                },

                // 🔥 SHOW POINTS
                markers: {
                    size: 6,
                    colors: ['#10b981'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 8
                    }
                },

                xaxis: {
                    categories: {!! json_encode($chartData['bookings']['labels']) !!}
                },
                tooltip: {
                    enabled: true
                }
            };

            document.querySelector("#seatedModalChart").innerHTML = "";
            let chart = new ApexCharts(document.querySelector("#seatedModalChart"), options);
            chart.render();
        }
    </script>
@endpush