@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="tramiteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-datos-tab" data-bs-toggle="tab" href="#tab-datos" role="tab">
                        <i class="bi bi-person-vcard"></i> Datos del Titular
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-tramite-tab" data-bs-toggle="tab" href="#tab-tramite" role="tab">
                        <i class="bi bi-file-earmark-text"></i> Trámite
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-extra-tab" data-bs-toggle="tab" href="#tab-extra" role="tab">
                        <i class="bi bi-info-circle"></i> Adicional
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-pagos-tab" data-bs-toggle="tab" href="#tab-pagos" role="tab">
                        <i class="bi bi-cash-stack"></i> Pagos
                        @if($pagos->count() > 0)
                            <span class="badge bg-secondary rounded-pill ms-1">{{ $pagos->count() }}</span>
                        @endif
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-boveda-tab" data-bs-toggle="tab" href="#tab-boveda" role="tab">
                        <i class="bi bi-safe2"></i> Bóveda de Documentos
                        @if($tramite->documentos->count() > 0)
                            <span class="badge bg-secondary rounded-pill ms-1">{{ $tramite->documentos->count() }}</span>
                        @endif
                    </a>
                </li>
            </ul>
        </div>

        <div class="card-body">

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

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form action="{{ route('tramites.update', $tramite) }}" method="POST" id="formTramite">
                @csrf
                @method('PUT')
                <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', 'tab-datos') }}">

                <div class="tab-content mt-3" id="tramiteTabsContent">

                    {{-- ===== TAB 1: DATOS DEL TITULAR ===== --}}
                    <div class="tab-pane fade show active" id="tab-datos" role="tabpanel">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-danger">Folio:</label>
                                <strong>{{ $tramite->id }}</strong>
                            </div>
                        </div>
                        
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Cliente (vinculado al sistema)</label>
                                <select name="id_cliente" class="form-select">
                                    <option value="">- Sin vincular -</option>
                                    @foreach($clientes as $c)
                                        <option value="{{ $c->id }}" {{ old('id_cliente', $tramite->id_cliente) == $c->id ? 'selected' : '' }}>
                                            {{ $c->nombre_completo }} {{ $c->ip_rfc ? '('.$c->ip_rfc.')' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Nombre Completo</label>
                                <input type="text" name="nombre" value="{{ old('nombre', $tramite->nombre) }}"
                                    class="form-control @error('nombre') is-invalid @enderror" maxlength="120">
                                @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono 1</label>
                                <input type="text" name="tel1" value="{{ old('tel1', $tramite->tel1) }}"
                                    class="form-control" maxlength="12">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono 2</label>
                                <input type="text" name="tel2" value="{{ old('tel2', $tramite->tel2) }}"
                                    class="form-control" maxlength="12">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Correo 1</label>
                                <input type="email" name="email1" value="{{ old('email1', $tramite->email1) }}"
                                    class="form-control" maxlength="25">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Correo 2</label>
                                <input type="email" name="email2" value="{{ old('email2', $tramite->email2) }}"
                                    class="form-control" maxlength="25">
                            </div>

                        </div>
                    </div>

                    {{-- ===== TAB 2: TRÁMITE ===== --}}
                    <div class="tab-pane fade" id="tab-tramite" role="tabpanel">
                        
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-danger">Folio:</label>
                                <strong>{{ $tramite->id }} - {{ $tramite->nombre }}</strong>
                            </div>
                        </div>
                        
                        <div class="row g-3">

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Trámite</label>
                                <select name="tramite" id="selectTramite" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    {{-- @foreach(['Evaluación','Búsqueda de documentos','Corrección de documentos','Homonimia','Duplicidad','Modalidad-10','Modalidad-40','Pensión','Tamexun','Semanas','Cambio de número','Otro'] as $tr)
                                        <option value="{{ $tr }}" {{ old('tramite', $tramite->tramite) == $tr ? 'selected' : '' }}>{{ $tr }}</option>
                                    @endforeach --}}
                                    @foreach(['Seguros OIS','IMSS OIS','Modalidad-10','Modalidad-40','Pensiones','Despacho','Visas','Pasaportes','Placas','Otro'] as $tr)
                                        <option value="{{ $tr }}" {{ old('tramite', $tramite->tramite) == $tr ? 'selected' : '' }}>{{ $tr }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4" id="campoAseguradora" style="display:none;">
                                <label class="form-label fw-bold">Aseguradora</label>
                                <select name="aseguradora" id="selectAseguradora" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Afirme','Allianz','Ana','AXA','General de seguros','HDI','Mapfre','Qualitas'] as $aseg)
                                        <option value="{{ $aseg }}" {{ old('aseguradora', $tramite->aseguradora ?? '') == $aseg ? 'selected' : '' }}>{{ $aseg }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Institución</label>
                                <select name="institucion" class="form-select @error('institucion') is-invalid @enderror">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['IMSS','ISSSTE','ISSEMYM','OTRO'] as $inst)
                                        <option value="{{ $inst }}" {{ old('institucion', $tramite->institucion) == $inst ? 'selected' : '' }}>{{ $inst }}</option>
                                    @endforeach
                                </select>
                                @error('institucion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Estatus</label>
                                <select name="status" class="form-select">
                                    <option value="">- Seleccionar -</option>
                                    @foreach(['Iniciado','No iniciado','En proceso','Completado','Cancelado','En espera'] as $s)
                                        <option value="{{ $s }}" {{ old('status', $tramite->status) == $s ? 'selected' : '' }}>{{ $s }}</option>
                                    @endforeach
                                </select>
                            </div>

                            

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Fecha Inicio</label>
                                <input type="date" name="tramite_ini"
                                    value="{{ old('tramite_ini', $tramite->tramite_ini?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Fecha Fin</label>
                                <input type="date" name="tramite_fin"
                                    value="{{ old('tramite_fin', $tramite->tramite_fin?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            {{-- <div class="col-md-4">
                                <label class="form-label fw-bold">Cambio de Número</label>
                                <input type="text" name="cambio_numero" value="{{ old('cambio_numero', $tramite->cambio_numero) }}"
                                    class="form-control" maxlength="50">
                            </div> --}}

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Costo</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" name="costo" value="{{ old('costo', $tramite->costo) }}"
                                        class="form-control" min="0">
                                </div>
                            </div>

                            <div class="col-12"><hr class="my-1"></div>

                            <div class="col-md-3 campo-pasaporte">
                                <label class="form-label fw-bold">Pasaporte — Fecha Cita</label>
                                <input type="date" name="pasaporte_fec_cita"
                                    value="{{ old('pasaporte_fec_cita', $tramite->pasaporte_fec_cita?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            {{-- <div class="col-md-3">
                                <label class="form-label fw-bold">Pasaporte — Fecha Entrega</label>
                                <input type="date" name="pasaporte_fec_entrega"
                                    value="{{ old('pasaporte_fec_entrega', $tramite->pasaporte_fec_entrega?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div> --}}

                            <div class="col-md-3 campo-visa">
                                <label class="form-label fw-bold">Visa — Cita CAS</label>
                                <input type="date" name="visa_cita_cas"
                                    value="{{ old('visa_cita_cas', $tramite->visa_cita_cas?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            <div class="col-md-3 campo-visa">
                                <label class="form-label fw-bold">Visa — Cita Embajada</label>
                                <input type="date" name="visa_cita_embajada"
                                    value="{{ old('visa_cita_embajada', $tramite->visa_cita_embajada?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            <div class="col-md-3 campo-visa">
                                <label class="form-label fw-bold">Visa — Confirmación</label>
                                <input type="text" name="visa_confirmacion" value="{{ old('visa_confirmacion', $tramite->visa_confirmacion) }}"
                                    class="form-control" maxlength="15">
                            </div>

                            <div class="col-md-3 campo-visa">
                                <label class="form-label fw-bold">Visa — Fecha Entrega</label>
                                <input type="date" name="visa_fec_entrega"
                                    value="{{ old('visa_fec_entrega', $tramite->visa_fec_entrega?->format('Y-m-d')) }}"
                                    class="form-control">
                            </div>

                            <div class="col-md-3 campo-placas">
                                <label class="form-label fw-bold">Placas</label>
                                <input type="text" name="placas" value="{{ old('placas', $tramite->placas) }}"
                                    class="form-control" maxlength="15">
                            </div>

                        </div>
                    </div>

                    {{-- ===== TAB 3: ADICIONAL ===== --}}
                    <div class="tab-pane fade" id="tab-extra" role="tabpanel">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-danger">Folio:</label>
                                <strong>{{ $tramite->id }} - {{ $tramite->nombre }}</strong>
                            </div>
                        </div>
                        
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Referido Por</label>
                                <input type="text" name="referido_por" value="{{ old('referido_por', $tramite->referido_por) }}"
                                    class="form-control" maxlength="50">
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-bold">Nota</label>
                                <textarea name="nota" class="form-control" rows="4"
                                    placeholder="Observaciones o comentarios adicionales…">{{ old('nota', $tramite->nota) }}</textarea>
                            </div>

                        </div>
                    </div>

                    {{-- TAB 4: placeholder vacío — el contenido real de pagos está fuera del form --}}
                    <div class="tab-pane fade" id="tab-pagos" role="tabpanel"></div>

                    {{-- TAB 5: placeholder vacío — el contenido real de bóveda está fuera del form --}}
                    <div class="tab-pane fade" id="tab-boveda" role="tabpanel"></div>

                </div>{{-- /tab-content --}}

                <div class="row mt-4" id="botonesTramiteForm">
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="bi bi-floppy"></i> Actualizar
                        </button>
                        <a href="{{ route('tramites.show', $tramite) }}" class="btn btn-outline-info btn-sm">Ver</a>
                        <a href="{{ route('tramites.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>

            </form>

            {{-- ===== PANEL DE PAGOS (fuera del form principal para evitar form anidado) ===== --}}
            <div id="panelPagos" class="d-none">

                {{-- Formulario para nuevo pago --}}
                
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-bold text-danger">Folio:</label>
                        <strong>{{ $tramite->id }} - {{ $tramite->nombre }}</strong>
                    </div>
                </div>
                
                <div class="card border-0 bg-light mt-3">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">
                            <i class="bi bi-plus-circle me-1"></i> Registrar pago
                        </h6>
                        <form action="{{ route('tramites.pagos.store', $tramite) }}" method="POST" id="formPago">
                            @csrf
                            <div class="row g-2 align-items-end">
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Fecha</label>
                                    <input type="date" name="fecha" class="form-control form-control-sm"
                                           value="{{ date('Y-m-d') }}" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label fw-bold">Monto</label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">$</span>
                                        <input type="number" step="0.01" min="0.01" name="monto"
                                               class="form-control" placeholder="0.00" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Método de Pago</label>
                                    <select name="metodo_pago" class="form-select form-select-sm">
                                        <option value="">- Seleccionar -</option>
                                        @foreach(['Transferencia','Efectivo','Cheque'] as $mp)
                                            <option value="{{ $mp }}">{{ $mp }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold">Recibido Por</label>
                                    <input type="text" name="recibido_por" class="form-control form-control-sm"
                                           maxlength="40" placeholder="Nombre de quien recibe">
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-success btn-sm w-100">
                                        <i class="bi bi-floppy me-1"></i> Guardar pago
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Tabla de pagos registrados --}}
                @php
                    $totalPagado = $pagos->sum('monto');
                    $costo       = $tramite->costo ?? 0;
                    $saldo       = $costo - $totalPagado;
                @endphp

                <div class="mt-4">
                    <h6 class="fw-bold mb-2">
                        <i class="bi bi-list-check me-1"></i> Historial de pagos
                        <span class="badge bg-secondary ms-1">{{ $pagos->count() }}</span>
                    </h6>

                    @if($pagos->isEmpty())
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-inbox" style="font-size:2rem;"></i>
                            <p class="mt-2 mb-0">No hay pagos registrados aún.</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover table-sm align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Fecha</th>
                                        <th class="text-end">Monto</th>
                                        <th>Método</th>
                                        <th>Recibido Por</th>
                                        <th>Capturado Por</th>
                                        <th>Capturado</th>
                                        <th class="text-center" style="width:80px;">Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($pagos as $pago)
                                        <tr>
                                            <td class="text-muted small">{{ $pago->id }}</td>
                                            <td class="small">{{ $pago->fecha->format('d/m/Y') }}</td>
                                            <td class="text-end fw-semibold">${{ number_format($pago->monto, 2) }}</td>
                                            <td class="small">{{ $pago->metodo_pago ?? '—' }}</td>
                                            <td class="small">{{ $pago->recibido_por ?? '—' }}</td>
                                            <td class="small">{{ $pago->capturadoPor?->name ?? '—' }}</td>
                                            <td class="small text-nowrap">{{ $pago->created_at->format('d/m/Y H:i') }}</td>
                                            <td class="text-center">
                                                <form action="{{ route('tramites.pagos.destroy', [$tramite, $pago]) }}"
                                                      method="POST" class="d-inline"
                                                      onsubmit="return confirm('¿Eliminar este pago de ${{ number_format($pago->monto,2) }}?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1" title="Eliminar">
                                                        <i class="bi bi-trash3"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-secondary fw-bold">
                                    <tr>
                                        <td colspan="2" class="text-end">Total pagado:</td>
                                        <td class="text-end text-success">${{ number_format($totalPagado, 2) }}</td>
                                        <td></td>
                                    </tr>
                                    @if($costo > 0)
                                    <tr>
                                        <td colspan="2" class="text-end">Costo:</td>
                                        <td class="text-end">${{ number_format($costo, 2) }}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" class="text-end">Saldo pendiente:</td>
                                        <td class="text-end {{ $saldo <= 0 ? 'text-success' : 'text-danger' }}">
                                            ${{ number_format(max($saldo, 0), 2) }}
                                            @if($saldo <= 0)
                                                <span class="badge bg-success ms-1">Saldado</span>
                                            @endif
                                        </td>
                                        <td></td>
                                    </tr>
                                    @endif
                                </tfoot>
                            </table>
                        </div>
                    @endif
                </div>

            </div>{{-- /panelPagos --}}

            {{-- ===== PANEL BÓVEDA DE DOCUMENTOS (fuera del form principal) ===== --}}
            <div id="panelBoveda" class="d-none">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-bold text-danger">Folio:</label>
                        <strong>{{ $tramite->id }} - {{ $tramite->nombre }}</strong>
                    </div>
                </div>
                
                <div class="card border-0 bg-light mt-3">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">
                            <i class="bi bi-cloud-upload me-1"></i> Cargar nuevo documento
                        </h6>
                        <form action="{{ route('tramites.documentos.store', $tramite) }}"
                              method="POST"
                              enctype="multipart/form-data"
                              id="formBoveda">
                            @csrf
                            <div class="row g-2 align-items-end">
                                <div class="col-md-8">
                                    <label class="form-label fw-bold">
                                        Archivo
                                        <span class="text-muted fw-normal small">(PDF, Excel xlsx/xls, JPG/PNG — máx. 20 MB)</span>
                                    </label>
                                    <input type="file"
                                           name="documento"
                                           id="inputDocumento"
                                           class="form-control @error('documento') is-invalid @enderror"
                                           accept=".pdf,.xlsx,.xls,.jpg,.jpeg,.png">
                                    @error('documento')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-success w-100" id="btnSubir">
                                        <i class="bi bi-upload me-1"></i> Subir a Bóveda
                                    </button>
                                </div>
                            </div>
                            <div class="progress mt-3 d-none" id="progresoSubida" style="height:6px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                     role="progressbar" style="width:100%"></div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Listado de documentos --}}
                <div class="mt-4">
                    <h6 class="fw-bold mb-2">
                        <i class="bi bi-folder2-open me-1"></i>
                        Documentos almacenados
                        <span class="badge bg-secondary ms-1">{{ $tramite->documentos->count() }}</span>
                    </h6>

                    @if($tramite->documentos->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-archive" style="font-size:2.5rem;"></i>
                            <p class="mt-2 mb-0">No hay documentos en la bóveda todavía.</p>
                            <small>Sube el primer documento usando el panel de arriba.</small>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover table-sm align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:40px;"></th>
                                        <th>Nombre</th>
                                        <th>Tamaño</th>
                                        <th>Subido por</th>
                                        <th>Fecha</th>
                                        <th class="text-center" style="width:130px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tramite->documentos as $documento)
                                        <tr>
                                            <td class="text-center">
                                                <i class="bi {{ $documento->icono }}" style="font-size:1.3rem;"></i>
                                            </td>
                                            <td class="text-break">{{ $documento->nombre_original }}</td>
                                            <td class="text-nowrap">{{ $documento->tamano_legible }}</td>
                                            <td class="text-nowrap">{{ $documento->usuario?->name ?? '—' }}</td>
                                            <td class="text-nowrap">{{ $documento->created_at->format('d/m/Y H:i') }}</td>
                                            <td class="text-center">
                                                <a href="{{ route('tramites.documentos.download', [$tramite, $documento]) }}"
                                                   class="btn btn-outline-primary btn-sm"
                                                   title="Descargar">
                                                    <i class="bi bi-download"></i>
                                                </a>
                                                <form action="{{ route('tramites.documentos.destroy', [$tramite, $documento]) }}"
                                                      method="POST"
                                                      class="d-inline"
                                                      onsubmit="return confirm('¿Eliminar el documento {{ addslashes($documento->nombre_original) }}? Esta acción no se puede deshacer.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                            class="btn btn-outline-danger btn-sm"
                                                            title="Eliminar">
                                                        <i class="bi bi-trash3"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>{{-- /panelBoveda --}}

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const panelPagos      = document.getElementById('panelPagos');
        const panelBoveda     = document.getElementById('panelBoveda');
        const botonesTramite  = document.getElementById('botonesTramiteForm');

        function aplicarEstadoTab(tabId) {
            const esPagos  = tabId === 'tab-pagos';
            const esBoveda = tabId === 'tab-boveda';
            if (panelPagos)     panelPagos.classList.toggle('d-none', !esPagos);
            if (panelBoveda)    panelBoveda.classList.toggle('d-none', !esBoveda);
            if (botonesTramite) botonesTramite.classList.toggle('d-none', esPagos || esBoveda);
            if (document.getElementById('active_tab')) {
                document.getElementById('active_tab').value = tabId;
            }
        }

        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                const tabId = e.target.getAttribute('href').substring(1);
                aplicarEstadoTab(tabId);
            });
        });

        const activeTab = '{{ old('active_tab', session('active_tab', 'tab-datos')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            new bootstrap.Tab(tabElement).show();
        }
        aplicarEstadoTab(activeTab);

        const selectTramite   = document.getElementById('selectTramite');
        const campoAseguradora = document.getElementById('campoAseguradora');
        const camposVisa       = document.querySelectorAll('.campo-visa');
        const camposPasaporte  = document.querySelectorAll('.campo-pasaporte');
        const camposPlacas     = document.querySelectorAll('.campo-placas');
        function toggleCamposCondicionales() {
            const val = selectTramite.value;
            campoAseguradora.style.display = val === 'Seguros OIS' ? '' : 'none';
            camposVisa.forEach(el      => el.style.display = val === 'Visas'      ? '' : 'none');
            camposPasaporte.forEach(el => el.style.display = val === 'Pasaportes' ? '' : 'none');
            camposPlacas.forEach(el    => el.style.display = val === 'Placas'     ? '' : 'none');
        }
        if (selectTramite) {
            selectTramite.addEventListener('change', toggleCamposCondicionales);
            toggleCamposCondicionales();
        }

        const formBoveda      = document.getElementById('formBoveda');
        const progresoSubida  = document.getElementById('progresoSubida');
        const btnSubir        = document.getElementById('btnSubir');
        if (formBoveda) {
            formBoveda.addEventListener('submit', function () {
                if (progresoSubida) progresoSubida.classList.remove('d-none');
                if (btnSubir)       btnSubir.disabled = true;
            });
        }
    });
</script>

@endsection

@extends('../layouts/partials/footer')