{% extends "base.html" %}

{% block title %}Manage Bookings | Admin{% endblock %}

{% block content %}
<section class="admin-section">
    <div class="container">
        <h1>All Bookings</h1>
        
        <!-- Filters -->
        <div class="filters-section">
            <form method="GET" class="filters-form">
                <select name="status" onchange="this.form.submit()">
                    <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All Status</option>
                    <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
                    <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
                    <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    <option value="no-show" {% if status_filter == 'no-show' %}selected{% endif %}>No-Show</option>
                </select>
                
                <select name="technician" onchange="this.form.submit()">
                    <option value="all">All Technicians</option>
                    {% for tech in technicians %}
                        <option value="{{ tech.id }}" {% if tech_filter == tech.id|string %}selected{% endif %}>
                            {{ tech.name }}
                        </option>
                    {% endfor %}
                </select>
                
                <select name="date" onchange="this.form.submit()">
                    <option value="all" {% if date_filter == 'all' %}selected{% endif %}>All Dates</option>
                    <option value="today" {% if date_filter == 'today' %}selected{% endif %}>Today</option>
                    <option value="upcoming" {% if date_filter == 'upcoming' %}selected{% endif %}>Upcoming</option>
                    <option value="past" {% if date_filter == 'past' %}selected{% endif %}>Past</option>
                </select>
            </form>
        </div>
        
        <!-- Bookings Table -->
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Client</th>
                        <th>Phone</th>
                        <th>Service</th>
                        <th>Technician</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Price</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in bookings %}
                    <tr>
                        <td>#{{ booking.id }}</td>
                        <td>{{ booking.client.name }}</td>
                        <td>{{ booking.client.phone }}</td>
                        <td>{{ booking.service.name }}</td>
                        <td>{{ booking.technician.name }}</td>
                        <td>{{ format_date(booking.booking_date) }}</td>
                        <td>{{ format_time(booking.booking_time) }}</td>
                        <td>KES {{ booking.service.price }}</td>
                        <td><span class="badge {{ booking.status }}">{{ booking.status }}</span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {% if not bookings %}
            <div class="empty-state">
                <p>No bookings found with the selected filters</p>
            </div>
            {% endif %}
        </div>
    </div>
</section>

<style>
.admin-section {
    padding: 3rem 0;
}

.filters-section {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.filters-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filters-form select {
    padding: 0.75rem;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
    min-width: 200px;
}

.table-container {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.data-table {
    width: 100%;
}

.data-table thead {
    background: var(--bg-gradient);
    color: white;
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--bg-light);
}

.data-table tbody tr:hover {
    background: var(--bg-light);
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.badge.active {
    background: #4CAF50;
    color: white;
}

.badge.completed {
    background: #2196F3;
    color: white;
}

.badge.cancelled {
    background: #9E9E9E;
    color: white;
}

.badge.no-show {
    background: #F44336;
    color: white;
}

.empty-state {
    padding: 3rem;
    text-align: center;
    color: var(--light-text);
}

@media (max-width: 768px) {
    .filters-form {
        flex-direction: column;
    }
    
    .filters-form select {
        width: 100%;
    }
}
</style>
{% endblock %}