<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reserva de Computadoras - Santa Rita Agustinos</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Spectral:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --santa-rita-gold: #D4AF37;
            --santa-rita-red: #8B1538;
            --santa-rita-red-dark: #6B0F2A;
            --santa-rita-gold-light: #E8C968;
            --bg-primary: #0A0A0A;
            --bg-secondary: #1A1A1A;
            --bg-card: #252525;
            --text-primary: #F5F5F5;
            --text-secondary: #B0B0B0;
            --border: #333333;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139, 21, 56, 0.08) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }

        header {
            text-align: center;
            padding: 3rem 0 4rem;
            position: relative;
        }

        .logo-container {
            width: 200px;
            height: 200px;
            margin: 0 auto 2rem;
            background: var(--bg-secondary);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        h1 {
            font-family: 'Spectral', serif;
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--santa-rita-gold) 0%, var(--santa-rita-gold-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02em;
        }

        .subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            font-weight: 400;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 1fr 450px;
            gap: 2rem;
            margin-top: 2rem;
        }

        .calendar-section {
            background: var(--bg-secondary);
            border-radius: 24px;
            padding: 2rem;
            border: 1px solid var(--border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid var(--border);
        }

        .calendar-header h2 {
            font-family: 'Spectral', serif;
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--santa-rita-gold);
        }

        .week-navigation {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .nav-btn {
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 0.6rem 1.2rem;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background: var(--santa-rita-gold);
            color: var(--bg-primary);
            border-color: var(--santa-rita-gold);
            transform: translateY(-2px);
        }

        .current-week {
            font-size: 0.95rem;
            color: var(--text-secondary);
            font-weight: 500;
            min-width: 200px;
            text-align: center;
        }

        .calendar {
            display: grid;
            grid-template-columns: 100px repeat(5, 1fr);
            gap: 1px;
            background: var(--border);
            border-radius: 12px;
            overflow: hidden;
        }

        .calendar-cell {
            background: var(--bg-card);
            padding: 1rem;
            min-height: 60px;
        }

        .calendar-header-cell {
            background: var(--santa-rita-red-dark);
            color: var(--santa-rita-gold-light);
            font-weight: 600;
            text-align: center;
            padding: 1rem;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .time-cell {
            background: var(--bg-secondary);
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 2px solid var(--border);
        }

        .reservation-cell {
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }

        .reservation-cell:hover {
            background: rgba(212, 175, 55, 0.1);
        }

        .reservation-cell.available {
            background: var(--bg-card);
        }

        .reservation-cell.reserved {
            background: linear-gradient(135deg, rgba(139, 21, 56, 0.4) 0%, rgba(139, 21, 56, 0.2) 100%);
            border-left: 3px solid var(--santa-rita-red);
        }

        .reservation-cell.reserved::after {
            content: attr(data-name);
            font-size: 0.7rem;
            color: var(--santa-rita-gold-light);
            font-weight: 500;
        }

        .booking-section {
            background: var(--bg-secondary);
            border-radius: 24px;
            padding: 2rem;
            border: 1px solid var(--border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            height: fit-content;
            position: sticky;
            top: 2rem;
        }

        .booking-section h2 {
            font-family: 'Spectral', serif;
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--santa-rita-gold);
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 0.9rem 1.2rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 1rem;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--santa-rita-gold);
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
        }

        .time-slots {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
            max-height: 300px;
            overflow-y: auto;
            padding: 0.5rem;
            background: var(--bg-card);
            border-radius: 10px;
            border: 1px solid var(--border);
        }

        .time-slot {
            padding: 0.8rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .time-slot:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--santa-rita-gold);
        }

        .time-slot.selected {
            background: var(--santa-rita-gold);
            color: var(--bg-primary);
            border-color: var(--santa-rita-gold);
            font-weight: 600;
        }

        .btn-submit {
            width: 100%;
            padding: 1.2rem;
            background: linear-gradient(135deg, var(--santa-rita-red) 0%, var(--santa-rita-red-dark) 100%);
            color: var(--santa-rita-gold-light);
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-family: 'Spectral', serif;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(139, 21, 56, 0.4);
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 21, 56, 0.6);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        .time-slots::-webkit-scrollbar {
            width: 8px;
        }

        .time-slots::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 10px;
        }

        .time-slots::-webkit-scrollbar-thumb {
            background: var(--santa-rita-gold);
            border-radius: 10px;
        }

        @media (max-width: 1200px) {
            .main-grid {
                grid-template-columns: 1fr;
            }

            .booking-section {
                position: static;
            }
        }

        @media (max-width: 768px) {
            .calendar {
                grid-template-columns: 80px repeat(5, 1fr);
                font-size: 0.75rem;
            }

            .calendar-cell {
                padding: 0.5rem;
                min-height: 50px;
            }

            h1 {
                font-size: 2rem;
            }

            .time-slots {
                grid-template-columns: 1fr;
            }
        }

        .success-message {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #86efac;
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 500;
            display: none;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .success-message.show {
            display: block;
        }
    </style>
</head>
<body id="the7-body" class="wp-singular page-template-default page page-id-4331 wp-custom-logo wp-embed-responsive wp-theme-dt-the7 ehf-footer ehf-template-dt-the7 ehf-stylesheet-dt-the7 jkit-color-scheme transparent dt-responsive-on right-mobile-menu-close-icon ouside-menu-close-icon mobile-hamburger-close-bg-enable mobile-hamburger-close-bg-hover-enable  fade-medium-mobile-menu-close-icon fade-medium-menu-close-icon srcset-enabled btn-flat custom-btn-color custom-btn-hover-color phantom-fade phantom-shadow-decoration phantom-custom-logo-on floating-mobile-menu-icon top-header first-switch-logo-left first-switch-menu-right second-switch-logo-left second-switch-menu-right right-mobile-menu layzr-loading-on popup-message-style the7-ver-14.2.1.1 elementor-default elementor-kit-410 elementor-page elementor-page-4331"><!-- Google Tag Manager (noscript) -->
<noscript><iframe data-src="https://www.googletagmanager.com/ns.html?id=GTM-PZW64TX"
height="0" width="0" style="display:none;visibility:hidden" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" class="lazyload" data-load-mode="1"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    <div class="container">
        <header>
            <div class="logo-container">
                <!-- REEMPLAZA LA SIGUIENTE LINEA CON LA URL DE TU LOGO -->
                <img decoding="async" src="URL_DE_TU_LOGO_AQUI" alt="Colegio Santa Rita Agustinos">
            </div>
            <h1>Reserva de Computadoras</h1>
            <p class="subtitle">Sistema de reservas - Santa Rita Agustinos</p>
        </header>

        <div class="main-grid">
            <div class="calendar-section">
                <div class="calendar-header">
                    <h2>Calendario Semanal</h2>
                    <div class="week-navigation">
                        <button class="nav-btn" onclick="changeWeek(-1)">← Anterior</button>
                        <span class="current-week" id="currentWeek"></span>
                        <button class="nav-btn" onclick="changeWeek(1)">Siguiente →</button>
                    </div>
                </div>

                <div class="calendar" id="calendar"></div>
            </div>

            <div class="booking-section">
                <div class="success-message" id="successMessage">
                    ✓ ¡Reserva confirmada exitosamente!
                </div>

                <h2>Nueva Reserva</h2>
                
                <form id="bookingForm">
                    <div class="form-group">
                        <label for="name">Nombre completo</label>
                        <input type="text" id="name" required placeholder="Ingresa tu nombre">
                    </div>

                    <div class="form-group">
                        <label for="date">Fecha</label>
                        <input type="date" id="date" required>
                    </div>

                    <div class="form-group">
                        <label>Selecciona horarios (puedes elegir varios)</label>
                        <div class="time-slots" id="timeSlots"></div>
                    </div>

                    <button type="submit" class="btn-submit">Confirmar Reserva</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        const TIME_SLOTS = [
            '07:40 - 08:20',
            '08:20 - 09:50',
            '09:50 - 10:30',
            '10:40 - 11:20',
            '11:20 - 12:00',
            '12:10 - 12:50',
            '12:50 - 13:30',
            '13:30 - 14:10',
            '14:10 - 14:50',
            '14:50 - 15:30',
            '15:30 - 16:10',
            '16:10 - 16:50'
        ];

        const WEEKDAYS = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];

        let currentWeekOffset = 0;
        let selectedTimes = [];
        let reservations = JSON.parse(localStorage.getItem('reservations')) || [];

        function init() {
            renderTimeSlots();
            updateCalendar();
            updateCurrentWeek();
            setMinDate();
        }

        function renderTimeSlots() {
            const container = document.getElementById('timeSlots');
            container.innerHTML = TIME_SLOTS.map(slot => `
                <div class="time-slot" onclick="selectTime('${slot}')">
                    ${slot}
                </div>
            `).join('');
        }

        function selectTime(slot) {
            const index = selectedTimes.indexOf(slot);
            
            if (index > -1) {
                selectedTimes.splice(index, 1);
            } else {
                selectedTimes.push(slot);
            }
            
            document.querySelectorAll('.time-slot').forEach(el => {
                const slotText = el.textContent.trim();
                if (selectedTimes.includes(slotText)) {
                    el.classList.add('selected');
                } else {
                    el.classList.remove('selected');
                }
            });
        }

        function getWeekDates(offset) {
            const today = new Date();
            const monday = new Date(today);
            const dayOfWeek = today.getDay();
            const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
            monday.setDate(today.getDate() + diff + (offset * 7));

            const dates = [];
            for (let i = 0; i < 5; i++) {
                const date = new Date(monday);
                date.setDate(monday.getDate() + i);
                dates.push(date);
            }
            return dates;
        }

        function updateCalendar() {
            const dates = getWeekDates(currentWeekOffset);
            const calendar = document.getElementById('calendar');
            
            let html = '<div class="calendar-header-cell">Horario</div>';
            dates.forEach((date, i) => {
                const day = date.getDate();
                const month = date.getMonth() + 1;
                html += `<div class="calendar-header-cell">${WEEKDAYS[i]}<br>${day}/${month}</div>`;
            });

            TIME_SLOTS.forEach(timeSlot => {
                html += `<div class="time-cell">${timeSlot}</div>`;
                dates.forEach(date => {
                    const dateStr = formatDate(date);
                    const reservation = reservations.find(r => r.date === dateStr && r.time === timeSlot);
                    
                    if (reservation) {
                        html += `<div class="reservation-cell reserved" data-name="${reservation.name}"></div>`;
                    } else {
                        html += `<div class="reservation-cell available"></div>`;
                    }
                });
            });

            calendar.innerHTML = html;
        }

        function updateCurrentWeek() {
            const dates = getWeekDates(currentWeekOffset);
            const firstDate = dates[0];
            const lastDate = dates[4];
            
            const start = firstDate.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
            const end = lastDate.toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' });
            
            document.getElementById('currentWeek').textContent = `${start} - ${end}`;
        }

        function changeWeek(direction) {
            currentWeekOffset += direction;
            updateCalendar();
            updateCurrentWeek();
        }

        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        function setMinDate() {
            const today = new Date();
            document.getElementById('date').min = formatDate(today);
        }

        document.getElementById('bookingForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const name = document.getElementById('name').value;
            const date = document.getElementById('date').value;

            if (selectedTimes.length === 0) {
                alert('Por favor selecciona al menos un horario');
                return;
            }

            const conflicts = selectedTimes.filter(time => 
                reservations.some(r => r.date === date && r.time === time)
            );

            if (conflicts.length > 0) {
                alert(`Los siguientes horarios ya están reservados:\n${conflicts.join('\n')}\n\nPor favor deselecciónalos e intenta nuevamente.`);
                return;
            }

            selectedTimes.forEach(time => {
                const reservation = { name, date, time };
                reservations.push(reservation);
            });
            
            localStorage.setItem('reservations', JSON.stringify(reservations));

            const successMsg = document.getElementById('successMessage');
            successMsg.textContent = `✓ ¡${selectedTimes.length} reserva${selectedTimes.length > 1 ? 's' : ''} confirmada${selectedTimes.length > 1 ? 's' : ''} exitosamente!`;
            successMsg.classList.add('show');
            setTimeout(() => successMsg.classList.remove('show'), 3000);

            this.reset();
            selectedTimes = [];
            document.querySelectorAll('.time-slot').forEach(el => el.classList.remove('selected'));

            updateCalendar();
        });

        init();
    </script>
</body>
</html>