<?php
// dashboard_admin.php - Vista de dashboard para el usuario admin
require_once __DIR__ . '/../includes/admin_guard.php';
require_once __DIR__ . '/../includes/version.php';
include_once __DIR__ . '/../includes/topbar.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/dashboard/dashboard_admin.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/styles.css') ?>" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100">
    <!-- Topbar se incluye aquí -->
    <?php /* El topbar ya está incluido arriba */ ?>

    <style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
    </style>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-tachometer-alt me-2"></i>Panel de Control (Admin)
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <h6 class="alert-heading">Bienvenido, <?php echo htmlspecialchars($_SESSION['user_name']); ?></h6>
                            <p class="mb-0">Has iniciado sesión correctamente en el Sistema de Horarios (Admin).</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-primary">
                                    <div class="card-body">
                                        <h6 class="card-subtitle mb-2 text-muted">Tu información</h6>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex justify-content-between">
                                                <span>ATTUID:</span>
                                                <strong><?php echo htmlspecialchars($_SESSION['user_attuid']); ?></strong>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between">
                                                <span>Puesto:</span>
                                                <strong><?php echo htmlspecialchars($_SESSION['user_puesto']); ?></strong>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between">
                                                <span>PDV:</span>
                                                <strong><?php echo htmlspecialchars($_SESSION['user_pdv']); ?></strong>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-success">
                                    <div class="card-body">
                                        <h6 class="card-subtitle mb-2 text-muted">Acciones rápidas</h6>
                                        <div class="d-grid gap-2">
                                            <!-- Aquí puedes personalizar las acciones rápidas para admin -->
                                            <button class="btn btn-outline-info" onclick="window.location.href='../views/horarios/ver_pdv_admin.php'">
                                                <i class="fas fa-calendar-alt me-1"></i> Ver horarios por PDV
                                            </button>
                                            <button class="btn btn-outline-info" onclick="window.location.href='../views/horarios/ver_admin_areas.php'">
                                                <i class="fas fa-building me-1"></i> Ver horarios Administración
                                            </button>
                                            <button class="btn btn-outline-primary" onclick="window.location.href='#'">
                                                <i class="fas fa-link me-1"></i> Match con Tacloud
                                            </button>
                                            <script>
                                            document.querySelector('.btn-outline-primary[onclick]')?.addEventListener('click', function() {
                                                window.location.href = '../views/tacloud/match.php';
                                            });
                                            </script>
                                        <button id="toggleEdicionHorarioBtn" class="btn btn-outline-warning mt-2">
                                            <i class="fas fa-edit me-1"></i> Configurar periodo de edición
                                        </button>
                                        <button id="desactivarEdicionBtn" class="btn btn-outline-danger mt-2" style="display:none;">
                                            <i class="fas fa-times-circle me-1"></i> Desactivar edición
                                        </button>
                                        <div id="periodoActual" class="mt-2 text-muted small"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('toggleEdicionHorarioBtn');
        const btnDesactivar = document.getElementById('desactivarEdicionBtn');
        const periodoActualDiv = document.getElementById('periodoActual');
        
        // Cargar y mostrar periodo actual
        function cargarPeriodoActual() {
            fetch('../../backend/api/horario_edicion_flag.php')
                .then(r => r.json())
                .then(data => {
                    if (data.activar_crear_horario && data.periodo) {
                        const p = data.periodo;
                        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
                                      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                        periodoActualDiv.innerHTML = `<i class="fas fa-check-circle text-success"></i> Periodo activo: ${meses[p.mes-1]} ${p.anio} (${p.fecha_inicio} al ${p.fecha_fin})`;
                        btn.innerHTML = '<i class="fas fa-edit me-1"></i> Cambiar periodo de edición';
                        btn.classList.remove('btn-outline-warning');
                        btn.classList.add('btn-outline-success');
                        btnDesactivar.style.display = 'block';
                    } else {
                        periodoActualDiv.innerHTML = '<i class="fas fa-times-circle text-danger"></i> No hay periodo activo';
                        btn.innerHTML = '<i class="fas fa-edit me-1"></i> Configurar periodo de edición';
                        btn.classList.remove('btn-outline-success');
                        btn.classList.add('btn-outline-warning');
                        btnDesactivar.style.display = 'none';
                    }
                })
                .catch(() => {
                    periodoActualDiv.innerHTML = '<i class="fas fa-exclamation-circle text-warning"></i> Error al cargar periodo';
                });
        }
        
        cargarPeriodoActual();
        
        // Botón desactivar edición
        btnDesactivar.addEventListener('click', async function() {
            const result = await Swal.fire({
                title: '¿Desactivar edición de horarios?',
                text: 'Los usuarios no podrán asignar horarios hasta que configures un nuevo periodo',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, desactivar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#dc3545'
            });
            
            if (result.isConfirmed) {
                try {
                    const response = await fetch('../../backend/api/horario_edicion_flag.php', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            activar_crear_horario: false,
                            periodo: null
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Edición desactivada',
                            text: 'La asignación de horarios ha sido desactivada',
                            timer: 2000
                        });
                        cargarPeriodoActual();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.error || 'No se pudo desactivar la edición'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al comunicarse con el servidor'
                    });
                }
            }
        });
        
        // Configurar periodo
        btn.addEventListener('click', async function() {
            // Obtener años disponibles
            const anioActual = new Date().getFullYear();
            const anios = {};
            for (let i = anioActual; i <= anioActual + 1; i++) {
                anios[i] = i;
            }
            
            const meses = {
                '1': 'Enero', '2': 'Febrero', '3': 'Marzo', '4': 'Abril',
                '5': 'Mayo', '6': 'Junio', '7': 'Julio', '8': 'Agosto',
                '9': 'Septiembre', '10': 'Octubre', '11': 'Noviembre', '12': 'Diciembre'
            };
            
            const { value: formValues } = await Swal.fire({
                title: 'Configurar Periodo de Edición',
                html: `
                    <div class="mb-3">
                        <label for="swal-anio" class="form-label">Año</label>
                        <select id="swal-anio" class="form-select">
                            ${Object.keys(anios).map(a => `<option value="${a}">${a}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="swal-mes" class="form-label">Mes</label>
                        <select id="swal-mes" class="form-select">
                            ${Object.keys(meses).map(m => `<option value="${m}">${meses[m]}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="swal-quincena" class="form-label">Periodo (Quincena)</label>
                        <select id="swal-quincena" class="form-select">
                            <option value="">Cargando...</option>
                        </select>
                    </div>
                `,
                focusConfirm: false,
                showCancelButton: true,
                confirmButtonText: 'Guardar',
                cancelButtonText: 'Cancelar',
                preConfirm: () => {
                    const anio = document.getElementById('swal-anio').value;
                    const mes = document.getElementById('swal-mes').value;
                    const quincenaSelect = document.getElementById('swal-quincena');
                    const idQuincena = quincenaSelect.value;
                    const quincenaText = quincenaSelect.options[quincenaSelect.selectedIndex].text;
                    
                    if (!anio || !mes || !idQuincena) {
                        Swal.showValidationMessage('Debes seleccionar todos los campos');
                        return false;
                    }
                    
                    return { anio, mes, id_quincena: idQuincena, quincena_text: quincenaText };
                },
                didOpen: () => {
                    const anioSelect = document.getElementById('swal-anio');
                    const mesSelect = document.getElementById('swal-mes');
                    const quincenaSelect = document.getElementById('swal-quincena');
                    
                    // Función para validar y cargar quincenas
                    async function cargarQuincenas() {
                        const anio = anioSelect.value;
                        const mes = mesSelect.value;
                        
                        quincenaSelect.innerHTML = '<option value="">Cargando...</option>';
                        
                        try {
                            const response = await fetch(`../../backend/api/quincenas_disponibles.php?year=${anio}&month=${mes}`);
                            const data = await response.json();
                            
                            if (data.success && data.quincenas && data.quincenas.length > 0) {
                                quincenaSelect.innerHTML = '<option value="">Selecciona una quincena</option>';
                                
                                // Validar fechas: permitir periodo actual y futuros
                                const hoy = new Date();
                                const anioHoy = hoy.getFullYear();
                                const mesHoy = hoy.getMonth() + 1;
                                const diaHoy = hoy.getDate();
                                
                                data.quincenas.forEach(q => {
                                    // Parsear fechas manualmente para evitar problemas de zona horaria
                                    const [anioFin, mesFin, diaFin] = q.fecha_fin.split('-').map(Number);
                                    
                                    // Comparar solo si la fecha de fin no ha pasado completamente
                                    // Si es el mismo día, permitir
                                    let fechaFinValida = false;
                                    if (anioFin > anioHoy) {
                                        fechaFinValida = true;
                                    } else if (anioFin === anioHoy) {
                                        if (mesFin > mesHoy) {
                                            fechaFinValida = true;
                                        } else if (mesFin === mesHoy && diaFin >= diaHoy) {
                                            fechaFinValida = true;
                                        }
                                    }
                                    
                                    if (fechaFinValida) {
                                        quincenaSelect.innerHTML += `<option value="${q.id_quincena}" data-inicio="${q.fecha_inicio}" data-fin="${q.fecha_fin}">${q.nombre} (${q.fecha_inicio} al ${q.fecha_fin})</option>`;
                                    }
                                });
                                
                                if (quincenaSelect.options.length === 1) {
                                    quincenaSelect.innerHTML = '<option value="">No hay periodos disponibles</option>';
                                }
                            } else {
                                quincenaSelect.innerHTML = '<option value="">No hay quincenas disponibles</option>';
                            }
                        } catch (error) {
                            quincenaSelect.innerHTML = '<option value="">Error al cargar</option>';
                        }
                    }
                    
                    // Establecer mes actual por defecto
                    const mesActual = new Date().getMonth() + 1;
                    mesSelect.value = mesActual;
                    
                    // Cargar quincenas iniciales
                    cargarQuincenas();
                    
                    // Event listeners
                    anioSelect.addEventListener('change', cargarQuincenas);
                    mesSelect.addEventListener('change', cargarQuincenas);
                }
            });
            
            if (formValues) {
                // Obtener datos completos de la quincena seleccionada
                const quincenaSelect = document.getElementById('swal-quincena');
                const selectedOption = quincenaSelect.options[quincenaSelect.selectedIndex];
                const fechaInicio = selectedOption.getAttribute('data-inicio');
                const fechaFin = selectedOption.getAttribute('data-fin');
                
                // Enviar al backend
                try {
                    const response = await fetch('../../backend/api/horario_edicion_flag.php', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            activar_crear_horario: true,
                            periodo: {
                                anio: parseInt(formValues.anio),
                                mes: parseInt(formValues.mes),
                                id_quincena: parseInt(formValues.id_quincena),
                                fecha_inicio: fechaInicio,
                                fecha_fin: fechaFin,
                                nombre: formValues.quincena_text
                            }
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Periodo configurado',
                            text: `Periodo activo: ${formValues.quincena_text}`,
                            timer: 2000
                        });
                        cargarPeriodoActual();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.error || 'No se pudo configurar el periodo'
                        });
                    }
                } catch (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al comunicarse con el servidor'
                    });
                }
            }
        });
    });
    </script>
</body>
</html>
