@extends('layouts.business')

@section('title', 'Dashboard')
@section('breadcrumb_title', 'Dashboard')
@section('breadcrumb_title_route', route('business.dashboard'))
@section('breadcrumb_sub_title', 'Overview')
@section('page_title', 'Dashboard')

@section('content')
<style>
    .icon.icon-shape {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        position: relative !important;
    }
    .icon.icon-shape i {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        vertical-align: middle !important;
    }

    /* Responsive Text Sizes */
    .text-xs {
        font-size: 0.75rem;
    }

    @media (min-width: 576px) {
        .text-sm-md {
            font-size: 0.875rem;
        }
    }

    /* Table Responsive Styles - Horizontal Scroll */
    .booking-table-desktop .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        position: relative;
    }

    /* Custom scrollbar styling for better visibility */
    .booking-table-desktop .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .booking-table-desktop .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .booking-table-desktop .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .booking-table-desktop .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .booking-table-desktop .table {
        min-width: 800px;
        white-space: nowrap;
        margin-bottom: 0;
    }

    .booking-table-desktop .table th,
    .booking-table-desktop .table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Responsive Styles */
    @media (max-width: 575.98px) {
        .card-header h2 {
            font-size: 1.25rem !important;
        }
        .card-header h6 {
            font-size: 0.65rem !important;
        }
        .icon.icon-shape {
            width: 2.5rem !important;
            height: 2.5rem !important;
            font-size: 1rem !important;
        }
        .chart {
            height: 250px !important;
        }
        .table-responsive {
            font-size: 0.75rem;
        }
        .booking-card-mobile {
            display: block !important;
        }
        .booking-table-desktop {
            display: block !important;
        }
        .booking-table-desktop .table {
            min-width: 600px;
        }
        .booking-table-desktop .card-body {
            padding: 0.5rem !important;
        }
        .card-body {
            padding: 1rem !important;
        }
        .card-header {
            padding: 1rem 1rem 0.5rem 1rem !important;
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .card-header h2 {
            font-size: 1.4rem !important;
        }
        .icon.icon-shape {
            width: 2.75rem !important;
            height: 2.75rem !important;
        }
        .chart {
            height: 270px !important;
        }
        .booking-card-mobile {
            display: none !important;
        }
        .booking-table-desktop {
            display: block !important;
        }
        .booking-table-desktop .table {
            min-width: 700px;
        }
        .booking-table-desktop .card-body {
            padding: 0.75rem !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .card-header h2 {
            font-size: 1.5rem !important;
        }
        .icon.icon-shape {
            width: 3rem !important;
            height: 3rem !important;
        }
        .chart {
            height: 280px !important;
        }
        .booking-card-mobile {
            display: none !important;
        }
        .booking-table-desktop {
            display: block !important;
        }
        .booking-table-desktop .table {
            min-width: 750px;
        }
        .booking-table-desktop .card-body {
            padding: 1rem !important;
        }
    }

    @media (min-width: 992px) {
        .booking-card-mobile {
            display: none !important;
        }
        .booking-table-desktop {
            display: block !important;
        }
        .booking-table-desktop .table {
            min-width: auto;
            white-space: normal;
        }
        .booking-table-desktop .table th,
        .booking-table-desktop .table td {
            white-space: normal;
        }
    }

    .booking-card-mobile .card {
        margin-bottom: 1rem;
        border-left: 4px solid;
    }

    .booking-card-mobile .card.pending {
        border-left-color: #ffc107;
    }

    .booking-card-mobile .card.confirmed {
        border-left-color: #28a745;
    }

    .booking-card-mobile .card.handover {
        border-left-color: #17a2b8;
    }

    .booking-card-mobile .card.returned {
        border-left-color: #007bff;
    }

    .booking-card-mobile .card.rejected {
        border-left-color: #dc3545;
    }

    /* Default: Hide mobile cards, show desktop table */
    .booking-card-mobile {
        display: none !important;
    }
    .booking-table-desktop {
        display: block !important;
    }
</style>
<div class="row mb-2 mb-md-3">
    <!-- Statistics Cards -->
    <div class="col-12 col-sm-6 col-xl-3 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg h-100">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col d-flex align-items-center justify-content-between">
                        <span class="text-uppercase text-muted mb-2 text-xs font-weight-bold">Total Vehicles</span>
                        <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-car"></i>
                        </div>
                    </div>
                    <div class="col-12">
                        <h5 class="mb-0 font-weight-bold">{{ $totalVehicles }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg h-100">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col d-flex align-items-center justify-content-between">
                        <span class="text-uppercase text-muted mb-2 text-xs font-weight-bold">Total Bookings</span>
                        <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-calendar-check"></i>
                        </div>
                    </div>
                    <div class="col-12">
                        <h5 class="mb-0 font-weight-bold">{{ $totalBookings }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg h-100">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col d-flex align-items-center justify-content-between">
                        <span class="text-uppercase text-muted mb-2 text-xs font-weight-bold">Total Revenue</span>
                        <div class="icon icon-shape bg-gradient-success text-white rounded-circle shadow d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-rupee-sign"></i>
                        </div>
                    </div>
                    <div class="col-12">
                        <h5 class="mb-0 font-weight-bold">Rs. {{ number_format($totalRevenue, 2) }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg h-100">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col d-flex align-items-center justify-content-between">
                        <span class="text-uppercase text-muted mb-2 text-xs font-weight-bold">Total Clients</span>
                        <div class="icon icon-shape bg-gradient-warning text-white rounded-circle shadow d-flex align-items-center justify-content-center">
                            <i class="fa-solid fa-users"></i>
                            </div>
                        </div>
                    <div class="col-12">
                        <h5 class="mb-0 font-weight-bold">{{ $totalClients }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-3 mt-md-4">
    <!-- Revenue Chart -->
    <div class="col-12 col-lg-8 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-transparent pb-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-1 ls-1 font-weight-bold">Revenue Overview</h6>
                        <h2 class="mb-0">Monthly Revenue</h2>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart">
                    <canvas id="revenueChart" class="chart-canvas" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Booking Status -->
    <div class="col-12 col-lg-4 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-transparent pb-0">
                <h6 class="text-uppercase text-muted mb-1 ls-1 font-weight-bold">Booking Status</h6>
                <h2 class="mb-0">Overview</h2>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center flex-grow-1">
                        <div class="icon icon-shape bg-gradient-warning text-white rounded-circle shadow-sm me-2 me-md-3 d-flex align-items-center justify-content-center" style="min-width: 2.5rem; width: 2.5rem; height: 2.5rem;">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <div class="flex-grow-1">
                            <span class="text-xs text-sm-md font-weight-bold d-block d-md-inline">Pending</span>
                            <h5 class="mb-0 mt-1 mt-md-0">{{ $pendingBookings }}</h5>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center flex-grow-1">
                        <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow-sm me-2 me-md-3 d-flex align-items-center justify-content-center" style="min-width: 2.5rem; width: 2.5rem; height: 2.5rem;">
                            <i class="fa-solid fa-check-circle"></i>
                        </div>
                        <div class="flex-grow-1">
                            <span class="text-xs text-sm-md font-weight-bold d-block d-md-inline">Confirmed</span>
                            <h5 class="mb-0 mt-1 mt-md-0">{{ $confirmedBookings }}</h5>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center flex-grow-1">
                        <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow-sm me-2 me-md-3 d-flex align-items-center justify-content-center" style="min-width: 2.5rem; width: 2.5rem; height: 2.5rem;">
                            <i class="fa-solid fa-handshake"></i>
                        </div>
                        <div class="flex-grow-1">
                            <span class="text-xs text-sm-md font-weight-bold d-block d-md-inline">Handover to Client</span>
                            <h5 class="mb-0 mt-1 mt-md-0">{{ $handoverToClientBookings }}</h5>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center flex-grow-1">
                        <div class="icon icon-shape bg-gradient-success text-white rounded-circle shadow-sm me-2 me-md-3 d-flex align-items-center justify-content-center" style="min-width: 2.5rem; width: 2.5rem; height: 2.5rem;">
                            <i class="fa-solid fa-check-double"></i>
                        </div>
                        <div class="flex-grow-1">
                            <span class="text-xs text-sm-md font-weight-bold d-block d-md-inline">Return by Client</span>
                            <h5 class="mb-0 mt-1 mt-md-0">{{ $returnByClientBookings }}</h5>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center flex-grow-1">
                        <div class="icon icon-shape bg-gradient-danger text-white rounded-circle shadow-sm me-2 me-md-3 d-flex align-items-center justify-content-center" style="min-width: 2.5rem; width: 2.5rem; height: 2.5rem;">
                            <i class="fa-solid fa-times-circle"></i>
                        </div>
                        <div class="flex-grow-1">
                            <span class="text-xs text-sm-md font-weight-bold d-block d-md-inline">Rejected</span>
                            <h5 class="mb-0 mt-1 mt-md-0">{{ $rejectedBookings }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-3 mt-md-4">
    <!-- Bookings Chart -->
    <div class="col-12 col-lg-8 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-transparent pb-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-1 ls-1 font-weight-bold">Bookings Overview</h6>
                        <h2 class="mb-0">Monthly Bookings</h2>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart">
                    <canvas id="bookingsChart" class="chart-canvas" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="col-12 col-lg-4 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-transparent pb-0">
                <h6 class="text-uppercase text-muted mb-1 ls-1 font-weight-bold">Quick Stats</h6>
                <h2 class="mb-0">This Month</h2>
            </div>
            <div class="card-body">
                <div class="mb-3 mb-md-4">
                    <div class="d-flex justify-content-between mb-2 flex-column flex-sm-row">
                        <span class="text-xs text-sm-md font-weight-bold mb-1 mb-sm-0">Monthly Revenue</span>
                        <span class="text-xs text-sm-md font-weight-bold">Rs. {{ number_format($monthlyRevenue, 2) }}</span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-gradient-success" role="progressbar"
                             style="width: {{ $totalRevenue > 0 ? ($monthlyRevenue / $totalRevenue * 100) : 0 }}%"></div>
                    </div>
                </div>
                <div class="mb-3 mb-md-4">
                    <div class="d-flex justify-content-between mb-2 flex-column flex-sm-row">
                        <span class="text-xs text-sm-md font-weight-bold mb-1 mb-sm-0">Monthly Bookings</span>
                        <span class="text-xs text-sm-md font-weight-bold">{{ $monthlyBookings }}</span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-gradient-info" role="progressbar"
                             style="width: {{ $totalBookings > 0 ? ($monthlyBookings / $totalBookings * 100) : 0 }}%"></div>
                    </div>
                </div>
                <div class="mb-3 mb-md-4">
                    <div class="d-flex justify-content-between mb-2 flex-column flex-sm-row">
                        <span class="text-xs text-sm-md font-weight-bold mb-1 mb-sm-0">Active Vehicles</span>
                        <span class="text-xs text-sm-md font-weight-bold">{{ $activeVehicles }}/{{ $totalVehicles }}</span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-gradient-primary" role="progressbar"
                             style="width: {{ $totalVehicles > 0 ? ($activeVehicles / $totalVehicles * 100) : 0 }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Bookings -->
<div class="row mt-3 mt-md-4">
    <div class="col-12 mb-3 mb-md-4">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-transparent pb-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-1 ls-1 font-weight-bold">Recent Activity</h6>
                        <h2 class="mb-0">Recent Bookings</h2>
                    </div>
                </div>
            </div>

            <!-- Desktop Table View -->
            <div class="card-body px-0 booking-table-desktop">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Client</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Vehicle</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pickup Date</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Return Date</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Total Price</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                <th class="text-secondary opacity-7"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentBookings as $booking)
                            <tr>
                                <td>
                                    <div class="d-flex px-2 py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm">{{ $booking->client ? $booking->client->full_name : 'N/A' }}</h6>
                                            <p class="text-xs text-secondary mb-0">{{ $booking->client ? $booking->client->email : 'N/A' }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="text-xs font-weight-bold mb-0">{{ $booking->vehicle ? $booking->vehicle->vehicle_name : 'N/A' }}</p>
                                    <p class="text-xs text-secondary mb-0">{{ $booking->vehicle ? $booking->vehicle->vehicle_no : 'N/A' }}</p>
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-secondary text-xs font-weight-bold">
                                        {{ $booking->pickup_date ? \Carbon\Carbon::parse($booking->pickup_date)->format('M d, Y') : 'N/A' }}
                                    </span>
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-secondary text-xs font-weight-bold">
                                        {{ $booking->return_date ? \Carbon\Carbon::parse($booking->return_date)->format('M d, Y') : 'N/A' }}
                                    </span>
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-secondary text-xs font-weight-bold">
                                        Rs. {{ number_format($booking->total_price ?? 0, 2) }}
                                    </span>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @php
                                        $statusValue = (int)$booking->status;
                                        $statusLabel = '';
                                        $statusClass = '';

                                        switch($statusValue) {
                                            case 0:
                                                $statusLabel = 'Pending';
                                                $statusClass = 'warning';
                                                break;
                                            case 1:
                                                $statusLabel = 'Confirmed';
                                                $statusClass = 'success';
                                                break;
                                            case 2:
                                                $statusLabel = 'Handover to Client';
                                                $statusClass = 'info';
                                                break;
                                            case 3:
                                                $statusLabel = 'Return by Client';
                                                $statusClass = 'primary';
                                                break;
                                            case 4:
                                                $statusLabel = 'Rejected';
                                                $statusClass = 'danger';
                                                break;
                                            default:
                                                $statusLabel = 'Unknown';
                                                $statusClass = 'secondary';
                                                break;
                                        }
                                    @endphp
                                    <span class="badge badge-{{ $statusClass }}">
                                        {{ $statusLabel }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <p class="text-muted mb-0">No recent bookings found.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Mobile Card View -->
            <div class="card-body px-3 booking-card-mobile">
                @forelse($recentBookings as $booking)
                    @php
                        $statusValue = (int)$booking->status;
                        $statusLabel = '';
                        $statusClass = '';
                        $cardClass = '';

                        switch($statusValue) {
                            case 0:
                                $statusLabel = 'Pending';
                                $statusClass = 'warning';
                                $cardClass = 'pending';
                                break;
                            case 1:
                                $statusLabel = 'Confirmed';
                                $statusClass = 'success';
                                $cardClass = 'confirmed';
                                break;
                            case 2:
                                $statusLabel = 'Handover to Client';
                                $statusClass = 'info';
                                $cardClass = 'handover';
                                break;
                            case 3:
                                $statusLabel = 'Return by Client';
                                $statusClass = 'primary';
                                $cardClass = 'returned';
                                break;
                            case 4:
                                $statusLabel = 'Rejected';
                                $statusClass = 'danger';
                                $cardClass = 'rejected';
                                break;
                            default:
                                $statusLabel = 'Unknown';
                                $statusClass = 'secondary';
                                $cardClass = '';
                                break;
                        }
                    @endphp
                    <div class="card border-0 shadow-sm {{ $cardClass }}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 font-weight-bold text-sm">{{ $booking->client ? $booking->client->full_name : 'N/A' }}</h6>
                                    <p class="text-xs text-secondary mb-2">{{ $booking->client ? $booking->client->email : 'N/A' }}</p>
                                </div>
                                <span class="badge badge-{{ $statusClass }}">{{ $statusLabel }}</span>
                            </div>
                            <div class="mb-2">
                                <p class="text-xs text-muted mb-1"><strong>Vehicle:</strong></p>
                                <p class="text-xs font-weight-bold mb-0">{{ $booking->vehicle ? $booking->vehicle->vehicle_name : 'N/A' }}</p>
                                <p class="text-xs text-secondary mb-0">{{ $booking->vehicle ? $booking->vehicle->vehicle_no : 'N/A' }}</p>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6">
                                    <p class="text-xs text-muted mb-1"><strong>Pickup:</strong></p>
                                    <p class="text-xs font-weight-bold mb-0">
                                        {{ $booking->pickup_date ? \Carbon\Carbon::parse($booking->pickup_date)->format('M d, Y') : 'N/A' }}
                                    </p>
                                </div>
                                <div class="col-6">
                                    <p class="text-xs text-muted mb-1"><strong>Return:</strong></p>
                                    <p class="text-xs font-weight-bold mb-0">
                                        {{ $booking->return_date ? \Carbon\Carbon::parse($booking->return_date)->format('M d, Y') : 'N/A' }}
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                <span class="text-xs text-muted">Total Price:</span>
                                <span class="text-xs font-weight-bold">Rs. {{ number_format($booking->total_price ?? 0, 2) }}</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4">
                        <p class="text-muted mb-0">No recent bookings found.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Helper function to get responsive font size
        function getResponsiveFontSize() {
            return window.innerWidth < 576 ? 9 : 11;
        }

        // Helper function to get responsive padding
        function getResponsivePadding() {
            return window.innerWidth < 576 ? 5 : 10;
        }

        // Helper function to get responsive x-axis padding
        function getResponsiveXPadding() {
            return window.innerWidth < 576 ? 10 : 20;
        }

        // Revenue Chart
        const revenueCtx = document.getElementById('revenueChart');
        let revenueChart = null;
        if (revenueCtx) {
            const revenueData = @json($revenueChartData);

            revenueChart = new Chart(revenueCtx, {
                type: "line",
                data: {
                    labels: revenueData.map(item => item.month),
                    datasets: [{
                        label: "Paid Revenue",
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 4,
                        pointBackgroundColor: "#5e72e4",
                        borderColor: "#5e72e4",
                        backgroundColor: "rgba(94, 114, 228, 0.1)",
                        fill: true,
                        data: revenueData.map(item => item.revenue),
                        maxBarThickness: 6
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'Rs. ' + context.parsed.y.toFixed(2);
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: getResponsivePadding(),
                                color: '#9ca2b7',
                                font: {
                                    size: getResponsiveFontSize(),
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                                callback: function(value) {
                                    return 'Rs. ' + value.toFixed(0);
                                }
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: getResponsiveXPadding(),
                                font: {
                                    size: getResponsiveFontSize(),
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                }
                            }
                        },
                    },
                },
            });
        }

        // Bookings Chart
        const bookingsCtx = document.getElementById('bookingsChart');
        let bookingsChart = null;
        if (bookingsCtx) {
            const bookingData = @json($bookingChartData);

            bookingsChart = new Chart(bookingsCtx, {
                type: "bar",
                data: {
                    labels: bookingData.map(item => item.month),
                    datasets: [{
                        label: "Bookings",
                        tension: 0.4,
                        borderWidth: 0,
                        borderRadius: 8,
                        borderSkipped: false,
                        backgroundColor: "#5e72e4",
                        data: bookingData.map(item => item.bookings),
                        maxBarThickness: 25
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index',
                    },
                    scales: {
                        y: {
                            grid: {
                                drawBorder: false,
                                display: true,
                                drawOnChartArea: true,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                padding: getResponsivePadding(),
                                color: '#9ca2b7',
                                font: {
                                    size: getResponsiveFontSize(),
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                },
                                beginAtZero: true
                            }
                        },
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false,
                                drawOnChartArea: false,
                                drawTicks: false,
                                borderDash: [5, 5]
                            },
                            ticks: {
                                display: true,
                                color: '#9ca2b7',
                                padding: getResponsiveXPadding(),
                                font: {
                                    size: getResponsiveFontSize(),
                                    family: "Open Sans",
                                    style: 'normal',
                                    lineHeight: 2
                                }
                            }
                        },
                    },
                },
            });
        }

        // Handle window resize for charts
        let resizeTimer;
        $(window).on('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (revenueChart) {
                    revenueChart.options.scales.y.ticks.font.size = getResponsiveFontSize();
                    revenueChart.options.scales.y.ticks.padding = getResponsivePadding();
                    revenueChart.options.scales.x.ticks.font.size = getResponsiveFontSize();
                    revenueChart.options.scales.x.ticks.padding = getResponsiveXPadding();
                    revenueChart.update('none');
                }
                if (bookingsChart) {
                    bookingsChart.options.scales.y.ticks.font.size = getResponsiveFontSize();
                    bookingsChart.options.scales.y.ticks.padding = getResponsivePadding();
                    bookingsChart.options.scales.x.ticks.font.size = getResponsiveFontSize();
                    bookingsChart.options.scales.x.ticks.padding = getResponsiveXPadding();
                    bookingsChart.update('none');
                }
            }, 250);
        });
    });
</script>
@endsection