admin-edu-space/frontend/views/genetic_optimizer.html

{% extends "base.html" %}

{% block title %}AI Room Reservation Optimizer - Edu-Space Admin{% endblock %}

{% block extra_css %}
<style>
.optimization-card {
    transition: transform 0.2s ease-in-out;
}

.optimization-card:hover {
    transform: translateY(-2px);
}

.commission-item {
    border-left: 4px solid var(--bs-primary);
    transition: all 0.2s ease;
    background-color: var(--bs-body-bg);
}

.commission-item:hover {
    border-left-color: var(--bs-info);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.commission-item.selected {
    border-left-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.1);
}

.algorithm-status {
    position: sticky;
    top: 90px;
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.hero-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card hero-banner border-0 shadow-sm p-3">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-primary bg-opacity-25 rounded-3 p-3 me-3 text-primary">
                            <i class="bi bi-cpu fs-2"></i>
                        </div>
                        <div>
                            <h1 class="h3 mb-1 fw-bold">
                                AI Room Reservation Optimizer
                            </h1>
                            <p class="text-muted mb-0">
                                Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Algorithm Status & Commission Selection -->
    <div class="row mb-4">
        <!-- Algorithm Status Card -->
        <div class="col-lg-4 mb-4">
            <div class="algorithm-status" style="z-index: 10;">
                <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-body-tertiary border-0 py-3">
                    <h5 class="mb-0 h6 fw-bold">
                        <i class="bi bi-gear-wide-connected text-primary me-2"></i>
                        Algorithm Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <small class="text-muted text-uppercase fw-semibold d-block mb-2">System Status</small>
                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
                            <span>Available Classrooms</span>
                            <span class="badge bg-success" id="available-classrooms">--</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
                            <span>Active Commissions</span>
                            <span class="badge bg-info" id="active-commissions">--</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1">
                            <span>Existing Reservations</span>
                            <span class="badge bg-secondary" id="existing-reservations">--</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <small class="text-muted text-uppercase fw-semibold d-block mb-2">Algorithm Configuration</small>
                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
                            <span>Population Size</span>
                            <span class="text-muted">50</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
                            <span>Generations</span>
                            <span class="text-muted">100</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-1">
                            <span>Mutation Rate</span>
                            <span class="text-muted">10%</span>
                        </div>
                    </div>
                    
                    <button class="btn btn-sm btn-outline-primary w-100" onclick="window.refreshStatus()">
                        <i class="bi bi-arrow-clockwise me-1"></i>
                        Refresh Status
                    </button>
                </div>
            </div>

            <!-- Optimization Controls -->
            <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-sliders text-primary me-2"></i>
                        Optimization Controls
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="start-date" class="form-label">Start Date</label>
                                <input type="datetime-local" class="form-control" id="start-date" name="start_date">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="end-date" class="form-label">End Date</label>
                                <input type="datetime-local" class="form-control" id="end-date" name="end_date">
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button class="btn btn-info text-white" id="preview-optimization-btn">
                            <i class="bi bi-eye me-1"></i>
                            Preview
                        </button>
                        <button class="btn btn-success" id="optimize-assignments-btn">
                            <i class="bi bi-play-circle me-1"></i>
                            Run Full Optimization
                        </button>
                        <button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
                            <i class="bi bi-check-circle me-1"></i>
                            Apply
                        </button>
                        <button class="btn btn-outline-secondary" onclick="resetOptimization()">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        
        <!-- Commission Selection -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <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-list-check text-primary me-2"></i>
                        Select Commissions to Optimize
                    </h5>
                    <div class="d-flex gap-2">
                        <button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
                            Select All
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
                            Deselect All
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="commissions-list" class="row">
                        <!-- Commissions will be loaded here -->
                        <div class="col-12 text-center text-muted py-5">
                            <div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
                            Loading commissions...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Results Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div id="preview-results"></div>
            <div id="optimization-results"></div>
            <div id="alert-container"></div>
        </div>
    </div>
</div>

<!-- Loading Spinner Overlay -->
<div class="spinner-overlay" id="loading-spinner">
    <div class="text-center text-white">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>
        <p class="mt-3 mb-1 fw-bold fs-5">Running genetic algorithm optimization...</p>
        <small class="text-white-50">This may take a few moments</small>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Reservation Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content populated dynamically -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="downloadReservations()">
                    <i class="bi bi-download me-1"></i>
                    Download
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/js/genetic-algorithm.js"></script>
<script>
function selectAllCommissions() {
    const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
    checkboxes.forEach(cb => {
        cb.checked = true;
        updateCommissionCard(cb.value, true);
    });
}

function deselectAllCommissions() {
    const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
    checkboxes.forEach(cb => {
        cb.checked = false;
        updateCommissionCard(cb.value, false);
    });
}

function updateCommissionCard(commissionId, selected) {
    const card = document.querySelector(`[data-commission-id="${commissionId}"]`);
    if (card) {
        if (selected) {
            card.classList.add('selected');
        } else {
            card.classList.remove('selected');
        }
    }
}

function resetOptimization() {
    deselectAllCommissions();
    if (window.geneticManager) {
        geneticManager.clearResults && geneticManager.clearResults();
        geneticManager.clearPreview && geneticManager.clearPreview();
    }
    document.getElementById('start-date').value = '';
    document.getElementById('end-date').value = '';
}

window.refreshStatus = async function() {
    if (window.geneticManager) {
        try {
            const statusResult = await geneticManager.getAlgorithmStatus();
            if (statusResult && statusResult.success && statusResult.data) {
                const sysStats = statusResult.data.system_status;
                document.getElementById('available-classrooms').textContent = sysStats.available_classrooms;
                document.getElementById('active-commissions').textContent = sysStats.active_commissions;
                document.getElementById('existing-reservations').textContent = sysStats.confirmed_reservations;
            }
        } catch (e) {
            console.error("Error refreshing status:", e);
        }
    }
}

document.addEventListener('DOMContentLoaded', async function() {
    await loadCommissions();
    await window.refreshStatus();
});

async function loadCommissions() {
    try {
        const response = await fetch('/api/genetic/commissions');
        const data = await response.json();
        const commissionsList = document.getElementById('commissions-list');
        const isSpanish = '{{ session.language or "es" }}' === 'es';
        
        if (data.success && data.commissions && data.commissions.length > 0) {
            const commissionsHtml = data.commissions.map(commission => `
                <div class="col-md-6 mb-3">
                    <div class="card commission-item border-0 shadow-sm" data-commission-id="${commission.id}">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="commission_ids" 
                                       value="${commission.id}" id="commission-${commission.id}"
                                       onchange="updateCommissionCard('${commission.id}', this.checked)">
                                <label class="form-check-label" for="commission-${commission.id}">
                                    <strong class="text-primary">${commission.get_full_code || commission.code}</strong>
                                    <br>
                                    <small class="text-muted">${commission.subject?.name || (isSpanish ? 'Materia Desconocida' : 'Unknown Subject')}</small>
                                    <br>
                                    <span class="badge bg-info mt-1">${commission.current_students || 0}/${commission.max_students} ${isSpanish ? 'estudiantes' : 'students'}</span>
                                    ${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
            
            commissionsList.innerHTML = commissionsHtml;
        } else {
            commissionsList.innerHTML = `
                <div class="col-12 text-center text-muted py-5">
                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                    ${isSpanish ? 'No se encontraron comisiones activas.' : 'No active commissions found.'}
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading commissions:', error);
        document.getElementById('commissions-list').innerHTML = `
            <div class="col-12 text-center text-danger py-4">
                <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
                Error al cargar comisiones: ${error.message}
            </div>
        `;
    }
}
</script>
{% endblock %}