{% extends "base.html" %}

{% block title %}{{ classroom.code_display }} - {% trans %}Classroom Details{% endtrans %} - Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Breadcrumb & Header -->
    <div class="row mb-4 align-items-center">
        <div class="col-md-7">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small">
                    <li class="breadcrumb-item"><a href="{{ url_for('classrooms.list_classrooms') }}">{% trans %}Classrooms{% endtrans %}</a></li>
                    <li class="breadcrumb-item active">{{ classroom.code_display }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 d-flex align-items-center flex-wrap gap-2">
                <i class="bi bi-door-open text-primary"></i> {{ classroom.code_display }}
                {% if classroom.is_active %}
                <span class="badge bg-success-subtle text-success border border-success-subtle fs-6">
                    <i class="bi bi-check-circle me-1"></i>{% trans %}Active{% endtrans %}
                </span>
                {% else %}
                <span class="badge bg-danger-subtle text-danger border border-danger-subtle fs-6">
                    <i class="bi bi-x-circle me-1"></i>{% trans %}Inactive{% endtrans %}
                </span>
                {% endif %}
            </h1>
        </div>
        <div class="col-md-5 text-md-end mt-3 mt-md-0">
            {% if current_user.has_permission('classrooms', 'read_write') %}
            <a href="{{ url_for('classrooms.edit_classroom', id=classroom.id) }}" class="btn btn-primary me-2">
                <i class="bi bi-pencil me-1"></i>{% trans %}Edit Classroom{% endtrans %}
            </a>
            {% endif %}
            <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{% trans %}Back to Classrooms{% endtrans %}
            </a>
        </div>
    </div>

    <!-- Classroom Details Cards -->
    <div class="row g-3 mb-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-body-tertiary border-0 py-3">
                    <h5 class="mb-0 h6 fw-bold">
                        <i class="bi bi-info-circle text-primary me-2"></i>{% trans %}Ficha Técnica{% endtrans %}
                    </h5>
                </div>
                <div class="card-body p-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted"><i class="bi bi-building me-2"></i>{% trans %}Edificio / Sede{% endtrans %}</span>
                            <span class="fw-bold">
                                {% if classroom.building_entity %}
                                <a href="{{ url_for('buildings.view_building', id=classroom.building_entity.id) }}" class="text-decoration-none">
                                    {{ classroom.building_entity.name }}
                                </a>
                                {% else %}
                                {{ classroom.building }}
                                {% endif %}
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted"><i class="bi bi-door-closed me-2"></i>{% trans %}Número / Nombre{% endtrans %}</span>
                            <span class="fw-bold font-monospace">{{ classroom.code }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted"><i class="bi bi-layers me-2"></i>{% trans %}Piso / Planta{% endtrans %}</span>
                            <span class="fw-bold">{% if classroom.floor == 0 %}Planta Baja{% else %}Piso {{ classroom.floor }}{% endif %}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted"><i class="bi bi-people me-2"></i>{% trans %}Capacidad Máxima{% endtrans %}</span>
                            {% if classroom.is_unlimited %}
                            <span class="badge bg-primary-subtle text-primary border px-2 py-1 fs-6">
                                <i class="bi bi-infinity me-1"></i>{% trans %}Ilimitada (∞){% endtrans %}
                            </span>
                            {% else %}
                            <span class="fw-bold text-success fs-6">{{ classroom.capacity }} {% trans %}estudiantes{% endtrans %}</span>
                            {% endif %}
                        </li>
                    </ul>

                    {% if classroom.description %}
                    <div class="mt-3 pt-3 border-top">
                        <small class="text-muted fw-bold d-block mb-1">{% trans %}Descripción / Notas{% endtrans %}:</small>
                        <p class="small text-secondary mb-0">{{ classroom.description }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- Upcoming Schedule / Reservations -->
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 h6 fw-bold">
                        <i class="bi bi-calendar-check text-primary me-2"></i>{% trans %}Próximas Clases y Reservas{% endtrans %}
                    </h5>
                    <a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-calendar-week me-1"></i>{% trans %}Ver en Calendario{% endtrans %}
                    </a>
                </div>
                <div class="card-body p-0">
                    {% if upcoming_reservations %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light small text-uppercase">
                                <tr>
                                    <th class="ps-3">{% trans %}Fecha y Horario{% endtrans %}</th>
                                    <th>{% trans %}Materia / Motivo{% endtrans %}</th>
                                    <th>{% trans %}Comisión{% endtrans %}</th>
                                    <th>{% trans %}Asistentes{% endtrans %}</th>
                                    <th class="text-end pe-3">{% trans %}Acciones{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for res in upcoming_reservations %}
                                <tr>
                                    <td class="ps-3">
                                        <div class="fw-bold font-monospace text-primary fs-6 mb-1">
                                            <i class="bi bi-calendar-event text-primary me-1"></i>{{ res.start_time.strftime('%d/%m/%Y') }}
                                        </div>
                                        <div class="small font-monospace text-body-secondary">
                                            <i class="bi bi-clock text-warning me-1"></i>{{ res.start_time.strftime('%H:%M') }} - {{ res.end_time.strftime('%H:%M') }} hs
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-bold text-primary">{{ res.subject_name }}</div>
                                        <small class="badge bg-secondary-subtle text-secondary font-monospace">{{ res.subject_code }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-info-subtle text-info border">
                                            {{ res.commission.code if res.commission else 'S/C' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="small">{{ res.expected_attendees }} / {{ classroom.capacity }}</span>
                                    </td>
                                    <td class="text-end pe-3">
                                        {% if res.effective_virtual_link %}
                                        <a href="{{ res.effective_virtual_link }}" target="_blank" class="btn btn-outline-success btn-sm py-0 px-2 me-1" title="{% trans %}Unirse a Clase Virtual (Zoom / Meet){% endtrans %}">
                                            <i class="bi bi-camera-video"></i>
                                        </a>
                                        {% endif %}
                                        <a href="{{ url_for('schedule.view_reservation', id=res.id) }}" class="btn btn-outline-secondary btn-sm py-0 px-2" title="{% trans %}Ver Ficha{% endtrans %}">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-calendar-x text-muted fs-1 mb-2"></i>
                        <h6 class="fw-bold">{% trans %}Sin reservas programadas próximamente{% endtrans %}</h6>
                        <p class="text-muted small mb-3">{% trans %}Esta aula no tiene clases asignadas en las próximas fechas.{% endtrans %}</p>
                        {% if current_user.has_permission('reservations', 'read_write') %}
                        <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-primary btn-sm">
                            <i class="bi bi-plus-circle me-1"></i>{% trans %}Asignar Nueva Reserva{% endtrans %}
                        </a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}