{% extends "base.html" %}

{% block title %}My Bookings | NailTech Nation{% endblock %}

{% block content %}
<section class="bookings-section">
    <div class="container">
        <h1>My Bookings</h1>
        
        <!-- Active Bookings -->
        <div class="bookings-category">
            <h2>Active Appointments</h2>
            
            {% if active_bookings %}
                <div class="bookings-grid">
                    {% for booking in active_bookings %}
                    <div class="booking-card">
                        <div class="booking-header">
                            <span class="booking-id">#{{ booking.id }}</span>
                            <span class="booking-status active">Active</span>
                        </div>
                        
                        <div class="booking-service">
                            <h3>{{ booking.service.name }}</h3>
                            <p class="booking-price">KES {{ booking.service.price }}</p>
                        </div>
                        
                        <div class="booking-details">
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="16" y1="2" x2="16" y2="6"/>
                                    <line x1="8" y1="2" x2="8" y2="6"/>
                                    <line x1="3" y1="10" x2="21" y2="10"/>
                                </svg>
                                <span>{{ format_date(booking.booking_date) }}</span>
                            </div>
                            
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                                <span>{{ format_time(booking.booking_time) }}</span>
                            </div>
                            
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                    <circle cx="12" cy="7" r="4"/>
                                </svg>
                                <span>{{ booking.technician.name }}</span>
                            </div>
                        </div>
                        
                        <!-- Countdown -->
                        {% set countdown_info = countdowns.get(booking.id) %}
                        {% if countdown_info %}
                            {% if countdown_info.in_grace_period %}
                                <div class="countdown-warning">
                                    ⚠️ {{ countdown_info.minutes_remaining }} minutes grace period
                                </div>
                            {% else %}
                                <div class="countdown-normal">
                                    ⏱ {{ countdown_info.hours_until }}h {{ countdown_info.minutes_until }}m until appointment
                                </div>
                            {% endif %}
                        {% endif %}
                        
                        <form method="POST" action="{{ url_for('client.cancel_booking', booking_id=booking.id) }}" onsubmit="return confirm('Are you sure you want to cancel this booking?');">
                            <button type="submit" class="btn btn-secondary btn-sm">Cancel Booking</button>
                        </form>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="empty-state">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    <h3>No Active Bookings</h3>
                    <p>You don't have any upcoming appointments</p>
                    <a href="{{ url_for('client.select_service') }}" class="btn btn-primary">Book Now</a>
                </div>
            {% endif %}
        </div>
        
        <!-- Past Bookings -->
        <div class="bookings-category">
            <h2>Booking History</h2>
            
            {% if past_bookings %}
                <div class="bookings-grid">
                    {% for booking in past_bookings %}
                    <div class="booking-card past">
                        <div class="booking-header">
                            <span class="booking-id">#{{ booking.id }}</span>
                            <span class="booking-status {{ booking.status }}">{{ booking.status|title }}</span>
                        </div>
                        
                        <div class="booking-service">
                            <h3>{{ booking.service.name }}</h3>
                            <p class="booking-price">KES {{ booking.service.price }}</p>
                        </div>
                        
                        <div class="booking-details">
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="16" y1="2" x2="16" y2="6"/>
                                    <line x1="8" y1="2" x2="8" y2="6"/>
                                    <line x1="3" y1="10" x2="21" y2="10"/>
                                </svg>
                                <span>{{ format_date(booking.booking_date) }}</span>
                            </div>
                            
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                                <span>{{ format_time(booking.booking_time) }}</span>
                            </div>
                            
                            <div class="booking-detail">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                    <circle cx="12" cy="7" r="4"/>
                                </svg>
                                <span>{{ booking.technician.name }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="no-history">No booking history yet</p>
            {% endif %}
        </div>
    </div>
</section>

<style>
.bookings-section {
    padding: 3rem 0;
    min-height: 70vh;
}

.bookings-section h1 {
    margin-bottom: 2rem;
}

.bookings-category {
    margin-bottom: 3rem;
}

.bookings-category h2 {
    margin-bottom: 1.5rem;
    color: var(--light-text);
    font-size: 1.3rem;
}

.bookings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.booking-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-pink);
}

.booking-card.past {
    border-left-color: var(--light-text);
    opacity: 0.8;
}

.booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.booking-id {
    font-weight: 600;
    color: var(--light-text);
}

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

.booking-status.active {
    background: #4CAF50;
    color: white;
}

.booking-status.completed {
    background: #2196F3;
    color: white;
}

.booking-status.cancelled {
    background: #9E9E9E;
    color: white;
}

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

.booking-service h3 {
    margin-bottom: 0.5rem;
}

.booking-price {
    color: var(--primary-pink);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.booking-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.booking-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--light-text);
}

.booking-detail svg {
    flex-shrink: 0;
}

.countdown-normal {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--primary-pink);
    font-weight: 600;
    margin-bottom: 1rem;
}

.countdown-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 87, 34, 0.1) 100%);
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
    color: #FF9800;
    font-weight: 600;
    margin-bottom: 1rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state svg {
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

.empty-state h3 {
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--light-text);
    margin-bottom: 2rem;
}

.no-history {
    text-align: center;
    color: var(--light-text);
    padding: 2rem;
}

@media (max-width: 768px) {
    .bookings-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}