@php
    $selectedSerie = old('serie_id', $record->serie_id ?? '');
    $selectedSubserie = old('subserie_id', $record->subserie_id ?? '');
    $selectedFondo = old('fondo_documental_id', $record->fondo_documental_id ?? '');
    $selectedUnidadDocumental = old('unidad_documental_id', $record->unidad_documental_id ?? '');
    $selectedUnidadConservacion = old('unidad_conservacion_id', $record->unidad_conservacion_id ?? '');
    $selectedEstadoDigitalizacion = old('estado_digitalizacion_id', $record->estado_digitalizacion_id ?? '');
    $selectedSoporte = old('soporte_documental_id', $record->soporte_documental_id ?? '');
    $selectedTipoCaja = old('tipo_caja_id', $record->tipo_caja_id ?? '');
    $selectedOficina = old('oficina_productora_id', $record->oficina_productora_id ?? '');
    $selectedNovedad = old('novedades_id', $record->novedades_id ?? '');
    $selectedBodega = old('bodega_id', $record->bodega_id ?? '');
    $selectedPiso = old('piso_id', $record->piso_id ?? '');
    $selectedLinea = old('linea_id', $record->linea_id ?? '');
    $selectedModulo = old('modulo_id', $record->modulo_id ?? '');
    $selectedEstadoRegistro = old('estado_registro', $record->estado_registro ?? 'recibido');
@endphp

