@extends('layouts.app')

@section('title', 'Dashboard - Tiqkets')

@section('page-title', 'Dashboard')

@section('header-action')
    <div class="d-flex gap-2 align-items-center">
        <form method="GET" action="{{ route('restaurant-admin.dashboard') }}" id="filterForm" class="d-flex gap-2">
            <div class="date-filter">
                <input type="text" class="form-control" id="daterange" name="date_range"
                    value="{{ $startDate->format('d M Y') }} to {{ $endDate->format('d M Y') }}" readonly>
                <i class="fas fa-calendar-alt"></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>
            <select class="form-select branch-filter" name="branch_id"
                onchange="document.getElementById('filterForm').submit()">
                <option value="">All Branches</option>
                @foreach ($branches as $branch)
                    <option value="{{ $branch->id }}" {{ $selectedBranchId == $branch->id ? 'selected' : '' }}>
                        {{ $branch->branch_name }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f5f5f7;
            /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; */
        }

        /* Dashboard Metrics */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .form-select.branch-filter {
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            background-image: none !important;
        }

        .metric-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e5e5e7;
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);

        }

        .chart-card {
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
        }

        .performance-card {
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
        }

        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .metric-value {
            font-size: 32px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 4px;
            line-height: 1.1;
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .metric-value .unit {
            font-size: 16px;
            font-weight: 400;
            color: #86868b;
        }

        .metric-label {
            font-size: 13px;
            color: #86868b;
            font-weight: 400;
            line-height: 1.4;
        }

        .metric-icon {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 8px;
            height: 8px;
            background: #34c759;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .metric-card:hover .metric-icon {
            opacity: 1;
        }

        /* Charts Section */
        .charts-grid {
            display: grid;
            grid-template-columns: 2.5fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        .chart-card {
            background: white;
            padding: 24px;
            border-radius: 12px;
            border: 1px solid #e5e5e7;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

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

        .chart-period {
            font-size: 13px;
            color: #86868b;
            padding: 4px 12px;
            background: #f5f5f7;
            border-radius: 6px;
        }

        /* Performance Section */
        .performance-grid {
            display: grid;
            grid-template-columns: 2.5fr 1fr;
            gap: 16px;
        }

        .performance-card {
            background: white;
            padding: 24px;
            border-radius: 12px;
            border: 1px solid #e5e5e7;
        }

        .section-title {
            font-size: 17px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 20px;
        }

        .performance-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #e5e5e7;
            /* Outer border only */
            border-radius: 12px;
            overflow: hidden;
        }

        /* Header */
        .performance-table thead th {
            background: #f5f5f7;
            color: #000;
            font-weight: 600;
            font-size: 16px;
            padding: 12px 16px;
            text-align: left;
            /* border: none !important; */
            border-bottom: 1px solid #e5e5e7;
            /* Remove vertical/horizontal lines */
        }

        /* Body */
        .performance-table tbody td {
            padding: 16px;
            color: #1d1d1f;
            font-size: 14px;
            /* border: none !important; */
            border-bottom: 1px solid #e5e5e7;
            /* Remove vertical/horizontal lines */
        }

        /* Hover effect */
        .performance-table tbody tr:hover {
            background: #fafafa;
        }


        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: #f5f5f7;
            border-radius: 8px;
            font-weight: 600;
            color: #1d1d1f;
            font-size: 13px;
        }

        .branch-name {
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 4px;
            font-size: 14px;
        }

        .branch-address {
            font-size: 12px;
            color: #86868b;
            line-height: 1.4;
        }

        .contact-name {
            font-weight: 500;
            color: #1d1d1f;
            margin-bottom: 2px;
            font-size: 13px;
        }

        .contact-details {
            font-size: 12px;
            color: #86868b;
        }

        .bookings-number {
            font-size: 20px;
            font-weight: 600;
            color: #1d1d1f;
        }

        /* Peak Hours Table */
        .peak-hours-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #e5e5e7;
            /* Outer border only */
            border-radius: 12px;
            overflow: hidden;
        }

        .peak-hours-table thead th {
            background: #f5f5f7;
            color: #000;
            font-weight: 600;
            font-size: 14px;
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e5e5e7;
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
        }

        .peak-hours-table tbody td {
            padding: 16px;
            color: #1d1d1f;
            border-bottom: 1px solid #f5f5f7;
            font-size: 14px;
        }

        .peak-hours-table tbody tr:hover {
            background: #fafafa;
        }

        .peak-hours-table tbody tr:last-child td {
            border-bottom: none;
        }

        .hours-text {
            font-weight: 500;
            color: #1d1d1f;
        }

        .orders-number {
            font-size: 17px;
            font-weight: 600;
            color: #1d1d1f;
        }

        /* Header Filters */
        .date-filter {
            position: relative;
            display: flex;
            align-items: center;
        }

        .date-filter input {
            padding: 8px 40px 8px 14px;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            font-size: 13px;
            min-width: 220px;
            cursor: pointer;
            background: white;
            color: #1d1d1f;
            font-weight: 500;
        }

        .date-filter input:focus {
            outline: none;
            border-color: #007aff;
        }

        .date-filter i {
            position: absolute;
            right: 14px;
            color: #86868b;
            pointer-events: none;
            font-size: 13px;
        }

        .branch-filter {
            padding: 8px 14px;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            font-size: 13px;
            min-width: 200px;
            cursor: pointer;
            background: white;
            color: #1d1d1f;
            font-weight: 500;
        }

        .branch-filter:focus {
            outline: none;
            border-color: #007aff;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 48px 24px;
            color: #86868b;
        }

        .empty-state-icon {
            font-size: 48px;
            opacity: 0.3;
            margin-bottom: 16px;
        }

        .empty-state-text {
            font-size: 14px;
            color: #86868b;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }

            .performance-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .date-filter input {
                min-width: 100%;
                font-size: 12px;
            }

            .branch-filter {
                min-width: 100%;
                font-size: 12px;
            }

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

            .metric-label {
                font-size: 12px;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Metrics Grid -->
    <div class="metrics-grid">
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['total_branches'] }}</div>
            <div class="metric-label">Total Branches</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['active_branches'] }}</div>
            <div class="metric-label">Total Active Branches</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['total_guests_served'] }}</div>
            <div class="metric-label">Guests Served</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['total_queue_entries'] }}</div>
            <div class="metric-label">Queue Entries</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['avg_wait_time'] }}<span class="unit">min</span></div>
            <div class="metric-label">Avg Wait Time</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['whatsapp_adoption'] }}%</div>
            <div class="metric-label">WhatsApp Adoption</div>
        </div>
        <div class="metric-card">
            <div class="metric-icon"></div>
            <div class="metric-value">{{ $stats['repeat_customers'] }}%</div>
            <div class="metric-label">Repeat Customers</div>
        </div>
    </div>

    <!-- Charts Grid -->
    <div class="charts-grid">
        <!-- Bookings Bar Chart -->
        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Bookings</h3>
            </div>
            <div id="bookingsChart"></div>
        </div>

        <!-- Group Size Donut Chart -->
        <div class="chart-card">
            <div class="chart-header">
                <h3 class="chart-title">Group Size</h3>
            </div>
            <div id="groupSizeChart"></div>
        </div>
    </div>

    <!-- Performance Grid -->
    <div class="performance-grid">
        <!-- Top Performing Branch -->
        <div class="performance-card">
            <h3 class="section-title">Top Performing Branch</h3>
            <table class="performance-table">
                <thead>
                    <tr>
                        <th style="width: 60px;">Rank</th>
                        <th>Name</th>
                        <th>Contact Details</th>
                        <th style="width: 140px; text-align: center;">Total Bookings</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($topBranches as $index => $branch)
                        <tr>
                            <td>
                                <div class="rank-badge">{{ $index + 1 }}</div>
                            </td>
                            <td>
                                <div class="branch-name">{{ $branch->branch_name }}</div>
                                <div class="branch-address">{{ Str::limit($branch->branch_address, 60) }}</div>
                            </td>
                            <td>
                                <div class="contact-name">{{ $branch->branch_contact_name }}</div>
                                <div class="contact-details">
                                    {{ $branch->branch_contact_phone }} • {{ $branch->branch_contact_email }}
                                </div>
                            </td>
                            <td style="text-align: center;">
                                <div class="hours-text">{{ $branch->total_bookings }}</div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="empty-state">
                                    <div class="empty-state-icon">🏢</div>
                                    <div class="empty-state-text">No branch data available</div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Peak Hours -->
        <div class="performance-card">
            <h3 class="section-title">Peak Hours</h3>
            <table class="peak-hours-table">
                <thead>
                    <tr>
                        <th>Hours</th>
                        <th style="text-align: right;">Orders</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($peakHours as $peak)
                        <tr>
                            <td class="hours-text">{{ $peak['hours'] }}</td>
                            <td style="text-align: right;">
                                <span class="hours-text">{{ $peak['orders'] }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2">
                                <div class="empty-state">
                                    <div class="empty-state-icon">⏰</div>
                                    <div class="empty-state-text">No peak hours data</div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </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>
        // Date Range Picker
        $(function() {
            $('#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();
            });
        });

        // Bookings Bar Chart
        var bookingsOptions = {
            series: [{
                name: 'Bookings',
                data: {!! json_encode($chartData['bookings']['values']) !!}
            }],
            chart: {
                type: 'bar',
                height: 320,
                toolbar: {
                    show: false
                },
                fontFamily: 'Figtree,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
            },
            plotOptions: {
                bar: {
                    borderRadius: 8,
                    columnWidth: '50%',
                    distributed: false,
                    dataLabels: {
                        position: 'top'
                    }
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val;
                },
                offsetY: -20,
                style: {
                    fontSize: '13px',
                    fontWeight: 600,
                    colors: ['#1d1d1f']
                }
            },
            colors: ['#007aff'],
            xaxis: {
                categories: {!! json_encode($chartData['bookings']['labels']) !!},
                labels: {
                    style: {
                        colors: '#86868b',
                        fontSize: '11px',
                        fontWeight: 500
                    }
                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: '#86868b',
                        fontSize: '12px'
                    }
                }
            },
            grid: {
                borderColor: '#827f7f',
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            tooltip: {
                theme: 'light',
                y: {
                    formatter: function(val) {
                        return val + ' bookings';
                    }
                }
            }
        };

        var bookingsChart = new ApexCharts(document.querySelector("#bookingsChart"), bookingsOptions);
        bookingsChart.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_2_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_2_to_5'] }},
                {{ $chartData['group_sizes']['size_more_than_6'] }}
            ],
            chart: {
                type: 'donut',
                height: 350,
                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
            },
            labels: ['1 to 2 People', '2 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: '16px',
                    fontWeight: 600,
                    colors: ['#fff']
                },
                dropShadow: {
                    enabled: false
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '70%',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '13px',
                                color: '#86868b',
                                offsetY: -10
                            },
                            value: {
                                show: true,
                                fontSize: '28px',
                                fontWeight: 600,
                                color: '#1d1d1f',
                                offsetY: 5,
                                formatter: function(val) {
                                    return val;
                                }
                            },
                            total: {
                                show: true,
                                label: 'Total',
                                fontSize: '13px',
                                color: '#86868b',
                                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: '#1d1d1f'
                },
                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();
    </script>
@endpush