@php
    $hasGeneralErrors = $errors->has('nombre') || $errors->has('estado') || $errors->has('breve_descripcion');
    $hasContenidoErrors = $errors->has('descripcion_completa') || $errors->has('objetivo') || $errors->has('requisitos') || $errors->has('documentacion_requerida');
    $hasFechasErrors = $errors->has('fecha_inicio_postulacion') || $errors->has('fecha_cierre_postulacion');
    $activeTab = 'general';
    if ($hasContenidoErrors) {
        $activeTab = 'contenido';
    } elseif ($hasFechasErrors) {
        $activeTab = 'fechas';
    } elseif ($hasGeneralErrors) {
        $activeTab = 'general';
    }
@endphp

<div class="row gy-4">
    <div class="col-12">
        <ul class="nav nav-pills bg-body-tertiary rounded-4 p-1 mb-3" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill px-3 py-2 {{ $activeTab === 'general' ? 'active' : '' }}"
                        id="tab-general-tab"
                        data-bs-toggle="tab" data-bs-target="#tab-general" type="button" role="tab"
                        aria-controls="tab-general" aria-selected="{{ $activeTab === 'general' ? 'true' : 'false' }}">
                    <i class="bi bi-info-circle me-1"></i> General
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill px-3 py-2 {{ $activeTab === 'contenido' ? 'active' : '' }}"
                        id="tab-contenido-tab"
                        data-bs-toggle="tab" data-bs-target="#tab-contenido" type="button" role="tab"
                        aria-controls="tab-contenido"
                        aria-selected="{{ $activeTab === 'contenido' ? 'true' : 'false' }}">
                    <i class="bi bi-file-text me-1"></i> Contenido
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill px-3 py-2 {{ $activeTab === 'fechas' ? 'active' : '' }}"
                        id="tab-fechas-tab"
                        data-bs-toggle="tab" data-bs-target="#tab-fechas" type="button" role="tab"
                        aria-controls="tab-fechas" aria-selected="{{ $activeTab === 'fechas' ? 'true' : 'false' }}">
                    <i class="bi bi-calendar-event me-1"></i> Fechas
                </button>
            </li>
        </ul>

        <div class="tab-content">
            {{-- Pestaña: Información general --}}
            <div class="tab-pane fade {{ $activeTab === 'general' ? 'show active' : '' }}" id="tab-general"
                 role="tabpanel" aria-labelledby="tab-general-tab">
                <div class="row gy-3">
                    <div class="col-md-8">
                        <label for="nombre" class="form-label text-muted small 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-md-4">
                        <label for="estado" class="form-label text-muted small mb-1">Estado</label>
                        <select name="estado" id="estado"
                                class="form-select @error('estado') is-invalid @enderror" required>
                            <option value="">Seleccione…</option>
                            <option value="{{ \App\Enums\ProgramaEstadoEnum::ABIERTO->value }}"
                                {{ old('estado', $programa->estado?->value ?? '') == \App\Enums\ProgramaEstadoEnum::ABIERTO->value ? 'selected' : '' }}>
                                Abierto
                            </option>
                            <option value="{{ \App\Enums\ProgramaEstadoEnum::CERRADO->value }}"
                                {{ old('estado', $programa->estado?->value ?? '') == \App\Enums\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 text-muted small 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>

            {{-- Pestaña: Contenido --}}
            <div class="tab-pane fade {{ $activeTab === 'contenido' ? 'show active' : '' }}" id="tab-contenido"
                 role="tabpanel" aria-labelledby="tab-contenido-tab">
                <div class="row gy-3">
                    <div class="col-12">
                        <label for="descripcion_completa" class="form-label text-muted small 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 col-md-6">
                        <label for="objetivo" class="form-label text-muted small 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>

                    {{-- Requisitos dinámicos (estructurados) --}}
                    <div class="col-12">
                        <label class="form-label text-muted small mb-1 d-block">Requisitos del Formulario</label>
                        <p class="text-muted small mb-2">Define los campos que aparecerán en el formulario de
                            postulación</p>

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

                            @foreach($baseReqs as $idx => $req)
                                <div class="requisito-item mb-3 p-3 border rounded bg-light" data-index="{{ $idx }}">
                                    <div class="row g-2 align-items-end">
                                        <div class="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-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-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-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-md-2">
                                            <button type="button"
                                                    class="btn btn-sm btn-danger w-100 remove-requisito" {{ count($baseReqs) <= 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>

                    <div class="col-12">
                        <label for="documentacion_requerida" class="form-label text-muted small 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>

            {{-- Pestaña: Fechas --}}
            <div class="tab-pane fade {{ $activeTab === 'fechas' ? 'show active' : '' }}" id="tab-fechas"
                 role="tabpanel" aria-labelledby="tab-fechas-tab">
                <div class="row gy-3">
                    <div class="col-md-6">
                        <label for="fecha_inicio_postulacion" class="form-label text-muted small 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="{{ now()->format('Y-m-d') }}" max="{{ now()->addYears(5)->format('Y-m-d') }}"
                               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-md-6">
                        <label for="fecha_cierre_postulacion" class="form-label text-muted small 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="{{ now()->format('Y-m-d') }}" max="{{ now()->addYears(5)->format('Y-m-d') }}"
                               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>
</div>

@push('scripts')
    <script>
        // Mostrar automáticamente la pestaña que contiene el campo inválido
        document.addEventListener('invalid', function (e) {
            const pane = e.target.closest('.tab-pane');
            if (pane && !pane.classList.contains('show')) {
                const id = pane.getAttribute('id');
                const trigger = document.querySelector('[data-bs-target="#' + id + '"]');
                if (trigger && window.bootstrap && bootstrap.Tab) {
                    const tab = new bootstrap.Tab(trigger);
                    tab.show();
                }
            }
        }, true);

        (function () {
            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 bg-light" data-index="${requisitoIndex}">
            <div class="row g-2 align-items-end">
                <div class="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-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-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-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-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((item) => {
                    const btn = item.querySelector('.remove-requisito');
                    btn.disabled = items.length === 1;
                });
            }

            // Inicial
            updateRemoveButtons();
        })();

        // Sincronizar límites de fechas (deshabilitar días PASADOS y mantener coherencia Inicio <= Cierre)
        document.addEventListener('DOMContentLoaded', function () {
            const inicio = document.getElementById('fecha_inicio_postulacion');
            const cierre = document.getElementById('fecha_cierre_postulacion');
            if (!inicio || !cierre) return;

            const today = new Date();
            const todayStr = new Date(today.getTime() - (today.getTimezoneOffset() * 60000)).toISOString().slice(0, 10);
            const addYears = (d, years) => {
                const nd = new Date(d);
                nd.setFullYear(nd.getFullYear() + years);
                return nd;
            };
            const maxDate = addYears(today, 5);
            const maxStr = new Date(maxDate.getTime() - (maxDate.getTimezoneOffset() * 60000)).toISOString().slice(0, 10);

            // Asegurar límites base en ambos campos
            inicio.min = todayStr;
            cierre.min = todayStr;
            if (!inicio.max) inicio.max = maxStr;
            if (!cierre.max) cierre.max = maxStr;

            const clampValue = (el) => {
                if (!el.value) return;
                if (el.min && el.value < el.min) el.value = el.min;
                if (el.max && el.value > el.max) el.value = el.max;
            };

            const syncFromInicio = () => {
                // Cierre no puede ser anterior al Inicio ni anterior a hoy
                if (inicio.value) {
                    cierre.min = inicio.value < todayStr ? todayStr : inicio.value;
                } else {
                    cierre.min = todayStr;
                }
                clampValue(cierre);
            };

            const syncFromCierre = () => {
                // Inicio no puede ser posterior al Cierre, pero respeta máximo global
                if (cierre.value) {
                    inicio.max = cierre.value < maxStr ? cierre.value : maxStr;
                } else {
                    inicio.max = maxStr;
                }
                clampValue(inicio);
            };

            // Sincronización inicial y en cambios
            syncFromInicio();
            syncFromCierre();
            inicio.addEventListener('change', () => {
                syncFromInicio();
            });
            cierre.addEventListener('change', () => {
                syncFromCierre();
            });
        });
    </script>
@endpush