@extends('layouts.admin')

@section('content')
<div class="pt-3 pb-2 mb-3 border-bottom d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2">
    <div>
        <h1 class="h2 fw-bold text-dark">Gestionar Temario Académico</h1>
        <p class="text-muted mb-0">Curso: <strong class="text-dark">{{ $course->title }}</strong></p>
    </div>
    <a href="{{ route('admin.courses.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
        <i class="bi bi-arrow-left me-1"></i> Volver al Catálogo
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4 d-flex align-items-center">
        <i class="bi bi-check-circle-fill me-2 fs-5"></i>
        <div>{{ session('success') }}</div>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger border-0 shadow-sm mb-4 d-flex align-items-center">
        <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
        <div>{{ session('error') }}</div>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger border-0 shadow-sm mb-4">
        <h6 class="fw-bold"><i class="bi bi-exclamation-octagon-fill me-2"></i> El formulario tiene errores:</h6>
        <ul class="mb-0 small">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row g-4">
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 bg-white rounded-3 sticky-top" style="top: 80px; z-index: 10;">
            <h5 class="fw-bold mb-3 text-dark"><i class="bi bi-cloud-arrow-up text-primary me-2"></i>Subir Material</h5>
            
            <form action="{{ route('admin.courses.contents.store', $course->id) }}" method="POST" enctype="multipart/form-data">                
                @csrf
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-secondary">Título del Recurso</label>
                    <input type="text" name="title" class="form-control text-dark" placeholder="Ej: Clase 1 - Fundamentos" required>
                </div>

                <div class="mb-3">
                    <label class="form-label small fw-semibold text-secondary">Tipo de Formato</label>
                    <select name="type" id="contentTypeSelect" class="form-select text-dark" required onchange="toggleFileInputs()">
                        <option value="document">📄 Documento Privado (PDF)</option>
                        <option value="audio">🎵 Podcast / Audio Privado</option>
                        <option value="video">🎥 Videoclase (.mp4 / Streaming)</option>
                    </select>
                </div>

                <div id="videoSourceGroup" class="mb-3 d-none">
                    <label class="form-label small fw-semibold text-secondary">Origen del Video</label>
                    <select id="videoSourceSelect" name="video_source" class="form-select text-dark" onchange="toggleVideoSourceInputs()">
                        <option value="upload">📁 Subir archivo de video local (.mp4)</option>
                        <option value="link">🔗 Incrustar enlace o ID (YouTube/Vimeo/Streaming)</option>
                    </select>
                </div>

                <div id="localFileGroup" class="mb-3">
                    <label class="form-label small fw-semibold text-secondary">Seleccionar Archivo Físico</label>
                    <input type="file" name="file" id="fileInput" class="form-control" accept=".pdf,.mp3" required>
                    <div id="fileHelpText" class="form-text text-muted" style="font-size: 0.75rem;">Admite PDF o MP3. Máx 20MB.</div>
                </div>

                <div id="localVideoFileGroup" class="mb-3 d-none">
                    <label class="form-label small fw-semibold text-secondary">Seleccionar Archivo de Video</label>
                    <input type="file" name="adjunto_clase" id="videoFileInput" class="form-control" accept="video/mp4,video/x-m4v,video/*">
                    <div class="form-text text-muted" style="font-size: 0.75rem;">Formato recomendado: .mp4. Máximo 500MB.</div>
                </div>

                <div id="videoUrlGroup" class="mb-3 d-none">
                    <label class="form-label small fw-semibold text-secondary">ID o Ruta del Video</label>
                    <input type="text" name="video_id" id="videoIdInput" class="form-control text-dark" placeholder="Ej: Código de YouTube o URL completa">
                    <div class="form-text text-muted" style="font-size: 0.75rem;">Ingresa el identificador único o la URL de la transmisión externa.</div>
                </div>

                <div class="mb-4">
                    <label class="form-label small fw-semibold text-secondary">Descripción u Observaciones (Opcional)</label>
                    <textarea name="description" rows="3" class="form-control text-dark" placeholder="Instrucciones breves o apuntes para el alumno..."></textarea>
                </div>

                <button type="submit" class="btn btn-primary w-100 fw-bold rounded-pill shadow-sm">
                    <i class="bi bi-plus-circle me-1"></i> Cargar al Curso
                </button>
            </form>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card border-0 shadow-sm p-4 bg-white rounded-3">
            <h5 class="fw-bold mb-4 text-dark"><i class="bi bi-list-ol text-primary me-2"></i>Estructura y Lecciones del Curso</h5>
            
            <div class="list-group gap-2">
                @forelse($contents as $index => $item)
                    <div class="list-group-item d-flex align-items-center justify-content-between p-3 border rounded-3 bg-white shadow-sm">
                        <div class="d-flex align-items-center text-truncate me-3">
                            <span class="badge bg-light text-dark border me-3 d-none d-sm-inline-block">{{ $index + 1 }}</span>
                            
                            <div class="me-3 fs-4 flex-shrink-0">
                                @if($item->type == 'video')
                                    <i class="bi bi-play-btn-fill text-danger"></i>
                                @elseif($item->type == 'audio')
                                    <i class="bi bi-music-note-beamed text-success"></i>
                                @else
                                    <i class="bi bi-file-earmark-pdf-fill text-primary"></i>
                                @endif
                            </div>
                            
                            <div class="text-truncate">
                                <h6 class="mb-0 fw-bold text-dark text-truncate" style="font-size: 0.95rem;">{{ $item->title }}</h6>
                                @if($item->description)
                                    <small class="text-muted d-block text-truncate" style="max-width: 250px;">{{ $item->description }}</small>
                                @endif
                                <span class="badge bg-light text-secondary border mt-1" style="font-size: 0.65rem;">
                                    <i class="bi bi-shield-lock-fill me-1"></i> Protegido anti-descargas
                                </span>
                            </div>
                        </div>

                        <div class="flex-shrink-0">
                            <div class="btn-group shadow-sm" role="group">
                                
                                <a href="{{ route('admin.courses.contents.edit', $item->id) }}" 
                                   class="btn btn-warning d-inline-flex align-items-center justify-content-center px-3 fw-bold text-dark" 
                                   style="min-width: 110px;"
                                   title="Editar Lección">
                                    <i class="bi bi-pencil-square me-2"></i> <span>Editar</span>
                                </a>

                                <form action="{{ route('admin.courses.contents.destroy', $item->id) }}" 
                                      method="POST" 
                                      class="d-inline" 
                                      onsubmit="return confirm('¿Estás completamente seguro de eliminar la lección «{{ $item->title }}»? Si es un archivo físico del servidor, se borrará de forma permanente para liberar espacio en disco.');">
                                    @csrf
                                    @method('DELETE') <button type="submit" 
                                            class="btn btn-danger h-100 d-inline-flex align-items-center justify-content-center px-3 fw-bold" 
                                            style="min-width: 110px; border-top-left-radius: 0; border-bottom-left-radius: 0;" 
                                            title="Eliminar Lección">
                                        <i class="bi bi-trash me-2"></i> <span>Eliminar</span>
                                    </button>
                                </form>
                                
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-folder2-open display-4 text-black-50 mb-3 d-block"></i>
                        <h6 class="fw-bold text-dark">Este curso aún no tiene material didáctico cargado.</h6>
                        <p class="small text-secondary px-md-5 mb-0">Utiliza el panel de la izquierda para dotar a este programa de lecturas complementarias en PDF, audios informativos o cápsulas de video.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<script>
