@extends('layouts.app')

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

@section('header-action')
    <div class="date-range-filter">
        <input type="text" class="form-control date-input" id="dateRange" readonly>
        <i class="fas fa-calendar-alt date-icon"></i>
    </div>
@endsection

@section('content')
    <div class="dashboard-container">
        <!-- KPI Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value">{{ $totalOrders }}</div>
                <div class="stat-label">Total Orders</div>
            </div>

            <div class="stat-card metric-card" data-metric="avg_wait" data-title="Average Wait Time Trend">
                <div class="stat-value">{{ round($averageWaitTime ?? 0) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">Avg Wait Time</div>
                <span class="metric-arrow">›</span>
                {{-- <i class="fas fa-clock stat-icon"></i> --}}
            </div>

            <div class="stat-card metric-card" data-metric="p95_wait" data-title="P95 Wait Time Trend">
                <div class="stat-value">{{ round($peakWaitTime ?? 0) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">P95 Wait Time</div>
                <span class="metric-arrow">›</span>
                {{-- <i class="fas fa-chart-line stat-icon"></i> --}}
            </div>

            <div class="stat-card metric-card" data-metric="fulfillment" data-title="Fulfillment Time Trend">
                <div class="stat-value">{{ round($orderFulfillmentTime ?? 0) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">Fulfillment Time</div>
                <span class="metric-arrow">›</span>
                {{-- <i class="fas fa-box-check stat-icon"></i> --}}
            </div>

            <div class="stat-card metric-card" data-metric="pending" data-title="Pending Orders Trend">
                <div class="stat-value">{{ $pendingOrders }}</div>
                <div class="stat-label">Order Pending</div>
                {{-- <i class="fas fa-hourglass-half stat-icon"></i> --}}
                <span class="metric-arrow">›</span>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="charts-row">
            <!-- Orders Per Hour -->
            <div class="chart-card">
                <div class="chart-header">
                    <h6 class="chart-title">Orders Per Hour</h6>
                </div>
                <div class="chart-body">
                    <canvas id="ordersPerHourChart"></canvas>
                    <div class="chart-legend">
                        <div class="legend-label">Orders</div>
                    </div>
                </div>
            </div>

            <!-- Peak Hours -->
            <div class="chart-card">
                <div class="chart-header">
                    <h6 class="chart-title">Peak Hours</h6>
                </div>
                <div class="chart-body">
                    <canvas id="peakHoursChart"></canvas>
                    <div class="chart-legend">
                        <div class="legend-label">Orders</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users List Table -->
        <div class="users-table-card">
            <div class="table-header">
                <h6 class="table-title">Users List</h6>
            </div>
            <div class="table-wrapper">
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Outlet</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($user as $staff)
                            <tr>
                                <td>{{ $staff->name }}</td>
                                <td>{{ $staff->email }}</td>
                                <td>{{ $staff->phone }}</td>
                                <td>{{ $staff->outlet->name ?? ($staff->outlet->outlet_name ?? 'N/A') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Metric Modal -->
    <div class="modal fade" id="metricModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="metricModalTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div style="height: 350px;">
                        <canvas id="metricLineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('styles')
    <style>
        .dashboard-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .date-range-filter {
            position: relative;
            display: inline-block;
        }

        .date-separator {
            color: #6b7280;
            font-size: 14px;
            font-weight: 500;
        }

        .date-input {
            width: 280px;
            height: 42px;
            padding: 10px 40px 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            background: #fff;
        }

        .date-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .date-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
            pointer-events: none;
            font-size: 16px;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }

        .stat-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 4px;
        }

        .stat-unit {
            font-size: 14px;
            font-weight: 400;
            color: #6b7280;
        }

        .stat-label {
            font-size: 13px;
            color: #6b7280;
            margin: 0;
        }

        .stat-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 20px;
            color: #d1d5db;
        }

        /* Charts Row */
        .charts-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .chart-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
        }

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

        .chart-title {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .chart-body {
            position: relative;
            height: 300px;
        }

        .chart-legend {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }

        .legend-label {
            font-size: 13px;
            color: #6b7280;
        }

        /* Table Card */
        .users-table-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 14px 12px rgba(0, 0, 0, 0.08);
        }

        .table-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
        }

        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .table-wrapper {
            overflow-x: auto;
            padding: 10px;

        }

        .users-table {
            width: 100%;
            border-collapse: separate;
            margin: 0;
            border: 1px solid #e5e5e7;
            border-radius: 12px;
        }

        .users-table thead {
            background: #f9fafb;
        }

        .users-table thead th {
            padding: 12px 20px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
        }

        .users-table tbody tr {
            border-bottom: 1px solid #f3f4f6;
        }

        .users-table tbody tr:hover {
            background: #f9fafb;
        }

        .users-table tbody tr:last-child {
            border-bottom: none;
        }

        .users-table tbody td {
            padding: 16px 20px;
            font-size: 14px;
            color: #111827;
            vertical-align: middle;
        }

        .metric-card {
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

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

        /* Responsive */
        @media (max-width: 1400px) {
            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 1024px) {
            .charts-row {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }

            .date-range-filter {
                width: 100%;
            }

            .date-input {
                width: 100%;
            }

            .users-table {
                font-size: 13px;
            }

            .users-table thead th,
            .users-table tbody td {
                padding: 10px;
            }
        }

        .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

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        // Initialize date range picker
        const startDate = '{{ $startDate }}';
        const endDate = '{{ $endDate }}';

        $('#dateRange').daterangepicker({
            startDate: moment(startDate),
            endDate: moment(endDate),
            locale: {
                format: 'MMM DD, YYYY',
                separator: ' - ',
            },
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
                    'month')]
            },
            opens: 'left',
            autoApply: true
        }, function(start, end) {
            // Update dashboard when date range changes
            window.location.href =
                `{{ route('outlet-staff.dashboard') }}?start_date=${start.format('YYYY-MM-DD')}&end_date=${end.format('YYYY-MM-DD')}`;
        });

        // Set initial display value
        $('#dateRange').val(moment(startDate).format('MMM DD, YYYY') + ' - ' + moment(endDate).format('MMM DD, YYYY'));

        // Orders Per Hour Chart
        const ordersPerHourLabels = {!! json_encode(array_keys($ordersPerHour->toArray())) !!};
        const ordersPerHourData = {!! json_encode(array_values($ordersPerHour->toArray())) !!};

        const ordersPerHourCtx = document.getElementById('ordersPerHourChart').getContext('2d');
        new Chart(ordersPerHourCtx, {
            type: 'bar',
            data: {
                labels: ordersPerHourLabels.map(h => {
                    const hour = parseInt(h);
                    const period = hour >= 12 ? 'PM' : 'AM';
                    const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
                    return `${String(displayHour).padStart(2, '0')}:00 ${period}`;
                }),
                datasets: [{
                    data: ordersPerHourData,
                    backgroundColor: '#818cf8',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f3f4f6'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Peak Hours Chart
        const peakHoursLabels = {!! json_encode($peakHours->pluck('hour')->toArray()) !!};
        const peakHoursData = {!! json_encode($peakHours->pluck('count')->toArray()) !!};

        const peakHoursCtx = document.getElementById('peakHoursChart').getContext('2d');
        new Chart(peakHoursCtx, {
            type: 'bar',
            data: {
                labels: peakHoursLabels.map(h => {
                    const period = h >= 12 ? 'PM' : 'AM';
                    const displayHour = h > 12 ? h - 12 : (h === 0 ? 12 : h);
                    return displayHour;
                }),
                datasets: [{
                    data: peakHoursData,
                    backgroundColor: '#818cf8',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f3f4f6'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Metric Modal Charts
        let metricChart = null;

        const metricData = {
            avg_wait: {!! json_encode($avgWaitTrend) !!},
            p95_wait: {!! json_encode($p95WaitTrend) !!},
            fulfillment: {!! json_encode($fulfillmentTrend) !!},
            pending: {!! json_encode($pendingOrdersTrend) !!}
        };

        const metricColors = {
            avg_wait: '#3b82f6',
            p95_wait: '#8b5cf6',
            fulfillment: '#10b981',
            pending: '#f59e0b'
        };

        document.querySelectorAll('.metric-card').forEach(card => {
            card.addEventListener('click', () => {
                const metric = card.dataset.metric;
                const title = card.dataset.title;

                document.getElementById('metricModalTitle').innerText = title;

                const data = metricData[metric];
                const labels = data.map(d => d.label);
                const values = data.map(d => d.value);

                const ctx = document.getElementById('metricLineChart').getContext('2d');

                if (metricChart) {
                    metricChart.destroy();
                }

                metricChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: title,
                            data: values,
                            borderColor: metricColors[metric],
                            backgroundColor: metricColors[metric] + '20',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true,
                            pointRadius: 5,
                            pointHoverRadius: 7,
                            pointBackgroundColor: metricColors[metric],
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                backgroundColor: '#1f2937',
                                padding: 12,
                                titleColor: '#fff',
                                bodyColor: '#fff',
                                borderColor: '#374151',
                                borderWidth: 1,
                                displayColors: false,
                                callbacks: {
                                    label: function(context) {
                                        return metric === 'pending' ?
                                            `${context.parsed.y} orders` :
                                            `${context.parsed.y} minutes`;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f3f4f6',
                                    drawBorder: false
                                },
                                ticks: {
                                    callback: function(value) {
                                        return metric === 'pending' ?
                                            value :
                                            value + ' min';
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false,
                                    drawBorder: false
                                }
                            }
                        }
                    }
                });

                new bootstrap.Modal(document.getElementById('metricModal')).show();
            });
        });
    </script>
@endpush