@extends('admin.layouts.base')

@section('title', 'Admin Dashboard')

@section('content')
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <div class="d-flex flex-column flex-column-fluid">
        <!-- Toolbar -->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center me-3">
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                        Dashboard Overview
                    </h1>
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">Admin</li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-500 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Dashboard</li>
                    </ul>
                </div>
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <a href="{{ route('admin.booking-requests.index') }}" class="btn btn-sm fw-bold btn-primary">
                        <i class="ki-duotone ki-check-square fs-2 me-2"></i>
                        Manage Bookings
                    </a>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-fluid">

                <!-- Quotes and Bookings Stats -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Platform Overview</h3>
                    </div>
                    
                    <!-- Total Users -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(59, 130, 246, 0.1);
                            --icon-color: #3b82f6;
                            --text-color: #1e40af;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-profile-circle fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($totalUsers) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Total Users</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Total Quotes -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(16, 185, 129, 0.1);
                            --icon-color: #10b981;
                            --text-color: #047857;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-document fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($totalQuotes) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Total Quotes</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Booking Requests -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(245, 158, 11, 0.1);
                            --icon-color: #f59e0b;
                            --text-color: #b45309;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-check-square fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ $totalBookingRequests }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Booking Requests</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Completed Quotes -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(139, 92, 246, 0.1);
                            --icon-color: #8b5cf6;
                            --text-color: #6d28d9;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-basket fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($successfulQuotes) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Completed Quotes</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Booking Status -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Booking Status Distribution</h3>
                    </div>
                    
                    @php
                        $bookingIcons = [
                            'pending' => 'ki-clock',
                            'approved' => 'ki-check',
                            'confirmed' => 'ki-shield-tick',
                            'rejected' => 'ki-cross'
                        ];
                        $bookingColors = [
                            'pending' => ['icon-bg' => 'rgba(245, 158, 11, 0.1)', 'icon-color' => '#f59e0b', 'text-color' => '#b45309'],
                            'approved' => ['icon-bg' => 'rgba(59, 130, 246, 0.1)', 'icon-color' => '#3b82f6', 'text-color' => '#1e40af'],
                            'confirmed' => ['icon-bg' => 'rgba(16, 185, 129, 0.1)', 'icon-color' => '#10b981', 'text-color' => '#047857'],
                            'rejected' => ['icon-bg' => 'rgba(239, 68, 68, 0.1)', 'icon-color' => '#ef4444', 'text-color' => '#b91c1c']
                        ];
                        $bookingLabels = [
                            'pending' => 'Pending Bookings',
                            'approved' => 'Approved Bookings',
                            'confirmed' => 'Confirmed Bookings',
                            'rejected' => 'Rejected Bookings'
                        ];
                    @endphp
                    
                    @foreach(['pending', 'approved', 'confirmed', 'rejected'] as $status)
                    @php
                        $colors = $bookingColors[$status];
                        $icon = $bookingIcons[$status];
                        $label = $bookingLabels[$status];
                        $count = $bookingStatusDistribution[$status] ?? 0;
                    @endphp
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: {{ $colors['icon-bg'] }};
                            --icon-color: {{ $colors['icon-color'] }};
                            --text-color: {{ $colors['text-color'] }};
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone {{ $icon }} fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ $count }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">{{ $label }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Warehouse Statistics -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Warehouse Operations</h3>
                    </div>
                    
                    <!-- Total Warehouses -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(168, 85, 247, 0.1);
                            --icon-color: #a855f7;
                            --text-color: #7c3aed;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-home-3 fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($totalWarehouses) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Total Warehouses</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Total Warehouse Bookings -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(6, 182, 212, 0.1);
                            --icon-color: #06b6d4;
                            --text-color: #0891b2;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-home-2 fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($totalWarehouseBookings) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Warehouse Bookings</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @php
                        $warehouseIcons = [
                            'pending' => 'ki-clock',
                            'confirmed' => 'ki-shield-tick',
                            'active' => 'ki-play',
                            'completed' => 'ki-check-square'
                        ];
                        $warehouseColors = [
                            'pending' => ['icon-bg' => 'rgba(245, 158, 11, 0.1)', 'icon-color' => '#f59e0b', 'text-color' => '#b45309'],
                            'confirmed' => ['icon-bg' => 'rgba(16, 185, 129, 0.1)', 'icon-color' => '#10b981', 'text-color' => '#047857'],
                            'active' => ['icon-bg' => 'rgba(59, 130, 246, 0.1)', 'icon-color' => '#3b82f6', 'text-color' => '#1e40af'],
                            'completed' => ['icon-bg' => 'rgba(100, 116, 139, 0.1)', 'icon-color' => '#64748b', 'text-color' => '#475569']
                        ];
                        $warehouseLabels = [
                            'pending' => 'Pending Warehouse',
                            'confirmed' => 'Confirmed Warehouse',
                            'active' => 'Active Warehouse',
                            'completed' => 'Completed Warehouse'
                        ];
                    @endphp
                    
                    @foreach(['pending', 'confirmed', 'active', 'completed'] as $status)
                    @php
                        $colors = $warehouseColors[$status];
                        $icon = $warehouseIcons[$status];
                        $label = $warehouseLabels[$status];
                        $count = $warehouseStatusDistribution[$status] ?? 0;
                    @endphp
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: {{ $colors['icon-bg'] }};
                            --icon-color: {{ $colors['icon-color'] }};
                            --text-color: {{ $colors['text-color'] }};
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone {{ $icon }} fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ $count }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">{{ $label }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Extension Requests -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Extension Requests</h3>
                    </div>
                    
                    <!-- Total Extensions -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: rgba(20, 184, 166, 0.1);
                            --icon-color: #14b8a6;
                            --text-color: #0f766e;
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone ki-calendar-add fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ number_format($totalExtensionRequests) }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">Total Extensions</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @php
                        $extensionIcons = [
                            'pending' => 'ki-clock',
                            'escalated' => 'ki-arrow-up',
                            'approved' => 'ki-check',
                            'rejected' => 'ki-cross'
                        ];
                        $extensionColors = [
                            'pending' => ['icon-bg' => 'rgba(245, 158, 11, 0.1)', 'icon-color' => '#f59e0b', 'text-color' => '#b45309'],
                            'escalated' => ['icon-bg' => 'rgba(59, 130, 246, 0.1)', 'icon-color' => '#3b82f6', 'text-color' => '#1e40af'],
                            'approved' => ['icon-bg' => 'rgba(16, 185, 129, 0.1)', 'icon-color' => '#10b981', 'text-color' => '#047857'],
                            'rejected' => ['icon-bg' => 'rgba(239, 68, 68, 0.1)', 'icon-color' => '#ef4444', 'text-color' => '#b91c1c']
                        ];
                        $extensionLabels = [
                            'pending' => 'Pending Extensions',
                            'escalated' => 'Escalated Extensions',
                            'approved' => 'Approved Extensions',
                            'rejected' => 'Rejected Extensions'
                        ];
                    @endphp
                    
                    @foreach(['pending', 'escalated', 'approved', 'rejected'] as $status)
                    @php
                        $colors = $extensionColors[$status];
                        $icon = $extensionIcons[$status];
                        $label = $extensionLabels[$status];
                        $count = $extensionStatusDistribution[$status] ?? 0;
                    @endphp
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stats-card" style="
                            --icon-bg: {{ $colors['icon-bg'] }};
                            --icon-color: {{ $colors['icon-color'] }};
                            --text-color: {{ $colors['text-color'] }};
                            --label-color: #4b5563;
                        ">
                            <div class="card-body d-flex align-items-center gap-5">
                                <div class="icon-wrapper">
                                    <i class="ki-duotone {{ $icon }} fs-2hx">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                                <div class="d-flex flex-column text-start">
                                    <span class="stats-number">{{ $count }}</span>
                                    <div class="mt-0">
                                        <span class="stats-label">{{ $label }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Charts Section -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Data Analytics</h3>
                    </div>
                    
                    <div class="col-xl-4 mb-4">
                        <div class="card chart-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-document fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Quote Status Distribution</h3>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="quoteStatusChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xl-4 mb-4">
                        <div class="card chart-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-home-3 fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Warehouse Booking Status</h3>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="warehouseStatusChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xl-4 mb-4">
                        <div class="card chart-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-calendar-add fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Extension Request Status</h3>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="extensionStatusChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Monthly Trends -->
                <div class="row mb-8">
                    <div class="col-xl-12">
                        <div class="card chart-card">
                            <div class="card-header">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-chart-simple fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Monthly Performance Trends</h3>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="monthly-chart-container">
                                    <canvas id="monthlyPerformanceChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activities -->
                <div class="row mb-8">
                    <div class="col-12">
                        <h3 class="section-title">Recent Activities</h3>
                    </div>
                    
                    <!-- Recent Quotes -->
                    <div class="col-xl-6 mb-4">
                        <div class="card recent-card h-md-100">
                            <div class="card-header align-items-center border-0">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-document fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Recent Quotes</h3>
                                </div>
                                <span class="text-muted mt-1 fw-semibold fs-6">{{ $recentQuotes->count() }} total</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table recent-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">User</th>
                                                <th class="text-center">Route</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentQuotes as $quote)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center px-5">
                                                        <div class="user-avatar bg-primary">
                                                            {{ substr($quote->user->fullname ?? 'N/A', 0, 1) }}
                                                        </div>
                                                        <div>
                                                            <div class="fw-bold fs-7">{{ $quote->user->fullname ?? 'N/A' }}</div>
                                                            <div class="text-muted fs-8">{{ $quote->user->email ?? 'N/A' }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    <div class="fw-bold fs-7">{{ $quote->pickupDetail->city ?? 'N/A' }} → {{ $quote->deliveryDetail->city ?? 'N/A' }}</div>
                                                    <div class="text-muted fs-8">{{ $quote->pickupDetail->state ?? '' }} to {{ $quote->deliveryDetail->state ?? '' }}</div>
                                                </td>
                                                <td class="text-center">
                                                    @php
                                                        $statusColors = [
                                                            'completed' => 'success',
                                                            'failed' => 'danger',
                                                            'pending' => 'warning',
                                                            'in_progress' => 'info'
                                                        ];
                                                        $color = $statusColors[$quote->status] ?? 'secondary';
                                                    @endphp
                                                    <span class="status-badge bg-{{ $color }}-light text-{{ $color }}">
                                                        {{ ucfirst($quote->status) }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-muted fw-semibold fs-7">
                                                        {{ $quote->created_at->format('M d, Y') }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="4" class="text-center py-6 text-muted">
                                                    <i class="ki-duotone ki-information fs-2x text-muted me-2"></i>
                                                    No quotes found
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recent Warehouse Bookings -->
                    <div class="col-xl-6 mb-4">
                        <div class="card recent-card h-md-100">
                            <div class="card-header align-items-center border-0">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-home-3 fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Recent Warehouse Bookings</h3>
                                </div>
                                <span class="text-muted mt-1 fw-semibold fs-6">{{ $recentWarehouseBookings->count() }} total</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table recent-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">User</th>
                                                <th class="text-center">Warehouse</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentWarehouseBookings as $warehouseBooking)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center px-5">
                                                        <div class="user-avatar bg-info">
                                                            {{ substr($warehouseBooking->user->fullname ?? 'N/A', 0, 1) }}
                                                        </div>
                                                        <div>
                                                            <div class="fw-bold fs-7">{{ $warehouseBooking->user->fullname ?? 'N/A' }}</div>
                                                            <div class="text-muted fs-8">{{ $warehouseBooking->user->email ?? 'N/A' }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center">
                                                    <span class="fw-bold fs-7">{{ $warehouseBooking->warehouse->name ?? 'N/A' }}</span>
                                                </td>
                                                <td class="text-center">
                                                    @php
                                                        $bookingColors = [
                                                            'completed' => 'success',
                                                            'pending' => 'warning',
                                                            'confirmed' => 'primary',
                                                            'active' => 'info'
                                                        ];
                                                        $color = $bookingColors[$warehouseBooking->booking_status] ?? 'danger';
                                                    @endphp
                                                    <span class="status-badge bg-{{ $color }}-light text-{{ $color }}">
                                                        {{ ucfirst($warehouseBooking->booking_status) }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-muted fw-semibold fs-7">
                                                        {{ $warehouseBooking->created_at->format('M d, Y') }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="4" class="text-center py-6 text-muted">
                                                    <i class="ki-duotone ki-information fs-2x text-muted me-2"></i>
                                                    No warehouse bookings found
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recent Extension Requests -->
                    <div class="col-xl-12 mb-4">
                        <div class="card recent-card h-md-100">
                            <div class="card-header align-items-center border-0">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-duotone ki-calendar-add fs-2hx text-primary">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <h3 class="fw-bold text-gray-900 my-0">Recent Extension Requests</h3>
                                </div>
                                <span class="text-muted mt-1 fw-semibold fs-6">{{ $recentExtensions->count() }} total</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table recent-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">User</th>
                                                <th class="text-center">Warehouse</th>
                                                <th class="text-center">Days</th>
                                                <th class="text-center">Amount</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentExtensions as $ext)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center px-5">
                                                        <div class="user-avatar bg-success">
                                                            {{ substr($ext->user->fullname ?? 'N/A', 0, 1) }}
                                                        </div>
                                                        <div>
                                                            <div class="fw-bold fs-7">{{ $ext->user->fullname ?? 'N/A' }}</div>
                                                            <div class="text-muted fs-8">{{ $ext->user->email ?? 'N/A' }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td  class="text-center">
                                                    <span class="fw-bold fs-7">{{ $ext->booking->warehouse->name ?? 'N/A' }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="fw-bold fs-7">{{ $ext->additional_days }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="fw-bold fs-7">${{ number_format($ext->additional_amount, 2) }}</span>
                                                </td>
                                                <td class="text-center">
                                                    @php
                                                        $extStatusColors = [
                                                            'pending' => 'warning',
                                                            'escalated' => 'info',
                                                            'approved' => 'success',
                                                            'rejected' => 'danger'
                                                        ];
                                                        $color = $extStatusColors[$ext->status] ?? 'secondary';
                                                    @endphp
                                                    <span class="status-badge bg-{{ $color }}-light text-{{ $color }}">
                                                        {{ ucfirst($ext->status) }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-muted fw-semibold fs-7">
                                                        {{ $ext->created_at->format('M d, Y') }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center py-6 text-muted">
                                                    <i class="ki-duotone ki-information fs-2x text-muted me-2"></i>
                                                    No extension requests found
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Enhanced chart colors
    const chartColors = {
        primary: '#4f46e5',
        secondary: '#8b5cf6',
        success: '#10b981',
        info: '#0ea5e9',
        warning: '#f59e0b',
        danger: '#ef4444',
        dark: '#1e293b',
        indigo: '#6366f1',
        teal: '#14b8a6'
    };

    // Quote Status Chart
    const quoteStatusData = @json($quoteStatusDistribution);
    const quoteStatusChart = new Chart(document.getElementById("quoteStatusChart"), {
        type: 'doughnut',
        data: {
            labels: Object.keys(quoteStatusData),
            datasets: [{
                data: Object.values(quoteStatusData),
                backgroundColor: [
                    chartColors.primary,
                    chartColors.success,
                    chartColors.warning,
                    chartColors.danger,
                    chartColors.info,
                    chartColors.secondary
                ],
                borderColor: '#ffffff',
                borderWidth: 3,
                borderRadius: 8,
                hoverOffset: 15
            }]
        },
        options: {
            cutout: '65%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true,
                        pointStyle: 'circle',
                        font: {
                            size: 11,
                            weight: '500'
                        }
                    }
                }
            },
            maintainAspectRatio: false
        }
    });

    // Warehouse Status Chart
    const warehouseStatusData = @json($warehouseStatusDistribution);
    const warehouseStatusChart = new Chart(document.getElementById("warehouseStatusChart"), {
        type: 'bar',
        data: {
            labels: Object.keys(warehouseStatusData),
            datasets: [{
                label: 'Warehouse Bookings',
                data: Object.values(warehouseStatusData),
                backgroundColor: [
                    chartColors.warning,
                    chartColors.success,
                    chartColors.info,
                    chartColors.secondary
                ],
                borderColor: '#ffffff',
                borderWidth: 2,
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        stepSize: 1
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            },
            maintainAspectRatio: false
        }
    });

    // Extension Status Chart
    const extensionStatusData = @json($extensionStatusDistribution);
    const extensionStatusChart = new Chart(document.getElementById("extensionStatusChart"), {
        type: 'bar',
        data: {
            labels: Object.keys(extensionStatusData),
            datasets: [{
                label: 'Extension Requests',
                data: Object.values(extensionStatusData),
                backgroundColor: [
                    chartColors.warning,
                    chartColors.info,
                    chartColors.success,
                    chartColors.danger
                ],
                borderColor: '#ffffff',
                borderWidth: 2,
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        stepSize: 1
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            },
            maintainAspectRatio: false
        }
    });

    // Monthly Performance Chart
    const monthlyData = @json($monthlyData);
    const months = monthlyData.map(item => item.month);
    const quotes = monthlyData.map(item => item.quotes);
    const successfulQuotes = monthlyData.map(item => item.successful_quotes);
    const bookings = monthlyData.map(item => item.bookings);
    const confirmedBookings = monthlyData.map(item => item.confirmed_bookings);
    const warehouseBookings = monthlyData.map(item => item.warehouse_bookings);
    const confirmedWarehouseBookings = monthlyData.map(item => item.confirmed_warehouse_bookings);

    const monthlyPerformanceChart = new Chart(document.getElementById("monthlyPerformanceChart"), {
        type: 'line',
        data: {
            labels: months,
            datasets: [
                {
                    label: "Total Quotes",
                    data: quotes,
                    borderColor: chartColors.primary,
                    backgroundColor: chartColors.primary + '20',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true
                },
                {
                    label: "Successful Quotes",
                    data: successfulQuotes,
                    borderColor: chartColors.success,
                    backgroundColor: chartColors.success + '20',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: false
                },
                {
                    label: "Total Bookings",
                    data: bookings,
                    borderColor: chartColors.dark,
                    backgroundColor: chartColors.dark + '20',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: false
                },
                {
                    label: "Confirmed Bookings",
                    data: confirmedBookings,
                    borderColor: chartColors.info,
                    backgroundColor: chartColors.info + '20',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            maintainAspectRatio: false
        }
    });
</script>
@endpush