{% extends "base.html" %}

{% block title %}Booking Confirmed | NailTech Nation{% endblock %}

{% block content %}
<section class="confirmation-section">
    <div class="container">
        <div class="confirmation-card">
            <div class="confirmation-icon">
                <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                    <polyline points="22 4 12 14.01 9 11.01"/>
                </svg>
            </div>
            
            <h1>Booking Confirmed! 🎉</h1>
            <p class="confirmation-message">Your appointment has been successfully booked. We can't wait to see you!</p>
            
            <div class="booking-details-card">
                <h2>Appointment Details</h2>
                
                <div class="detail-row">
                    <span class="detail-label">Service</span>
                    <span class="detail-value">{{ booking.service.name }}</span>
                </div>
                
                <div class="detail-row">
                    <span class="detail-label">Price</span>
                    <span class="detail-value">KES {{ booking.service.price }}</span>
                </div>
                
                <div class="detail-row">
                    <span class="detail-label">Technician</span>
                    <span class="detail-value">{{ booking.technician.name }}</span>
                </div>
                
                <div class="detail-row highlight">
                    <span class="detail-label">Date</span>
                    <span class="detail-value">{{ format_date(booking.booking_date) }}</span>
                </div>
                
                <div class="detail-row highlight">
                    <span class="detail-label">Time</span>
                    <span class="detail-value">{{ format_time(booking.booking_time) }}</span>
                </div>
                
                <div class="detail-row">
                    <span class="detail-label">Duration</span>
                    <span class="detail-value">2 hours 30 minutes</span>
                </div>
                
                <div class="detail-row">
                    <span class="detail-label">Booking ID</span>
                    <span class="detail-value">#{{ booking.id }}</span>
                </div>
            </div>
            
            <!-- Countdown -->
            {% if not countdown.expired %}
            <div class="countdown-card">
                <h3>Time Until Appointment</h3>
                {% if countdown.in_grace_period %}
                    <p class="countdown-warning">⚠️ Grace period: {{ countdown.minutes_remaining }} minutes remaining</p>
                {% else %}
                    <p class="countdown-time">{{ countdown.hours_until }}h {{ countdown.minutes_until }}m</p>
                {% endif %}
            </div>
            {% endif %}
            
            <!-- Important Notes -->
            <div class="notes-card">
                <h3>📌 Important Notes</h3>
                <ul>
                    <li>Please arrive on time to enjoy your full service duration</li>
                    <li>We offer a 30-minute grace period for late arrivals</li>
                    <li>Bookings more than 30 minutes late will be marked as no-shows</li>
                    <li>Payment is made after service completion</li>
                    <li>Feel free to cancel if plans change</li>
                </ul>
            </div>
            
            <div class="confirmation-actions">
                <a href="{{ url_for('client.my_bookings') }}" class="btn btn-primary">View My Bookings</a>
                <a href="{{ url_for('public.index') }}" class="btn btn-secondary">Back to Home</a>
            </div>
        </div>
    </div>
</section>

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

.confirmation-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.confirmation-icon {
    margin: 0 auto 2rem;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
    border-radius: 50%;
}

.confirmation-icon svg {
    color: #4CAF50;
}

.confirmation-card h1 {
    margin-bottom: 1rem;
    color: var(--dark-text);
}

.confirmation-message {
    color: var(--light-text);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.booking-details-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    text-align: left;
}

.booking-details-card h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bg-light);
}

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

.detail-row.highlight {
    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);
    margin: 0.5rem 0;
}

.detail-label {
    color: var(--light-text);
    font-weight: 500;
}

.detail-value {
    font-weight: 600;
    color: var(--dark-text);
}

.detail-row.highlight .detail-value {
    color: var(--primary-pink);
    font-size: 1.1rem;
}

.countdown-card {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.countdown-card h3 {
    margin-bottom: 1rem;
}

.countdown-time {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-pink);
}

.countdown-warning {
    color: #FF9800;
    font-weight: 600;
    font-size: 1.2rem;
}

.notes-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    text-align: left;
}

.notes-card h3 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.notes-card ul {
    list-style: none;
    padding: 0;
}

.notes-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--light-text);
    line-height: 1.6;
}

.notes-card li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-pink);
    font-weight: bold;
}

.confirmation-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .detail-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .confirmation-actions .btn {
        width: 100%;
    }
}
</style>
{% endblock %}