<form action="{{ $action }}" method="POST">
    @csrf
    @if(($method ?? 'POST') !== 'POST') @method($method) @endif

    @if ($errors->any())
        <div class="alert alert-danger" style="margin-bottom:16px;">
            <strong>Revisa el formulario.</strong>
            <ul style="margin:8px 0 0 18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card" style="padding:0;border:none;box-shadow:none;margin:0 0 18px;">
        <h2 class="section-title">Identificación</h2>
        <div class="form-grid">
            <div class="field"><label>ID interno *</label><input type="text" name="id_interno" value="{{ old('id_interno', $record->id_interno ?? '') }}" required></div>
            <div class="field"><label>Asunto / nombre subserie</label><input type="text" name="nombre_subserie_asunto" value="{{ old('nombre_subserie_asunto', $record->nombre_subserie_asunto ?? '') }}" placeholder="Ej. Contrato servicio fibra óptica"></div>
            <div class="field"><label>Caja número</label><input type="text" name="caja_numero" value="{{ old('caja_numero', $record->caja_numero ?? '') }}"></div>
            <div class="field"><label>Número UC</label><input type="text" name="numero_uc" value="{{ old('numero_uc', $record->numero_uc ?? '') }}"></div>
            <div class="field"><label>Código barras caja Colvatel</label><input type="text" name="codigo_barras_caja_colvatel" value="{{ old('codigo_barras_caja_colvatel', $record->codigo_barras_caja_colvatel ?? '') }}"></div>
            <div class="field"><label>Código barras unidad documental</label><input type="text" name="codigo_barras_unidad_documental" value="{{ old('codigo_barras_unidad_documental', $record->codigo_barras_unidad_documental ?? '') }}"></div>
        </div>
    </div>

    <div class="card" style="padding:0;border:none;box-shadow:none;margin:0 0 18px;">
        <h2 class="section-title">Clasificación documental</h2>
        <div class="form-grid">
            <div class="field">
                <label>Fondo documental</label>
                <select name="fondo_documental_id">
                    <option value="">Selecciona...</option>
                    @foreach(($fondos ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedFondo === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Unidad documental</label>
                <select name="unidad_documental_id">
                    <option value="">Selecciona...</option>
                    @foreach(($unidadesDocumentales ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedUnidadDocumental === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Oficina productora</label>
                <select name="oficina_productora_id">
                    <option value="">Selecciona...</option>
                    @foreach(($oficinasProductoras ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedOficina === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Unidad administrativa</label><input type="text" name="unidad_administrativa" value="{{ old('unidad_administrativa', $record->unidad_administrativa ?? '') }}"></div>
            <div class="field">
                <label>Serie</label>
                <select name="serie_id" id="serie_id" data-subseries-url-template="{{ url('/documentos/subseries/__SERIE__') }}">
                    <option value="">Selecciona...</option>
                    @foreach(($series ?? []) as $item)
                        <option value="{{ $item->id }}" data-codigo="{{ $item->codigo ?? '' }}" @selected((string)$selectedSerie === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Subserie</label>
                <select name="subserie_id" id="subserie_id" data-selected="{{ $selectedSubserie }}">
                    <option value="">Selecciona...</option>
                    @foreach(($subseries ?? []) as $item)
                        <option value="{{ $item->id }}" data-codigo="{{ $item->codigo ?? '' }}" @selected((string)$selectedSubserie === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Código serie</label><input type="text" name="codigo_serie" id="codigo_serie" value="{{ old('codigo_serie', $record->codigo_serie ?? '') }}"></div>
            <div class="field"><label>Código subserie</label><input type="text" name="codigo_subserie" id="codigo_subserie" value="{{ old('codigo_subserie', $record->codigo_subserie ?? '') }}"></div>
        </div>
    </div>

    <div class="card" style="padding:0;border:none;box-shadow:none;margin:0 0 18px;">
        <h2 class="section-title">Ubicación y digitalización</h2>
        <div class="form-grid">
            <div class="field">
                <label>Bodega</label>
                <select name="bodega_id">
                    <option value="">Selecciona...</option>
                    @foreach(($bodegas ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedBodega === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Piso</label>
                <select name="piso_id">
                    <option value="">Selecciona...</option>
                    @foreach(($pisos ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedPiso === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Línea</label>
                <select name="linea_id">
                    <option value="">Selecciona...</option>
                    @foreach(($lineas ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedLinea === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Módulo</label>
                <select name="modulo_id">
                    <option value="">Selecciona...</option>
                    @foreach(($modulos ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedModulo === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Unidad conservación</label>
                <select name="unidad_conservacion_id">
                    <option value="">Selecciona...</option>
                    @foreach(($unidadesConservacion ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedUnidadConservacion === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Tipo caja</label>
                <select name="tipo_caja_id">
                    <option value="">Selecciona...</option>
                    @foreach(($tiposCaja ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedTipoCaja === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Estado digitalización</label>
                <select name="estado_digitalizacion_id">
                    <option value="">Selecciona...</option>
                    @foreach(($estadosDigitalizacion ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedEstadoDigitalizacion === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Soporte documental</label>
                <select name="soporte_documental_id">
                    <option value="">Selecciona...</option>
                    @foreach(($soportesDocumentales ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedSoporte === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Fecha extrema inicial</label><input type="date" name="fecha_extrema_inicial" value="{{ old('fecha_extrema_inicial', !empty($record->fecha_extrema_inicial) && $record->fecha_extrema_inicial !== '1900-01-01' ? $record->fecha_extrema_inicial : '') }}"></div>
            <div class="field"><label>Fecha extrema final</label><input type="date" name="fecha_extrema_final" value="{{ old('fecha_extrema_final', !empty($record->fecha_extrema_final) && $record->fecha_extrema_final !== '1900-01-01' ? $record->fecha_extrema_final : '') }}"></div>
            <div class="field"><label>Folios</label><input type="number" min="0" name="folios" value="{{ old('folios', $record->folios ?? 0) }}"></div>
            <div class="field"><label>Cantidad imágenes</label><input type="number" min="0" name="cantidad_imagenes" value="{{ old('cantidad_imagenes', $record->cantidad_imagenes ?? 0) }}"></div>
            <div class="field"><label>Medios magnéticos</label><input type="number" min="0" name="cantidad_medios_magneticos" value="{{ old('cantidad_medios_magneticos', $record->cantidad_medios_magneticos ?? 0) }}"></div>
            <div class="field"><label>Ubicación topográfica</label><input type="text" name="asignacion_topografica_ubicacion" value="{{ old('asignacion_topografica_ubicacion', $record->asignacion_topografica_ubicacion ?? '') }}"></div>
        </div>
    </div>

    <div class="card" style="padding:0;border:none;box-shadow:none;margin:0 0 18px;">
        <h2 class="section-title">Complementarios</h2>
        <div class="form-grid">
            <div class="field">
                <label>Novedad</label>
                <select name="novedades_id">
                    <option value="">Selecciona...</option>
                    @foreach(($novedades ?? []) as $item)
                        <option value="{{ $item->id }}" @selected((string)$selectedNovedad === (string)$item->id)>{{ $item->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Descripción paquete</label><input type="text" name="descripcion_paquete" value="{{ old('descripcion_paquete', $record->descripcion_paquete ?? '') }}"></div>
            <div class="field"><label>Código barras ID caja</label><input type="text" name="codigo_barras_id_caja" value="{{ old('codigo_barras_id_caja', $record->codigo_barras_id_caja ?? '') }}"></div>
            <div class="field"><label>Caja</label><input type="text" name="caja" value="{{ old('caja', $record->caja ?? '') }}"></div>
            <div class="field"><label>Código barras UD Colvatel</label><input type="text" name="codigo_barras_unidad_documental_colvatel" value="{{ old('codigo_barras_unidad_documental_colvatel', $record->codigo_barras_unidad_documental_colvatel ?? '') }}"></div>
            <div class="field">
                <label>Estado registro *</label>
                <select name="estado_registro" required>
                    @foreach(($estadosRegistro ?? []) as $key => $label)
                        <option value="{{ $key }}" @selected((string)$selectedEstadoRegistro === (string)$key)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field full"><label>Notas</label><textarea name="notas">{{ old('notas', $record->notas ?? '') }}</textarea></div>
        </div>
    </div>

    <div class="toolbar">
        <button type="submit" class="btn">Guardar registro</button>
        <a href="{{ url('/documentos') }}" class="btn-secondary">Cancelar</a>
    </div>
</form>

<script>
(function () {
    const serie = document.getElementById('serie_id');
    const subserie = document.getElementById('subserie_id');
    const codigoSerie = document.getElementById('codigo_serie');
    const codigoSubserie = document.getElementById('codigo_subserie');

    if (!serie || !subserie) {
        return;
    }

    function updateSerieCode() {
        const selected = serie.options[serie.selectedIndex];
        if (codigoSerie && selected) {
            codigoSerie.value = selected.dataset.codigo || codigoSerie.value || '';
        }
    }

    function updateSubserieCode() {
        const selected = subserie.options[subserie.selectedIndex];
        if (codigoSubserie && selected) {
            codigoSubserie.value = selected.dataset.codigo || codigoSubserie.value || '';
        }
    }

    function fillSubseries(items, selectedId) {
        subserie.innerHTML = '<option value="">Selecciona...</option>';
        items.forEach(function (item) {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.nombre;
            option.dataset.codigo = item.codigo || '';
            if (String(selectedId || '') === String(item.id)) {
                option.selected = true;
            }
            subserie.appendChild(option);
        });
        updateSubserieCode();
    }

    async function loadSubseries(selectedId) {
        const serieId = serie.value;
        updateSerieCode();

        if (!serieId) {
            fillSubseries([], '');
            if (codigoSubserie) codigoSubserie.value = '';
            return;
        }

        const url = serie.dataset.subseriesUrlTemplate.replace('__SERIE__', serieId);
        try {
            const response = await fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}});
            if (!response.ok) {
                throw new Error('No fue posible cargar subseries');
            }
            const data = await response.json();
            fillSubseries(Array.isArray(data) ? data : [], selectedId);
        } catch (error) {
            console.error(error);
            fillSubseries([], '');
        }
    }

    serie.addEventListener('change', function () {
        loadSubseries('');
    });

    subserie.addEventListener('change', updateSubserieCode);

    updateSerieCode();
    updateSubserieCode();

    if (serie.value && subserie.dataset.selected) {
        loadSubseries(subserie.dataset.selected);
    }
})();
</script>