<?php
// Archivo: reporte.php
session_start();
include 'db.php';

if (!isset($_SESSION['user_id'])) { header("Location: index.php"); exit; }

$mes_objetivo = isset($_GET['mes']) ? $_GET['mes'] : date('Y-m');
$jornada = isset($_GET['jornada']) ? pg_escape_string($conn, $_GET['jornada']) : 'AM';

// Nuevas variables para el rango de fechas
$primer_dia_mes = $mes_objetivo . '-01';
$ultimo_dia_mes = date('Y-m-t', strtotime($primer_dia_mes));

$fecha_inicio = isset($_GET['fecha_inicio']) && !empty($_GET['fecha_inicio']) ? $_GET['fecha_inicio'] : $primer_dia_mes;
$fecha_fin = isset($_GET['fecha_fin']) && !empty($_GET['fecha_fin']) ? $_GET['fecha_fin'] : $ultimo_dia_mes;

// Recibir roles
if (isset($_GET['roles']) && is_array($_GET['roles'])) {
    $roles_seleccionados = $_GET['roles'];
} elseif (isset($_GET['rol'])) {
    $roles_seleccionados = [$_GET['rol']];
} else {
    $roles_seleccionados = ['Puerta'];
}

$roles_clean = array_map(function($r) use ($conn) { return pg_escape_string($conn, $r); }, $roles_seleccionados);
$roles_list = "'" . implode("','", $roles_clean) . "'";

$meses_es = ['January'=>'ENERO', 'February'=>'FEBRERO', 'March'=>'MARZO', 'April'=>'ABRIL', 'May'=>'MAYO', 'June'=>'JUNIO', 'July'=>'JULIO', 'August'=>'AGOSTO', 'September'=>'SEPTIEMBRE', 'October'=>'OCTUBRE', 'November'=>'NOVIEMBRE', 'December'=>'DICIEMBRE'];
$nombre_mes = $meses_es[date('F', strtotime($fecha_inicio))] . ' ' . date('Y', strtotime($fecha_inicio));

// Filtrar por el rango de fechas seleccionado
$where_clause = "WHERE t.fecha >= '$fecha_inicio' AND t.fecha <= '$fecha_fin'";
if ($jornada) { $where_clause .= " AND t.jornada = '$jornada'"; }
if (!empty($roles_clean)) { $where_clause .= " AND t.rol IN ($roles_list)"; }

// Consulta a la BD
$query = "SELECT t.fecha, t.rol, t.es_bienvenida, c.nombre 
          FROM turnos t JOIN colaboradores c ON t.id_colaborador = c.id_colaborador 
          $where_clause ORDER BY t.fecha ASC, t.id_turno ASC";
$result = pg_query($conn, $query);

$grilla = [];
if ($result) {
    while($fila = pg_fetch_assoc($result)) {
        $categoria = $fila['rol'];
        if (isset($fila['es_bienvenida']) && $fila['es_bienvenida'] == 1) { $categoria = 'Bienvenida'; }
        $nombre_limpio = str_replace(['├æ', '├▒', 'Ã‘', 'Ã±'], ['Ñ', 'ñ', 'Ñ', 'ñ'], $fila['nombre']);
        $grilla[$fila['fecha']][$categoria][] = $nombre_limpio;
    }
}

// ... (El código de generación del título se mantiene igual)
$num_roles = count($roles_seleccionados);
if ($num_roles == 1) {
    $roles_str_title = strtoupper($roles_seleccionados[0]);
} elseif ($num_roles == 2) {
    $roles_str_title = strtoupper($roles_seleccionados[0] . ' Y ' . $roles_seleccionados[1]);
} else {
    $roles_str_title = "CONSOLIDADO";
}

$titulo_completo = "PROGRAMACION_" . $jornada . "_" . str_replace(' ', '_', $roles_str_title);

