@extends('layouts.app')
@section('content')
<style>
   :root {
   --primary: #2A4D8E;
   --primary-light: #3A6FD9;
   --secondary: #1E3A6E;
   --accent: #FF6B6B;
   --success: #4ECDC4;
   --warning: #FFD166;
   --light: #F8F9FC;
   --dark: #2D3748;
   --gray: #A0AEC0;
   --sidebar-width: 260px;
   --header-height: 80px;
   }
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
   body {
   background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%);
   font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
   color: var(--dark);
   min-height: 100vh;
   overflow-x: hidden;
   }
   .dashboard-container {
   margin-left: var(--sidebar-width);
   width: calc(100% - var(--sidebar-width));
   padding: 30px;
   transition: all 0.3s ease;
   }
   /* Sidebar */
   .sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: var(--sidebar-width);
   background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
   color: white;
   z-index: 1000;
   box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   }
   .sidebar-header {
   padding: 25px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   }
   .logo {
   width: 40px;
   height: 40px;
   background: white;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 12px;
   }
   .logo i {
   color: var(--primary);
   font-size: 20px;
   }
   .sidebar-header h3 {
   font-weight: 700;
   font-size: 22px;
   margin: 0;
   }
   .sidebar-menu {
   padding: 20px 0;
   }
   .sidebar-menu a {
   color: rgba(255, 255, 255, 0.85);
   padding: 14px 25px;
   display: flex;
   align-items: center;
   text-decoration: none;
   transition: all 0.3s;
   font-weight: 500;
   border-left: 4px solid transparent;
   }
   .sidebar-menu a:hover, .sidebar-menu a.active {
   color: white;
   background: rgba(255, 255, 255, 0.1);
   border-left: 4px solid white;
   }
   .sidebar-menu i {
   margin-right: 12px;
   width: 20px;
   text-align: center;
   font-size: 18px;
   }
   /* Header */
   .header {
   background: white;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   padding: 20px 30px;
   margin-bottom: 30px;
   border-radius: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   }
   .header h1 {
   margin: 0;
   color: var(--dark);
   font-weight: 700;
   font-size: 28px;
   }
   .header-actions {
   display: flex;
   align-items: center;
   gap: 20px;
   }
   .search-box {
   position: relative;
   }
   .search-box input {
   background: var(--light);
   border: none;
   padding: 10px 15px 10px 40px;
   border-radius: 10px;
   width: 250px;
   font-size: 14px;
   transition: all 0.3s;
   }
   .search-box input:focus {
   outline: none;
   box-shadow: 0 0 0 2px rgba(42, 77, 142, 0.2);
   }
   .search-box i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gray);
   }
   .user-info {
   display: flex;
   align-items: center;
   gap: 15px;
   }
   .user-avatar {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 18px;
   }
   .user-details h4 {
   margin: 0;
   font-weight: 600;
   font-size: 16px;
   }
   .user-details p {
   margin: 0;
   font-size: 13px;
   color: var(--gray);
   }
   /* Stats Cards */
   .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 24px;
   margin-bottom: 30px;
   }
   .stats-card {
   background: white;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   padding: 24px;
   transition: transform 0.3s, box-shadow 0.3s;
   position: relative;
   overflow: hidden;
   }
   .stats-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   }
   .stats-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   }
   .stats-card.users::before {
   background: linear-gradient(to bottom, #4ECDC4, #2A9D8F);
   }
   .stats-card.agents::before {
   background: linear-gradient(to bottom, #FF9E7D, #FF6B6B);
   }
   .stats-card.vendors::before {
   background: linear-gradient(to bottom, #7E8CE0, #3A56D9);
   }
   .stats-card.bookings::before {
   background: linear-gradient(to bottom, #FFD166, #FF9E1F);
   }
   .stats-card.revenue::before {
   background: linear-gradient(to bottom, #9CECFB, #4ECDC4);
   }
   .stats-card.commission::before {
   background: linear-gradient(to bottom, #C792EA, #7E4DD2);
   }
   .stats-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
   }
   .stats-icon {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: white;
   }
   .stats-card.users .stats-icon {
   background: linear-gradient(135deg, #4ECDC4, #2A9D8F);
   }
   .stats-card.agents .stats-icon {
   background: linear-gradient(135deg, #FF9E7D, #FF6B6B);
   }
   .stats-card.vendors .stats-icon {
   background: linear-gradient(135deg, #7E8CE0, #3A56D9);
   }
   .stats-card.bookings .stats-icon {
   background: linear-gradient(135deg, #FFD166, #FF9E1F);
   }
   .stats-card.revenue .stats-icon {
   background: linear-gradient(135deg, #9CECFB, #4ECDC4);
   }
   .stats-card.commission .stats-icon {
   background: linear-gradient(135deg, #C792EA, #7E4DD2);
   }
   .trend {
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: 20px;
   font-weight: 500;
   }
   .trend.up {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .trend.down {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   .stats-content h3 {
   font-weight: 700;
   font-size: 28px;
   margin-bottom: 5px;
   color: var(--dark);
   }
   .stats-content p {
   color: var(--gray);
   font-size: 14px;
   margin: 0;
   }
   /* Main Content */
   .content-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 30px;
   }
   .card {
   background: white;
   border: none;
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   margin-bottom: 30px;
   overflow: hidden;
   }
   .card-header {
   background: white;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding: 20px 25px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   }
   .card-header h3 {
   font-weight: 600;
   font-size: 18px;
   color: var(--dark);
   }
   .card-actions {
   display: flex;
   gap: 10px;
   }
   .btn-filter {
   background: var(--light);
   border: none;
   padding: 6px 12px;
   border-radius: 8px;
   font-size: 13px;
   color: var(--dark);
   transition: all 0.3s;
   }
   .btn-filter.active {
   background: var(--primary);
   color: white;
   }
   .btn-view {
   background: transparent;
   border: 1px solid var(--primary);
   color: var(--primary);
   padding: 6px 15px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
   transition: all 0.3s;
   }
   .btn-view:hover {
   background: var(--primary);
   color: white;
   }
   .card-body {
   padding: 25px;
   }
   /* Charts */
   .chart-container {
   position: relative;
   height: 300px;
   }
   /* Tables */
   .table {
   margin: 0;
   }
   .table th {
   border-top: none;
   font-weight: 600;
   color: var(--gray);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 15px 12px;
   }
   .table td {
   padding: 15px 12px;
   vertical-align: middle;
   border-color: rgba(0, 0, 0, 0.05);
   }
   .badge {
   padding: 6px 12px;
   border-radius: 8px;
   font-weight: 500;
   font-size: 12px;
   }
   .badge-hotel {
   background: rgba(76, 201, 240, 0.1);
   color: #17a2b8;
   }
   .badge-flight {
   background: rgba(255, 193, 7, 0.1);
   color: #ffc107;
   }
   .badge-transfer {
   background: rgba(102, 16, 242, 0.1);
   color: #6610f2;
   }
   .badge-insurance {
   background: rgba(32, 201, 151, 0.1);
   color: #20c997;
   }
   .badge-completed {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .badge-pending {
   background: rgba(255, 152, 0, 0.1);
   color: #FF9800;
   }
   .badge-cancelled {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   /* Withdrawal Requests */
   .withdrawal-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .withdrawal-item:last-child {
   border-bottom: none;
   }
   .user-info-sm {
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .user-avatar-sm {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--light);
   color: var(--dark);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   }
   .user-details-sm h5 {
   margin: 0;
   font-weight: 600;
   font-size: 15px;
   }
   .user-details-sm p {
   margin: 0;
   font-size: 13px;
   color: var(--gray);
   }
   .withdrawal-amount {
   font-weight: 700;
   font-size: 16px;
   color: var(--dark);
   }
   .withdrawal-actions {
   display: flex;
   gap: 8px;
   }
   .btn-action {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   transition: all 0.3s;
   }
   .btn-approve {
   background: rgba(76, 175, 80, 0.1);
   color: #4CAF50;
   }
   .btn-deny {
   background: rgba(244, 67, 54, 0.1);
   color: #F44336;
   }
   .btn-action:hover {
   transform: scale(1.1);
   }
   /* Top Agents */
   .agent-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }
   .agent-item:last-child {
   border-bottom: none;
   }
   .agent-rank {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 14px;
   margin-right: 12px;
   }
   .rank-1 {
   background: linear-gradient(135deg, #FFD700, #FFA500);
   color: white;
   }
   .rank-2 {
   background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
   color: white;
   }
   .rank-3 {
   background: linear-gradient(135deg, #CD7F32, #A56A2B);
   color: white;
   }
   .agent-performance {
   font-weight: 600;
   font-size: 14px;
   color: var(--success);
   }
   /* Calendar */
   .calendar-container {
   padding: 20px;
   }
   .calendar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   }
   .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 8px;
   }
   .calendar-day {
   padding: 10px;
   text-align: center;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s;
   }
   .calendar-day:hover {
   background: var(--light);
   }
   .calendar-day.active {
   background: var(--primary);
   color: white;
   }
   .booking-count {
   font-size: 12px;
   color: var(--gray);
   margin-top: 5px;
   }
   /* Responsive */
   @media (max-width: 1200px) {
   .content-grid {
   grid-template-columns: 1fr;
   }
   .stats-grid {
   grid-template-columns: repeat(2, 1fr);
   }
   }
   @media (max-width: 768px) {
   .dashboard-container {
   margin-left: 0;
   width: 100%;
   padding: 20px;
   }
   .sidebar {
   transform: translateX(-100%);
   }
   .sidebar.active {
   transform: translateX(0);
   }
   .stats-grid {
   grid-template-columns: 1fr;
   }
   .search-box input {
   width: 180px;
   }
   }
   .agent-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #f9f9f9;
   border-radius: 10px;
   padding: 10px 15px;
   transition: 0.3s;
   }
   .agent-item:hover {
   background: #f1f5ff;
   transform: translateY(-2px);
   }
   .agent-rank {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   color: #fff;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .rank-1 { background-color: #ffd700; } /* Gold */
   .rank-2 { background-color: #c0c0c0; } /* Silver */
   .rank-3 { background-color: #cd7f32; } /* Bronze */
   .rank-4, .rank-5 { background-color: #6c757d; }
</style>
<div class="d-flex flex-column flex-column-fluid">
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <!--begin::Title-->
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Dashboard</h1>
                <!--end::Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-500 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">Dashboard</li>
                    <!--end::Item-->
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
           
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->
       <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!-- Stats Cards -->
            <div class="stats-grid">
                <!-- Flight Bookings -->
                <div class="stats-card bookings">
                    <div class="stats-header">
                        <div class="stats-icon">
                        <i class="fas fa-plane"></i>
                        </div>
                    </div>
                    <div class="stats-content">
                        <h3>0</h3>
                        <p>Flight Bookings</p>
                        <small>B2C: 0 | B2B: 0</small>
                    </div>
                </div>
                
                <!-- Hotel Bookings -->
                <div class="stats-card revenue">
                    <div class="stats-header">
                        <div class="stats-icon">
                        <i class="fas fa-hotel"></i>
                        </div>
                    </div>
                    <div class="stats-content">
                        <h3>{{count($Bookings)}}</h3>
                        <p>Hotel Bookings</p>
                        <small>B2B: {{count($Bookings)}} | B2C: 0</small>
                    </div>
                </div>
                
                <!-- Transfer Bookings -->
                <div class="stats-card users">
                    <div class="stats-header">
                        <div class="stats-icon">
                        <i class="fas fa-car"></i>
                        </div>
                    </div>
                    <div class="stats-content">
                        <h3>0</h3>
                        <p>Transfer Bookings</p>
                        <small>B2C: 0 | B2B: 0</small>
                    </div>
                </div>
                
                <!-- Insurance Bookings -->
                <div class="stats-card commission">
                    <div class="stats-header">
                        <div class="stats-icon">
                        <i class="fas fa-shield-alt"></i>
                        </div>
                    </div>
                    <div class="stats-content">
                        <h3>0</h3>
                        <p>Insurance Bookings</p>
                        <small>B2C: 0 | B2B: 0</small>
                    </div>
                </div>

            </div>
            
            <!-- Main Content Grid -->
            <div class="content-grid">
                <!-- Left Column -->
                <div class="left-column">
                    <!-- Calendar Section -->
                    <div class="card">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center" style="min-height: 50px;">
                            <h3 class="text-white">Booking Calendar</h3>
                        </div>
                        <div class="card-body">
                            <div class="calendar-container">
                                <div class="calendar-header">
                                    <h4>{{ now()->format('F Y') }}</h4>
                                    <div class="calendar-actions">
                                        <button class="btn btn-sm btn-light me-2" onclick="changeMonth(-1)"><i class="fas fa-chevron-left"></i></button>
                                        <button class="btn btn-sm btn-light" onclick="changeMonth(1)"><i class="fas fa-chevron-right"></i></button>
                                    </div>
                                </div>
                                <div class="calendar-grid" id="calendar-grid">
                                    <!-- Calendar headers -->
                                    <div class="text-center fw-bold">Sun</div>
                                    <div class="text-center fw-bold">Mon</div>
                                    <div class="text-center fw-bold">Tue</div>
                                    <div class="text-center fw-bold">Wed</div>
                                    <div class="text-center fw-bold">Thu</div>
                                    <div class="text-center fw-bold">Fri</div>
                                    <div class="text-center fw-bold">Sat</div>
                                    
                                    <!-- Calendar days will be populated dynamically -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column -->
                <div class="right-column">
                    <!-- Latest Registered Agents -->
                    <div class="card shadow-sm rounded-4 border-0">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center" style="min-height: 50px;">
                            <h3 class="mb-0 fw-semibold text-white">Latest Registered Agents</h3>
                            <span class="badge bg-light text-primary px-3">{{ $Agents->count() }}</span>
                        </div>
                        <div class="card-body">
                            @forelse($Agents->take(10) as $index => $agent)
                            <div class="agent-item d-flex justify-content-between align-items-center mb-3">
                                <div class="user-info-sm d-flex align-items-center">
                                    <div class="agent-rank rank-{{ $index + 1 }}">{{ $index + 1 }}</div>
                                    <div class="user-details-sm ms-3">
                                        <h5 class="mb-0">{{ $agent->name }}</h5>
                                        <p class="mb-0 mt-2 text-muted">
                                            {{ $Currency->currency_code ?? '₹' }}{{ number_format($agent->total_revenue, 2) }} revenue <br>
                                            <small>{{ $agent->total_bookings }} bookings</small>
                                        </p> 
                                    </div>
                                </div>
                                <div class="agent-performance text-success fw-semibold">
                                    <a href="{{ route('agent.details', $agent->id) }}" class="text-decoration-none text-success"> 
                                        View
                                    </a>
                                </div>
                            </div>
                            @empty
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-users fa-2x mb-3"></i>
                                <p>No agents registered yet.</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Calendar functionality
let currentDate = new Date();

function generateCalendar(year, month) {
    
    const calendarGrid = document.getElementById('calendar-grid');
    calendarGrid.innerHTML = '';
    
    // Add headers
    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    days.forEach(day => {
        const header = document.createElement('div');
        header.className = 'text-center fw-bold';
        header.textContent = day;
        calendarGrid.appendChild(header);
    });
    
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay();
    
    // Add empty cells for days before the first day of month
    for (let i = 0; i < startingDay; i++) {
        const emptyDay = document.createElement('div');
        emptyDay.className = 'calendar-day text-muted';
        calendarGrid.appendChild(emptyDay);
    }
    
    // Add days of the month
    for (let day = 1; day <= daysInMonth; day++) {
        const dayElement = document.createElement('div');
        dayElement.className = 'calendar-day';
        dayElement.innerHTML = `${day}<div class="booking-count">0 bookings</div>`;
        
        // Add click event to fetch bookings for that day
        dayElement.addEventListener('click', function() {
            fetchBookingsForDate(year, month + 1, day);
        });
        
        calendarGrid.appendChild(dayElement);
    }
    
    // Update calendar header
    document.querySelector('.calendar-header h4').textContent = 
        `${firstDay.toLocaleString('default', { month: 'long' })} ${year}`;
    
    // Fetch booking counts for this month
    
    fetchBookingCounts(year, month + 1);
}

function changeMonth(direction) {
    currentDate.setMonth(currentDate.getMonth() + direction);
    generateCalendar(currentDate.getFullYear(), currentDate.getMonth());
}

function fetchBookingCounts(year, month) {

    let url = "{{ route('bookings.counts') }}?year=" + year + "&month=" + month;

    fetch(url, {
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        updateCalendarWithCounts(data);
    })
    .catch(error => {
        console.error('Error fetching booking counts:', error);
    });
}


function updateCalendarWithCounts(bookingData) {
   
    const dayElements = document.querySelectorAll('.calendar-day:not(.text-muted)');
    dayElements.forEach((dayElement, index) => {
        const day = index + 1;
        const bookingsCount = bookingData[day] || 0;
        const countElement = dayElement.querySelector('.booking-count');
        countElement.textContent = `${bookingsCount} booking${bookingsCount !== 1 ? 's' : ''}`;
        
        if (bookingsCount > 0) {
            dayElement.classList.add('active');
            countElement.classList.add('text-white');
        } else {
            dayElement.classList.remove('active');
            countElement.classList.remove('text-white');
        }
    });
}

function fetchBookingsForDate(year, month, day) {
    const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    alert(date);
    // Redirect to bookings page filtered by date or show modal
    window.location.href = `/bookings?date=${date}`;
    alert(window.location.href);
}

// Initialize calendar
generateCalendar(currentDate.getFullYear(), currentDate.getMonth());
</script>

@endsection