{% extends "base.html" %}

{% block title %}Reservation Details - Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">
                <i class="bi bi-calendar-check text-info"></i> Reservation Details
            </h1>
            <div>
                <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to List
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Reservation Info -->
    <div class="col-lg-8 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle text-primary"></i> Reservation Information
                    </h5>
                    <span class="badge bg-{% if reservation.status.value == 'CONFIRMED' %}success{% elif reservation.status.value == 'PENDING' %}warning{% else %}secondary{% endif %}">
                        {{ reservation.status.value }}
                    </span>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Reservation ID</label>
                        <p class="mb-0"><strong>#{{ reservation.id }}</strong></p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Created by</label>
                        <p class="mb-0">
                            <i class="bi bi-person"></i> 
                            {% if reservation.user %}
                                {{ reservation.user.first_name }} {{ reservation.user.last_name }}
                            {% else %}
                                Unknown
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Date & Time</label>
                        <p class="mb-0">
                            <i class="bi bi-clock"></i>
                            {{ reservation.start_time.strftime('%B %d, %Y') }}<br>
                            {{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }}
                        </p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="text-muted small">Duration</label>
                        <p class="mb-0">
                            <i class="bi bi-hourglass"></i>
                            {% set duration = (reservation.end_time - reservation.start_time).total_seconds() / 60 %}
                            {{ (duration / 60) | round(1) }} hours
                        </p>
                    </div>
                </div>

                {% if reservation.purpose %}
                <div class="mb-3">
                    <label class="text-muted small">Purpose</label>
                    <p class="mb-0">{{ reservation.purpose }}</p>
                </div>
                {% endif %}

                {% if reservation.notes %}
                <div class="mb-3">
                    <label class="text-muted small">Notes</label>
                    <p class="mb-0">{{ reservation.notes }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Classroom Details -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0">
                    <i class="bi bi-building text-info"></i> Classroom Information
                </h5>
            </div>
            <div class="card-body">
                {% if reservation.classroom %}
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="text-muted small">Classroom</label>
                            <p class="mb-0"><strong>{{ reservation.classroom.code_display }}</strong></p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="text-muted small">Building</label>
                            <p class="mb-0">{{ reservation.classroom.building }}</p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="text-muted small">Capacity</label>
                            <p class="mb-0">{{ reservation.classroom.capacity }} people</p>
                        </div>
                        {% if reservation.classroom.description %}
                        <div class="col-12">
                            <label class="text-muted small">Description</label>
                            <p class="mb-0">{{ reservation.classroom.description }}</p>
                        </div>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="text-muted mb-0">Classroom information not available</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Subject & Commission -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0">
                    <i class="bi bi-book text-warning"></i> Subject & Commission
                </h5>
            </div>
            <div class="card-body">
                {% if reservation.commission %}
                    <div class="mb-3">
                        <label class="text-muted small">Commission Code</label>
                        <p class="mb-0"><strong>{{ reservation.commission.get_full_code() }}</strong></p>
                    </div>
                    {% if reservation.commission.subject %}
                    <div class="mb-3">
                        <label class="text-muted small">Subject</label>
                        <p class="mb-0">{{ reservation.commission.subject.name }}</p>
                    </div>
                    {% endif %}
                {% else %}
                    <p class="text-muted mb-0">No commission assigned</p>
                {% endif %}
            </div>
        </div>

        <!-- Attendees -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0">
                    <i class="bi bi-people text-success"></i> Attendance
                </h5>
            </div>
            <div class="card-body">
                <div class="text-center">
                    <h3 class="mb-1">{{ reservation.expected_attendees }}</h3>
                    <p class="text-muted small">Expected Attendees</p>
                    {% if reservation.classroom %}
                    <div class="progress mt-3" style="height: 8px;">
                        {% set percentage = (reservation.expected_attendees / reservation.classroom.capacity * 100) %}
                        <div class="progress-bar bg-{% if percentage > 90 %}danger{% elif percentage > 75 %}warning{% else %}success{% endif %}" 
                             style="width: {{ percentage }}%"></div>
                    </div>
                    <small class="text-muted">
                        {{ reservation.expected_attendees }} / {{ reservation.classroom.capacity }} capacity
                    </small>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="mb-0">
                    <i class="bi bi-gear text-secondary"></i> Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    {% if reservation.status.value == 'PENDING' %}
                    <form method="POST" action="{{ url_for('schedule.confirm_reservation', id=reservation.id) }}">
                        <button type="submit" class="btn btn-success" onclick="return confirm('Confirm this reservation?')">
                            <i class="bi bi-check-circle"></i> Confirm Reservation
                        </button>
                    </form>
                    {% endif %}
                    
                    {% if reservation.can_be_cancelled() %}
                    <form method="POST" action="{{ url_for('schedule.cancel_reservation', id=reservation.id) }}">
                        <button type="submit" class="btn btn-danger" onclick="return confirm('Cancel this reservation?')">
                            <i class="bi bi-x-circle"></i> Cancel Reservation
                        </button>
                    </form>
                    {% endif %}
                    
                    <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-list"></i> View All Reservations
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Timestamps -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row text-muted small">
                    <div class="col-md-4">
                        <i class="bi bi-clock-history"></i>
                        Created: {{ reservation.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                    </div>
                    {% if reservation.updated_at %}
                    <div class="col-md-4">
                        <i class="bi bi-arrow-repeat"></i> 
                        Updated: {{ reservation.updated_at.strftime('%Y-%m-%d %H:%M:%S') }}
                    </div>
                    {% endif %}
                    <div class="col-md-4">
                        <i class="bi bi-info-square"></i>
                        Reservation ID: #{{ reservation.id }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}