@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" 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 active" 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-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', session('active_tab', 'tab-tramite')) }}">

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

                    {{-- ===== TAB 1: DATOS DEL TITULAR (oculto) ===== --}}
                    {{-- <div class="tab-pane fade" id="tab-datos" role="tabpanel">

                        <div class="col-md-5">
                            <label class="form-label fw-bold">*Cliente (vinculado al sistema)</label>
                            <select name="id_cliente" class="form-select" required>
                                <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>
                            <p>
                        </div>

                        <div class="row g-3 align-items-end mb-3">
                            <div class="col-md-1">
                                <span class="text-muted small">Folio:</span><br>
                                <strong class="text-danger">{{ $tramite->id }}</strong>
                            </div>
                        </div>

                        @if($tramite->cliente)
                            @php $cl = $tramite->cliente; @endphp

                            <h6 class="text-secondary border-bottom pb-1 mt-2">Información Personal</h6>
                            <div class="row g-3 mb-2">
                                <div class="col-md-4"><x-show-field label="Nombre(s)"        :value="$cl->ip_nombre"/></div>
                                <div class="col-md-4"><x-show-field label="Apellido Paterno"  :value="$cl->ip_apellido_paterno"/></div>
                                <div class="col-md-4"><x-show-field label="Apellido Materno"  :value="$cl->ip_apellido_materno"/></div>
                                <div class="col-md-2"><x-show-field label="Género"            :value="$cl->ip_genero"/></div>
                                <div class="col-md-2"><x-show-field label="Fecha Nacimiento"  :value="optional($cl->ip_fecha_nacimiento)->format('d/m/Y')"/></div>
                                <div class="col-md-2"><x-show-field label="Estado Civil"      :value="$cl->ip_estado_civil"/></div>
                                <div class="col-md-2"><x-show-field label="Hijos"             :value="$cl->ip_hijos"/></div>
                                <div class="col-md-3"><x-show-field label="RFC"               :value="$cl->ip_rfc"/></div>
                                <div class="col-md-4"><x-show-field label="CURP"              :value="$cl->ip_curp"/></div>
                                <div class="col-md-3"><x-show-field label="Identificación"    :value="$cl->ip_identificacion"/></div>
                                <div class="col-md-3"><x-show-field label="Nacionalidad"      :value="$cl->ip_nacionalidad"/></div>
                            </div>

                            <h6 class="text-secondary border-bottom pb-1 mt-2">Contacto</h6>
                            <div class="row g-3 mb-2">
                                <div class="col-md-4"><x-show-field label="Correo Principal"   :value="$cl->cp_correo"/></div>
                                <div class="col-md-3"><x-show-field label="Teléfono"           :value="$cl->cp_telefono"/></div>
                                <div class="col-md-2"><x-show-field label="Tipo"               :value="$cl->cp_tipo"/></div>
                                <div class="col-md-3"><x-show-field label="Grupo WhatsApp"     :value="$cl->grupo_whatsapp"/></div>
                            </div>

                            <h6 class="text-secondary border-bottom pb-1 mt-2">Dirección Principal</h6>
                            <div class="row g-3 mb-2">
                                <div class="col-md-5"><x-show-field label="Calle"         :value="$cl->dir_principal_calle"/></div>
                                <div class="col-md-2"><x-show-field label="Núm. Ext."     :value="$cl->dir_principal_numero_ext"/></div>
                                <div class="col-md-2"><x-show-field label="Núm. Int."     :value="$cl->dir_principal_numero_int"/></div>
                                <div class="col-md-3"><x-show-field label="Colonia"       :value="$cl->dir_principal_colonia"/></div>
                                <div class="col-md-3"><x-show-field label="Ciudad"        :value="$cl->dir_principal_ciudad"/></div>
                                <div class="col-md-2"><x-show-field label="C.P."          :value="$cl->dir_principal_codigo_postal"/></div>
                                <div class="col-md-3"><x-show-field label="Estado"        :value="$cl->dir_principal_estado"/></div>
                                <div class="col-md-3"><x-show-field label="País"          :value="$cl->dir_principal_pais"/></div>
                            </div>

                            <h6 class="text-secondary border-bottom pb-1 mt-2">Estudio Socio Económico</h6>
                            <div class="row g-3 mb-2">
                                <div class="col-md-3"><x-show-field label="Educación"   :value="$cl->se_educacion"/></div>
                                <div class="col-md-3"><x-show-field label="Ocupación"   :value="$cl->se_ocupacion"/></div>
                                <div class="col-md-3"><x-show-field label="Empleo"      :value="$cl->se_empleo"/></div>
                                <div class="col-md-3"><x-show-field label="Vivienda"    :value="$cl->se_vivienda"/></div>
                                <div class="col-md-2"><x-show-field label="Automóvil"   :value="$cl->se_auto ? 'SÍ' : 'NO'"/></div>
                                <div class="col-md-2"><x-show-field label="Smartphone"  :value="$cl->se_smartphone ? 'SÍ' : 'NO'"/></div>
                            </div>

                        @else
                            <div class="alert alert-warning py-2 mt-2">
                                <i class="bi bi-exclamation-triangle me-1"></i>
                                No hay cliente vinculado. Selecciona uno en el campo de arriba y guarda para ver sus datos.
                            </div>
                        @endif

                    </div> --}}

                    {{-- ===== TAB 2: TRÁMITE ===== --}}
                    <div class="tab-pane fade show active" id="tab-tramite" role="tabpanel">
                        
                        <div class="d-flex align-items-center gap-4 px-3 py-2 mb-3 rounded-2 border bg-light">
                            <div>
                                <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Folio</div>
                                <span class="fw-bold text-danger fs-5">{{ $tramite->id }}</span>
                            </div>
                            <div class="vr"></div>
                            <div>
                                <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Cliente</div>
                                <span class="fw-semibold">{{ $tramite->cliente->ip_nombre }} {{ $tramite->cliente->ip_apellido_paterno }}</span>
                                <span class="text-muted ms-1 small">({{ $tramite->cliente->ip_rfc }})</span>
                            </div>
                            <div class="vr"></div>
                            <div>
                                <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Trámite</div>
                                <span class="fw-semibold">{{ $tramite->tramite ?? '—' }}</span>
                            </div>
                            <div class="vr"></div>
                            <div>
                                <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Aseguradora</div>
                                <span class="fw-semibold">{{ $tramite->aseguradora ?? '—' }}</span>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Trámite</label>
                                <select name="tramite" id="selectTramite" class="form-select">
                                    <option value="">- SELECCIONAR -</option>
                                    @foreach([
                                        'DESPACHO',
                                        'FIANZAS',
                                        'GRUAS',
                                        'GRUPO OIS',
                                        'IMSS',
                                        'IMSS OIS',
                                        'MODALIDAD-10',
                                        'MODALIDAD-40',
                                        'PASAPORTES',
                                        'PENSIONES',
                                        'PLACAS',
                                        'SEGUROS OIS',
                                        'TAMEXUN',
                                        'VISAS'
                                        ]
                                        as $tr)
                                        
                                        <option value="{{ $tr }}" {{ strtoupper(old('tramite', $tramite->tramite)) == $tr ? 'selected' : '' }}>{{ $tr }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Detalle del Trámite</label>
                                <input type="text" name="tramite_detalle"
                                    value="{{ old('tramite_detalle', $tramite->tramite_detalle) }}"
                                    class="form-control @error('tramite_detalle') is-invalid @enderror"
                                    maxlength="150">
                                @error('tramite_detalle')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3" id="campoAseguradora">
                                <label class="form-label fw-bold">Aseguradora</label>
                                <select name="aseguradora" class="form-select">
                                    <option value="">- SELECCIONAR -</option>
                                    @foreach(['QUALITAS','ALLIANZ','GNP','AXA','MAPFRE','HDI','INBURSA','LATINO','GENERAL DE SEGUROS','AFIRME','ANA'] as $aseg)
                                        <option value="{{ $aseg }}" {{ strtoupper(old('aseguradora', $tramite->aseguradora ?? '')) == $aseg ? 'selected' : '' }}>{{ $aseg }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3" id="campoTipoSeguro">
                                <label class="form-label fw-bold">Tipo de Seguro</label>
                                <select name="tipo_seguro" class="form-select">
                                    <option value="">- SELECCIONAR -</option>
                                    @foreach(['HOGAR','PATRIMONIAL','ELITE','PLUS','AUTO','VIDA','GMM','DAÑOS','CARGA'] as $ts)
                                        <option value="{{ $ts }}" {{ strtoupper(old('tipo_seguro', $tramite->tipo_seguro ?? '')) == $ts ? 'selected' : '' }}>{{ $ts }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Estatus</label>
                                <select name="status" class="form-select">
                                    <option value="">- SELECCIONAR -</option>
                                    @foreach(['VERIF-DATOS','NO INICIADO','EN PROCESO','FINALIZADO','CANCELADO'] as $s)
                                        <option value="{{ $s }}" {{ strtoupper(old('status', $tramite->status)) == $s ? 'selected' : '' }}>{{ $s }}</option>
                                    @endforeach
                                </select>
                            </div>

                            

                            <div class="col-md-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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 class="col-12"><hr class="my-1"></div>

                            <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">

                <div class="d-flex align-items-center gap-4 px-3 py-2 mb-3 rounded-2 border bg-light">
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Folio</div>
                        <span class="fw-bold text-danger fs-5">{{ $tramite->id }}</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Cliente</div>
                        <span class="fw-semibold">{{ $tramite->cliente->ip_nombre }} {{ $tramite->cliente->ip_apellido_paterno }}</span>
                        <span class="text-muted ms-1 small">({{ $tramite->cliente->ip_rfc }})</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Trámite</div>
                        <span class="fw-semibold">{{ $tramite->tramite ?? '—' }}</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Aseguradora</div>
                        <span class="fw-semibold">{{ $tramite->aseguradora ?? '—' }}</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Costo</div>
                        <span class="fw-bold text-success">${{ number_format($tramite->costo ?? 0, 2) }}</span>
                    </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="d-flex align-items-center gap-4 px-3 py-2 mb-3 rounded-2 border bg-light">
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Folio</div>
                        <span class="fw-bold text-danger fs-5">{{ $tramite->id }}</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Cliente</div>
                        <span class="fw-semibold">{{ $tramite->cliente->ip_nombre }} {{ $tramite->cliente->ip_apellido_paterno }}</span>
                        <span class="text-muted ms-1 small">({{ $tramite->cliente->ip_rfc }})</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Trámite</div>
                        <span class="fw-semibold">{{ $tramite->tramite ?? '—' }}</span>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <div class="text-muted" style="font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;">Aseguradora</div>
                        <span class="fw-semibold">{{ $tramite->aseguradora ?? '—' }}</span>
                    </div>
                </div>

                {{-- Documentos en la bóveda del cliente --}}
                <div class="card border-0 bg-light mt-3">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">
                            <i class="bi bi-person-vcard me-1"></i> Documentos del cliente en bóveda
                            <span class="badge bg-secondary ms-1">{{ $tramite->cliente->documentos->count() }}</span>
                        </h6>

                        @if($tramite->cliente->documentos->isEmpty())
                            <div class="text-center py-3 text-muted">
                                <i class="bi bi-archive" style="font-size:2rem;"></i>
                                <p class="mt-2 mb-0">El cliente no tiene documentos en su bóveda todavía.</p>
                            </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:80px;">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($tramite->cliente->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('clientes.documentos.download', [$tramite->cliente, $documento]) }}"
                                                       class="btn btn-outline-primary btn-sm"
                                                       title="Descargar">
                                                        <i class="bi bi-download"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </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 relacionado al TRÁMITE.
                        </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-tramite')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            new bootstrap.Tab(tabElement).show();
        }
        aplicarEstadoTab(activeTab);

        const selectTramite    = document.getElementById('selectTramite');
        const camposVisa       = document.querySelectorAll('.campo-visa');
        const camposPasaporte  = document.querySelectorAll('.campo-pasaporte');
        const camposPlacas     = document.querySelectorAll('.campo-placas');
        function toggleCamposCondicionales() {
            const val = selectTramite.value;
            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');
            const esVisa = val === 'VISAS';
            const fAseg  = document.getElementById('campoAseguradora');
            const fTipo  = document.getElementById('campoTipoSeguro');
            if (fAseg) fAseg.style.display = esVisa ? 'none' : '';
            if (fTipo) fTipo.style.display = esVisa ? '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')