{% extends "base.html" %}

{% block title %}Select Time | NailTech Nation{% endblock %}

{% block content %}
<section class="booking-section">
    <div class="container">
        <div class="booking-header">
            <h1>Select Date & Time</h1>
            <p><strong>{{ service.name }}</strong> with <strong>{{ technician.name }}</strong> - KES {{ service.price }}</p>
            <div class="booking-steps">
                <div class="step completed">✓ Service</div>
                <div class="step completed">✓ Technician</div>
                <div class="step active">3. Time</div>
                <div class="step">4. Confirm</div>
            </div>
        </div>
        
        <!-- Date Selector -->
        <div class="date-selector">
            <h3>Choose a Date</h3>
            <div class="dates-scroll">
                {% for date in date_options %}
                <a href="{{ url_for('client.select_time', technician_id=technician.id, date=date.isoformat()) }}" 
                   class="date-card {% if date == selected_date %}active{% endif %}">
                    <div class="date-day">{{ date.strftime('%a') }}</div>
                    <div class="date-number">{{ date.strftime('%d') }}</div>
                    <div class="date-month">{{ date.strftime('%b') }}</div>
                </a>
                {% endfor %}
            </div>
        </div>
        
        <!-- Time Slots -->
        <div class="time-slots-section">
            <h3>Available Times for {{ format_date(selected_date) }}</h3>
            
            {% if is_fully_booked %}
                <div class="no-slots-message">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/>
                        <line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                    <h4>Fully Booked</h4>
                    <p>{{ technician.name }} is fully booked on this date.</p>
                    
                    {% if next_available %}
                        <p class="next-available">
                            Next available: <strong>{{ format_date(next_available.date) }}</strong> 
                            at <strong>{{ format_time(next_available.time) }}</strong>
                        </p>
                        <a href="{{ url_for('client.select_time', technician_id=technician.id, date=next_available.date.isoformat()) }}" 
                           class="btn btn-primary">View Next Available</a>
                    {% else %}
                        <p>No availability in the next 14 days. Please try another technician.</p>
                    {% endif %}
                </div>
            {% else %}
                <form method="POST" action="{{ url_for('client.confirm_booking') }}" class="time-slots-form">
                    <input type="hidden" name="booking_date" value="{{ selected_date.isoformat() }}">
                    
                    <div class="time-slots-grid">
                        {% for slot in available_slots %}
                        <label class="time-slot">
                            <input type="radio" name="booking_time" value="{{ slot.strftime('%H:%M') }}" required>
                            <span class="time-slot-label">{{ format_time(slot) }}</span>
                        </label>
                        {% endfor %}
                    </div>
                    
                    <div class="booking-actions">
                        <a href="{{ url_for('client.select_technician', service_id=service.id) }}" class="btn btn-secondary">← Back</a>
                        <button type="submit" class="btn btn-primary">Continue to Confirmation →</button>
                    </div>
                </form>
            {% endif %}
        </div>
    </div>
</section>

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

.booking-header {
    text-align: center;
    margin-bottom: 3rem;
}

.booking-header h1 {
    margin-bottom: 0.5rem;
}

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

.booking-header strong {
    color: var(--primary-pink);
}

.booking-steps {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.step {
    padding: 0.75rem 1.5rem;
    background: var(--bg-light);
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--light-text);
}

.step.active {
    background: var(--bg-gradient);
    color: white;
}

.step.completed {
    background: #4CAF50;
    color: white;
}

.date-selector {
    margin-bottom: 3rem;
}

.date-selector h3 {
    margin-bottom: 1.5rem;
}

.dates-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 0;
}

.date-card {
    min-width: 100px;
    padding: 1.5rem 1rem;
    text-align: center;
    background: white;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.date-card:hover,
.date-card.active {
    border-color: var(--primary-pink);
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
}

.date-day {
    color: var(--light-text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.date-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-pink);
    margin-bottom: 0.25rem;
}

.date-month {
    color: var(--light-text);
    font-size: 0.9rem;
}

.time-slots-section {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.time-slots-section h3 {
    margin-bottom: 2rem;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.time-slot {
    cursor: pointer;
}

.time-slot input {
    display: none;
}

.time-slot-label {
    display: block;
    padding: 1rem;
    text-align: center;
    background: var(--bg-light);
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
}

.time-slot input:checked + .time-slot-label {
    background: var(--bg-gradient);
    color: white;
    border-color: var(--primary-pink);
}

.time-slot:hover .time-slot-label {
    border-color: var(--primary-pink);
}

.no-slots-message {
    text-align: center;
    padding: 3rem 2rem;
}

.no-slots-message svg {
    color: var(--light-text);
    margin-bottom: 1rem;
}

.no-slots-message h4 {
    margin-bottom: 1rem;
}

.no-slots-message p {
    color: var(--light-text);
    margin-bottom: 1rem;
}

.next-available {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-radius: var(--radius-sm);
    margin: 1.5rem 0;
}

.next-available strong {
    color: var(--primary-pink);
}

.booking-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.booking-actions .btn {
    flex: 1;
    min-width: 150px;
}

@media (max-width: 768px) {
    .time-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
</style>
{% endblock %}