@extends('Admin.layout')
@section('content')

    @if(session('error'))
        <div class="alert alert-danger m-2">{{ session('error') }}</div>
    @endif

    <div class="row g-4 mb-2">

        <!-- Total Bookings -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('booking_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-primary-subtle p-3 me-3">
                            <i class="ti tabler-calendar-event text-primary fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Total Bookings</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalBookings ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Total Users -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('user_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-success-subtle p-3 me-3">
                            <i class="ti tabler-users text-success fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Total Users</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalUsers ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Revenue -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('transaction_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-warning-subtle p-3 me-3">
                            <i class="ti tabler-currency-rupee text-warning fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Total Revenue</small>
                            <h3 class="fw-bold mb-0 text-dark">₹{{ number_format($totalRevenue ?? 0) }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Today's Bookings -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('booking_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-info-subtle p-3 me-3">
                            <i class="ti tabler-calendar-check text-info fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Today's Bookings</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $todaysBookings ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Pending Balance -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('booking_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-danger-subtle p-3 me-3">
                            <i class="ti tabler-wallet text-danger fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Pending Balance</small>
                            <h3 class="fw-bold mb-0 text-dark">₹{{ number_format($pendingBalance ?? 0) }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Completed Bookings -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('booking_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-success-subtle p-3 me-3">
                            <i class="ti tabler-circle-check text-success fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Completed</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $completedBookings ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Cancelled Bookings -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('booking_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-danger-subtle p-3 me-3">
                            <i class="ti tabler-calendar-x text-danger fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Cancelled</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $cancelledBookings ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Unread Enquiries -->
        <div class="col-xl-3 col-lg-4 col-md-6">
            <a href="{{ route('enquiry_list') }}" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 dashboard-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle bg-secondary-subtle p-3 me-3">
                            <i class="ti tabler-mail text-secondary fs-2"></i>
                        </div>
                        <div>
                            <small class="text-muted">Unread Enquiries</small>
                    <h3 class="fw-bold mb-0 text-dark">{{ $unreadEnquiriesCount ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </a>
        </div>

    </div>

    <!-- ============ RECENT BOOKINGS + RECENT ENQUIRIES ============ -->
    <div class="row g-4 mt-1">

        <!-- Recent Bookings -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100 recent-card">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 fw-bold">Recent Bookings</h6>
                        <small class="text-muted">Latest 5 reservations</small>
                    </div>
                    <a href="{{ route('booking_list') }}" class="btn btn-sm btn-label-viewall  fw-semibold px-3">View All <i
                            class="ti tabler-arrow-right ms-1"></i></a>
                </div>
                <div class="card-body px-4 pt-3 pb-2">
                    @if($recentBookings->isEmpty())
                        <div class="text-center py-5">
                            <i class="ti tabler-calendar-off text-muted" style="font-size: 2.2rem; opacity:.4;"></i>
                            <p class="text-muted mb-0 mt-2">No bookings yet.</p>
                        </div>
                    @else
                        @foreach($recentBookings as $booking)
                            <a href="{{ route('booking_list') }}"
                                class="recent-row d-flex align-items-center justify-content-between text-decoration-none">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="recent-avatar bg-primary-subtle text-primary">
                                        {{ strtoupper(substr($booking->customer_name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="fw-semibold text-dark">{{ $booking->customer_name }}</div>
                                        <div class="small text-muted">{{ $booking->booking_id }} &middot;
                                            {{ \Carbon\Carbon::parse($booking->date)->format('d M Y') }}</div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold text-dark mb-1">₹{{ number_format($booking->amount) }}</div>
                                    @if($booking->status == 'Completed')
                                        <span class="status-pill status-completed">Completed</span>
                                    @elseif($booking->status == 'Cancelled')
                                        <span class="status-pill status-cancelled">Cancelled</span>
                                    @else
                                        <span class="status-pill status-pending">Pending</span>
                                    @endif
                                </div>
                            </a>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

        <!-- Recent Enquiries -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100 recent-card">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0 fw-bold">Recent Enquiries</h6>
                        <small class="text-muted">Unread messages</small>
                    </div>
                    <a href="{{ route('enquiry_list') }}" class="btn btn-sm btn-label-viewall fw-semibold px-3">View All <i
                            class="ti tabler-arrow-right ms-1"></i></a>
                </div>
                <div class="card-body px-4 pt-3 pb-2">
                    @if($recentEnquiries->isEmpty())
                        <div class="text-center py-5">
                            <i class="ti tabler-mail-opened text-muted" style="font-size: 2.2rem; opacity:.4;"></i>
                            <p class="text-muted mb-0 mt-2">No unread enquiries.</p>
                        </div>
                    @else
                        @foreach($recentEnquiries as $enquiry)
                            <a href="{{ route('enquiry_list') }}"
                                class="recent-row d-flex align-items-center justify-content-between text-decoration-none">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="recent-avatar bg-warning-subtle text-warning">
                                        {{ strtoupper(substr($enquiry->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="fw-semibold text-dark">{{ $enquiry->name }}</div>
                                        <div class="small text-muted">{{ $enquiry->phone }} &middot;
                                            {{ \Illuminate\Support\Str::limit($enquiry->subject, 28) }}</div>
                                    </div>
                                </div>
                                <span class="status-pill status-pending">Unread</span>
                            </a>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

    </div>

    <style>
        .dashboard-card {
            transition: transform .15s ease, box-shadow .15s ease;
            cursor: pointer;
        }

        .dashboard-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, .1) !important;
        }

        .recent-card {
            border-radius: 14px;
            overflow: hidden;
        }

        .recent-row {
            display: flex;
            padding: 14px 4px;
            border-bottom: 1px solid #f0f0f0;
            transition: background .15s ease;
            border-radius: 8px;
        }

        .recent-row:last-child {
            border-bottom: none;
        }

        .recent-row:hover {
            background: #f8f9fc;
            padding-left: 10px;
            padding-right: 10px;
        }

        .recent-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .95rem;
            flex-shrink: 0;
        }

        .status-pill {
            display: inline-block;
            font-size: .72rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            letter-spacing: .3px;
        }

        .status-completed {
            background: rgba(40, 167, 69, .12);
            color: #28a745;
        }

        .status-pending {
            background: rgba(255, 193, 7, .15);
            color: #b8860b;
        }

        .status-cancelled {
            background: rgba(220, 53, 69, .12);
            color: #dc3545;
        }

        .btn-label-viewall {
    background: rgba(19, 43, 82, 0.12);
    color: #132B52;
    border: 1px solid rgba(19, 43, 82, 0.2);
   }

 .btn-label-viewall:hover {
    background: #132B52;
    color: #fff;
    border-color: #132B52;
 }
    </style>


@endsection