@extends('backend.app')
@push('style')
    <link rel="stylesheet" href="{{ asset('backend/css/plugins/charts/apexcharts.css') }}">
    <style>
        .stat-card {
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            border: none;
            position: relative;
        }
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
        }
        .stat-card .stat-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 4rem;
            opacity: 0.15;
            transition: all 0.3s;
        }
        .stat-card:hover .stat-icon {
            opacity: 0.25;
            transform: translateY(-50%) scale(1.1);
        }
        .stat-card h2 {
            font-size: 2.8rem;
            font-weight: 800;
            margin: 0;
            line-height: 1;
        }
        .stat-card h5 {
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 0.5rem 0;
        }
        .stat-card .growth-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }
        .growth-badge.positive {
            background: rgba(40, 167, 69, 0.15);
            color: #28a745;
        }
        .growth-badge.negative {
            background: rgba(220, 53, 69, 0.15);
            color: #dc3545;
        }
        .growth-badge.neutral {
            background: rgba(108, 117, 125, 0.15);
            color: #6c757d;
        }
        .bg-gradient-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .bg-gradient-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
            color: white;
        }
        .bg-gradient-info {
            background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
            color: white;
        }
        .bg-gradient-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        .bg-gradient-danger {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }
        .bg-gradient-dark {
            background: linear-gradient(135deg, #434343 0%, #000000 100%);
            color: white;
        }
        .welcome-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 16px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
        }
        .welcome-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }
        .chart-container {
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            padding: 1.5rem;
            background: white;
            transition: all 0.3s;
            height: 100%;
        }
        .chart-container:hover {
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        }
        .progress {
            height: 8px;
            border-radius: 10px;
        }
        .list-group-item {
            border: none;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.2s;
        }
        .list-group-item:hover {
            background-color: #f8f9fa;
        }
        .list-group-item:last-child {
            border-bottom: none;
        }
        .content-body {
            padding: 2rem;
        }
        .content-wrapper {
            padding: 0;
        }
    </style>
