@extends('user.layouts.app')
@section('title', 'Dashboard')
<style>
    /* Custom badge colors */

</style>
@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/bookingpopup.css') }}">
    <main class="ark-dashboard">
        <div class="container-fluid">

       
            <!-- Page Title -->
            <div class="ark__h1--wrap">
                <div class="page-title">
                    <h1>Dashboard</h1>
                    <p>Welcome back! Here's your logistics overview</p>
                </div>
            </div>

            <!-- Quote Stats Cards -->
            <div class="ark__quote-stats-row">
                <div class="ark__quote-stat-card ark__total">
                    <div class="ark__stat-card-content ark__stat-blue">
                        <div class="ark__stat-text">
                            <span>Total Quotes</span>
                            <h2>{{ $totalQuotes }}</h2>
                        </div>
                        <div class="ark__stat-icon">
                            <img src="{{ asset('assets/images/quote-blue.svg') }}" alt="Total Quotes" />
                        </div>
                    </div>
                </div>
                <div class="ark__quote-stat-card ark__completed">
                    <div class="ark__stat-card-content ark__stat-green">
                        <div class="ark__stat-text">
                            <span>Confirmed Bookings</span>
                            <h2>{{ $completedQuotes }}</h2>
                        </div>
                        <div class="ark__stat-icon">
                            <img src="{{ asset('assets/images/quote-green.svg') }}" alt="Completed Quotes" />
                        </div>
                    </div>
                </div>
                <div class="ark__quote-stat-card ark__pending">
                    <div class="ark__stat-card-content ark__stat-orange">
                        <div class="ark__stat-text">
                            <span>Pending Bookings</span>
                            <h2>{{ $pendingQuotes }}</h2>
                        </div>
                        <div class="ark__stat-icon">
                            <img src="{{ asset('assets/images/quote-orange.svg') }}" alt="Pending Quotes" />
                        </div>
                    </div>
                </div>
                <div class="ark__quote-stat-card ark__rejected">
                    <div class="ark__stat-card-content ark__stat-red">
                        <div class="ark__stat-text">
                            <span>Rejected Bookings</span>
                            <h2>{{ $rejectedQuotes }}</h2>
                        </div>
                        <div class="ark__stat-icon">
                            <img src="{{ asset('assets/images/quote-red.svg') }}" alt="Rejected Quotes" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Row -->
            <div class="ark__dashboard-chart-row">

                <!-- 1. Booking Request Overview -->
                <div class="common-title ark__dashboard-chart-card">
                    <h5>Booking Request Overview</h5>
                    <div class="ark__card">
                        <div class="ark__booking-chart">
                            <div class="ark_booking-header">
                                <div class="time-filter">
                                    <img src="{{ asset('assets/images/time_icon.svg') }}" alt="time">
                                    <select id="timePeriodFilter"
                                        class="form-select form-select-sm border-0 bg-transparent shadow-none"
                                        style="width: auto; display: inline-block;">
                                        <option value="all">All time</option>
                                        <option value="6months" selected>Last 6 months</option>
                                        <option value="3months">Last 3 months</option>
                                        <option value="30days">Last 30 days</option>
                                        <option value="this_month">This month</option>
                                        <option value="last_month">Last month</option>
                                    </select>
                                </div>
                            </div>
                            <div class="bar-chart">
                                <canvas id="bookingsChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. TQL Carrier Usage -->
                <div class="common-title ark__dashboard-chart-card">
                    <h5>TQL Carrier Usage</h5>
                    <div class="ark__card">
                        <div class="donutChart">
                            <canvas id="tqlChart"></canvas>
                        </div>
                        <div class="ark-legend-box">
                            <div class="ark-legend-row">
                                <span class="ark-dot-lable">
                                    <span class="ark-dot" style="background: #C04657;"></span>
                                    <span class="ark-label">TQL</span>
                                </span>
                                <span>{{ $tqlData['tql_count'] }} ({{ $tqlData['tql_percentage'] }}%)</span>
                            </div>
                            <div class="ark-legend-row">
                                <span class="ark-dot-lable">
                                    <span class="ark-dot" style="background: #0067F1;"></span>
                                    <span class="ark-label">Other Carriers</span>
                                </span>
                                <span>{{ $tqlData['other_count'] }} ({{ $tqlData['other_percentage'] }}%)</span>
                            </div>
                            <div class="ark-legend-row">
                                <span class="ark-dot-lable">
                                    <span class="ark-dot" style="background: #6c757d;"></span>
                                    <span class="ark-label">Total Bookings</span>
                                </span>
                                <span>{{ $tqlData['total_bookings'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. Track Booking Status -->
                <div class="common-title ark__dashboard-chart-card">
                    <h5>Track Booking Status</h5>
                    <div class="ark__card">
                        <div class="donutChart-1">
                            <canvas id="bookingStatusChart"></canvas>
                            <div class="ark-chart-center">
                                <div class="ark-total-number">
                                    {{ $orderStatusData['pending'] + $orderStatusData['approved'] + $orderStatusData['completed'] }}
                                </div>
                                <div class="ark-total-label">Total Bookings</div>
                            </div>
                        </div>
                        <div class="ark-stats-container">
                            <div class="ark-stat-item">
                                <div class="ark-stat-number ark-pending">{{ $orderStatusData['pending'] }}</div>
                                <div class="ark-stat-label">Pending Review</div>
                            </div>
                            <div class="ark-stat-item">
                                <div class="ark-stat-number ark-approved">{{ $orderStatusData['approved'] }}</div>
                                <div class="ark-stat-label">Approved</div>
                            </div>
                            <div class="ark-stat-item">
                                <div class="ark-stat-number ark-completed">{{ $orderStatusData['completed'] }}</div>
                                <div class="ark-stat-label">Confirmed</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Recent Bookings -->
            <div class="ark__h1--wrap">
                <div class="common-title">
                    <h5>Recent Booking Requests</h5>
                </div>
                <button class="ark__create--quote-btn" id="openDrawerBtn">
                    <img src="{{ asset('assets/images/plus.svg') }}" alt="img">
                    <p>Create Quote</p>
                </button>

                <!-- Include the Quote Wizard Component -->
                @include('components.quote-wizard', [
                    'locationTypes' => $locationTypes,
                    'countries' => $countries,
                    'states' => $states,
                    'unitTypes' => $unitTypes,
                    'freightClasses' => $freightClasses,
                ])
            </div>

            <div class="content-wrapper">
                @if ($recentBookings->isEmpty())
                    <div class="empty-state">
                        <h3>You haven't made any booking requests yet.</h3>
                        <p>Start by creating a quote and requesting a booking.</p>
                    </div>
                @else
                    <div class="common-table card">
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <div class="table-head-wp">
                                    <div class="table-search">
                                        <span>
                                            <svg width="23" height="23" viewBox="0 0 23 23" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M21.0713 21.0713L15.8989 15.8989M1.07129 9.69198C1.07129 4.9309 4.9309 1.07129 9.69198 1.07129C14.4531 1.07129 18.3127 4.9309 18.3127 9.69198C18.3127 14.4531 14.4531 18.3127 9.69198 18.3127C4.9309 18.3127 1.07129 14.4531 1.07129 9.69198Z"
                                                    stroke="#545454" stroke-width="2.14286" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </span>
                                        <input type="text" id="customSearchBox" placeholder="Search...">
                                        <button type="button" class="search-clear-btn"
                                            style="display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px;">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 5L5 15M5 5L15 15" stroke="#545454" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="table-btns d-flex align-items-center" id="statusFilters">
                                        <button type="button" class="btn all-btn active-btn">All</button>
                                        <button type="button" class="btn pending-btn">
                                            Pending
                                        </button>
                                        <button type="button" class="btn cancel-btn">
                                            Rejected
                                        </button>
                                        <button type="button" class="btn approve-btn">
                                            Approved
                                        </button>
                                        <button type="button" class="btn confirm-btn">
                                            Confirmed
                                        </button>
                                    </div>
                                </div>
                                <table class="table table-hover mb-0" id="recentBookingsTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Booking ID</th>
                                            <th>Origin to Destination</th>
                                            <th>Carrier</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Requested</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($recentBookings as $booking)
                                            @php
                                                $quote = $booking->quote;
                                                $carrier = $booking->carrier_data['carrier'] ?? '—';
                                                $amount = number_format($booking->total_amount, 2);
                                                $status = $booking->status;
                                            @endphp
                                            <tr>
                                                <td><strong>#{{ $booking->id }}</strong></td>
                                                <td>
                                                    <small>
                                                        {{ $quote->pickupDetail->city ?? 'N/A' }},
                                                        {{ $quote->pickupDetail->state ?? '' }}
                                                        to
                                                        {{ $quote->deliveryDetail->city ?? 'N/A' }},
                                                        {{ $quote->deliveryDetail->state ?? '' }}
                                                    </small>
                                                </td>
                                                <td>
                                                    {{ $carrier }}
                                                    @if (stripos($carrier, 'TQL') !== false)
                                                        <span class="badge bg-danger ms-1">TQL</span>
                                                    @endif
                                                </td>
                                                <td>${{ $amount }}</td>
                                                <td>
                                                    @php
                                                        $statusColors = [
                                                            'pending' => 'warning',
                                                            'approved' => 'info',
                                                            'confirmed' => 'success',
                                                            'rejected' => 'danger',
                                                        ];
                                                    @endphp
                                                    <span class="badge bg-{{ $statusColors[$status] ?? 'secondary' }}">
                                                        {{ ucfirst($status) }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <small class="">
                                                        {{ $booking->created_at->format('M d, Y') }}
                                                    </small>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </main>
@endsection

@push('styles')
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<style>

</style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let bookingsChart = null;

            function updateBookingsChart(period = '6months') {
                const canvas = document.getElementById('bookingsChart');
                const parent = canvas.parentElement;

                if (!document.getElementById('chartLoading')) {
                    const loading = document.createElement('div');
                    loading.id = 'chartLoading';
                    loading.innerHTML = '<p class="text-center text-muted">Loading chart...</p>';
                    loading.style.position = 'absolute';
                    loading.style.top = '50%';
                    loading.style.left = '50%';
                    loading.style.transform = 'translate(-50%, -50%)';
                    parent.style.position = 'relative';
                    parent.appendChild(loading);
                }

                fetch('{{ route('dashboard.quote-chart-data') }}?period=' + period + '&_=' + Date.now())
                    .then(res => {
                        if (!res.ok) throw new Error('Network error');
                        return res.json();
                    })
                    .then(data => {
                        const loading = document.getElementById('chartLoading');
                        if (loading) loading.remove();

                        if (bookingsChart) bookingsChart.destroy();

                        bookingsChart = new Chart(canvas, {
                            type: 'bar',
                            data: {
                                labels: data.labels || [],
                                datasets: [{
                                        label: 'Total Bookings',
                                        data: data.total || [],
                                        backgroundColor: '#0067F1CC',
                                        barThickness: 20,
                                        borderRadius: 4
                                    },
                                    {
                                        label: 'Approved',
                                        data: data.approved || [],
                                        backgroundColor: '#28a745CC',
                                        barThickness: 20,
                                        borderRadius: 4
                                    },
                                    {
                                        label: 'Pending',
                                        data: data.pending || [],
                                        backgroundColor: '#F68D2BCC',
                                        barThickness: 20,
                                        borderRadius: 4
                                    },
                                    {
                                        label: 'Confirmed',
                                        data: data.confirmed || [],
                                        backgroundColor: '#17a2b8CC',
                                        barThickness: 20,
                                        borderRadius: 4
                                    },
                                    {
                                        label: 'Rejected',
                                        data: data.rejected || [],
                                        backgroundColor: '#E53E3ECC',
                                        barThickness: 20,
                                        borderRadius: 4
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                interaction: {
                                    mode: 'index',
                                    intersect: false
                                },
                                plugins: {
                                    legend: {
                                        position: 'bottom',
                                        labels: {
                                            usePointStyle: true,
                                            padding: 20,
                                            font: {
                                                size: 12
                                            },
                                            boxWidth: 12
                                        }
                                    },
                                    tooltip: {
                                        backgroundColor: 'rgba(0,0,0,0.85)',
                                        cornerRadius: 8,
                                        padding: 12,
                                        titleColor: '#fff',
                                        bodyColor: '#fff',
                                        borderColor: '#fff',
                                        borderWidth: 1,
                                        callbacks: {
                                            label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y}`
                                        }
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        grid: {
                                            borderDash: [5, 5],
                                            color: '#e9ecef'
                                        },
                                        ticks: {
                                            stepSize: 1
                                        }
                                    },
                                    x: {
                                        grid: {
                                            display: false
                                        },
                                        ticks: {
                                            maxRotation: 45,
                                            minRotation: 45
                                        }
                                    }
                                }
                            }
                        });
                    })
                    .catch(err => {
                        console.error(err);
                        const loading = document.getElementById('chartLoading');
                        if (loading) loading.innerHTML = '<p class="text-danger">Failed to load chart</p>';
                    });
            }

            updateBookingsChart('6months');

            document.getElementById('timePeriodFilter').addEventListener('change', function() {
                updateBookingsChart(this.value);
            });

            // TQL Usage Chart
            new Chart(document.getElementById('tqlChart'), {
                type: 'doughnut',
                data: {
                    labels: ['TQL', 'Other Carriers'],
                    datasets: [{
                        data: [{{ $tqlData['tql_count'] }}, {{ $tqlData['other_count'] }}],
                        backgroundColor: ['#C04657', '#0067F1'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '60%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const total = {{ $tqlData['total_bookings'] }};
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value} bookings (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });

            // Booking Status Chart
            new Chart(document.getElementById('bookingStatusChart'), {
                type: 'doughnut',
                data: {
                    labels: ['Pending Review', 'Approved', 'Confirmed'],
                    datasets: [{
                        data: [{{ $orderStatusData['pending'] }},
                            {{ $orderStatusData['approved'] }},
                            {{ $orderStatusData['completed'] }}
                        ],
                        backgroundColor: ['#F68D2B', '#28a745', '#0067F1'],
                        borderWidth: 0,
                        borderRadius: 13,
                        spacing: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '75%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.parsed}`;
                                }
                            }
                        }
                    }
                }
            });

            // Initialize DataTable for recent bookings
            const table = $('#recentBookingsTable').DataTable({
                pageLength: 5,
                order: [

                ],
                paging: true,
                info: false,
                dom: 'rt',
                language: {
                    emptyTable: "No recent bookings found",
                    zeroRecords: "No matching bookings found"
                }
            });

            // Get search elements
            const searchBox = document.getElementById('customSearchBox');
            const clearBtn = document.querySelector('.search-clear-btn');

            // Custom search functionality
            if (searchBox) {
                searchBox.addEventListener('keyup', function() {
                    const searchValue = this.value;

                    // Perform search on DataTable
                    table.search(searchValue).draw();

                    // Show/hide clear button
                    if (clearBtn) {
                        clearBtn.style.display = searchValue.length > 0 ? 'block' : 'none';
                    }
                });
            }

            // Clear button functionality
            if (clearBtn) {
                clearBtn.addEventListener('click', function() {
                    if (searchBox) {
                        searchBox.value = '';
                        table.search('').draw();
                        this.style.display = 'none';
                        searchBox.focus();
                    }
                });
            }

            // Status filter buttons
            const statusButtons = document.querySelectorAll('#statusFilters button');

            statusButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove active class from all buttons
                    statusButtons.forEach(btn => btn.classList.remove('active-btn'));

                    // Add active class to clicked button
                    this.classList.add('active-btn');

                    // Get filter value from button class
                    let filterValue = '';
                    if (this.classList.contains('pending-btn')) {
                        filterValue = 'Pending';
                    } else if (this.classList.contains('cancel-btn')) {
                        filterValue = 'Rejected';
                    } else if (this.classList.contains('confirm-btn')) {
                        filterValue = 'Confirmed';
                    }
                    // 'All' button - filterValue remains empty

                    // Apply filter to status column (index 4)
                    table.column(4).search(filterValue).draw();
                });
            });
        });
    </script>
@endpush