@extends('layouts.app-layout')

@php
    use App\Enums\ProgramaEstadoEnum;

    $fechaMinima = now()->toDateString();
@endphp

@section('title', 'Nuevo programa - ' . config('app.name'))
@section('navbar_suffix', 'Programas')

@section('content')
    <div class="container pt-2 pb-4" style="max-width:1120px;">
        {{-- Header estilo "Plan de acción" --}}
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('programas.index') }}"
                   class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                   style="width:36px;height:36px;"
                   title="Volver">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <div>
                    <p class="text-muted small mb-1 text-uppercase" style="letter-spacing:0.08em;">Programa</p>
                    <h1 class="h5 fw-bold mb-0">Crear nuevo programa</h1>
                </div>
            </div>
        </div>

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

        <form action="{{ route('programas.store') }}" method="POST" novalidate>
            @csrf

            {{-- Card principal con fondo tipo "Plan" --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 rounded-3"
                     style="background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);">

                    {{-- Sección: Información general --}}
                    <div class="bg-white border rounded-3 p-3 shadow-sm mb-3">
                        <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-info-circle text-primary"></i>
                            <span>Información general</span>
                        </p>

                        <div class="row g-3">
                            <div class="col-12 col-md-8">
                                <label for="nombre" class="form-label small text-muted mb-1">Nombre del programa</label>
                                <input type="text"
                                       name="nombre"
                                       id="nombre"
                                       class="form-control @error('nombre') is-invalid @enderror"
                                       value="{{ old('nombre', $programa->nombre ?? '') }}"
                                       required
                                       maxlength="255">
                                @error('nombre')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-4">
                                <label for="estado" class="form-label small text-muted mb-1">Estado</label>
                                <select name="estado"
                                        id="estado"
                                        class="form-select @error('estado') is-invalid @enderror"
                                        required>
                                    <option value="">Seleccione…</option>
                                    <option value="{{ ProgramaEstadoEnum::ABIERTO->value }}"
                                        {{ old('estado', $programa->estado?->value ?? '') == ProgramaEstadoEnum::ABIERTO->value ? 'selected' : '' }}>
                                        Abierto
                                    </option>
                                    <option value="{{ ProgramaEstadoEnum::CERRADO->value }}"
                                        {{ old('estado', $programa->estado?->value ?? '') == ProgramaEstadoEnum::CERRADO->value ? 'selected' : '' }}>
                                        Cerrado
                                    </option>
                                </select>
                                @error('estado')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="breve_descripcion" class="form-label small text-muted mb-1">Breve
                                    descripción</label>
                                <input type="text"
                                       name="breve_descripcion"
                                       id="breve_descripcion"
                                       class="form-control @error('breve_descripcion') is-invalid @enderror"
                                       value="{{ old('breve_descripcion', $programa->breve_descripcion ?? '') }}"
                                       maxlength="500"
                                       placeholder="Resumen corto que se mostrará en el listado">
                                @error('breve_descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Sección: Contenido --}}
                    <div class="bg-white border rounded-3 p-3 shadow-sm mb-3">
                        <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-file-text text-primary"></i>
                            <span>Contenido</span>
                        </p>

                        <div class="row g-3">
                            <div class="col-12">
                                <label for="descripcion_completa" class="form-label small text-muted mb-1">Descripción
                                    completa</label>
                                <textarea name="descripcion_completa"
                                          id="descripcion_completa"
                                          rows="4"
                                          class="form-control @error('descripcion_completa') is-invalid @enderror"
                                          placeholder="Detalle del programa...">{{ old('descripcion_completa', $programa->descripcion_completa ?? '') }}</textarea>
                                @error('descripcion_completa')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="objetivo" class="form-label small text-muted mb-1">Objetivo</label>
                                <textarea name="objetivo"
                                          id="objetivo"
                                          rows="3"
                                          class="form-control @error('objetivo') is-invalid @enderror"
                                          placeholder="¿Qué busca lograr el programa?">{{ old('objetivo', $programa->objetivo ?? '') }}</textarea>
                                @error('objetivo')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label for="documentacion_requerida" class="form-label small text-muted mb-1">Documentación
                                    requerida</label>
                                <textarea name="documentacion_requerida"
                                          id="documentacion_requerida"
                                          rows="3"
                                          class="form-control @error('documentacion_requerida') is-invalid @enderror"
                                          placeholder="Documentos a presentar (uno por línea)">{{ old('documentacion_requerida', $programa->documentacion_requerida ?? '') }}</textarea>
                                @error('documentacion_requerida')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Sección: Requisitos Dinámicos --}}
                    <div class="bg-white border rounded-3 p-3 shadow-sm mb-3">
                        <p class="text-muted small text-uppercase mb-1 d-flex align-items-center gap-2">
                            <i class="bi bi-ui-checks text-primary"></i>
                            <span>Requisitos del formulario</span>
                        </p>
                        <p class="text-muted small mb-3">Define los campos que aparecerán en el formulario de
                            postulación</p>

                        <div id="requisitosContainer">
                            @php
                                $oldReqs = old('requisitos');
                                $requisitosIniciales = is_array($oldReqs) ? array_values($oldReqs) : [];
                                if (empty($requisitosIniciales)) {
                                    $requisitosIniciales = [[
                                        'nombre' => '',
                                        'tipo' => 'text',
                                        'label' => '',
                                        'requerido' => '1',
                                    ]];
                                }
                            @endphp

                            @foreach($requisitosIniciales as $idx => $req)
                                <div class="requisito-item mb-3 p-3 border rounded-3 bg-light" data-index="{{ $idx }}">
                                    <div class="row g-2 align-items-end">
                                        <div class="col-12 col-md-3">
                                            <label class="form-label small mb-1">Nombre del campo</label>
                                            <input type="text"
                                                   name="requisitos[{{ $idx }}][nombre]"
                                                   class="form-control form-control-sm @error("requisitos.$idx.nombre") is-invalid @enderror"
                                                   placeholder="ej: nombre_completo (sin espacios)"
                                                   value="{{ $req['nombre'] ?? '' }}"
                                                   required>
                                            @error("requisitos.$idx.nombre")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12 col-md-2">
                                            <label class="form-label small mb-1">Tipo</label>
                                            <select name="requisitos[{{ $idx }}][tipo]"
                                                    class="form-select form-select-sm @error("requisitos.$idx.tipo") is-invalid @enderror"
                                                    required>
                                                @php $tipoSel = $req['tipo'] ?? 'text'; @endphp
                                                <option value="text" {{ $tipoSel==='text'?'selected':'' }}>Texto
                                                </option>
                                                <option value="email" {{ $tipoSel==='email'?'selected':'' }}>Email
                                                </option>
                                                <option value="tel" {{ $tipoSel==='tel'?'selected':'' }}>Teléfono
                                                </option>
                                                <option value="number" {{ $tipoSel==='number'?'selected':'' }}>Número
                                                </option>
                                                <option value="date" {{ $tipoSel==='date'?'selected':'' }}>Fecha
                                                </option>
                                                <option value="textarea" {{ $tipoSel==='textarea'?'selected':'' }}>Texto
                                                    largo
                                                </option>
                                            </select>
                                            @error("requisitos.$idx.tipo")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12 col-md-3">
                                            <label class="form-label small mb-1">Etiqueta visible</label>
                                            <input type="text"
                                                   name="requisitos[{{ $idx }}][label]"
                                                   class="form-control form-control-sm @error("requisitos.$idx.label") is-invalid @enderror"
                                                   placeholder="ej: Nombre Completo"
                                                   value="{{ $req['label'] ?? '' }}"
                                                   required>
                                            @error("requisitos.$idx.label")
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-12 col-md-2">
                                            <div class="form-check">
                                                @php $reqReq = isset($req['requerido']) && (string)$req['requerido'] === '1'; @endphp
                                                <input type="checkbox"
                                                       name="requisitos[{{ $idx }}][requerido]"
                                                       class="form-check-input"
                                                       value="1" {{ $reqReq ? 'checked' : '' }}>
                                                <label class="form-check-label small">Obligatorio</label>
                                            </div>
                                        </div>

                                        <div class="col-12 col-md-2">
                                            <button type="button"
                                                    class="btn btn-sm btn-danger w-100 remove-requisito"
                                                {{ count($requisitosIniciales) <= 1 ? 'disabled' : '' }}>
                                                <i class="bi bi-trash"></i> Eliminar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <button type="button" class="btn btn-sm btn-outline-primary" id="addRequisito">
                            <i class="bi bi-plus-circle me-1"></i> Agregar campo
                        </button>

                        @error('requisitos')
                        <div class="text-danger small mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Sección: Fechas de postulación --}}
                    <div class="bg-white border rounded-3 p-3 shadow-sm">
                        <p class="text-muted small text-uppercase mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-calendar-event text-primary"></i>
                            <span>Fechas de postulación</span>
                        </p>

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label for="fecha_inicio_postulacion"
                                       class="form-label small text-muted mb-1">Inicio</label>
                                <input type="date"
                                       name="fecha_inicio_postulacion"
                                       id="fecha_inicio_postulacion"
                                       class="form-control @error('fecha_inicio_postulacion') is-invalid @enderror"
                                       min="{{ $fechaMinima }}"
                                       value="{{ old('fecha_inicio_postulacion', isset($programa->fecha_inicio_postulacion) && $programa->fecha_inicio_postulacion instanceof \Carbon\Carbon ? $programa->fecha_inicio_postulacion->format('Y-m-d') : ($programa->fecha_inicio_postulacion ?? '')) }}">
                                @error('fecha_inicio_postulacion')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-6">
                                <label for="fecha_cierre_postulacion"
                                       class="form-label small text-muted mb-1">Cierre</label>
                                <input type="date"
                                       name="fecha_cierre_postulacion"
                                       id="fecha_cierre_postulacion"
                                       class="form-control @error('fecha_cierre_postulacion') is-invalid @enderror"
                                       min="{{ $fechaMinima }}"
                                       value="{{ old('fecha_cierre_postulacion', isset($programa->fecha_cierre_postulacion) && $programa->fecha_cierre_postulacion instanceof \Carbon\Carbon ? $programa->fecha_cierre_postulacion->format('Y-m-d') : ($programa->fecha_cierre_postulacion ?? '')) }}">
                                @error('fecha_cierre_postulacion')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Footer botones estilo "Plan" --}}
            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('programas.index') }}" class="btn btn-link text-decoration-none">Cancelar</a>
                <button type="submit" class="btn btn-primary px-4">Guardar programa</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        let requisitoIndex = (function () {
            const last = document.querySelector('#requisitosContainer .requisito-item:last-child');
            if (!last) return 0;
            const idx = parseInt(last.getAttribute('data-index'));
            return isNaN(idx) ? 0 : (idx + 1);
        })();

        document.getElementById('addRequisito')?.addEventListener('click', function () {
            const container = document.getElementById('requisitosContainer');
            const newItem = `
                <div class="requisito-item mb-3 p-3 border rounded-3 bg-light" data-index="${requisitoIndex}">
                    <div class="row g-2 align-items-end">
                        <div class="col-12 col-md-3">
                            <label class="form-label small mb-1">Nombre del campo</label>
                            <input type="text"
                                   name="requisitos[${requisitoIndex}][nombre]"
                                   class="form-control form-control-sm"
                                   placeholder="ej: nombre_completo (sin espacios)"
                                   required>
                        </div>
                        <div class="col-12 col-md-2">
                            <label class="form-label small mb-1">Tipo</label>
                            <select name="requisitos[${requisitoIndex}][tipo]" class="form-select form-select-sm" required>
                                <option value="text">Texto</option>
                                <option value="email">Email</option>
                                <option value="tel">Teléfono</option>
                                <option value="number">Número</option>
                                <option value="date">Fecha</option>
                                <option value="textarea">Texto largo</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label small mb-1">Etiqueta visible</label>
                            <input type="text"
                                   name="requisitos[${requisitoIndex}][label]"
                                   class="form-control form-control-sm"
                                   placeholder="ej: Nombre Completo"
                                   required>
                        </div>
                        <div class="col-12 col-md-2">
                            <div class="form-check">
                                <input type="checkbox"
                                       name="requisitos[${requisitoIndex}][requerido]"
                                       class="form-check-input"
                                       value="1"
                                       checked>
                                <label class="form-check-label small">Obligatorio</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-2">
                            <button type="button" class="btn btn-sm btn-danger w-100 remove-requisito">
                                <i class="bi bi-trash"></i> Eliminar
                            </button>
                        </div>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', newItem);
            requisitoIndex++;
            updateRemoveButtons();
        });

        document.getElementById('requisitosContainer')?.addEventListener('click', function (e) {
            if (e.target.closest('.remove-requisito')) {
                e.target.closest('.requisito-item').remove();
                updateRemoveButtons();
            }
        });

        function updateRemoveButtons() {
            const items = document.querySelectorAll('.requisito-item');
            items.forEach(() => {
                // Si hay 1 solo item, deshabilitar el botón eliminar
            });
            items.forEach((item) => {
                const btn = item.querySelector('.remove-requisito');
                if (btn) btn.disabled = items.length === 1;
            });
        }

        updateRemoveButtons();
    </script>
@endpush