<?php
include 'conexion3.php';

$nombre = '';
$hora_inicio = '';
$hora_fin = '';
$id = null;

// Inicializar días (1 = libre, 0 = trabaja)
$lunes_libre = '0';
$martes_libre = '0';
$miercoles_libre = '0';
$jueves_libre = '0';
$viernes_libre = '0';
$sabado_libre = '1';  // Por defecto, sábado y domingo libres
$domingo_libre = '1';

// Verificar si estamos editando
if (isset($_GET['editar'])) {
    $id = $_GET['editar'];
    $stmt = $pdo->prepare("SELECT * FROM turnos WHERE id = ?");
    $stmt->execute([$id]);
    $turno = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($turno) {
        $nombre = $turno['nombre'];
        $hora_inicio = $turno['hora_inicio'];
        $hora_fin = $turno['hora_fin'];
        
        // Obtener valores de los días (1 = libre, 0 = trabaja)
        $lunes_libre = $turno['lunes_libre'] ?? '0';
        $martes_libre = $turno['martes_libre'] ?? '0';
        $miercoles_libre = $turno['miercoles_libre'] ?? '0';
        $jueves_libre = $turno['jueves_libre'] ?? '0';
        $viernes_libre = $turno['viernes_libre'] ?? '0';
        $sabado_libre = $turno['sabado_libre'] ?? '1';
        $domingo_libre = $turno['domingo_libre'] ?? '1';
    }
}

