@extends('layouts.app')

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

@section('header-action')
    <div class="d-flex gap-3">
        <!-- Wrap in form for filter submission -->
        <form method="GET" action="{{ url()->current() }}" id="filterForm" class="d-flex gap-3">
            <input type="text" id="dateRangePicker" name="date_range" value="{{ $dateRange['label'] }}" class="form-control">

            <input type="hidden" name="start_date" id="start_date" value="{{ $dateRange['start']->format('Y-m-d') }}">

            <input type="hidden" name="end_date" id="end_date" value="{{ $dateRange['end']->format('Y-m-d') }}">

            <select class="form-select" id="vendorFilter" name="vendor" style="width: 200px;">
                <option value="">All Outlets</option>
                @foreach ($vendors as $vendor)
                    <option value="{{ $vendor->id }}" {{ $vendorFilter == $vendor->id ? 'selected' : '' }}>
                        {{ $vendor->outlet_name }}
                    </option>
                @endforeach
            </select>



        </form>
    </div>
@endsection

@section('content')
    <div class="dashboard-container">
        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value">{{ $activeOutlets }}</div>
                <div class="stat-label">Active Outlets</div>
            </div>

            <div class="stat-card">
                <div class="stat-value">{{ $totalFootfall }}</div>
                <div class="stat-label">Total Footfall</div>
            </div>

            <div class="stat-card clickable-card" id="cardP95WaitTime" style="cursor: pointer;">
                <div class="stat-value">{{ round($p95WaitTime) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">P95 Wait Time</div>
                <span class="metric-arrow">›</span>
            </div>

            <div class="stat-card clickable-card" id="cardAvgWaitTime" style="cursor: pointer;">
                <div class="stat-value">{{ round($avgWaitTime) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">Avg Wait Time</div>
                <span class="metric-arrow">›</span>
            </div>

            <div class="stat-card">
                <div class="stat-value">{{ $queueEntries }}</div>
                <div class="stat-label">Active Orders</div>
            </div>

            <div class="stat-card">
                <div class="stat-value">{{ $crossVendorPercentage }}%</div>
                <div class="stat-label">Cross Vendor Orders</div>
            </div>

            <div class="stat-card clickable-card" id="cardFulfillmentTime" style="cursor: pointer;">
                <div class="stat-value">{{ round($avgFulfillmentTime) }} <span class="stat-unit">min</span></div>
                <div class="stat-label">Fulfillment Time</div>
                <span class="metric-arrow">›</span>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="charts-row">
            <!-- Top Performing Vendors -->
            <div class="chart-card">
                <div class="chart-header">
                    <h6 class="chart-title">Top Performing Vendors</h6>
                </div>
                <div class="chart-body">
                    <div id="topVendorsChart"></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">
                    <div id="peakHoursChart"></div>
                </div>
            </div>
        </div>

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

            <!-- Peak Hours Table -->
            <div class="table-card peak-hours-table p-2">
                <div class="table-header">
                    <h6 class="table-title">Peak Hours</h6>
                </div>
                <div class="table-body">
                    <table class="custom-table">
                        <thead>
                            <tr>
                                <th>Hours</th>
                                <th class="text-end">Orders</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($peakHoursTable as $item)
                                <tr>
                                    <td>{{ $item['time_range'] }}</td>
                                    <td class="text-end">{{ $item['orders'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- P95 Wait Time Modal -->
    <div class="modal fade" id="p95WaitTimeModal" 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">P95 Wait Time Trend</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="p95WaitTimeModalChart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Average Wait Time Modal -->
    <div class="modal fade" id="avgWaitTimeModal" 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="avgWaitTimeModalChart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fulfillment Time Modal -->
    <div class="modal fade" id="fulfillmentTimeModal" 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">Fulfillment Time Trend</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="fulfillmentTimeModalChart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .dashboard-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(7, 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);
            transition: all 0.3s ease;
        }

        .clickable-card {
            cursor: pointer;
        }

        .clickable-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            border-color: #818cf8;
        }

        .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;
        }

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

        .clickable-card:hover .metric-arrow {
            color: #000;
            transform: translateY(-50%) translateX(3px);
        }

        /* 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;
        }

        #topVendorsChart,
        #peakHoursChart {
            height: 300px !important;
        }

        /* Tables Row */
        .tables-row {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
        }

        .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;
        }

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

        .table-body {
            overflow-x: auto;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
        }

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

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

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

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

        .custom-table tbody td {
            padding: 16px 20px;
            font-size: 14px;
            color: #111827;
        }

        .text-end {
            text-align: right;
        }

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

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

            .tables-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
@endpush

@push('scripts')
    <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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Date Range Picker - Submit form when date changes
        const start = moment("{{ $dateRange['start']->format('Y-m-d') }}");
        const end = moment("{{ $dateRange['end']->format('Y-m-d') }}");

        $('#dateRangePicker').daterangepicker({
            autoUpdateInput: false,
            startDate: start,
            endDate: end,
            locale: {
                format: 'DD MMM YYYY'
            }
        }, function(start, end) {

            $('#dateRangePicker').val(
                start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY')
            );

            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));

            $('#filterForm').submit();
        });

        // ✅ page reload aagumbodhu same date show aagum
        $('#dateRangePicker').val(
            start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY')
        );
        $('#vendorFilter').on('change', function() {
            $('#filterForm').submit();
        });


        // Remove the old updateDashboard function since we're using form submission
        // function updateDashboard(dateRange, vendor) {
        //     const url = new URL(window.location.href);
        //     url.searchParams.set('date_range', dateRange);
        //     url.searchParams.set('vendor', vendor);
        //     window.location.href = url.toString();
        // }

        // Click event listeners for cards
        document.getElementById("cardP95WaitTime").addEventListener("click", function() {
            var modal = new bootstrap.Modal(document.getElementById("p95WaitTimeModal"));
            modal.show();
            renderP95WaitTimeModalChart();
        });

        document.getElementById("cardAvgWaitTime").addEventListener("click", function() {
            var modal = new bootstrap.Modal(document.getElementById("avgWaitTimeModal"));
            modal.show();
            renderAvgWaitTimeModalChart();
        });

        document.getElementById("cardFulfillmentTime").addEventListener("click", function() {
            var modal = new bootstrap.Modal(document.getElementById("fulfillmentTimeModal"));
            modal.show();
            renderFulfillmentTimeModalChart();
        });

        // Chart render functions with individual day values
        function renderP95WaitTimeModalChart() {
            const p95Data = {!! json_encode($p95WaitTimeData) !!};
            const labels = {!! json_encode($timeLabels) !!};

            const options = {
                series: [{
                    name: "P95 Wait Time",
                    data: p95Data
                }],
                chart: {
                    type: "line",
                    height: 350,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'inherit'
                },
                stroke: {
                    width: 3,
                    curve: "smooth",
                    colors: ["#7c3aed"]
                },
                markers: {
                    size: 6,
                    colors: ['#7c3aed'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 8
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val + ' min';
                    },
                    offsetY: -10,
                    style: {
                        fontSize: '11px',
                        fontWeight: 600,
                        colors: ['#7c3aed']
                    }
                },
                xaxis: {
                    categories: labels,
                    labels: {
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(val) {
                            return val + ' min';
                        },
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    },
                    title: {
                        text: 'Minutes',
                        style: {
                            color: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                grid: {
                    borderColor: '#f3f4f6',
                    strokeDashArray: 4
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + ' minutes';
                        }
                    }
                }
            };

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

        function renderAvgWaitTimeModalChart() {
            const avgData = {!! json_encode($avgWaitTimeData) !!};
            const labels = {!! json_encode($timeLabels) !!};

            const options = {
                series: [{
                    name: "Avg Wait Time",
                    data: avgData
                }],
                chart: {
                    type: "line",
                    height: 350,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'inherit'
                },
                stroke: {
                    width: 3,
                    curve: "smooth",
                    colors: ["#10b981"]
                },
                markers: {
                    size: 6,
                    colors: ['#10b981'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 8
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val + ' min';
                    },
                    offsetY: -10,
                    style: {
                        fontSize: '11px',
                        fontWeight: 600,
                        colors: ['#10b981']
                    }
                },
                xaxis: {
                    categories: labels,
                    labels: {
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(val) {
                            return val + ' min';
                        },
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    },
                    title: {
                        text: 'Minutes',
                        style: {
                            color: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                grid: {
                    borderColor: '#f3f4f6',
                    strokeDashArray: 4
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + ' minutes';
                        }
                    }
                }
            };

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

        function renderFulfillmentTimeModalChart() {
            const fulfillmentData = {!! json_encode($fulfillmentTimeData) !!};
            const labels = {!! json_encode($timeLabels) !!};

            const options = {
                series: [{
                    name: "Fulfillment Time",
                    data: fulfillmentData
                }],
                chart: {
                    type: "line",
                    height: 350,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'inherit'
                },
                stroke: {
                    width: 3,
                    curve: "smooth",
                    colors: ["#818cf8"]
                },
                markers: {
                    size: 6,
                    colors: ['#818cf8'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 8
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val + ' min';
                    },
                    offsetY: -10,
                    style: {
                        fontSize: '11px',
                        fontWeight: 600,
                        colors: ['#818cf8']
                    }
                },
                xaxis: {
                    categories: labels,
                    labels: {
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(val) {
                            return val + ' min';
                        },
                        style: {
                            colors: '#6b7280',
                            fontSize: '12px'
                        }
                    },
                    title: {
                        text: 'Minutes',
                        style: {
                            color: '#6b7280',
                            fontSize: '12px'
                        }
                    }
                },
                grid: {
                    borderColor: '#f3f4f6',
                    strokeDashArray: 4
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + ' minutes';
                        }
                    }
                }
            };

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

        // Initial render of modal charts when modal opens
        $('#p95WaitTimeModal').on('shown.bs.modal', function() {
            renderP95WaitTimeModalChart();
        });

        $('#avgWaitTimeModal').on('shown.bs.modal', function() {
            renderAvgWaitTimeModalChart();
        });

        $('#fulfillmentTimeModal').on('shown.bs.modal', function() {
            renderFulfillmentTimeModalChart();
        });

        // Top Vendors Chart
        const topVendorsData = {!! json_encode($topVendors->pluck('order_count')) !!};
        const topVendorsLabels = {!! json_encode($topVendors->pluck('vendor_name')) !!};

        const topVendorsChartOptions = {
            series: [{
                name: 'Orders',
                data: topVendorsData
            }],
            chart: {
                type: 'bar',
                height: 300,
                toolbar: {
                    show: false
                },
                fontFamily: 'inherit'
            },
            plotOptions: {
                bar: {
                    borderRadius: 6,
                    columnWidth: '40px',
                    dataLabels: {
                        position: 'top',
                    },
                }
            },
            colors: ['#818cf8'],
            dataLabels: {
                enabled: true,
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ['#111827'],
                    fontWeight: '600'
                },
                formatter: function(val) {
                    return val;
                }
            },
            grid: {
                borderColor: '#f3f4f6',
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                },
                xaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            xaxis: {
                categories: topVendorsLabels,
                labels: {
                    style: {
                        colors: '#6b7280',
                        fontSize: '11px'
                    },
                    rotate: -45,
                    rotateAlways: true,
                    trim: true,
                    maxHeight: 80
                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                tooltip: {
                    enabled: false
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: '#6b7280',
                        fontSize: '11px'
                    },
                    formatter: function(val) {
                        return Math.floor(val);
                    }
                },
                axisBorder: {
                    show: false
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px'
                },
                y: {
                    formatter: function(val) {
                        return val + " orders";
                    }
                }
            }
        };

        const topVendorsChart = new ApexCharts(document.querySelector("#topVendorsChart"), topVendorsChartOptions);
        topVendorsChart.render();

        // Peak Hours Chart
        const peakHoursData = {!! json_encode($peakHours->pluck('count')) !!};
        const peakHoursLabels = {!! json_encode(
            $peakHours->map(function ($item) {
                return $item['hour'];
            }),
        ) !!};

        const peakHoursChartOptions = {
            series: [{
                name: 'Orders',
                data: peakHoursData
            }],
            chart: {
                type: 'bar',
                height: 300,
                toolbar: {
                    show: false
                },
                fontFamily: 'inherit'
            },
            plotOptions: {
                bar: {
                    borderRadius: 6,
                    columnWidth: '20px',
                }
            },
            colors: ['#818cf8'],
            dataLabels: {
                enabled: false
            },
            grid: {
                borderColor: '#f3f4f6',
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                },
                xaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            xaxis: {
                categories: peakHoursLabels,
                labels: {
                    style: {
                        colors: '#6b7280',
                        fontSize: '10px'
                    },
                    formatter: function(value) {
                        return parseInt(value) % 3 === 0 ? value + ':00' : '';
                    }
                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                title: {
                    text: 'Hour of Day',
                    style: {
                        color: '#6b7280',
                        fontSize: '12px'
                    }
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: '#6b7280',
                        fontSize: '11px'
                    }
                },
                axisBorder: {
                    show: false
                },
                title: {
                    text: 'Orders',
                    style: {
                        color: '#6b7280',
                        fontSize: '12px'
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px'
                },
                x: {
                    formatter: function(val) {
                        return val + ':00';
                    }
                },
                y: {
                    formatter: function(val) {
                        return val + " orders";
                    }
                }
            }
        };

        const peakHoursChart = new ApexCharts(document.querySelector("#peakHoursChart"), peakHoursChartOptions);
        peakHoursChart.render();
    </script>
@endpush