<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula Virtual - {{ $course->title }}</title>
    <!-- Cargamos Bootstrap y JS mediante Vite -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    <!-- Iconos oficiales de Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        body { font-size: 0.875rem; background-color: #f4f6f9; }
        /* Evita la selección de texto en toda la zona de estudio */
        .zona-protegida {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sidebar-temario {
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
            overflow-y: auto;
            background-color: #fff;
            border-right: 1px solid #dee2e6;
        }
        .temario-item.active {
            background-color: #e7f1ff;
            color: #0d6efd;
            font-weight: 600;
        }
        .temario-item:hover:not(.active) {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>

    <!-- NAVBAR SUPERIOR DEL AULA -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" style="height: 56px;">
        <div class="container-fluid px-3">
            <a class="navbar-brand fw-bold text-white fs-6 d-flex align-items-center" href="{{ url('/home') }}">
                <i class="bi bi-chevron-left me-2"></i> Salir del Aula
            </a>
            <span class="navbar-text text-white-50 d-none d-md-inline-block text-truncate max-w-md">
                {{ $course->title }}
            </span>
            <div class="text-white fw-semibold small">
                <i class="bi bi-person-circle me-1"></i> {{ Auth::user()->name }}
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            
            <!-- COLUMNA IZQUIERDA: TEMARIO ACADÉMICO -->
            <nav class="col-md-4 col-lg-3 p-0 sidebar-temario d-none d-md-block">
                <div class="p-3 bg-light border-bottom">
                    <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-list-columns-reverse me-2"></i> Índice de Contenidos</h6>
                </div>
                <div class="list-group list-group-flush">
                    @forelse($temario as $index => $item)
                        <a href="{{ route('classroom.show', [$course->id, $item->id]) }}" 
                           class="list-group-item list-group-item-action p-3 d-flex align-items-start border-bottom temario-item {{ $content && $content->id == $item->id ? 'active' : '' }}">
                            <span class="me-2 text-muted" style="font-size: 0.8rem;">{{ sprintf('%02d', $index + 1) }}.</span>
                            <div class="w-100">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small text-uppercase tracking-wider text-muted" style="font-size: 0.65rem;">
                                        @if($item->type == 'video') 🎥 Videoclase @elseif($item->type == 'audio') 🎵 Audio @else 📄 Material @endif
                                    </span>
                                </div>
                                <div class="text-truncate-2 small text-dark mb-0" style="font-size: 0.85rem;">{{ $item->title }}</div>
                            </div>
                        </a>
                    @empty
                        <div class="text-center text-muted p-4 small">Este curso no cuenta con lecciones cargadas aún.</div>
                    @endforelse
                </div>
            </nav>

            <!-- COLUMNA DERECHA: REPRODUCTOR MULTIMEDIA -->
            <main class="col-12 col-md-8 col-lg-9 ms-sm-auto px-md-4 py-4 zona-protegida">
                
                <!-- MENU RESPONSIVO EXCLUSIVO PARA MÓVILES -->
                <div class="d-block d-md-none mb-3">
                    <button class="btn btn-outline-dark w-100 btn-sm text-start d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#mobileMenu">
                        <span><i class="bi bi-list me-2"></i> Ver índice de lecciones</span>
                        <i class="bi bi-chevron-down"></i>
                    </button>
                    <div class="collapse mt-2 bg-white rounded border shadow-sm" id="mobileMenu">
                        <div class="list-group list-group-flush">
                            @foreach($temario as $index => $item)
                                <a href="{{ route('classroom.show', [$course->id, $item->id]) }}" class="list-group-item list-group-item-action small py-2 {{ $content && $content->id == $item->id ? 'bg-light fw-bold' : '' }}">
                                    {{ $index + 1 }}. {{ $item->title }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>

                @if($content)
                    <!-- CONTENEDOR DEL VISOR SEGURO -->
                    <div class="card border-0 shadow-sm overflow-hidden mb-4 rounded-3">
                        
                        <!-- CASO A: SI ES VIDEO (Reproductor local blindado de alta seguridad) -->
                        @if($content->type == 'video')
                            <div class="ratio ratio-16x9 bg-black d-flex align-items-center justify-content-center">
                                <video 
                                    controls 
                                    controlsList="nodownload noplaybackrate" 
                                    disablePictureInPicture 
                                    oncontextmenu="return false;"
                                    class="reproductor-media w-100 h-100"
                                    style="object-fit: contain;">
                                    
                                    <!-- Leemos el video directo desde el disco público donde lo guardó Laravel -->
                                    <source src="{{ asset('storage/' . $content->file_path) }}" type="video/mp4">
                                    Tu navegador no soporta la reproducción de video nativo.
                                </video>
                            </div>
                        @elseif($content->type == 'document')
                            <div class="bg-light p-2 border-bottom d-flex justify-content-between align-items-center px-3">
                                <span class="text-muted small"><i class="bi bi-file-earmark-pdf me-1"></i> Visor de lectura seguro</span>
                                <div class="d-flex align-items-center gap-2">
                                    <button type="button" class="btn btn-sm btn-outline-dark" onclick="alterarZoomReal(-0.1)" title="Reducir letra">
                                        <i class="bi bi-zoom-out"></i>
                                    </button>
                                    <span id="indicadorZoom" class="badge bg-secondary text-white font-monospace">100%</span>
                                    <button type="button" class="btn btn-sm btn-outline-dark" onclick="alterarZoomReal(0.1)" title="Agrandar letra">
                                        <i class="bi bi-zoom-in"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="border bg-secondary-subtle overflow-auto position-relative" style="height: 600px; width: 100%;">
                                
                                <div id="areaZoom" class="position-relative mx-auto bg-white shadow" 
                                    style="width: 100%; height: 800px; transform-origin: top center; transition: transform 0.2s ease;">
                                    
                                    <div class="escudo-anti-copia position-absolute top-0 start-0 w-100 h-100" 
                                        style="z-index: 10; background: rgba(0,0,0,0);"
                                        oncontextmenu="return false;">
                                    </div>

                                    <iframe 
                                        src="{{ route('content.stream', $content->id) }}#toolbar=0&navpanes=0" 
                                        style="border:0; width: 100%; height: 100%; z-index: 1;">
                                    </iframe>
                                </div>
                            </div>

                        <!-- CASO C: SI ES AUDIO (Oculta nativamente los tres puntos de descarga) -->
                        @elseif($content->type == 'audio')
                            <div class="p-5 text-center bg-white border-bottom">
                                <i class="bi bi-file-earmark-music text-success display-2 mb-3 d-block"></i>
                                <h5 class="fw-bold text-dark">{{ $content->title }}</h5>
                                <p class="text-muted small px-md-5 mb-4">Escucha la cápsula educativa correspondiente a este módulo académico.</p>
                                
                                <audio controls controlsList="nodownload" class="w-100 reproductor-media mx-auto max-w-md mt-2" oncontextmenu="return false;">
                                    <source src="{{ route('content.stream', $content->id) }}" type="audio/mpeg">
                                    Tu navegador no soporta la reproducción de este archivo de audio.
                                </audio>
                            </div>
                        @endif
                        
                        <!-- PIE DEL VISOR: TÍTULO Y DESCRIPCIÓN -->
                        <div class="card-body p-4 bg-white">
                            <h4 class="fw-bold text-dark mb-2">{{ $content->title }}</h4>
                            <p class="text-muted mb-0" style="font-size: 0.9rem;">
                                {{ $content->description ?? 'No se ingresaron instrucciones complementarias para esta clase.' }}
                            </p>
                        </div>
                    </div>
                @else
                    <!-- Estado de vacío si el curso no tiene temario -->
                    <div class="card border-0 shadow-sm p-5 text-center">
                        <i class="bi bi-folder-x display-3 text-muted mb-3"></i>
                        <h5 class="fw-bold">Sin contenido disponible</h5>
                        <p class="text-muted mb-0">Este programa de estudio aún no posee materiales asignados por el área académica.</p>
                    </div>
                @endif
            </main>

        </div>
    </div>

<script>
        let escalaZoom = 1.0;

        function alterarZoomReal(factor) {
            escalaZoom += factor;
            
            // Limitamos el Zoom entre 80% (0.8) y 180% (1.8) para que no se rompa la lectura
            if (escalaZoom < 0.8) escalaZoom = 0.8;
            if (escalaZoom > 1.8) escalaZoom = 1.8;
            
            // Aplicamos la transformación de CSS para cambiar el tamaño general interno
            const area = document.getElementById('areaZoom');
            area.style.transform = `scale(${escalaZoom})`;
            
            // Ajustamos la altura proporcionalmente para que el contenedor permita hacer scroll hacia abajo
            area.style.height = (800 * escalaZoom) + 'px';
            
            // Actualizamos el indicador visual para el alumno
            document.getElementById('indicadorZoom').innerText = Math.round(escalaZoom * 100) + '%';
        }
    </script>

    <!-- SCRIPTS DE SEGURIDAD VISUAL ACTIVA -->
   <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Bloqueo de Clic Derecho en toda la zona protegida y en el escudo del PDF
        const zonaEstudio = document.querySelector('.zona-protegida');
        if (zonaEstudio) {
            zonaEstudio.addEventListener('contextmenu', function(event) {
                event.preventDefault();
            });
        }

        // 2. Bloquear arrastre de mouse sobre el contenedor para evitar selección de texto "fantasma"
        const contenedorPdf = document.querySelector('.contenedor-pdf');
        if (contenedorPdf) {
            contenedorPdf.addEventListener('selectstart', e => e.preventDefault());
            contenedorPdf.addEventListener('mousedown', e => {
                if (e.button === 0) e.preventDefault(); // Bloquea selección con clic izquierdo básico
            });
        }

        // 3. Bloqueo estricto de comandos de teclado (Guardar, Imprimir, Inspeccionar)
        window.addEventListener('keydown', function(event) {
            // Ctrl+S (Guardar), Ctrl+P (Imprimir), Ctrl+U (Ver código fuente), F12 (Consola)
            if (
                (event.ctrlKey && (event.key === 'c' || event.key === 'p' || event.key === 'u' || event.key === 's')) || 
                event.key === 'F12'
            ) {
                event.preventDefault();
            }
        });
    });
</script>