// Determinar el rango de días a mostrar
$inicio_dt = new DateTime($fecha_inicio);
$fin_dt = new DateTime($fecha_fin);
$interval = DateInterval::createFromDateString('1 day');
$periodo = new DatePeriod($inicio_dt, $interval, $fin_dt->modify('+1 day'));
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vista Previa - Programación</title>
    
    <script>
        const isApp = (window.navigator.userAgent.includes('wv') || (window.android && window.android.os) || /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent));
        if (isApp) {
            var script = document.createElement('script');
            script.src = 'cordova.js';
            document.head.appendChild(script);
        }
    </script>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    
    <style>
        /* Tipografía moderna y paleta IDMJI */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
        
        body { background-color: #F4F6F9; font-family: 'Inter', "Segoe UI", sans-serif; color: #333; }
        
        .controles-impresion { 
            background: white; padding: 20px; border-bottom: 4px solid #002D62; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 25px; 
        }
        
        .wrapper-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 20px; }
        
        #zona-impresion { 
            background: #fff; width: 100%; max-width: 1400px; min-width: 1100px; 
            margin: 0 auto; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
            border-radius: 12px; border: 1px solid #e0e0e0;
        }

        .header-doc { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #f0f0f0; padding-bottom: 20px; }
        .titulo-doc { font-size: 24pt; font-weight: 800; color: #002D62; text-transform: uppercase; margin-bottom: 5px; letter-spacing: -0.5px; }
        .subtitulo-doc { font-size: 14pt; font-weight: 600; color: #D4AF37; text-transform: uppercase; letter-spacing: 2px; }
        
        .leyenda { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; }
        .badge-leyenda { font-size: 10pt; font-weight: 600; padding: 6px 15px; border-radius: 20px; color: white; display: flex; align-items: center; gap: 6px; }
        
        /* Colores exactos y sin variables para html2canvas */
        .bg-pasillos { background-color: #002D62; }
        .bg-banos { background-color: #5C6A77; }
        .bg-puerta { background-color: #A38020; } /* Dorado oscuro para mejor contraste en texto */
        .bg-bienvenida { background-color: #E65100; }
        
        .color-pasillos { color: #002D62; }
        .color-banos { color: #5C6A77; }
        .color-puerta { color: #A38020; }
        .color-bienvenida { color: #E65100; }

        /* Contenedor flexible de días */
       /* Contenedor flexible de días */
        .contenedor-dias {
            display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-start; /* Alinea a la izquierda, no al centro */
            align-items: stretch; /* Obliga a que todas las tarjetas de una fila tengan el mismo alto */
        }
        .dia-card {
            flex: 0 0 calc(14.285% - 13px); /* El '0' evita que se estiren de más si hay pocos días */
            min-width: 140px; 
            border: 1px solid #dee2e6; 
            background-color: #fff; 
            padding: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
        }
        .dia-header {
            background-color: #002D62; color: white; text-align: center; 
            padding: 6px; font-size: 10pt; font-weight: bold; 
            margin: -12px -12px 12px -12px; 
            border-top-left-radius: 5px; border-top-right-radius: 5px;
            text-transform: uppercase; letter-spacing: 1px;
        }
        /* Nueva clase para días de enseñanza */
        .dia-header.ensenanza {
            background-color: #D4AF37; /* Dorado IDMJI */
            color: #002D62; /* Texto azul oscuro para contraste */
        }
        .etiqueta-ensenanza {
            font-size: 7pt; font-weight: 800; letter-spacing: 0.5px; margin-top: 2px;
        }

        .categoria-bloque { margin-bottom: 10px; padding: 4px 6px; border-radius: 6px; background-color: #fcfcfc; border-left: 3px solid transparent; }
        .cat-pasillos { border-left-color: #002D62; }
        .cat-banos { border-left-color: #5C6A77; }
        .cat-puerta { border-left-color: #A38020; }
        .cat-bienvenida { border-left-color: #E65100; }

        .categoria-titulo { font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
        .nombre-colab { font-size: 10.5pt; font-weight: 600; margin-bottom: 3px; line-height: 1.2; text-transform: uppercase; color: #212529; display: flex; align-items: center; gap: 4px;}
        .nombre-colab::before { content: '•'; font-size: 14px; }

        /* Faltante rediseñado */
        .badge-falta { background-color: #fee2e2; color: #dc2626; font-size: 9pt; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 2px; }

        @media print {
            body { background: #fff; }
            .controles-impresion { display: none !important; }
            .wrapper-scroll { overflow: visible; padding: 0; }
            #zona-impresion { box-shadow: none; padding: 0; border: none; max-width: 100%; min-width: 100%; margin: 0; }
            @page { size: A4 landscape; margin: 10mm; }
        }
    </style>
</head>
<body>

<div class="controles-impresion no-print">
    <div class="container-fluid max-w-1200">
        <form method="GET" class="row align-items-end g-3">
            <input type="hidden" name="mes" value="<?php echo htmlspecialchars($mes_objetivo); ?>">
            
            <div class="col-12 col-md-2">
                <label class="fw-bold small text-secondary mb-1">Horario:</label>
                <select name="jornada" class="form-select border-secondary-subtle fw-bold">
                    <option value="AM" <?php if($jornada == 'AM') echo 'selected'; ?>>Jornada AM</option>
                    <option value="PM" <?php if($jornada == 'PM') echo 'selected'; ?>>Jornada PM</option>
                </select>
            </div>

            <div class="col-6 col-md-2">
                <label class="fw-bold small text-secondary mb-1">Desde:</label>
                <input type="date" name="fecha_inicio" class="form-control border-secondary-subtle fw-bold" value="<?php echo $fecha_inicio; ?>" min="<?php echo $primer_dia_mes; ?>" max="<?php echo $ultimo_dia_mes; ?>">
            </div>
            <div class="col-6 col-md-2">
                <label class="fw-bold small text-secondary mb-1">Hasta:</label>
                <input type="date" name="fecha_fin" class="form-control border-secondary-subtle fw-bold" value="<?php echo $fecha_fin; ?>" min="<?php echo $primer_dia_mes; ?>" max="<?php echo $ultimo_dia_mes; ?>">
            </div>

            <div class="col-12 col-md-4">
                <label class="fw-bold small text-secondary mb-2 d-block">Módulos:</label>
                <div class="d-flex flex-wrap gap-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="roles[]" value="Pasillos" id="c_pas" <?php if(in_array('Pasillos', $roles_seleccionados)) echo 'checked'; ?>>
                        <label class="form-check-label fw-bold text-dark" for="c_pas">Pasillos</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="roles[]" value="Baños" id="c_ban" <?php if(in_array('Baños', $roles_seleccionados)) echo 'checked'; ?>>
                        <label class="form-check-label fw-bold text-dark" for="c_ban">Baños</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="roles[]" value="Puerta" id="c_vig" <?php if(in_array('Puerta', $roles_seleccionados)) echo 'checked'; ?>>
                        <label class="form-check-label fw-bold text-dark" for="c_vig">Puerta</label>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-2 text-md-end mt-3 mt-md-0 d-flex flex-column gap-2">
                <button type="submit" class="btn btn-outline-secondary fw-bold px-3 w-100"><i class="fas fa-sync-alt me-2"></i>Filtrar</button>
                <button type="button" onclick="procesarImagen(this)" class="btn text-white fw-bold px-3 w-100 shadow-sm" style="background-color: #002D62;"><i class="fas fa-camera me-2"></i>Imagen</button>
            </div>
        </form>
    </div>
</div>

<div class="wrapper-scroll">
    <div id="zona-impresion">
        
        <div class="header-doc">
            <h1 class="titulo-doc">Programación de Turnos</h1>
            <h2 class="subtitulo-doc"><?php echo $roles_str_title . ' - JORNADA ' . $jornada; ?></h2>
        </div>

        <div class="leyenda">
            <?php if(in_array('Pasillos', $roles_seleccionados)): ?>
                <div class="badge-leyenda bg-pasillos"><i class="fas fa-route"></i> Pasillos</div>
                <div class="badge-leyenda bg-bienvenida"><i class="fas fa-handshake"></i> Bienvenida</div>
            <?php endif; ?>
            <?php if(in_array('Baños', $roles_seleccionados)): ?>
                <div class="badge-leyenda bg-banos"><i class="fas fa-restroom"></i> Baños</div>
            <?php endif; ?>
            <?php if(in_array('Puerta', $roles_seleccionados)): ?>
                <div class="badge-leyenda bg-puerta"><i class="fas fa-door-open"></i> Puerta</div>
            <?php endif; ?>
        </div>

        <div class="contenedor-dias">
            <?php
            $dias_semana_nombres = ['1'=>'LUNES', '2'=>'MARTES', '3'=>'MIÉRCOLES', '4'=>'JUEVES', '5'=>'VIERNES', '6'=>'SÁBADO', '7'=>'DOMINGO'];
            $orden_impresion = ['Baños', 'Puerta', 'Pasillos', 'Bienvenida'];

            foreach ($periodo as $dt) {
                $fecha_str = $dt->format('Y-m-d');
                $dia_num = $dt->format('d');
                $dia_semana_num = $dt->format('N');
                $nombre_dia = $dias_semana_nombres[$dia_semana_num];

                // LÓGICA DE DÍA DE ENSEÑANZA (Jueves=4, Domingo=7)
                $es_ensenanza = ($dia_semana_num == 3 || $dia_semana_num == 7);
                $clase_header = $es_ensenanza ? "dia-header ensenanza" : "dia-header";
                $texto_ensenanza = $es_ensenanza ? "<div class='etiqueta-ensenanza'>DÍA DE ENSEÑANZA</div>" : "";

                echo "<div class='dia-card'>";
                echo "<div class='$clase_header'>$nombre_dia $dia_num $texto_ensenanza</div>";
                
                // Contenedor que empuja el contenido hacia arriba para que todos queden alineados
                echo "<div style='flex-grow: 1;'>"; 

                foreach ($orden_impresion as $cat_imprimir) {
                    $ver_categoria = in_array($cat_imprimir, $roles_seleccionados) || ($cat_imprimir == 'Bienvenida' && in_array('Pasillos', $roles_seleccionados));
                    
                    if ($ver_categoria) {
                        $cat_lower = strtolower(str_replace('ñ', 'n', $cat_imprimir));
                        
                        if (isset($grilla[$fecha_str][$cat_imprimir]) && count($grilla[$fecha_str][$cat_imprimir]) > 0) {
                            echo "<div class='categoria-bloque cat-$cat_lower'>";
                            echo "<div class='categoria-titulo color-$cat_lower'>" . strtoupper($cat_imprimir) . "</div>";
                            foreach($grilla[$fecha_str][$cat_imprimir] as $nombre_colab) {
                                echo "<div class='nombre-colab'>$nombre_colab</div>";
                            }
                            echo "</div>";
                        } else {
                            if ($cat_imprimir == 'Baños' || $cat_imprimir == 'Pasillos' || $cat_imprimir == 'Puerta') {
                                echo "<div class='categoria-bloque cat-$cat_lower opacity-75'>";
                                echo "<div class='categoria-titulo color-$cat_lower'>" . strtoupper($cat_imprimir) . "</div>";
                                echo "<div class='badge-falta'><i class='fas fa-exclamation-triangle me-1'></i>SIN ASIGNAR</div>";
                                echo "</div>";
                            }
                        }
                    }
                }
                echo "</div>"; // Cierra el flex-grow
                echo "</div>"; // Cierra el dia-card
            }
            ?>
        </div>

    </div>
</div>

<script>
    let isGenerating = false;

    function restaurarBoton(btn, textoOriginal) {
        btn.innerHTML = textoOriginal;
        btn.classList.remove('disabled');
        isGenerating = false;
    }

    function descargarEnNavegador(imgData, fileName, btn, textoOriginal) {
        const link = document.createElement('a');
        link.href = imgData;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        const wrapper = document.querySelector('.wrapper-scroll');
        wrapper.innerHTML = `
            <div class="alert text-center shadow p-4 mx-auto" style="border: none; border-top: 4px solid #198754; background-color: white; border-radius: 12px; max-width: 600px; margin-top: 40px;">
                <i class="fas fa-check-circle fs-1 text-success mb-3 d-block"></i>
                <h4 class="fw-bold text-dark">¡Documento Generado Exitosamente!</h4>
                <p class="mb-3 text-secondary">La imagen ha sido descargada en tu dispositivo lista para compartir.</p>
                <button class="btn btn-outline-secondary btn-sm rounded-pill px-4" onclick="location.reload()"><i class="fas fa-arrow-left me-2"></i>Volver al Generador</button>
            </div>
            <div class="text-center mt-4 pb-5">
                <img src="${imgData}" style="max-width: 100%; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);" />
            </div>
        `;

        restaurarBoton(btn, textoOriginal);
    }

    function procesarImagen(btn) {
        if (isGenerating) return; 
        isGenerating = true;
        window.scrollTo(0,0);
        
        const textoOriginal = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>PROCESANDO...';
        btn.classList.add('disabled');

        html2canvas(document.getElementById('zona-impresion'), {
            scale: 2, 
            backgroundColor: '#ffffff',
            useCORS: true,
            windowWidth: document.getElementById('zona-impresion').scrollWidth
        }).then(canvas => {
            
            const imgData = canvas.toDataURL('image/jpeg', 0.95);
            const fileName = "<?php echo $titulo_completo; ?>.jpg";
            
            if (typeof window.plugins !== 'undefined' && window.plugins.socialsharing) {
                window.plugins.socialsharing.share(
                    'Programación Pasillos IDMJI', 
                    'Sistema Pasillos', 
                    imgData, 
                    null,
                    function() { restaurarBoton(btn, textoOriginal); },
                    function(err) { descargarEnNavegador(imgData, fileName, btn, textoOriginal); }
                );
            } else {
                descargarEnNavegador(imgData, fileName, btn, textoOriginal);
            }

        }).catch(err => {
            console.error("Error al generar JPG:", err);
            alert("Ocurrió un error renderizando el calendario.");
            restaurarBoton(btn, textoOriginal);
        });
    }
</script>

</body>
</html>