{% extends "base.html" %}

{% block title %}{% trans %}New Reservation{% endtrans %} - 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">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1 small">
                        <li class="breadcrumb-item"><a href="{{ url_for('schedule.today_schedule') }}">{% trans %}Schedule{% endtrans %}</a></li>
                        <li class="breadcrumb-item active">{% trans %}New Reservation{% endtrans %}</li>
                    </ol>
                </nav>
                <h1 class="h3 mb-0">
                    <i class="bi bi-calendar-plus text-primary me-2"></i>{% trans %}New Reservation{% endtrans %}
                </h1>
            </div>
            <a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{% trans %}Back to Reservations{% endtrans %}
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-10 mx-auto">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-body-tertiary border-0 py-3">
                <h5 class="mb-0 h6 fw-bold">
                    <i class="bi bi-calendar3 text-primary me-2"></i>{% trans %}Detalles de la Reserva y Espacio Físico{% endtrans %}
                </h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" id="reservation-form" novalidate>
                    {{ form.hidden_tag() }}
                    
                    <!-- 1. SELECTORES EN CASCADA: Edificio -> Piso -> Aula -->
                    <div class="mb-4">
                        <div class="p-3 rounded bg-body-tertiary border">
                            <label class="form-label fw-bold text-primary mb-2">
                                <i class="bi bi-geo-alt-fill me-1"></i>{% trans %}Selección de Espacio Físico / Modalidad{% endtrans %} <span class="text-danger">*</span>
                            </label>
                            <div class="row g-3">
                                <!-- Edificio / Sede -->
                                <div class="col-md-4">
                                    <label for="cascade-building" class="form-label small fw-semibold text-muted mb-1">
                                        <i class="bi bi-buildings text-primary me-1"></i>1. {% trans %}Edificio / Sede{% endtrans %}
                                    </label>
                                    <select id="cascade-building" class="form-select form-select-sm">
                                        <option value="">{% trans %}-- Selecciona Edificio --{% endtrans %}</option>
                                        {% for b in buildings %}
                                            <option value="{{ b.id }}" data-virtual="{{ 'true' if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) else 'false' }}">
                                                {% if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) %}🌐{% else %}🏢{% endif %} {{ b.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text small text-muted">{% trans %}Sede física o Campus Virtual{% endtrans %}</div>
                                </div>

                                <!-- Piso / Nivel -->
                                <div class="col-md-4">
                                    <label for="cascade-floor" class="form-label small fw-semibold text-muted mb-1">
                                        <i class="bi bi-layers text-secondary me-1"></i>2. {% trans %}Piso / Nivel{% endtrans %}
                                    </label>
                                    <select id="cascade-floor" class="form-select form-select-sm" disabled>
                                        <option value="">{% trans %}-- Selecciona Piso --{% endtrans %}</option>
                                    </select>
                                    <div class="form-text small text-muted" id="floorHelpText">{% trans %}Filtra por planta o nivel{% endtrans %}</div>
                                </div>

                                <!-- Aula / Espacio (Campo del Formulario) -->
                                <div class="col-md-4">
                                    <label for="classroom-select" class="form-label small fw-semibold text-muted mb-1">
                                        <i class="bi bi-door-open text-success me-1"></i>3. {% trans %}Aula / Espacio{% endtrans %} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.classroom_id(class="form-select form-select-sm", id="classroom-select") }}
                                    {% if form.classroom_id.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.classroom_id.errors[0] }}
                                        </div>
                                    {% endif %}
                                    <div class="form-text small text-muted">{% trans %}Capacidad y disponibilidad{% endtrans %}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 2. Comisión y Materia -->
                    <div class="row g-3 mb-3">
                        <div class="col-12">
                            {{ form.commission_id.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
                            {{ form.commission_id(class="form-select", id="commission-select") }}
                            {% if form.commission_id.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.commission_id.errors[0] }}
                                </div>
                            {% endif %}
                            <div class="form-text small text-muted">{% trans %}Materia, código de comisión y cantidad de alumnos inscriptos{% endtrans %}</div>
                        </div>
                    </div>
                    
                    <!-- 3. Horario de Inicio y Fin -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            {{ form.start_time.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
                            {{ form.start_time(class="form-control", id="start-time") }}
                            {% if form.start_time.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.start_time.errors[0] }}
                                </div>
                            {% endif %}
                            <small class="text-muted">{% trans %}¿Cuándo comenzará la clase?{% endtrans %}</small>
                        </div>
                        
                        <div class="col-md-6">
                            {{ form.end_time.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
                            {{ form.end_time(class="form-control", id="end-time") }}
                            {% if form.end_time.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.end_time.errors[0] }}
                                </div>
                            {% endif %}
                            <small class="text-muted">{% trans %}¿Cuándo finalizará la clase?{% endtrans %}</small>
                        </div>
                    </div>
                    
                    <!-- 4. Propósito y Asistentes -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-8">
                            {{ form.purpose.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
                            {{ form.purpose(class="form-control", placeholder=_("Clase regular, examen, sesión de estudio, etc.")) }}
                            {% if form.purpose.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.purpose.errors[0] }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-4">
                            {{ form.expected_attendees.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
                            {{ form.expected_attendees(class="form-control", id="expected_attendees", placeholder="30") }}
                            {% if form.expected_attendees.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.expected_attendees.errors[0] }}
                                </div>
                            {% endif %}
                            <small class="text-muted">{% trans %}Cantidad de asistentes esperados{% endtrans %}</small>
                        </div>
                    </div>
                    
                    <!-- 5. Notas -->
                    <div class="mb-4">
                        {{ form.notes.label(class="form-label fw-semibold") }}
                        {{ form.notes(class="form-control", rows="2", placeholder=_("Cualquier nota adicional o requerimientos especiales...")) }}
                        {% if form.notes.errors %}
                            <div class="text-danger small mt-1">
                                {{ form.notes.errors[0] }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 6. TARJETA DE RESUMEN DESGLOSADA: Edificio, Piso, Aula -->
                    <div class="card bg-body-tertiary border-0 shadow-xs mb-4" id="reservation-summary">
                        <div class="card-body p-3">
                            <h6 class="card-subtitle mb-2 text-muted small fw-bold">
                                <i class="bi bi-info-circle text-info me-1"></i>{% trans %}Resumen de la Reserva{% endtrans %}
                            </h6>
                            
                            <!-- Badges desglosados de Ubicación -->
                            <div class="row g-2 mb-3">
                                <div class="col-md-4">
                                    <div class="p-2 rounded bg-body border">
                                        <small class="text-muted d-block">🏢 {% trans %}Edificio / Sede{% endtrans %}</small>
                                        <strong id="summary-building" class="text-primary">-</strong>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-2 rounded bg-body border">
                                        <small class="text-muted d-block">🪜 {% trans %}Piso / Nivel{% endtrans %}</small>
                                        <strong id="summary-floor" class="text-secondary">-</strong>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="p-2 rounded bg-body border">
                                        <small class="text-muted d-block">🚪 {% trans %}Aula Seleccionada{% endtrans %}</small>
                                        <strong id="summary-classroom" class="text-success">{% trans %}No seleccionada{% endtrans %}</strong>
                                    </div>
                                </div>
                            </div>

                            <!-- Duración y Comisión -->
                            <div class="row g-2 small">
                                <div class="col-md-4">
                                    <span class="text-muted">⏱️ {% trans %}Duración:{% endtrans %}</span>
                                    <strong id="summary-duration" class="text-body ms-1">{% trans %}No calculada{% endtrans %}</strong>
                                </div>
                                <div class="col-md-8">
                                    <span class="text-muted">📚 {% trans %}Comisión:{% endtrans %}</span>
                                    <strong id="summary-commission" class="text-body ms-1">{% trans %}No seleccionada{% endtrans %}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Botones -->
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle me-1"></i>{% trans %}Cancelar{% endtrans %}
                        </a>
                        <button type="submit" class="btn btn-success px-4">
                            <i class="bi bi-calendar-check me-1"></i>{% trans %}Realizar Reserva{% endtrans %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script type="application/json" id="classroom-data">
{
    {% for c in classroom_list %}
    "{{ c.id }}": {
        "id": {{ c.id }},
        "building_id": {{ (c.building_id or 0)|tojson }},
        "building_name": {{ c.building_name|tojson }},
        "floor": {{ c.floor|tojson }},
        "floor_display": {{ c.floor_display|tojson }},
        "code": {{ c.code|tojson }},
        "code_display": {{ c.code_display|tojson }},
        "location_display": {{ c.location_display|tojson }},
        "capacity": {{ c.capacity_display|tojson }},
        "capacity_num": {{ c.capacity }},
        "is_virtual": {{ c.is_virtual|tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
}
</script>

<script type="application/json" id="i18n-strings">
{
    "not_selected": "{% trans %}No seleccionada{% endtrans %}",
    "not_calculated": "{% trans %}No calculada{% endtrans %}",
    "invalid_time": "{% trans %}Rango horario inválido{% endtrans %}",
    "hour": "{% trans %}hora{% endtrans %}",
    "hours": "{% trans %}horas{% endtrans %}",
    "minute": "{% trans %}minuto{% endtrans %}",
    "minutes": "{% trans %}minutos{% endtrans %}",
    "capacity": "{% trans %}Capacidad{% endtrans %}",
    "capacity_exceeded": "{% trans %}Los asistentes esperados superan la capacidad del aula{% endtrans %}"
}
</script>

<script>
$(document).ready(function() {
    let classroomData = {};
    try {
        const rawData = document.getElementById('classroom-data')?.textContent;
        if (rawData) classroomData = JSON.parse(rawData);
    } catch (err) {
        console.error('Error parsing classroomData:', err);
    }
    
    let i18n = {};
    try {
        const rawI18n = document.getElementById('i18n-strings')?.textContent;
        if (rawI18n) i18n = JSON.parse(rawI18n);
    } catch (err) {
        console.error('Error parsing i18n:', err);
    }

    const $building = $('#cascade-building');
    const $floor = $('#cascade-floor');
    const $classroom = $('#classroom-select');
    const $floorHelp = $('#floorHelpText');

    // Guardar todas las opciones originales de aulas
    const originalClassroomOptions = [];
    $classroom.find('option').each(function() {
        originalClassroomOptions.push({
            value: $(this).val(),
            text: $(this).text()
        });
    });

    // 1. Manejo del cambio de Edificio
    $building.on('change', function() {
        const selectedBuildingId = $(this).val();
        const isVirtual = $(this).find(':selected').data('virtual') === true || $(this).find(':selected').data('virtual') === 'true';

        $floor.empty().append('<option value="">-- ' + (isVirtual ? 'No aplica (Campus Virtual)' : 'Selecciona Piso') + ' --</option>');
        $classroom.empty().append('<option value="">-- Selecciona Aula --</option>');

        if (!selectedBuildingId) {
            $floor.prop('disabled', true);
            $classroom.prop('disabled', false);
            // Restaurar todas
            originalClassroomOptions.forEach(opt => {
                if (opt.value) $classroom.append($('<option>', { value: opt.value, text: opt.text }));
            });
            updateSummary();
            return;
        }

        if (isVirtual) {
            $floor.prop('disabled', true);
            $floorHelp.text('Modalidad 100% remota sin piso asignado');

            // Filtrar solo aulas virtuales
            let virtualCount = 0;
            let lastVirtualId = null;
            Object.values(classroomData).forEach(c => {
                if (c.is_virtual || c.building_id == selectedBuildingId) {
                    $classroom.append($('<option>', {
                        value: c.id,
                        text: `${c.code_display} (Cap: ${c.capacity})`
                    }));
                    lastVirtualId = c.id;
                    virtualCount++;
                }
            });

            if (virtualCount === 1 && lastVirtualId) {
                $classroom.val(lastVirtualId);
            }
            updateSummary();
            return;
        }

        // Edificio Físico
        $floor.prop('disabled', false);
        $floorHelp.text('Filtra por planta o nivel');

        // Extraer pisos únicos de este edificio
        const buildingFloors = [];
        Object.values(classroomData).forEach(c => {
            if (c.building_id == selectedBuildingId && c.floor) {
                if (!buildingFloors.some(f => f.floor === c.floor)) {
                    buildingFloors.push({
                        floor: c.floor,
                        floor_display: c.floor_display
                    });
                }
            }
        });

        // Ordenar pisos: PB primero, luego numérico
        buildingFloors.sort((a, b) => {
            if (a.floor === '0' || a.floor.toUpperCase() === 'PB') return -1;
            if (b.floor === '0' || b.floor.toUpperCase() === 'PB') return 1;
            return a.floor.localeCompare(b.floor, undefined, { numeric: true });
        });

        buildingFloors.forEach(f => {
            $floor.append($('<option>', {
                value: f.floor,
                text: f.floor_display
            }));
        });

        // Poblar aulas de este edificio inicialmente
        Object.values(classroomData).forEach(c => {
            if (c.building_id == selectedBuildingId) {
                $classroom.append($('<option>', {
                    value: c.id,
                    text: `${c.code} · ${c.floor_display} (Cap: ${c.capacity})`
                }));
            }
        });

        updateSummary();
    });

    // 2. Manejo del cambio de Piso
    $floor.on('change', function() {
        const selectedBuildingId = $building.val();
        const selectedFloor = $(this).val();

        $classroom.empty().append('<option value="">-- Selecciona Aula --</option>');

        let count = 0;
        let lastId = null;

        Object.values(classroomData).forEach(c => {
            const matchesBuilding = !selectedBuildingId || c.building_id == selectedBuildingId;
            const matchesFloor = !selectedFloor || c.floor == selectedFloor;

            if (matchesBuilding && matchesFloor) {
                $classroom.append($('<option>', {
                    value: c.id,
                    text: `${c.code} (Cap: ${c.capacity})`
                }));
                lastId = c.id;
                count++;
            }
        });

        if (count === 1 && lastId) {
            $classroom.val(lastId);
        }

        updateSummary();
    });

    // 3. Manejo del cambio de Aula directo
    $classroom.on('change', function() {
        const cId = $(this).val();
        if (cId && classroomData[cId]) {
            const c = classroomData[cId];
            // Sincronizar selectores en cascada si no coinciden
            if ($building.val() != c.building_id) {
                $building.val(c.building_id);
                // Si no es virtual, sincronizar piso
                if (!c.is_virtual) {
                    $floor.prop('disabled', false);
                    $floor.val(c.floor);
                }
            } else if (!c.is_virtual && $floor.val() != c.floor) {
                $floor.val(c.floor);
            }
        }
        updateSummary();
    });

    // Inicializar cascada si ya hay un aula seleccionada (ej. post-error o query string)
    const initialClassroomId = $classroom.val();
    if (initialClassroomId && classroomData[initialClassroomId]) {
        const c = classroomData[initialClassroomId];
        $building.val(c.building_id).trigger('change');
        if (!c.is_virtual) {
            $floor.val(c.floor).trigger('change');
        }
        $classroom.val(initialClassroomId);
    }

    function updateSummary() {
        const classroomId = $classroom.val();
        const commissionId = $('#commission-select').val();
        const startTime = $('#start-time').val();
        const endTime = $('#end-time').val();
        
        // Update classroom badges
        if (classroomId && classroomData[classroomId]) {
            const c = classroomData[classroomId];
            $('#summary-building').text(c.building_name);
            $('#summary-floor').text(c.is_virtual ? 'Remoto (Virtual)' : c.floor_display);
            $('#summary-classroom').text(`${c.code} (Cap: ${c.capacity})`);
        } else {
            $('#summary-building').text('-');
            $('#summary-floor').text('-');
            $('#summary-classroom').text(i18n.not_selected || 'No seleccionada');
        }
        
        // Update commission summary
        if (commissionId) {
            const commissionText = $('#commission-select option:selected').text();
            $('#summary-commission').text(commissionText);
        } else {
            $('#summary-commission').text(i18n.not_selected || 'No seleccionada');
        }
        
        // Calculate duration
        if (startTime && endTime) {
            const start = new Date(startTime);
            const end = new Date(endTime);
            
            if (end > start) {
                const diffMs = end - start;
                const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
                const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                
                let durationText = '';
                if (diffHours > 0) {
                    const hLabel = diffHours > 1 ? (i18n.hours || 'horas') : (i18n.hour || 'hora');
                    durationText += `${diffHours} ${hLabel}`;
                }
                if (diffMins > 0) {
                    if (durationText) durationText += ' ';
                    const mLabel = diffMins > 1 ? (i18n.minutes || 'minutos') : (i18n.minute || 'minuto');
                    durationText += `${diffMins} ${mLabel}`;
                }
                
                $('#summary-duration').text(durationText || '0 min');
            } else {
                $('#summary-duration').text(i18n.invalid_time || 'Rango horario inválido');
            }
        } else {
            $('#summary-duration').text(i18n.not_calculated || 'No calculada');
        }
    }
    
    // Check capacity vs expected attendees
    function checkCapacity() {
        const classroomId = $classroom.val();
        const attendees = parseInt($('#expected_attendees').val()) || 0;
        
        if (classroomId && classroomData[classroomId] && attendees > 0) {
            const c = classroomData[classroomId];
            // No validar si es virtual o capacidad ilimitada
            if (c.is_virtual || c.capacity === '∞' || c.capacity_num === 0) {
                $('#expected_attendees').removeClass('is-invalid');
                $('#expected_attendees').siblings('.invalid-feedback').remove();
                return;
            }
            
            if (attendees > c.capacity_num) {
                $('#expected_attendees').addClass('is-invalid');
                const msg = i18n.capacity_exceeded || 'Los asistentes esperados superan la capacidad del aula';
                if ($('#expected_attendees').siblings('.invalid-feedback').length === 0) {
                    $('#expected_attendees').after(`
                        <div class="invalid-feedback">
                            ${msg} (${attendees} > ${c.capacity_num})
                        </div>
                    `);
                }
            } else {
                $('#expected_attendees').removeClass('is-invalid');
                $('#expected_attendees').siblings('.invalid-feedback').remove();
            }
        }
    }
    
    $('#commission-select, #start-time, #end-time').on('change', updateSummary);
    $('#expected_attendees').on('input', function() {
        checkCapacity();
        updateSummary();
    });
    
    updateSummary();
    
    // Form validation
    $('#reservation-form').on('submit', function(e) {
        let isValid = true;
        
        if (!$classroom.val()) {
            $classroom.addClass('is-invalid');
            isValid = false;
        } else {
            $classroom.removeClass('is-invalid');
        }
        
        if (!$('#commission-select').val()) {
            $('#commission-select').addClass('is-invalid');
            isValid = false;
        } else {
            $('#commission-select').removeClass('is-invalid');
        }
        
        if (!$('#start-time').val()) {
            $('#start-time').addClass('is-invalid');
            isValid = false;
        } else {
            $('#start-time').removeClass('is-invalid');
        }
        
        if (!$('#end-time').val()) {
            $('#end-time').addClass('is-invalid');
            isValid = false;
        } else {
            $('#end-time').removeClass('is-invalid');
        }
        
        const startTime = new Date($('#start-time').val());
        const endTime = new Date($('#end-time').val());
        
        if (endTime <= startTime) {
            $('#end-time').addClass('is-invalid');
            isValid = false;
        }
        
        checkCapacity();
        if ($('#expected_attendees').hasClass('is-invalid')) {
            isValid = false;
        }
        
        return isValid;
    });
    
    // Set minimum datetime to current
    const now = new Date();
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
    $('#start-time, #end-time').attr('min', now.toISOString().slice(0, 16));
});
</script>
{% endblock %}