{% extends "base.html" %}

{% block title %}Admin Dashboard - VacationWeb{% endblock %}

{% block extra_css %}
<style>
/* Animated gradient background like 500.html */
.dashboard-container {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.dashboard-background {
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(135deg, #4e73df, #1cc88a, #36b9cc);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    z-index: -2;
}

@keyframes gradientFlow {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* Stats Cards */
.stat-card {
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.stat-card:hover { transform: scale(1.05); }
.stat-icon { font-size: 36px; margin-bottom: 10px; }
.stat-value { font-size: 28px; font-weight: bold; }
.stat-label { font-size: 14px; text-transform: uppercase; }

/* Table */
.table-dashboard {
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 10px;
}
.table-dashboard th, .table-dashboard td { vertical-align: middle; }
.badge-status {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    text-transform: capitalize;
}
.badge-pending { background: #f6c23e; color: black; }
.badge-confirmed { background: #1cc88a; color: white; }
.badge-cancelled { background: #e74a3b; color: white; }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="dashboard-background"></div>

    <!-- Stats -->
    <div class="row g-4">
        <div class="col-md-3">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div class="stat-value">{{ stats.total_users }}</div>
                <div class="stat-label">Users</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
                <div class="stat-value">{{ stats.total_bookings }}</div>
                <div class="stat-label">Bookings</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-box"></i></div>
                <div class="stat-value">{{ stats.total_packages }}</div>
                <div class="stat-label">Packages</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-dollar-sign"></i></div>
                <div class="stat-value">RM {{ stats.total_revenue }}</div>
                <div class="stat-label">Revenue</div>
            </div>
        </div>
    </div>

    <!-- Booking Status -->
    <div class="row mt-4 g-4">
        <div class="col-md-4">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div class="stat-value">{{ stats.status_counts.pending or 0 }}</div>
                <div class="stat-label">Pending</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-value">{{ stats.status_counts.confirmed or 0 }}</div>
                <div class="stat-label">Confirmed</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card text-center">
                <div class="stat-icon"><i class="fas fa-times-circle"></i></div>
                <div class="stat-value">{{ stats.status_counts.cancelled or 0 }}</div>
                <div class="stat-label">Cancelled</div>
            </div>
        </div>
    </div>

    <!-- Recent Bookings Table -->
    <div class="mt-5">
        <h3 class="text-white mb-3">Recent Bookings</h3>
        <div class="table-responsive">
            <table class="table table-dashboard table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Destination</th>
                        <th>Travel Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in recent_bookings %}
                    <tr>
                        <td>{{ booking.booking_id }}</td>
                        <td>{{ booking.user_name }}</td>
                        <td>{{ booking.destination_name }}</td>
                        <td>{{ booking.travel_date }}</td>
                        <td>
                            <span class="badge-status badge-{{ booking.status }}">
                                {{ booking.status }}
                            </span>
                        </td>
                        <td>
                            <a href="/admin/bookings" class="btn btn-sm btn-light">Manage</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}