@endpush
@section('title', 'Booking Dashboard')
@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-body">

                <!-- Welcome Card -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="welcome-card position-relative">
                            <div class="position-relative z-1">
                                <h3><i class="fa-solid fa-calendar-check me-2"></i>Booking Management Dashboard</h3>
                                <p class="mb-3" style="opacity: 0.95;">Monitor and manage all your bookings in real-time</p>
                                <div class="d-flex gap-3 flex-wrap">
                                    <div class="d-flex align-items-center">
                                        <i class="fa-solid fa-chart-line me-2"></i>
                                        <span>{{ number_format($stats['total_bookings']) }} Total Bookings</span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <i class="fa-solid fa-trending-up me-2"></i>
                                        <span>{{ number_format($stats['booking_growth'], 1) }}% This Week</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Statistics Cards -->
                <div class="row mb-4">
                    <!-- Total Bookings -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stat-card bg-gradient-primary position-relative">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5><i class="fa-solid fa-calendar-check me-2"></i>Total</h5>
                                        <h2>{{ number_format($stats['total_bookings']) }}</h2>
                                        <p>All bookings</p>
                                        <div class="growth-badge {{ $stats['booking_growth'] >= 0 ? 'positive' : 'negative' }}">
                                            <i class="fa-solid fa-arrow-{{ $stats['booking_growth'] >= 0 ? 'up' : 'down' }}"></i>
                                            <span>{{ number_format(abs($stats['booking_growth']), 1) }}% this week</span>
                                        </div>
                                    </div>
                                </div>
                                <i class="fa-solid fa-calendar-check stat-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Pending -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stat-card bg-gradient-warning position-relative">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5><i class="fa-solid fa-clock me-2"></i>Pending</h5>
                                        <h2>{{ number_format($stats['pending_bookings']) }}</h2>
                                        <p>Awaiting action</p>
                                        <div class="growth-badge neutral">
                                            <i class="fa-solid fa-hourglass-half"></i>
                                            <span>Needs attention</span>
                                        </div>
                                    </div>
                                </div>
                                <i class="fa-solid fa-clock stat-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Confirmed -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stat-card bg-gradient-info position-relative">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5><i class="fa-solid fa-check-circle me-2"></i>Confirmed</h5>
                                        <h2>{{ number_format($stats['confirmed_bookings']) }}</h2>
                                        <p>Scheduled</p>
                                        <div class="growth-badge positive" style="background: rgba(255,255,255,0.25); color: white;">
                                            <i class="fa-solid fa-calendar"></i>
                                            <span>Upcoming</span>
                                        </div>
                                    </div>
                                </div>
                                <i class="fa-solid fa-check-circle stat-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Completed -->
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                        <div class="card stat-card bg-gradient-success position-relative">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5><i class="fa-solid fa-circle-check me-2"></i>Completed</h5>
                                        <h2>{{ number_format($stats['completed_bookings']) }}</h2>
                                        <p>Successful</p>
                                        <div class="growth-badge positive" style="background: rgba(255,255,255,0.25); color: white;">
                                            <i class="fa-solid fa-check-double"></i>
                                            <span>Finished</span>
                                        </div>
                                    </div>
                                </div>
                                <i class="fa-solid fa-circle-check stat-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Booking Status Distribution -->
                <div class="row mb-4">
                    <!-- Booking Status Distribution -->
                    <div class="col-12 mb-4">
                        <div class="card chart-container">
                            <div class="card-header d-flex justify-content-between align-items-center pb-3">
                                <div>
                                    <h5 class="mb-0 font-weight-bold">
                                        <i class="fa-solid fa-chart-pie text-primary me-2"></i>Booking Status Distribution
                                    </h5>
                                    <small class="text-muted">Overview of all booking statuses</small>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="p-3 rounded bg-light text-center">
                                            <h3 class="text-warning mb-1">{{ number_format($stats['pending_bookings']) }}</h3>
                                            <small class="text-muted font-weight-bold">PENDING</small>
                                            <div class="progress mt-2" style="height: 6px;">
                                                <div class="progress-bar bg-warning" role="progressbar"
                                                    style="width: {{ $stats['total_bookings'] > 0 ? ($stats['pending_bookings'] / $stats['total_bookings'] * 100) : 0 }}%"
                                                    aria-valuenow="{{ $stats['pending_bookings'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="p-3 rounded bg-light text-center">
                                            <h3 class="text-info mb-1">{{ number_format($stats['confirmed_bookings']) }}</h3>
                                            <small class="text-muted font-weight-bold">CONFIRMED</small>
                                            <div class="progress mt-2" style="height: 6px;">
                                                <div class="progress-bar bg-info" role="progressbar"
                                                    style="width: {{ $stats['total_bookings'] > 0 ? ($stats['confirmed_bookings'] / $stats['total_bookings'] * 100) : 0 }}%"
                                                    aria-valuenow="{{ $stats['confirmed_bookings'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="p-3 rounded bg-light text-center">
                                            <h3 class="text-success mb-1">{{ number_format($stats['completed_bookings']) }}</h3>
                                            <small class="text-muted font-weight-bold">COMPLETED</small>
                                            <div class="progress mt-2" style="height: 6px;">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                    style="width: {{ $stats['total_bookings'] > 0 ? ($stats['completed_bookings'] / $stats['total_bookings'] * 100) : 0 }}%"
                                                    aria-valuenow="{{ $stats['completed_bookings'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-6 mb-3">
                                        <div class="p-3 rounded bg-light text-center">
                                            <h3 class="text-danger mb-1">{{ number_format($stats['cancelled_bookings']) }}</h3>
                                            <small class="text-muted font-weight-bold">CANCELLED</small>
                                            <div class="progress mt-2" style="height: 6px;">
                                                <div class="progress-bar bg-danger" role="progressbar"
                                                    style="width: {{ $stats['total_bookings'] > 0 ? ($stats['cancelled_bookings'] / $stats['total_bookings'] * 100) : 0 }}%"
                                                    aria-valuenow="{{ $stats['cancelled_bookings'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if($stats['flagged_bookings'] > 0)
                                <div class="alert alert-warning mt-3 mb-0">
                                    <i class="fa-solid fa-flag me-2"></i>
                                    <strong>{{ number_format($stats['flagged_bookings']) }}</strong> bookings flagged for review
                                    <a href="{{ route('admin.bookings.flagged') }}" class="btn btn-sm btn-warning ms-2">
                                        Review Now <i class="fa-solid fa-arrow-right"></i>
                                    </a>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Bookings -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card chart-container">
                            <div class="card-header d-flex justify-content-between align-items-center pb-3">
                                <div>
                                    <h5 class="mb-0 font-weight-bold">
                                        <i class="fa-solid fa-clock-rotate-left text-primary me-2"></i>Recent Bookings
                                    </h5>
                                    <small class="text-muted">Latest booking activities</small>
                                </div>
                                <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-outline-primary">
                                    View All <i class="fa-solid fa-arrow-right"></i>
                                </a>
                            </div>
                            <div class="card-body p-0">
                                @if(isset($recentBookings) && $recentBookings->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th style="width: 50px;">#</th>
                                                    <th>Customer</th>
                                                    <th>Company</th>
                                                    <th>Date & Time</th>
                                                    <th>Amount</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($recentBookings as $booking)
                                                    <tr>
                                                        <td>
                                                            <span class="badge badge-primary">#{{ $booking->id }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="avatar bg-light-primary me-2">
                                                                    <div class="avatar-content">
                                                                        {{ strtoupper(substr($booking->user->name ?? 'N', 0, 1)) }}
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <h6 class="mb-0 font-weight-bold">{{ $booking->user->name ?? 'N/A' }}</h6>
                                                                    <small class="text-muted">{{ $booking->user->email ?? 'N/A' }}</small>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="font-weight-bold">{{ $booking->company->name ?? 'N/A' }}</span>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                <i class="fa-solid fa-calendar text-muted me-1"></i>
                                                                {{ $booking->booking_date ? $booking->booking_date->format('M d, Y') : 'N/A' }}
                                                            </div>
                                                            <small class="text-muted">
                                                                <i class="fa-solid fa-clock me-1"></i>{{ $booking->booking_time ?? 'N/A' }}
                                                            </small>
                                                        </td>
                                                        <td>
                                                            <span class="font-weight-bold text-success">{{ config('app.currency_symbol', '$') }}{{ number_format((float)($booking->total_amount ?? 0), 2) }}</span>
                                                        </td>
                                                        <td>
                                                            @php
                                                                $statusColors = [
                                                                    'pending' => 'warning',
                                                                    'confirmed' => 'info',
                                                                    'completed' => 'success',
                                                                    'cancelled' => 'danger',
                                                                ];
                                                                $color = $statusColors[$booking->status] ?? 'secondary';
                                                            @endphp
                                                            <span class="badge bg-{{ $color }}">
                                                                {{ ucfirst($booking->status) }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('admin.bookings.show', $booking->id) }}"
                                                               class="btn btn-sm btn-info"
                                                               title="View Details">
                                                                <i class="fa-solid fa-eye"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-5">
                                        <i class="fa-solid fa-calendar-xmark fa-4x text-muted mb-3" style="opacity: 0.3;"></i>
                                        <p class="text-muted mb-0">No bookings yet. Bookings will appear here automatically.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="row">
                    <div class="col-12">
                        <h5 class="mb-3 font-weight-bold">Quick Actions</h5>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
                        <a href="{{ route('admin.bookings.index') }}" class="card chart-container text-decoration-none">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-primary bg-lighten-5 text-primary me-3">
                                        <div class="avatar-content">
                                            <i class="fa-solid fa-list fa-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-dark font-weight-bold">All Bookings</h6>
                                        <small class="text-muted">View complete list</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
                        <a href="{{ route('admin.bookings.flagged') }}" class="card chart-container text-decoration-none">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-warning bg-lighten-5 text-warning me-3">
                                        <div class="avatar-content">
                                            <i class="fa-solid fa-flag fa-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-dark font-weight-bold">Flagged</h6>
                                        <small class="text-muted">Review issues</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
                        <a href="{{ route('admin.bookings.activity') }}" class="card chart-container text-decoration-none">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-info bg-lighten-5 text-info me-3">
                                        <div class="avatar-content">
                                            <i class="fa-solid fa-clock-rotate-left fa-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-dark font-weight-bold">Activity Log</h6>
                                        <small class="text-muted">View history</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
                        <div class="card chart-container">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar bg-success bg-lighten-5 text-success me-3">
                                        <div class="avatar-content">
                                            <i class="fa-solid fa-download fa-lg"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-dark font-weight-bold">Export Data</h6>
                                        <small class="text-muted">Download reports</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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