@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">

                <!-- Stats Cards -->
                <div class="row g-5 g-xl-8 mb-8">
                    <!-- Total Quotes -->
                    <div class="col-xl-3">
                        <div class="card card-flush bg-primary text-white">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="ki-duotone ki-file fs-2x text-white me-4">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <div>
                                        <div class="fs-2hx fw-bold">{{ number_format($totalQuotes) }}</div>
                                        <div class="fw-semibold opacity-75">Total Quotes</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Success Rate -->
                    <div class="col-xl-3">
                        <div class="card card-flush bg-success text-white">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="ki-duotone ki-check-circle fs-2x text-white me-4">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <div>
                                        <div class="fs-2hx fw-bold">{{ $quoteSuccessRate }}%</div>
                                        <div class="fw-semibold opacity-75">Quote Success Rate</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Booking Requests -->
                    <div class="col-xl-3">
                        <div class="card card-flush bg-info text-white">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="ki-duotone ki-basket fs-2x text-white me-4">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <div>
                                        <div class="fs-2hx fw-bold">{{ number_format($totalBookingRequests) }}</div>
                                        <div class="fw-semibold opacity-75">Booking Requests</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TQL Success -->
                    <div class="col-xl-3">
                        <div class="card card-flush bg-warning text-white">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="ki-duotone ki-truck fs-2x text-white me-4">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <div>
                                        <div class="fs-2hx fw-bold">{{ $tqlSuccessRate }}%</div>
                                        <div class="fw-semibold opacity-75">TQL Success Rate</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts Row -->
                <div class="row g-5 g-xl-8 mb-8">
                    <!-- Quote Status Chart -->
                    <div class="col-xl-6">
                        <div class="card card-flush h-md-100">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold fs-3 mb-1">Quote Status Distribution</span>
                                </h3>
                            </div>
                            <div class="card-body pt-0">
                                <div id="quoteStatusChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Booking Status Chart -->
                    <div class="col-xl-6">
                        <div class="card card-flush h-md-100">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold fs-3 mb-1">Booking Request Status</span>
                                </h3>
                            </div>
                            <div class="card-body pt-0">
                                <div id="bookingStatusChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Monthly Trends -->
                <div class="row g-5 g-xl-8 mb-8">
                    <div class="col-xl-12">
                        <div class="card card-flush">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold fs-3 mb-1">Monthly Performance Trends</span>
                                </h3>
                            </div>
                            <div class="card-body pt-0">
                                <div id="monthlyTrendsChart" style="height: 350px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity Row -->
                <div class="row g-5 g-xl-8 mb-8">
                    <!-- Recent Quotes -->
                    <div class="col-xl-6">
                        <div class="card card-flush h-md-100">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold fs-3 mb-1">Recent Quotes</span>
                                    <span class="text-muted mt-1 fw-semibold fs-6">{{ $recentQuotes->count() }} total</span>
                                </h3>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                        <thead>
                                            <tr class="fw-bold text-muted">
                                                <th class="min-w-150px">User</th>
                                                <th class="min-w-140px">Route</th>
                                                <th class="min-w-100px">Status</th>
                                                <th class="min-w-100px text-end">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentQuotes as $quote)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-45px me-5">
                                                            <span class="symbol-label bg-light-primary">
                                                                {{ substr($quote->user->fullname ?? 'N/A', 0, 1) }}
                                                            </span>
                                                        </div>
                                                        <div class="d-flex justify-content-start flex-column">
                                                            <span class="text-dark fw-bold text-hover-primary fs-6">
                                                                {{ $quote->user->fullname ?? 'N/A' }}
                                                            </span>
                                                            <span class="text-muted fw-semibold text-muted d-block fs-7">
                                                                {{ $quote->user->email ?? 'N/A' }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-dark fw-bold d-block fs-6">
                                                        {{ $quote->pickupDetail->city ?? 'N/A' }} → {{ $quote->deliveryDetail->city ?? 'N/A' }}
                                                    </span>
                                                    <span class="text-muted fw-semibold d-block fs-7">
                                                        {{ $quote->pickupDetail->state ?? '' }} to {{ $quote->deliveryDetail->state ?? '' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="badge badge-{{ $quote->status == 'completed' ? 'success' : ($quote->status == 'failed' ? 'danger' : 'warning') }} fs-7 fw-bold">
                                                        {{ ucfirst($quote->status) }}
                                                    </span>
                                                </td>
                                                <td class="text-end">
                                                    <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 text-muted py-10">
                                                    <i class="ki-duotone ki-information fs-2x text-muted me-4">
                                                        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                                    </i>
                                                    No quotes found
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Bookings -->
                    <div class="col-xl-6">
                        <div class="card card-flush h-md-100">
                            <div class="card-header border-0">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold fs-3 mb-1">Recent Booking Requests</span>
                                    <span class="text-muted mt-1 fw-semibold fs-6">{{ $recentBookings->count() }} total</span>
                                </h3>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                        <thead>
                                            <tr class="fw-bold text-muted">
                                                <th class="min-w-150px">User</th>
                                                <th class="min-w-120px">Carrier</th>
                                                <th class="min-w-100px">Amount</th>
                                                <th class="min-w-100px">Status</th>
                                                <th class="min-w-100px text-end">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentBookings as $booking)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-45px me-5">
                                                            <span class="symbol-label bg-light-info">
                                                                {{ substr($booking->user->fullname ?? 'N/A', 0, 1) }}
                                                            </span>
                                                        </div>
                                                        <div class="d-flex justify-content-start flex-column">
                                                            <span class="text-dark fw-bold text-hover-primary fs-6">
                                                                {{ $booking->user->fullname ?? 'N/A' }}
                                                            </span>
                                                            <span class="text-muted fw-semibold text-muted d-block fs-7">
                                                                {{ $booking->user->email ?? 'N/A' }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-dark fw-bold d-block fs-6">
                                                        {{ $booking->carrier_data['carrier'] ?? 'N/A' }}
                                                    </span>
                                                    <span class="text-muted fw-semibold d-block fs-7">
                                                        {{ $booking->carrier_data['serviceLevelDescription'] ?? 'Standard' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="text-dark fw-bold d-block fs-6">
                                                        ${{ number_format($booking->total_amount, 2) }}
                                                    </span>
                                                </td>
                                                <td>
                                                    @php
                                                        $statusColors = [
                                                            'pending' => 'warning',
                                                            'approved' => 'info', 
                                                            'confirmed' => 'success',
                                                            'rejected' => 'danger'
                                                        ];
                                                    @endphp
                                                    <span class="badge badge-{{ $statusColors[$booking->status] }} fs-7 fw-bold">
                                                        {{ ucfirst($booking->status) }}
                                                    </span>
                                                </td>
                                                <td class="text-end">
                                                    <span class="text-muted fw-semibold fs-7">
                                                        {{ $booking->created_at->format('M d, Y') }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="5" class="text-center text-muted py-10">
                                                    <i class="ki-duotone ki-information fs-2x text-muted me-4">
                                                        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                                    </i>
                                                    No booking 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/apexcharts"></script>
<script>
    // Quote Status Chart
    new ApexCharts(document.querySelector("#quoteStatusChart"), {
        series: {!! json_encode(array_values($quoteStatusDistribution)) !!},
        chart: { type: 'donut', height: 300 },
        labels: {!! json_encode(array_keys($quoteStatusDistribution)) !!},
        colors: ['#28a745', '#dc3545', '#ffc107'],
        legend: { position: 'bottom' },
        plotOptions: { pie: { donut: { size: '65%' } } }
    }).render();

    // Booking Status Chart
    new ApexCharts(document.querySelector("#bookingStatusChart"), {
        series: {!! json_encode(array_values($bookingStatusDistribution)) !!},
        chart: { type: 'pie', height: 300 },
        labels: {!! json_encode(array_keys($bookingStatusDistribution)) !!},
        colors: ['#ffc107', '#17a2b8', '#28a745', '#dc3545'],
        legend: { position: 'bottom' }
    }).render();

    // Monthly Trends Chart
    new ApexCharts(document.querySelector("#monthlyTrendsChart"), {
        series: [
            { name: 'Total Quotes', data: {!! json_encode($monthlyData->pluck('quotes')) !!} },
            { name: 'Successful Quotes', data: {!! json_encode($monthlyData->pluck('successful_quotes')) !!} },
            { name: 'Booking Requests', data: {!! json_encode($monthlyData->pluck('bookings')) !!} },
            { name: 'Confirmed Bookings', data: {!! json_encode($monthlyData->pluck('confirmed_bookings')) !!} }
        ],
        chart: { type: 'line', height: 350, zoom: { enabled: false } },
        stroke: { curve: 'smooth', width: 3 },
        colors: ['#667eea', '#28a745', '#ffc107', '#17a2b8'],
        xaxis: { categories: {!! json_encode($monthlyData->pluck('month')) !!} },
        markers: { size: 5 },
        legend: { position: 'top' }
    }).render();
</script>
@endpush