function toggleFileInputs() {
    const type = document.getElementById('contentTypeSelect').value;
    
    const videoSourceGroup = document.getElementById('videoSourceGroup');
    const localFileGroup = document.getElementById('localFileGroup');
    const fileInput = document.getElementById('fileInput');
    const fileHelpText = document.getElementById('fileHelpText');

    if (type === 'video') {
        videoSourceGroup.classList.remove('d-none');
        localFileGroup.classList.add('d-none');
        fileInput.removeAttribute('required');
        
        toggleVideoSourceInputs();
    } else {
        videoSourceGroup.classList.add('d-none');
        document.getElementById('localVideoFileGroup').classList.add('d-none');
        document.getElementById('videoUrlGroup').classList.add('d-none');
        
        document.getElementById('videoFileInput').removeAttribute('required');
        document.getElementById('videoIdInput').removeAttribute('required');
        
        localFileGroup.classList.remove('d-none');
        fileInput.setAttribute('required', 'required');
        
        if (type === 'audio') {
            fileInput.setAttribute('accept', '.mp3');
            fileHelpText.innerText = "Admite únicamente archivos MP3. Máx 20MB.";
        } else {
            fileInput.setAttribute('accept', '.pdf');
            fileHelpText.innerText = "Admite únicamente documentos PDF. Máx 20MB.";
        }
    }
}

function toggleVideoSourceInputs() {
    const type = document.getElementById('contentTypeSelect').value;
    if (type !== 'video') return;

    const source = document.getElementById('videoSourceSelect').value;
    const localVideoFileGroup = document.getElementById('localVideoFileGroup');
    const videoUrlGroup = document.getElementById('videoUrlGroup');
    
    const videoFileInput = document.getElementById('videoFileInput');
    const videoIdInput = document.getElementById('videoIdInput');

    if (source === 'upload') {
        localVideoFileGroup.classList.remove('d-none');
        videoUrlGroup.classList.add('d-none');
        
        videoFileInput.setAttribute('required', 'required');
        videoIdInput.removeAttribute('required');
        videoIdInput.value = ""; // Limpieza preventiva para evitar conflictos de envío
    } else {
        localVideoFileGroup.classList.add('d-none');
        videoUrlGroup.classList.remove('d-none');
        
        videoFileInput.removeAttribute('required');
        videoFileInput.value = ""; // Limpieza preventiva del binario
        videoIdInput.setAttribute('required', 'required');
    }
}

document.addEventListener("DOMContentLoaded", function() {
    toggleFileInputs();
});
</script>
@endsection