@extends('layouts.app-layout')

@section('title', 'Nueva Postulación')

@section('content')
    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="fw-normal mb-0">Nueva Postulación</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('postulaciones.mias') }}" class="btn btn-outline-secondary rounded-pill">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </div>
        </div>

        {{-- Mostrar mensajes de error --}}
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger py-2">
                <i class="bi bi-exclamation-triangle me-1"></i>
                Por favor corrige los errores e inténtalo nuevamente.
            </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-9">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        @if($programas->isEmpty())
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i>
                                No hay programas abiertos disponibles en este momento.
                            </div>
                            <a href="{{ route('programas.index') }}" class="btn btn-secondary rounded-pill">
                                <i class="bi bi-arrow-left me-1"></i> Volver a Programas
                            </a>
                        @else
                            <form action="{{ route('postulaciones.store') }}" method="POST" enctype="multipart/form-data" class="d-grid gap-4" id="postulacionForm">
                                @csrf

                                <div class="row gy-4">
                                    {{-- Sección: Selección de Programa --}}
                                    <div class="col-12">
                                        <h6 class="text-primary border-bottom pb-2 mb-3">
                                            <i class="bi bi-ui-checks me-1"></i> Selecciona un Programa
                                        </h6>
                                        <div class="row gy-3">
                                            <div class="col-12">
                                                <label for="programa_id" class="form-label text-muted small mb-1">Programa <span class="text-danger">*</span></label>
                                                <select name="programa_id" id="programa_id"
                                                        class="form-select @error('programa_id') is-invalid @enderror"
                                                        required>
                                                    <option value="">Seleccione un programa...</option>
                                                    @foreach($programas as $prog)
                                                        <option value="{{ $prog->id }}"
                                                                {{ old('programa_id', $programaSeleccionado) == $prog->id ? 'selected' : '' }}
                                                                data-descripcion="{{ $prog->breve_descripcion }}"
                                                                data-requisitos="{{ json_encode($prog->requisitos) }}"
                                                                data-documentacion="{{ $prog->documentacion_requerida }}"
                                                                data-objetivo="{{ $prog->objetivo }}">
                                                            {{ $prog->nombre }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('programa_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Sección: Información del Programa (dinámica) --}}
                                    <div class="col-12" id="programaInfo" style="display: {{ $programa ? 'block' : 'none' }}">
                                        <h6 class="text-primary border-bottom pb-2 mb-3">
                                            <i class="bi bi-info-circle me-1"></i> Información del Programa
                                        </h6>
                                        <div class="row gy-3">
                                            <div class="col-12" id="descripcionContainer">
                                                <div class="alert alert-info mb-0">
                                                    <strong>Descripción:</strong>
                                                    <p class="mb-0 mt-2" id="descripcionText">{{ $programa->breve_descripcion ?? '' }}</p>
                                                </div>
                                            </div>

                                            <div class="col-12 col-md-6" id="objetivoContainer">
                                                <div class="card bg-light border-0">
                                                    <div class="card-body">
                                                        <h6 class="text-muted small mb-2"><i class="bi bi-bullseye me-1"></i> Objetivo</h6>
                                                        <p class="small mb-0" id="objetivoText">{{ $programa->objetivo ?? '' }}</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12 col-md-6" id="documentacionContainer">
                                                <div class="card border-warning bg-warning-subtle">
                                                    <div class="card-body">
                                                        <h6 class="text-warning-emphasis small mb-2">
                                                            <i class="bi bi-file-earmark-text me-1"></i> Documentación Requerida
                                                        </h6>
                                                        <div class="small text-warning-emphasis" id="documentacionText">
                                                            @if($programa && $programa->documentacion_requerida)
                                                                {!! nl2br(e($programa->documentacion_requerida)) !!}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Sección: Campos Dinámicos del Formulario --}}
                                    <div class="col-12" id="camposDinamicosSection" style="display: {{ $programa ? 'block' : 'none' }}">
                                        <h6 class="text-primary border-bottom pb-2 mb-3">
                                            <i class="bi bi-pencil-square me-1"></i> Completa tu Postulación
                                        </h6>
                                        <div id="camposDinamicosContainer" class="row gy-3">
                                            @if($programa && is_array($programa->requisitos))
                                                @foreach($programa->requisitos as $requisito)
                                                    <div class="col-12 col-md-6">
                                                        <label for="resp_{{ $requisito['nombre'] }}" class="form-label text-muted small mb-1">
                                                            {{ $requisito['label'] }}
                                                            @if($requisito['requerido'])
                                                                <span class="text-danger">*</span>
                                                            @endif
                                                        </label>

                                                        @if($requisito['tipo'] === 'textarea')
                                                            <textarea
                                                                name="respuestas[{{ $requisito['nombre'] }}]"
                                                                id="resp_{{ $requisito['nombre'] }}"
                                                                class="form-control"
                                                                rows="3"
                                                                {{ $requisito['requerido'] ? 'required' : '' }}>{{ old('respuestas.' . $requisito['nombre']) }}</textarea>
                                                        @else
                                                            <input
                                                                type="{{ $requisito['tipo'] }}"
                                                                name="respuestas[{{ $requisito['nombre'] }}]"
                                                                id="resp_{{ $requisito['nombre'] }}"
                                                                class="form-control"
                                                                value="{{ old('respuestas.' . $requisito['nombre']) }}"
                                                                {{ $requisito['requerido'] ? 'required' : '' }}>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Sección: Carga de Archivos --}}
                                    <div class="col-12" id="archivosSection" style="display: {{ $programa ? 'block' : 'none' }}">
                                        <h6 class="text-primary border-bottom pb-2 mb-3">
                                            <i class="bi bi-paperclip me-1"></i> Adjuntar Documentos
                                        </h6>
                                        <div class="row gy-3">
                                            <div class="col-12">
                                                <label for="archivos" class="form-label text-muted small mb-1">
                                                    Documentos <span class="text-danger">*</span>
                                                </label>
                                                <input type="file"
                                                       name="archivos[]"
                                                       id="archivos"
                                                       class="form-control @error('archivos.*') is-invalid @enderror"
                                                       multiple
                                                       accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                                       required>
                                                <small class="text-muted">
                                                    Formatos permitidos: PDF, DOC, DOCX, JPG, PNG. Tamaño máximo por archivo: 10MB.
                                                </small>
                                                @error('archivos.*')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="col-12">
                                                <div id="filePreview" class="mt-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-end gap-2 mt-2">
                                    <a href="{{ route('postulaciones.mias') }}" class="btn btn-light rounded-pill">
                                        Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-danger rounded-pill" id="submitBtn" {{ $programa ? '' : 'disabled' }}>
                                        <i class="bi bi-send me-1"></i> Enviar Postulación
                                    </button>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const programaSelect = document.getElementById('programa_id');
                const programaInfo = document.getElementById('programaInfo');
                const camposDinamicosSection = document.getElementById('camposDinamicosSection');
                const camposDinamicosContainer = document.getElementById('camposDinamicosContainer');
                const archivosSection = document.getElementById('archivosSection');
                const submitBtn = document.getElementById('submitBtn');
                const fileInput = document.getElementById('archivos');
                const filePreview = document.getElementById('filePreview');

                // Manejar cambio de programa
                if (programaSelect) {
                    programaSelect.addEventListener('change', function() {
                        const selectedOption = this.options[this.selectedIndex];

                        if (this.value) {
                            // Mostrar secciones
                            programaInfo.style.display = 'block';
                            camposDinamicosSection.style.display = 'block';
                            archivosSection.style.display = 'block';
                            submitBtn.disabled = false;

                            // Actualizar información dinámica
                            document.getElementById('descripcionText').textContent = selectedOption.dataset.descripcion || 'No disponible';
                            document.getElementById('objetivoText').textContent = selectedOption.dataset.objetivo || 'No especificado';

                            const documentacion = selectedOption.dataset.documentacion;
                            document.getElementById('documentacionText').innerHTML = documentacion ? documentacion.replace(/\n/g, '<br>') : 'No especificada';

                            // Generar campos dinámicos
                            const requisitos = selectedOption.dataset.requisitos;
                            try {
                                const reqArray = JSON.parse(requisitos || '[]');
                                if (reqArray.length > 0) {
                                    let html = '';
                                    reqArray.forEach(req => {
                                        const required = req.requerido ? 'required' : '';
                                        const requiredLabel = req.requerido ? '<span class="text-danger">*</span>' : '';

                                        html += `
                                            <div class="col-12 col-md-6">
                                                <label for="resp_${req.nombre}" class="form-label text-muted small mb-1">
                                                    ${req.label} ${requiredLabel}
                                                </label>
                                        `;

                                        if (req.tipo === 'textarea') {
                                            html += `
                                                <textarea
                                                    name="respuestas[${req.nombre}]"
                                                    id="resp_${req.nombre}"
                                                    class="form-control"
                                                    rows="3"
                                                    ${required}></textarea>
                                            `;
                                        } else {
                                            html += `
                                                <input
                                                    type="${req.tipo}"
                                                    name="respuestas[${req.nombre}]"
                                                    id="resp_${req.nombre}"
                                                    class="form-control"
                                                    ${required}>
                                            `;
                                        }

                                        html += `</div>`;
                                    });

                                    camposDinamicosContainer.innerHTML = html;
                                } else {
                                    camposDinamicosContainer.innerHTML = '<div class="col-12"><p class="text-muted">No hay campos adicionales para este programa.</p></div>';
                                }
                            } catch(e) {
                                console.error('Error parsing requisitos:', e);
                                camposDinamicosContainer.innerHTML = '<div class="col-12"><p class="text-danger">Error al cargar los campos del formulario.</p></div>';
                            }
                        } else {
                            // Ocultar secciones
                            programaInfo.style.display = 'none';
                            camposDinamicosSection.style.display = 'none';
                            archivosSection.style.display = 'none';
                            submitBtn.disabled = true;
                        }
                    });
                }

                // Preview de archivos
                if (fileInput) {
                    fileInput.addEventListener('change', function() {
                        filePreview.innerHTML = '';
                        const files = Array.from(this.files);

                        if (files.length > 0) {
                            const list = document.createElement('div');
                            list.className = 'list-group';

                            files.forEach((file, index) => {
                                const item = document.createElement('div');
                                item.className = 'list-group-item d-flex justify-content-between align-items-center';
                                item.innerHTML = `
                        <div>
                            <i class="bi bi-file-earmark me-2"></i>
                            <span>${file.name}</span>
                            <small class="text-muted ms-2">(${(file.size / 1024 / 1024).toFixed(2)} MB)</small>
                        </div>
                        <span class="badge bg-primary rounded-pill">${index + 1}</span>
                    `;
                                list.appendChild(item);
                            });

                            filePreview.appendChild(list);
                        }
                    });
                }

                // Trigger inicial si hay programa preseleccionado
                if (programaSelect && programaSelect.value) {
                    programaSelect.dispatchEvent(new Event('change'));
                }
            });
        </script>
    @endpush
@endsection