// Procesar el formulario al enviar
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nombre = $_POST['nombre'];
    $hora_inicio = $_POST['hora_inicio'];
    $hora_fin = $_POST['hora_fin'];
    
    // Manejar checkboxes - si están marcados (trabaja), valor es '0', sino '1' (libre)
    // Invertir la lógica: checkbox marcado = trabaja (0), no marcado = libre (1)
    $lunes_libre = isset($_POST['dia_lunes']) ? '0' : '1';
    $martes_libre = isset($_POST['dia_martes']) ? '0' : '1';
    $miercoles_libre = isset($_POST['dia_miercoles']) ? '0' : '1';
    $jueves_libre = isset($_POST['dia_jueves']) ? '0' : '1';
    $viernes_libre = isset($_POST['dia_viernes']) ? '0' : '1';
    $sabado_libre = isset($_POST['dia_sabado']) ? '0' : '1';
    $domingo_libre = isset($_POST['dia_domingo']) ? '0' : '1';
    
    // Verificar si estamos actualizando o creando
    if (isset($_POST['id']) && !empty($_POST['id'])) {
        // Actualizar turno existente
        $id = $_POST['id'];
        $stmt = $pdo->prepare("UPDATE turnos SET 
            nombre = ?, 
            hora_inicio = ?, 
            hora_fin = ?,
            lunes_libre = ?,
            martes_libre = ?,
            miercoles_libre = ?,
            jueves_libre = ?,
            viernes_libre = ?,
            sabado_libre = ?,
            domingo_libre = ?
            WHERE id = ?");
        
        $stmt->execute([
            $nombre, $hora_inicio, $hora_fin,
            $lunes_libre, $martes_libre, $miercoles_libre,
            $jueves_libre, $viernes_libre, $sabado_libre,
            $domingo_libre, $id
        ]);
        
        echo "<script>
            alert('Turno actualizado exitosamente');
            window.location.href = 'turnos.php';
        </script>";
    } else {
        // Insertar nuevo turno - solo campos necesarios
        $stmt = $pdo->prepare("INSERT INTO turnos (
            nombre, hora_inicio, hora_fin,
            lunes_libre, martes_libre, miercoles_libre,
            jueves_libre, viernes_libre, sabado_libre,
            domingo_libre
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
        
        $stmt->execute([
            $nombre, $hora_inicio, $hora_fin,
            $lunes_libre, $martes_libre, $miercoles_libre,
            $jueves_libre, $viernes_libre, $sabado_libre,
            $domingo_libre
        ]);
        
        echo "<script>
            alert('Turno creado exitosamente');
            window.location.href = 'turnos.php';
        </script>";
    }
    exit();
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $id ? 'Editar' : 'Crear'; ?> Turno</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #27ae60;
            --light-color: #f8f9fa;
            --border-color: #e0e0e0;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .form-container {
            max-width: 850px;
            margin: 40px auto;
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }
        
        .form-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--primary-color), var(--success-color));
        }
        
        .form-title {
            margin-bottom: 35px;
            color: var(--secondary-color);
            text-align: center;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }
        
        .form-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .form-card {
            background-color: var(--light-color);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            border-left: 4px solid var(--primary-color);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .form-card h5 {
            color: var(--secondary-color);
            margin-bottom: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .form-card h5 i {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .form-label {
            font-weight: 600;
            color: #555;
            margin-bottom: 8px;
        }
        
        .form-control, .form-control:focus {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            padding: 12px 15px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        
        .day-checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 12px;
            margin-top: 10px;
        }
        
        .checkbox-item {
            position: relative;
        }
        
        .checkbox-item input[type="checkbox"] {
            display: none;
        }
        
        .checkbox-item label {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 15px;
            background-color: white;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            text-align: center;
            height: 100%;
        }
        
        .checkbox-item label:hover {
            border-color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .checkbox-item input[type="checkbox"]:checked + label {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
        }
        
        .checkbox-item label i {
            margin-right: 8px;
            font-size: 1.1em;
        }
        
        .time-inputs {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }
        
        .time-input-group {
            flex: 1;
        }
        
        .time-separator {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-top: 30px;
        }
        
        .btn-custom {
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 140px;
        }
        
        .btn-custom i {
            margin-right: 8px;
        }
        
        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }
        
        .btn-success:hover {
            background-color: #219653;
            border-color: #219653;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        .info-note {
            background-color: #e8f4fc;
            border-left: 4px solid var(--primary-color);
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #2c3e50;
        }
        
        .info-note i {
            color: var(--primary-color);
            margin-right: 8px;
        }
        
        @media (max-width: 768px) {
            .form-container {
                padding: 25px;
                margin: 20px;
            }
            
            .day-checkbox-group {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .time-inputs {
                flex-direction: column;
                gap: 10px;
            }
            
            .time-separator {
                margin: 10px 0;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .btn-custom {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2 class="form-title">
                <i class="fas <?php echo $id ? 'fa-edit' : 'fa-calendar-plus'; ?>"></i>
                <?php echo $id ? 'Editar Turno' : 'Crear Nuevo Turno'; ?>
            </h2>
            
            <form method="POST" action="">
                <input type="hidden" name="id" value="<?php echo $id; ?>">
                
                <div class="form-card">
                    <h5><i class="fas fa-info-circle"></i> Información General</h5>
                    
                    <div class="form-group">
                        <label for="nombre" class="form-label">Nombre del Turno</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" 
                               value="<?php echo htmlspecialchars($nombre); ?>" required 
                               placeholder="Ej: Turno Matutino, Turno Vespertino, Turno Nocturno, etc.">
                        <small class="form-text text-muted">Asigne un nombre descriptivo para identificar fácilmente este turno</small>
                    </div>
                </div>
                
                <div class="form-card">
                    <h5><i class="fas fa-calendar-alt"></i> Días Laborales</h5>
                    <p class="text-muted mb-3">Seleccione los días en los que se <strong>TRABAJA</strong> (los no seleccionados serán días libres):</p>
                    
                    <div class="day-checkbox-group">
                        <?php
                        $dias = [
                            'dia_lunes' => ['Lunes', 'fas fa-calendar-day', $lunes_libre],
                            'dia_martes' => ['Martes', 'fas fa-calendar-day', $martes_libre],
                            'dia_miercoles' => ['Miércoles', 'fas fa-calendar-day', $miercoles_libre],
                            'dia_jueves' => ['Jueves', 'fas fa-calendar-day', $jueves_libre],
                            'dia_viernes' => ['Viernes', 'fas fa-calendar-day', $viernes_libre],
                            'dia_sabado' => ['Sábado', 'fas fa-calendar-week', $sabado_libre],
                            'dia_domingo' => ['Domingo', 'fas fa-calendar-week', $domingo_libre]
                        ];
                        
                        foreach ($dias as $key => $info) {
                            $diaNombre = $info[0];
                            $icono = $info[1];
                            $esLibre = $info[2]; // '1' = libre, '0' = trabaja
                            
                            // Si es libre (1), el checkbox NO está marcado
                            // Si trabaja (0), el checkbox SÍ está marcado
                            $isChecked = ($esLibre == '0' || $esLibre == 0);
                            $checked = $isChecked ? 'checked' : '';
                            
                            echo "
                            <div class='checkbox-item'>
                                <input type='checkbox' id='{$key}' name='{$key}' value='1' {$checked}>
                                <label for='{$key}'><i class='{$icono}'></i> {$diaNombre}</label>
                            </div>";
                        }
                        ?>
                    </div>
                    
                    <div class="info-note">
                        <i class="fas fa-info-circle"></i>
                        <strong>Nota:</strong> Marque los días en los que se <strong>TRABAJA</strong>. Los días no marcados serán considerados como "Día libre".
                    </div>
                </div>
                
                <div class="form-card">
                    <h5><i class="fas fa-clock"></i> Horario Laboral</h5>
                    
                    <div class="time-inputs">
                        <div class="time-input-group">
                            <label for="hora_inicio" class="form-label">Hora de Inicio</label>
                            <input type="time" class="form-control" id="hora_inicio" name="hora_inicio" 
                                   value="<?php echo substr($hora_inicio, 0, 5); ?>" required>
                        </div>
                        
                        <div class="time-separator">→</div>
                        
                        <div class="time-input-group">
                            <label for="hora_fin" class="form-label">Hora de Fin</label>
                            <input type="time" class="form-control" id="hora_fin" name="hora_fin" 
                                   value="<?php echo substr($hora_fin, 0, 5); ?>" required>
                        </div>
                    </div>
                    
                    <div class="info-note mt-3">
                        <i class="fas fa-info-circle"></i>
                        <strong>Formato 24 horas:</strong> El sistema utiliza formato de 24 horas (ej: 08:00, 14:30, 22:00)
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button type="submit" class="btn btn-success btn-custom">
                        <i class="fas <?php echo $id ? 'fa-save' : 'fa-plus-circle'; ?>"></i>
                        <?php echo $id ? 'Actualizar Turno' : 'Crear Turno'; ?>
                    </button>
                    
                    <a href="turnos.php" class="btn btn-secondary btn-custom">
                        <i class="fas fa-times"></i>
                        Cancelar
                    </a>
                    
                    <a href="index.php" class="btn btn-outline-primary btn-custom">
                        <i class="fas fa-home"></i>
                        Inicio
                    </a>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // Validación de horas
        document.querySelector('form').addEventListener('submit', function(e) {
            var horaInicio = document.getElementById('hora_inicio').value;
            var horaFin = document.getElementById('hora_fin').value;
            
            if (horaInicio && horaFin && horaInicio >= horaFin) {
                alert('❌ Error: La hora de inicio debe ser anterior a la hora de fin');
                e.preventDefault();
                return false;
            }
            
            if (horaInicio === horaFin) {
                alert('❌ Error: La hora de inicio no puede ser igual a la hora de fin');
                e.preventDefault();
                return false;
            }
            
            // Validar que al menos un día esté seleccionado para trabajar
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
            
            if (!checkedOne) {
                alert('❌ Error: Por favor seleccione al menos un día laboral');
                e.preventDefault();
                return false;
            }
            
            // Validar que el nombre no esté vacío
            var nombre = document.getElementById('nombre').value.trim();
            if (nombre === '') {
                alert('❌ Error: El nombre del turno es obligatorio');
                e.preventDefault();
                return false;
            }
            
            // Confirmación antes de enviar
            var accion = "<?php echo $id ? 'actualizar' : 'crear'; ?>";
            if (!confirm(`¿Está seguro de ${accion} este turno?`)) {
                e.preventDefault();
                return false;
            }
        });
        
        // Mejorar la experiencia de usuario en móviles
        document.addEventListener('DOMContentLoaded', function() {
            // Establecer valores por defecto para horas si están vacíos
            var horaInicio = document.getElementById('hora_inicio');
            var horaFin = document.getElementById('hora_fin');
            
            if (!horaInicio.value) horaInicio.value = '08:00';
            if (!horaFin.value) horaFin.value = '17:00';
        });
    </script>
</body>
</html>