@extends('layouts.app', ['title' => 'Expediente · '.$client->name])

@section('header_actions')
<a class="btn btn-ghost" href="{{ route('clients.index') }}"><i class="fa-solid fa-arrow-left"></i>Volver</a>
<button class="btn btn-primary" type="button" data-modal-open="modal-edit-client"><i class="fa-solid fa-pen"></i>Editar datos</button>
@endsection

@section('content')
@php
    $phoneClean = preg_replace('/\D+/', '', $client->phone ?? '');
    $waPhone = strlen($phoneClean) === 10 ? '52'.$phoneClean : $phoneClean;
    $isAdmin = auth()->user()?->isAdmin();
@endphp

{{-- ============ ENCABEZADO DEL EXPEDIENTE ============ --}}
<div class="card" style="margin-bottom:16px;background:linear-gradient(180deg,rgba(201,168,76,.10),rgba(201,168,76,.01))">
    <div class="row between" style="align-items:flex-start;gap:14px;flex-wrap:wrap">
        <div class="row" style="gap:16px;align-items:center">
            <div style="width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#e6c971,#8b6914);color:#111;display:grid;place-items:center;font-family:var(--display);font-size:28px;font-weight:700;box-shadow:0 12px 26px -8px rgba(201,168,76,.6);flex-shrink:0">
                {{ strtoupper(mb_substr($client->name, 0, 1)) }}
            </div>
            <div>
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
                    <h2 style="margin:0;font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em">{{ $client->name }}</h2>
                    {{-- Estado del cliente (Negociación/Cerrado…) oculto a petición --}}
                </div>
                <div class="sub" style="margin-top:4px">
                    ID #{{ $client->id }} · {{ $client->rfc ?: 'sin RFC' }}
                    @if($client->advisor) · <i class="fa-solid fa-user-tie text-gold"></i> {{ $client->advisor->name }}@endif
                </div>
                <div class="row" style="gap:14px;margin-top:8px;flex-wrap:wrap">
                    @if($client->phone)<span class="sub"><i class="fa-solid fa-phone text-gold"></i> {{ $client->phone }}</span>@endif
                    {{-- Email de contacto oculto a peticion --}}
                    @if($client->source)<span class="sub"><i class="fa-solid fa-bullhorn text-gold"></i> {{ $client->source }}</span>@endif
                    @if($client->interest)<span class="sub"><i class="fa-solid fa-heart text-gold"></i> {{ $client->interest }}</span>@endif
                </div>
            </div>
        </div>
        <div class="row" style="gap:8px">
            @if($client->phone)<a class="btn btn-success btn-sm" href="https://wa.me/{{ $waPhone }}" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i>WhatsApp</a>@endif
            {{-- Boton Email oculto a peticion --}}
        </div>
    </div>
</div>

{{-- ============ KPIs ============ --}}
<div class="grid g3" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-cart-shopping"></i><div class="metric-val text-gold">${{ number_format($client->total_purchased, 0) }}</div><div class="metric-label">Total</div></div>
    <div class="metric"><i class="fa-solid fa-money-bill-wave"></i><div class="metric-val text-success">${{ number_format($client->total_paid, 0) }}</div><div class="metric-label">Abonado</div></div>
    <div class="metric"><i class="fa-solid fa-scale-balanced"></i><div class="metric-val">${{ number_format($client->total_balance, 0) }}</div><div class="metric-label">Saldo</div></div>
</div>

{{-- ============ TABS ============ --}}
<div class="ctabs">
    <button class="ctab active" data-tab="inventario"><i class="fa-solid fa-link"></i> {{ term('tab_vinculacion','Vinculación') }} <span class="pill">{{ $client->accounts->count() }}</span></button>
    <button class="ctab" data-tab="movimientos"><i class="fa-solid fa-clock-rotate-left"></i> {{ term('tab_movimientos','Movimientos') }} <span class="pill">{{ $timeline->count() }}</span></button>
    <button class="ctab" data-tab="contratos"><i class="fa-solid fa-file-signature"></i> {{ term('tab_contratos','Contratos') }} <span class="pill">{{ $client->contracts->count() }}</span></button>
    <button class="ctab" data-tab="expediente"><i class="fa-solid fa-folder-open"></i> {{ term('tab_expediente','Documentos') }} <span class="pill">{{ $client->documents->count() }}</span></button>
    <button class="ctab" data-tab="datos"><i class="fa-solid fa-id-card"></i> {{ term('tab_datos','Datos') }}</button>
</div>

{{-- ===== TAB: VINCULACIÓN DE INMUEBLES ===== --}}
<div class="ctab-panel active" id="tab-inventario">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Terrenos vinculados</div><div class="sub">Terrenos vinculados al cliente con esquema de pago y expediente</div></div>
            <button class="btn btn-primary btn-sm" type="button" data-modal-open="modal-assoc-inventory"><i class="fa-solid fa-link"></i> Vincular Terreno</button>
        </div>
        @if($client->accounts->count())
        <div class="vinc-grid stagger">
            @foreach($client->accounts as $account)
                @php
                    $statusClass = $account->status === 'Liquidado' ? 'green' : ($account->status === 'Vencido' ? 'red' : 'amber');
                    $accountProjectLogo = $account->lote?->project?->logo_path
                        ?? $account->lote?->manzana?->project?->logo_path
                        ?? $account->property?->project?->logo_path
                        ?? null;
                @endphp
                <div class="vinc-card">
                    <div class="vinc-head">
                        <div class="vinc-head-row">
                            <span class="badge {{ $statusClass }} vinc-status">{{ $account->status }}</span>
                            @if($isAdmin)
                                <div class="vinc-menu">
                                    <button class="vinc-menu-trigger" type="button" data-vinc-menu-toggle aria-label="Opciones de vinculación">
                                        <i class="fa-solid fa-ellipsis-vertical"></i>
                                    </button>
                                    <div class="vinc-menu-dropdown">
                                        <button type="button" data-modal-open="modal-edit-vinc-{{ $account->id }}">
                                            <i class="fa-solid fa-pen"></i> Editar vinculación
                                        </button>
                                        <button type="button" class="danger" data-modal-open="modal-delete-vinc-{{ $account->id }}">
                                            <i class="fa-solid fa-trash-can"></i> Eliminar vinculación
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div style="display:flex;gap:10px;align-items:center">
                            @if($accountProjectLogo && project_logo_url($accountProjectLogo))
                                <img src="{{ project_logo_url($accountProjectLogo) }}" alt="Logo del proyecto" style="width:38px;height:38px;border-radius:10px;object-fit:contain;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:4px;flex:0 0 auto">
                            @endif
                            <div class="vinc-title" title="{{ $account->unit_label }}">{{ $account->unit_label }}</div>
                        </div>
                        <div class="sub vinc-sub">
                            Cuenta #{{ $account->id }}{{ $account->lote?->superficie_m2 ? ' · '.number_format((float) $account->lote->superficie_m2, 0).' m²' : ($account->property?->location ? ' · '.$account->property->location : '') }}
                        </div>
                    </div>
                    <div class="vinc-body">
                        @if($account->payment_type)
                            <div style="margin:6px 0 2px">
                                <span class="pill" style="font-size:10.5px"><i class="fa-solid {{ $account->payment_type === 'Plazo' ? 'fa-calendar-days' : ($account->payment_type === 'Apartado' ? 'fa-clock' : 'fa-money-bill-wave') }} text-gold"></i> {{ $account->plan_label }}</span>
                                @if($account->payment_type === 'Plazo' && $account->monthly_payment)
                                    <span class="pill" style="font-size:10.5px">${{ number_format((float) $account->monthly_payment, 2) }}/mes</span>
                                @endif
                            </div>
                        @endif

                        <div class="vinc-stats">
                            <div><div class="sub">Total</div><strong>${{ number_format((float) $account->total_price, 0) }}</strong></div>
                            <div><div class="sub">Abonado</div><strong class="text-success">${{ number_format((float) $account->paid_amount, 0) }}</strong></div>
                            <div><div class="sub">Saldo</div><strong class="text-gold">${{ number_format($account->balance, 0) }}</strong></div>
                        </div>

                        <div class="vinc-progress">
                            <div class="row between sub"><span>Progreso de pago</span><span>{{ $account->progress }}%</span></div>
                            <div class="progress"><div class="bar" style="width:{{ $account->progress }}%"></div></div>
                        </div>

                        @php
                            // Sólo abonos activos: los cancelados no cuentan como movimiento.
                            $activePayments = $account->payments->filter(fn ($p) => ($p->status ?? '') !== 'Cancelado');
                            $lastActivePayment = $activePayments->sortByDesc('payment_date')->first();
                        @endphp
                        @if($activePayments->count())
                            <div class="sub vinc-foot"><i class="fa-solid fa-receipt"></i> {{ $activePayments->count() }} abono(s) · último: {{ optional($lastActivePayment?->payment_date)->format('d/m/Y') ?? '—' }}</div>
                        @endif

                        <div class="vinc-actions">
                            <button class="btn btn-success btn-sm" type="button" data-modal-open="modal-abono-{{ $account->id }}"><i class="fa-solid fa-hand-holding-dollar"></i> Abono</button>
                            @if($account->payment_type === 'Plazo')
                                <a class="btn btn-sm" href="{{ route('accounts.payment-plan', $account) }}" target="_blank" data-tip="Plan de aportaciones PDF"><span class="pdf-doc-icon" aria-hidden="true"><span>PDF</span></span></a>
                            @endif

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @else
            <div class="sub" style="text-align:center;padding:30px"><i class="fa-solid fa-link" style="font-size:40px;opacity:.3;display:block;margin-bottom:10px"></i>Aún no hay terrenos vinculados a este cliente.<br>Usa "Vincular Terreno" para asociar proyecto, manzana, lote y esquema de pago.</div>
        @endif
    </div>
</div>


{{-- ===== TAB: APARTADOS ===== --}}
{{-- Los apartados NO se muestran en el expediente: viven en el módulo Apartados
     hasta que se convierten en vinculación. Ya convertidos, aparecen en la pestaña Vinculación. --}}

{{-- ===== TAB: MOVIMIENTOS ===== --}}
<div class="ctab-panel" id="tab-movimientos">
    <div class="card">
        <div class="card-head"><div><div class="card-title">Historial de movimientos</div><div class="sub">Solo movimientos de lotes: vinculaciones y abonos separados por terreno.</div></div></div>
        @if($timeline->count())
            @php
                $movGroups = [];
                foreach($timeline as $mItem){ $movGroups[$mItem['lote_key'] ?? 'general'] = $mItem['lote_label'] ?? 'General'; }
            @endphp
            <div class="mov-subtabs">
                <button type="button" class="mov-subtab active" data-mov="todos"><i class="fa-solid fa-layer-group"></i> Todos <span class="pill">{{ $timeline->count() }}</span></button>
                @foreach($movGroups as $mk => $mlabel)
                    <button type="button" class="mov-subtab" data-mov="{{ $mk }}"><i class="fa-solid fa-map-pin"></i> {{ $mlabel }} <span class="pill">{{ $timeline->where('lote_key', $mk)->count() }}</span></button>
                @endforeach
            </div>

            <div class="mov-filters" id="mov-filters">
                <div class="mov-search">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input type="search" id="mov-search-input" placeholder="Buscar por lote, concepto, referencia, método o importe">
                </div>
                <select id="mov-kind-filter">
                    <option value="">Todos los tipos</option>
                    <option value="compra">Vinculaciones</option>
                    <option value="abono">Abonos</option>
                </select>
                <select id="mov-status-filter">
                    <option value="">Todos los estados</option>
                    <option value="Aplicado">Aplicado</option>
                    <option value="Cancelado">Cancelado</option>
                </select>
                <input type="date" id="mov-date-from" aria-label="Desde">
                <input type="date" id="mov-date-to" aria-label="Hasta">
                <button type="button" class="btn btn-sm btn-ghost" id="mov-clear-filters"><i class="fa-solid fa-xmark"></i> Limpiar</button>
            </div>
            <div class="sub" id="mov-filter-count" style="margin-top:8px"></div>
            <div class="timeline" style="margin-top:12px">
                @foreach($timeline as $m)
                    @php
                        $movSearch = trim(implode(' ', array_filter([
                            $m['title'] ?? null,
                            $m['detail'] ?? null,
                            $m['reference'] ?? null,
                            $m['lote_label'] ?? null,
                            isset($m['amount']) ? number_format((float) $m['amount'], 2, '.', '') : null,
                        ])));
                        $movDate = $m['date'] ? optional($m['date'])->format('Y-m-d') : '';
                    @endphp
                    <div class="tl-item" data-mov="{{ $m['lote_key'] ?? 'general' }}" data-kind="{{ $m['kind'] ?? '' }}" data-status="{{ $m['payment_status'] ?? '' }}" data-date="{{ $movDate }}" data-search="{{ \Illuminate\Support\Str::lower($movSearch) }}">
                        <div class="tl-dot" style="background:{{ $m['color'] }}1f;border-color:{{ $m['color'] }};color:{{ $m['color'] }}"><i class="fa-solid {{ $m['icon'] }}"></i></div>
                        <div class="tl-body">
                            <div class="row between" style="gap:8px;align-items:flex-start">
                                <strong>{{ $m['title'] }}</strong>
                                @if(! is_null($m['amount']))
                                    <span class="text-gold" style="font-weight:700;white-space:nowrap">${{ number_format($m['amount'], 2) }}</span>
                                @endif
                            </div>
                            <div class="sub">{{ $m['detail'] }}</div>
                            @if(($m['kind'] ?? '') === 'abono' && ($m['payment_status'] ?? '') === 'Cancelado')
                                <div class="sub text-danger">Abono cancelado{{ !empty($m['cancellation_reason']) ? ': '.$m['cancellation_reason'] : '' }}</div>
                            @endif
                            @if(!empty($m['receipt']))
                                <div style="margin-top:6px"><a class="btn btn-sm" href="{{ $m['receipt'] }}" target="_blank" rel="noopener"><i class="fa-solid fa-paperclip"></i> Ver comprobante</a></div>
                            @endif
                            @if(($m['kind'] ?? '') === 'abono' && ($m['payment_status'] ?? '') === 'Aplicado' && !empty($m['payment_id']))
                                <form method="post" action="{{ route('payments.cancel', $m['payment_id']) }}" style="margin-top:6px" onsubmit="return askPaymentCancellationReason(this, event)"
                                      data-cancel-detail="{{ $m['title'] }} · Cliente: {{ $client->name }} · Monto: ${{ number_format((float) $m['amount'], 2) }} · Fecha: {{ optional($m['date'])->format('d/m/Y') ?? '—' }}">
                                    @csrf @method('PATCH')
                                    <input type="hidden" name="cancellation_reason">
                                    <button class="btn btn-sm btn-danger" type="submit"><i class="fa-solid fa-ban"></i> Cancelar abono</button>
                                </form>
                            @endif
                            <div class="sub" style="font-size:11px;color:var(--soft)"><i class="fa-regular fa-clock"></i> {{ optional($m['date'])->format('d/m/Y H:i') ?? '—' }} · {{ optional($m['date'])->diffForHumans() }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mov-empty-filter" id="mov-empty-filter"><i class="fa-solid fa-magnifying-glass"></i> No hay movimientos con esos filtros.</div>
        @else
            <div class="sub" style="text-align:center;padding:30px"><i class="fa-solid fa-clock-rotate-left" style="font-size:40px;opacity:.3;display:block;margin-bottom:10px"></i>Sin movimientos registrados todavía.</div>
        @endif
    </div>
</div>

{{-- ===== TAB: CONTRATOS ===== --}}
<div class="ctab-panel" id="tab-contratos">
    <div class="card">
        <div class="card-head">
            <div>
                <div class="card-title">Contratos del cliente</div>
                <div class="sub">Separados estrictamente por terreno/lote vinculado.</div>
            </div>
        </div>

        @php
            $unlinkedContracts = $client->contracts->filter(function ($contract) use ($client) {
                return ! $client->accounts->contains(function ($account) use ($contract) {
                    $sameLote = $account->lote_id
                        && $contract->lote_id
                        && (int) $account->lote_id === (int) $contract->lote_id;

                    $sameProperty = $account->property_id
                        && $contract->property_id
                        && (int) $account->property_id === (int) $contract->property_id;

                    return $sameLote || $sameProperty;
                });
            })->values();

            $contractFolders = $client->accounts->map(function ($account) use ($client, $unlinkedContracts) {
                $linkedContracts = $client->contracts->filter(function ($contract) use ($account) {
                    $sameLote = $account->lote_id
                        && $contract->lote_id
                        && (int) $account->lote_id === (int) $contract->lote_id;

                    $sameProperty = $account->property_id
                        && $contract->property_id
                        && (int) $account->property_id === (int) $contract->property_id;

                    return $sameLote || $sameProperty;
                })->values();

                // Los contratos antiguos/generales sin lote_id/property_id se muestran en todas las vinculaciones.
                $contracts = $linkedContracts
                    ->merge($unlinkedContracts)
                    ->unique('id')
                    ->values();

                return [
                    'account' => $account,
                    'name' => $account->unit_label,
                    'contracts' => $contracts,
                    'general_count' => $unlinkedContracts->count(),
                ];
            });

            $linkedContractTotal = $contractFolders->sum(fn ($folder) => $folder['contracts']->count());
        @endphp

        @if($client->accounts->count())
            <div class="contract-folder-note">
                <i class="fa-solid fa-circle-info"></i>
                Los contratos se generan automáticamente al vincular el terreno. Cada carpeta muestra los contratos propios de ese terreno/lote y también los contratos generales aplicables.
            </div>

            @foreach($contractFolders as $folder)
                @php
                    $account = $folder['account'];
                    $folderName = $folder['name'];
                    $folderContracts = $folder['contracts'];
                @endphp

                <details class="contract-folder" open>
                    <summary class="contract-folder-head">
                        <div class="contract-folder-title">
                            <div class="contract-folder-icon"><i class="fa-solid fa-folder-open"></i></div>
                            <div>
                                <div class="contract-folder-name">{{ $folderName }}</div>
                                <div class="contract-folder-meta">
                                    Cuenta #{{ $account->id }} · {{ $account->payment_type ?: 'Sin forma de pago' }} · {{ $folderContracts->count() }} contrato(s) de este terreno
                                </div>
                            </div>
                        </div>
                        <div class="contract-folder-count">
                            <span class="badge gray">{{ $folderContracts->count() }} documento(s)</span>
                        </div>
                    </summary>

                    <div class="contract-folder-body">
                        @if($folderContracts->count())
                            <div class="table-wrap">
                                <table>
                                    <thead><tr><th>Documento</th><th>Datos</th><th>Creado</th><th style="width:50px"></th></tr></thead>
                                    <tbody>
                                    @foreach($folderContracts as $contract)
                                        <tr>
                                            <td>
                                                <strong>{{ $contract->title }}</strong>
                                                <div class="sub">
                                                    {{ $contract->template?->name ?? 'Documento libre' }}
                                                    @if(empty($contract->lote_id) && empty($contract->property_id))
                                                        · <span class="pill">Contrato general</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="sub">
                                                @if($contract->data_refreshed_at)
                                                    <span class="text-success"><i class="fa-solid fa-arrows-rotate"></i> {{ $contract->data_refreshed_at->format('d/m/Y H:i') }}</span>
                                                @else
                                                    Generados al enrolar
                                                @endif
                                            </td>
                                            <td class="sub">{{ optional($contract->created_at)->format('d/m/Y') }}</td>
                                            <td>
                                                <div class="kebab">
                                                    <button class="kebab-trigger" type="button" data-kebab><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                                    <div class="kebab-menu">
                                                        <a href="{{ route('contracts.print', $contract) }}" target="_blank"><i class="fa-solid fa-print"></i> Imprimir / PDF</a>
                                                        @if($contract->template && $contract->status !== 'Firmado' && ! $contract->signed_at)
                                                            <form method="post" action="{{ route('contracts.refresh-data', $contract) }}" onsubmit="return confirm('Se regenerará el documento con los datos actuales del cliente, lote y plan de pago. El contenido actual quedará respaldado. ¿Continuar?')">
                                                                @csrf
                                                                <button type="submit"><i class="fa-solid fa-arrows-rotate"></i> Actualizar datos</button>
                                                            </form>
                                                        @endif
                                                        @if($contract->body_before_refresh)
                                                            <form method="post" action="{{ route('contracts.restore-refresh', $contract) }}" onsubmit="return confirm('¿Restaurar la versión anterior del documento?')">
                                                                @csrf
                                                                <button type="submit"><i class="fa-solid fa-clock-rotate-left"></i> Restaurar versión anterior</button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="contract-folder-empty">
                                Este terreno aún no tiene contratos enrolados. Enrola contratos seleccionando esta vinculación.
                            </div>
                        @endif
                    </div>
                </details>
            @endforeach

        @else
            <div class="contract-folder-empty">Primero vincula un terreno/lote al cliente. Después podrás enrolar contratos por terreno.</div>
        @endif
    </div>
</div>

{{-- ===== TAB: EXPEDIENTE / DOCUMENTOS ===== --}}
<div class="ctab-panel" id="tab-expediente">
    <div class="card">
        <div class="card-head">
            <div><div class="card-title">Documentos del cliente</div><div class="sub">Documentación personal del cliente en la nube (INE, comprobantes, contratos…)</div></div>
            @if($client->documents->count())
            <div class="row doc-bulk-actions" style="gap:8px">
                <button type="button" class="btn btn-sm" id="doc-select-toggle" onclick="toggleDocSelect()"><i class="fa-solid fa-square-check"></i> Seleccionar</button>
                <button type="button" class="btn btn-sm btn-ghost" id="doc-select-all-btn" onclick="selectAllDocs()" style="display:none"><i class="fa-solid fa-list-check"></i> Todos</button>
                <button type="submit" form="doc-bulk-form" class="btn btn-sm btn-danger" id="doc-delete-btn" style="display:none" disabled><i class="fa-solid fa-trash"></i> Eliminar seleccionados (<span id="doc-sel-count">0</span>)</button>
            </div>
            @endif
        </div>

        {{-- Subir documentos --}}
        <form method="post" action="{{ route('clients.documents.store', $client) }}" enctype="multipart/form-data" style="margin-top:12px;padding:16px;border:1px dashed var(--line-strong);border-radius:12px;background:rgba(201,168,76,.04)">
            @csrf
            <div class="row" style="gap:10px;align-items:flex-end;flex-wrap:wrap">
                <label style="flex:1;min-width:240px">Archivos (imágenes, PDF, Word, Excel · máx 20MB c/u)
                    <input type="file" name="files[]" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.zip" required>
                </label>
                <button class="btn btn-success btn-sm" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i>Adjuntar</button>
            </div>
        </form>

        {{-- Listado de documentos --}}
        @if($client->documents->count())
            {{-- Form de borrado masivo: los checkboxes lo referencian con form="doc-bulk-form" --}}
            <form method="post" action="{{ route('clients.documents.bulk-destroy', $client) }}" id="doc-bulk-form" onsubmit="return confirmBulkDocDelete()">
                @csrf @method('DELETE')
            </form>

            <div class="doc-grid stagger" id="doc-grid">
                @foreach($client->documents as $doc)
                    @php
                        $ext = strtolower(pathinfo($doc->name, PATHINFO_EXTENSION));
                        $fi = str_contains($ext,'pdf') ? 'fa-file-pdf' : (str_contains($ext,'xls') ? 'fa-file-excel' : (str_contains($ext,'doc') ? 'fa-file-word' : (str_contains($ext,'zip') ? 'fa-file-zipper' : 'fa-file')));
                        $docViewUrl = route('clients.documents.show', $doc);
                        $docPrintUrl = route('clients.documents.print', $doc);
                    @endphp
                    <div class="doc-card" data-url="{{ $docViewUrl }}" data-print-url="{{ $docPrintUrl }}" data-type="{{ $doc->type }}">
                        {{-- Checkbox de selección (visible sólo en modo seleccionar) --}}
                        <label class="doc-check-wrap" onclick="event.stopPropagation()">
                            <input type="checkbox" name="ids[]" value="{{ $doc->id }}" form="doc-bulk-form" class="doc-check" onchange="updateDocSel()">
                        </label>

                        {{-- Botón imprimir (siempre visible) --}}
                        <button type="button" class="doc-print" title="Imprimir" onclick="event.stopPropagation();printDoc(@js($docPrintUrl))"><i class="fa-solid fa-print"></i></button>

                        <div class="doc-thumb" onclick="docCardClick(event, this)">
                            @if($doc->type === 'image')
                                <img src="{{ $docViewUrl }}" alt="">
                            @else
                                <i class="fa-solid {{ $fi }} text-gold"></i>
                            @endif
                        </div>
                        <div class="doc-meta" onclick="docCardClick(event, this)">
                            <div class="doc-name" title="{{ $doc->name }}">{{ $doc->name }}</div>
                            <div class="sub" style="font-size:10px">{{ $doc->category }} · {{ $doc->size_human }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="sub" style="text-align:center;padding:30px"><i class="fa-solid fa-folder-open" style="font-size:40px;opacity:.3;display:block;margin-bottom:10px"></i>Sin documentos. Sube la documentación personal del cliente.</div>
        @endif
    </div>
</div>

{{-- ===== TAB: DATOS ===== --}}
<div class="ctab-panel" id="tab-datos">
    <div class="card">
        <div class="card-head"><div><div class="card-title">Datos del cliente</div></div><button class="btn btn-sm" type="button" data-modal-open="modal-edit-client"><i class="fa-solid fa-pen"></i>Editar</button></div>
        <div class="grid g3" style="margin-top:12px">
            <div><div class="sub">Nombre</div><strong>{{ $client->name }}</strong></div>
            <div><div class="sub">Teléfono / Celular</div><strong>{{ $client->phone ?: '—' }}</strong></div>
            <div><div class="sub">Asesor</div><strong>{{ $client->advisor?->name ?? 'Sin asignar' }}</strong></div>
            <div><div class="sub">RFC</div><strong>{{ $client->rfc ?: '—' }}</strong></div>
            <div><div class="sub">CURP</div><strong>{{ $client->curp ?: '—' }}</strong></div>
            <div><div class="sub">Estado civil</div><strong>{{ $client->estado_civil ?: '—' }}</strong></div>
            <div><div class="sub">Ocupación</div><strong>{{ $client->ocupacion ?: '—' }}</strong></div>
            <div style="grid-column:1/-1"><div class="sub">Domicilio</div><strong>{{ $client->domicilio ?: '—' }}</strong></div>
            @if($client->calle || $client->colonia || $client->municipio || $client->estado)
            <div><div class="sub">Calle y número</div><strong>{{ trim(($client->calle ?: '').' '.($client->numero ? '#'.$client->numero : '')) ?: '—' }}</strong></div>
            <div><div class="sub">Colonia</div><strong>{{ $client->colonia ?: '—' }}</strong></div>
            <div><div class="sub">Código Postal</div><strong>{{ $client->codigo_postal ?: '—' }}</strong></div>
            <div><div class="sub">Municipio</div><strong>{{ $client->municipio ?: '—' }}</strong></div>
            <div><div class="sub">Estado</div><strong>{{ $client->estado ?: '—' }}</strong></div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.ctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;background:linear-gradient(180deg,#f6f8fc,#f6f8fc);border:1px solid var(--line);border-radius:12px;padding:5px}
.ctab{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;color:var(--muted);padding:9px 14px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s var(--ease)}
.ctab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.ctab.active{background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(201,168,76,.06));color:var(--gold);border-color:rgba(201,168,76,.35)}
.ctab .pill{font-size:10px;padding:1px 7px}
.ctab-panel{display:none;animation:fadeIn .2s var(--ease)}
.ctab-panel.active{display:block}
.grid.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:900px){.grid.g5{grid-template-columns:repeat(2,1fr)}}
.mov-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.mov-subtab{display:inline-flex;align-items:center;gap:7px;background:#f6f8fc;border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:600;transition:all .15s var(--ease)}
.mov-subtab:hover{color:var(--text);border-color:var(--line-strong)}
.mov-subtab.active{background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(201,168,76,.06));color:var(--gold);border-color:rgba(201,168,76,.4)}
.mov-subtab .pill{font-size:10px;padding:1px 7px}
.mov-filters{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(4,minmax(130px,.7fr)) auto;gap:8px;align-items:center;margin-top:12px}
.mov-search{position:relative}
.mov-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px}
.mov-search input{padding-left:34px}
.mov-filters input,.mov-filters select{height:39px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);padding:0 10px;min-width:0;width:100%}
.mov-empty-filter{display:none;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);margin-top:12px}
@media(max-width:1100px){.mov-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.mov-search{grid-column:1/-1}}
@media(max-width:680px){.mov-filters{grid-template-columns:1fr}}
.timeline{position:relative;padding-left:8px}
.tl-item{display:flex;gap:14px;padding:10px 0;position:relative}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:17px;top:38px;bottom:-10px;width:2px;background:var(--line)}
.tl-dot{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;border:1px solid;flex-shrink:0;font-size:14px;z-index:1}
.tl-body{flex:1;min-width:0;padding-bottom:6px}

/* ===== Grid de inmuebles vinculados ===== */
.vinc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:16px;align-items:stretch}
.vinc-card{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-height:430px;box-shadow:0 18px 45px -34px rgba(15,23,42,.75);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.vinc-card:hover{transform:translateY(-4px);box-shadow:0 30px 62px -34px rgba(15,23,42,.85);border-color:rgba(201,168,76,.36)}
.vinc-head{position:relative;padding:18px 18px 16px;background:linear-gradient(135deg,rgba(201,168,76,.13),rgba(255,255,255,.92));border-bottom:1px solid var(--line);min-height:118px}
.vinc-status{display:inline-flex;margin-bottom:12px;box-shadow:0 12px 28px -18px rgba(0,0,0,.35)}
.vinc-body{padding:18px;display:flex;flex-direction:column;gap:13px;flex:1}
.vinc-title{font-family:var(--display,inherit);font-size:18px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text)}
.vinc-sub{font-size:12.5px;margin-top:7px;line-height:1.35;color:var(--soft)}
.vinc-body .pill{display:inline-flex;margin:2px 4px 0 0;max-width:100%;white-space:normal;line-height:1.25}
.vinc-stats{display:grid;grid-template-columns:1fr;gap:0;padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.vinc-stats>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line)}
.vinc-stats>div:last-child{border-bottom:0;background:rgba(201,168,76,.08)}
.vinc-stats .sub{font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin:0;color:var(--soft);font-weight:800}
.vinc-stats strong{font-size:16px;text-align:right}
.vinc-progress{padding:11px 13px;border:1px solid var(--line);border-radius:16px;background:#fff}
.vinc-progress .progress{height:9px;margin-top:8px;border-radius:999px;overflow:hidden}
.vinc-foot{font-size:11.5px;color:var(--soft);line-height:1.35;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.035)}
.vinc-actions{display:grid;grid-template-columns:1fr 44px 44px;gap:8px;margin-top:auto}
.vinc-actions .btn{min-height:40px;justify-content:center}
.vinc-actions .btn-success{width:100%}
@media(max-width:700px){.vinc-grid{grid-template-columns:1fr}.vinc-card{min-height:auto}}

/* ===== Grid de documentos del expediente ===== */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
.doc-card{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#ffffff;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.doc-card:hover{border-color:rgba(201,168,76,.3);box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.doc-thumb{height:120px;background:#ffffff;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-thumb i{font-size:40px}
.doc-meta{padding:9px 11px;cursor:pointer}
.doc-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Botón imprimir: siempre visible, esquina superior derecha */
.doc-print{position:absolute;top:7px;right:7px;z-index:2;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(13,17,26,.82);backdrop-filter:blur(6px);color:var(--gold);cursor:pointer;font-size:13px;display:grid;place-items:center;transition:all .15s var(--ease)}
.doc-print:hover{background:var(--gold);color:#10131b;border-color:transparent}
/* Checkbox de selección: oculto hasta activar modo seleccionar */
.doc-bulk-actions .btn[disabled]{opacity:.48;cursor:not-allowed;filter:grayscale(.25)}
.doc-check-wrap{position:absolute;top:7px;left:7px;z-index:2;display:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(13,17,26,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);cursor:pointer}
.doc-grid.selecting .doc-check-wrap{display:flex}
.doc-grid.selecting .doc-print{display:none}
.doc-check{width:17px;height:17px;accent-color:var(--gold);cursor:pointer;margin:0}
/* En modo selección el thumb/meta seleccionan documentos en lugar de abrirlos */
.doc-grid.selecting .doc-thumb,.doc-grid.selecting .doc-meta{cursor:pointer}
.doc-grid.selecting .doc-card::after{content:"Seleccionar";position:absolute;right:8px;top:8px;background:rgba(13,17,26,.82);color:#fff;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:700;pointer-events:none}
.doc-grid.selecting .doc-card:has(.doc-check:checked)::after{content:"Seleccionado";background:var(--gold);color:#111}
/* Resaltar tarjeta seleccionada */
.doc-card:has(.doc-check:checked),.doc-card:has(.fmt-check:checked){border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.3)}


.contract-folder{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,252,.82));box-shadow:var(--shadow-1);margin-top:14px;overflow:hidden}
.contract-folder[open]{box-shadow:var(--shadow-2)}
.contract-folder-head{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:linear-gradient(180deg,rgba(201,168,76,.12),rgba(201,168,76,.04));border-bottom:1px solid var(--line)}
.contract-folder-head::-webkit-details-marker{display:none}
.contract-folder-title{display:flex;align-items:center;gap:12px;min-width:0}
.contract-folder-icon{width:42px;height:42px;border-radius:13px;background:rgba(201,168,76,.18);display:grid;place-items:center;color:var(--gold-dark);flex-shrink:0}
.contract-folder-name{font-weight:800;color:var(--text);line-height:1.15}
.contract-folder-meta{font-size:12px;color:var(--muted);margin-top:3px}
.contract-folder-count{display:flex;align-items:center;gap:8px;white-space:nowrap}
.contract-folder-body{padding:0}
.contract-folder .table-wrap{margin:0;border:0;border-radius:0}
.contract-folder table{margin:0}
.contract-folder-empty{padding:24px;text-align:center;color:var(--muted)}

/* Icono PDF real para Plan de aportaciones: no usa PDF ni FontAwesome */
.pdf-doc-icon{
    width:24px;
    height:28px;
    position:relative;
    display:inline-flex;
    align-items:flex-end;
    justify-content:center;
    flex:0 0 auto;
    border-radius:4px;
    background:#ffffff;
    border:2px solid #1f2937;
    color:#dc2626;
    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;
    font-weight:900;
    line-height:1;
    padding-bottom:4px;
    box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
}
.pdf-doc-icon::before{
    content:"";
    position:absolute;
    top:-2px;
    right:-2px;
    width:9px;
    height:9px;
    background:linear-gradient(135deg,#e5e7eb 0 50%,#fff 50% 100%);
    border-left:2px solid #1f2937;
    border-bottom:2px solid #1f2937;
    border-top-right-radius:3px;
}
.pdf-doc-icon span{
    position:relative;
    z-index:1;
    letter-spacing:.02em;
}
.account-v-actions .btn .pdf-doc-icon,
.vinc-actions .btn .pdf-doc-icon{
    margin:0;
}


/* Modal inteligente de abonos */
.abono-modal{width:min(1040px,calc(100vw - 28px))!important;max-width:1040px!important}
.abono-modal .modal-body{padding:18px!important}
.abono-headline{display:flex;align-items:flex-start;gap:12px}
.abono-headline-icon{width:38px;height:38px;border-radius:14px;background:rgba(201,168,76,.13);color:var(--gold-dark);display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.abono-subtitle{color:var(--muted);font-size:12.5px;margin-top:3px}
.abono-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.abono-summary-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;display:flex;gap:10px;align-items:center;min-width:0}
.abono-summary-card i{width:34px;height:34px;border-radius:12px;background:#f8fafc;color:var(--gold-dark);display:grid;place-items:center}
.abono-summary-card span{display:block;color:var(--muted);font-size:11px}
.abono-summary-card strong{display:block;color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abono-summary-card .gold{color:var(--gold-dark);font-size:15px}
.abono-mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.abono-mode-tabs button{height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;font-weight:800;color:var(--muted);cursor:pointer}
.abono-mode-tabs button.active{border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.10);color:var(--gold-dark)}
.abono-layout{display:grid;grid-template-columns:1.2fr .9fr;gap:14px}
.abono-panel{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.abono-panel-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}
.abono-panel-title{font-weight:900;color:var(--text)}
.abono-table-wrap{max-height:280px;overflow:auto}
.abono-table{width:100%;border-collapse:collapse}
.abono-table th{background:#fbfcfe;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.abono-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:middle}
.abono-table tr:last-child td{border-bottom:0}
.abono-check{width:18px;height:18px;accent-color:var(--gold)}
.abono-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:800}
.abono-badge.green{background:#dcfce7;color:#166534}
.abono-badge.amber{background:#fff7ed;color:#9a3412}
.abono-badge.blue{background:#dbeafe;color:#1d4ed8}
.abono-quick{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:#fbfcfe}
.abono-quick button{height:34px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 11px;font-size:12px;font-weight:700;cursor:pointer}
.abono-apply-summary{padding:14px}
.abono-totals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.abono-total-box{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fbfcfe}
.abono-total-box span{display:block;color:var(--muted);font-size:11px}
.abono-total-box strong{display:block;margin-top:4px;font-size:16px;color:var(--text)}
.abono-info{border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.35;margin-bottom:10px}
.abono-application-list{display:grid;gap:6px;margin-bottom:10px}
.abono-application-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:12px}
.abono-application-row.partial{border-color:rgba(245,158,11,.36);background:#fffbeb}
.abono-estimated{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.10);border-radius:12px;padding:10px 12px;color:var(--gold-dark);font-weight:900}
.abono-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.abono-reference-field{display:none}
.abono-reference-field.show{display:block}
.abono-custom-concept{display:none}
.abono-custom-concept.show{display:block}
@media(max-width:860px){
    .abono-summary-grid,.abono-layout,.abono-fields{grid-template-columns:1fr}
    .abono-mode-tabs{grid-template-columns:1fr}
}




/* Selector de mensualidades / extraordinaria */
.abono-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.abono-type-option{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px 12px;display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.abono-type-option.active{border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.10)}
.abono-type-option input{margin-top:3px;accent-color:var(--gold)}
.abono-type-option strong{display:block;color:var(--text);font-size:13px}
.abono-type-option small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.abono-simple-note.amber{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
.abono-month-list{display:grid;gap:8px;margin-bottom:12px;max-height:220px;overflow:auto;padding-right:3px}
.abono-month-item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px;cursor:pointer}
.abono-month-item input{width:18px;height:18px;accent-color:var(--gold)}
.abono-month-item strong{display:block;color:var(--text);font-size:13px}
.abono-month-item small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.abono-month-item b{color:var(--text);font-size:13px;white-space:nowrap}
.abono-empty-months{border:1px dashed var(--line);border-radius:12px;padding:14px;text-align:center;color:var(--muted)}
@media(max-width:860px){.abono-type-grid{grid-template-columns:1fr}}

/* Registro de abono simplificado */
.abono-modal{width:min(760px,calc(100vw - 28px))!important;max-width:760px!important}
.abono-summary-grid.simplified{grid-template-columns:repeat(2,1fr)}
.abono-simple-panel{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px}
.abono-simple-note{border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.35;margin-bottom:12px}
.abono-fields.simple{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
.abono-fields.simple label:nth-child(3),
.abono-fields.simple .abono-reference-field,
.abono-fields.simple .abono-receipt-field{grid-column:1/-1}
.abono-receipt-field{display:none}
.abono-receipt-field.show{display:block}
.abono-receipt-input{padding:10px;background:#fff;border:1px dashed var(--line);border-radius:10px}
.abono-simple-result{margin-top:12px;border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.10);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--gold-dark);font-weight:900}
.abono-simple-result span{font-size:12px}
.abono-simple-result strong{font-size:16px}
@media(max-width:860px){
    .abono-summary-grid.simplified,.abono-fields.simple{grid-template-columns:1fr}
}

/* Ocultar pestañas de tipo de abono */
.abono-mode-tabs{display:none!important}


/* Registro de abono ultra simplificado */
.abono-modal{width:min(620px,calc(100vw - 28px))!important;max-width:620px!important}
.abono-summary-grid.simplified{display:none!important}
.abono-simple-panel.compact{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px}
.abono-mini-summary{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;font-size:12px;color:var(--muted)}
.abono-mini-summary strong{color:var(--text)}
.abono-fields.compact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:0}
.abono-fields.compact>label:first-child,
.abono-fields.compact .abono-months-section,
.abono-fields.compact .abono-extra-section,
.abono-fields.compact .abono-reference-field,
.abono-fields.compact .abono-receipt-field{grid-column:1/-1}
.abono-month-list.compact{display:grid;gap:6px;max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fbfcfe}
.abono-month-item.compact{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;border:0;border-radius:8px;background:#fff;padding:8px 9px;cursor:pointer}
.abono-month-item.compact input{width:17px;height:17px;accent-color:var(--gold)}
.abono-month-item.compact span{font-size:12px;color:var(--text);font-weight:700}
.abono-month-item.compact b{font-size:12px;color:var(--text);white-space:nowrap}
.abono-simple-result.compact{margin-top:12px;border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.10);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:12px;color:var(--gold-dark);font-weight:900}
.abono-simple-result.compact span{font-size:12px}
.abono-simple-result.compact strong{font-size:15px}
.abono-receipt-input{padding:9px;background:#fff;border:1px dashed var(--line);border-radius:10px}
@media(max-width:720px){.abono-fields.compact{grid-template-columns:1fr}}


/* Formulario de abono más claro para usuario mayor */
.abono-modal{width:min(650px,calc(100vw - 24px))!important;max-width:650px!important}
.abono-modal .modal-head h3{font-size:21px!important}
.abono-subtitle{font-size:14px!important;color:var(--text)!important}
.abono-simple-panel.compact{padding:18px!important}
.abono-mini-summary{font-size:15px!important;background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:12px!important;margin-bottom:14px!important}
.abono-fields.compact{gap:14px!important}
.abono-fields.compact label{font-size:15px!important;font-weight:900!important;color:var(--text)!important}
.abono-fields.compact input,
.abono-fields.compact select{height:46px!important;font-size:16px!important;border-radius:10px!important}
.abono-fields.compact input[type="file"]{height:auto!important;font-size:14px!important;padding:12px!important}
.abono-month-list.compact{max-height:190px!important;padding:10px!important}
.abono-month-item.compact{grid-template-columns:30px minmax(0,1fr) auto!important;padding:12px!important;border:1px solid var(--line)!important}
.abono-month-item.compact input{width:22px!important;height:22px!important}
.abono-month-item.compact span{font-size:15px!important}
.abono-month-item.compact b{font-size:15px!important;color:var(--gold-dark)!important}
.abono-simple-result.compact{font-size:16px!important;padding:14px!important}
.abono-simple-result.compact span{font-size:15px!important}
.abono-simple-result.compact strong{font-size:18px!important}
.abono-reference-field,
.abono-receipt-field{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px}


/* Ajuste compacto final: abono sin scroll largo */
.abono-modal{width:min(610px,calc(100vw - 22px))!important;max-width:610px!important}
.abono-modal .modal-body{padding:10px 12px!important;max-height:calc(100vh - 118px)!important;overflow:auto!important}
.abono-modal .modal-head{padding:10px 14px!important}
.abono-modal .modal-foot{padding:10px 14px!important}
.abono-modal .modal-head h3{font-size:18px!important}
.abono-subtitle{font-size:12px!important;line-height:1.2!important}
.abono-simple-panel.compact{padding:10px!important;border-radius:12px!important}
.abono-mini-summary{font-size:12px!important;padding:8px 10px!important;margin-bottom:8px!important;border-radius:10px!important}
.abono-fields.compact{gap:8px!important}
.abono-fields.compact label{font-size:12.5px!important;font-weight:800!important}
.abono-fields.compact input,
.abono-fields.compact select{height:36px!important;font-size:13px!important;border-radius:8px!important;padding:6px 9px!important}
.abono-fields.compact input[type="file"]{height:auto!important;font-size:12px!important;padding:8px!important}
.abono-month-list.compact{max-height:118px!important;padding:6px!important;gap:5px!important;border-radius:10px!important}
.abono-month-item.compact{grid-template-columns:22px minmax(0,1fr) auto!important;padding:6px 8px!important;border-radius:8px!important}
.abono-month-item.compact input{width:17px!important;height:17px!important}
.abono-month-item.compact span{font-size:12px!important;line-height:1.1!important}
.abono-month-item.compact b{font-size:12px!important}
.abono-simple-result.compact{margin-top:8px!important;padding:8px 10px!important;border-radius:10px!important}
.abono-simple-result.compact span{font-size:12px!important}
.abono-simple-result.compact strong{font-size:14px!important}
.abono-reference-field,
.abono-receipt-field{padding:8px!important;border-radius:10px!important}
@media(max-height:720px){
    .abono-month-list.compact{max-height:92px!important}
    .abono-mini-summary{display:flex!important}
    .abono-modal .modal-body{max-height:calc(100vh - 104px)!important}
}


/* Ajuste monto con comas y vista por tipo de abono */
.abono-total-section{display:block}
.abono-amount-display,
.abono-extra-amount{text-align:right;font-weight:900}
.abono-amount-display{background:#f8fafc!important;color:var(--gold-dark)!important}



/* Fix saldo visible y miles automáticos */
.abono-mini-summary{display:flex!important}
.abono-simple-result.compact{display:flex!important}
.abono-extra-amount,
.abono-amount-display{text-align:right!important;font-weight:900!important}
@media(max-height:720px){
    .abono-mini-summary{display:flex!important}
    .abono-simple-result.compact{display:flex!important}
}


/* Fix pestañas expediente cliente */
.ctab-panel{display:none}
.ctab-panel.active{display:block}
.ctab{cursor:pointer}


/* Edición directa de vinculación desde tarjeta */
.vinc-actions .btn-danger{
    background:#dc2626!important;
    color:#fff!important;
    border-color:#dc2626!important;
}
.modal-vinc-edit{max-width:760px}
.vinc-edit-head{
    display:grid;
    gap:3px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(201,168,76,.08);
    margin-bottom:12px;
}
.vinc-edit-head strong{color:var(--text)}
.vinc-edit-head span{font-size:12px;color:var(--muted)}
.vinc-delete-warning{
    display:grid;
    gap:7px;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(220,38,38,.35);
    background:rgba(220,38,38,.08);
}
.vinc-delete-warning strong{color:var(--text)}
.vinc-delete-warning span{font-size:13px;color:var(--muted);line-height:1.4}


/* Menú discreto de vinculación en tarjeta */
.vinc-head{position:relative}
.vinc-head-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}
.vinc-menu{
    position:relative;
    margin-left:auto;
    z-index:6;
}
.vinc-menu-trigger{
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.vinc-menu-trigger:hover{
    background:rgba(201,168,76,.10);
    color:var(--gold-dark);
    border-color:rgba(201,168,76,.45);
}
.vinc-menu-dropdown{
    position:absolute;
    top:34px;
    right:0;
    min-width:185px;
    display:none;
    padding:6px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 40px -24px rgba(15,23,42,.45);
    z-index:40;
}
.vinc-menu.open .vinc-menu-dropdown{display:grid;gap:4px}
.vinc-menu-dropdown button{
    width:100%;
    border:0;
    background:transparent;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
    text-align:left;
    padding:8px 9px;
    border-radius:9px;
    font-size:12.5px;
    font-weight:800;
    cursor:pointer;
}
.vinc-menu-dropdown button:hover{
    background:rgba(201,168,76,.09);
    color:var(--gold-dark);
}
.vinc-menu-dropdown button.danger{
    color:#dc2626;
}
.vinc-menu-dropdown button.danger:hover{
    background:rgba(220,38,38,.08);
    color:#b91c1c;
}


.contract-folder-note{
    display:flex;
    gap:8px;
    align-items:flex-start;
    margin:0 0 12px;
    padding:10px 12px;
    border:1px solid rgba(59,130,246,.24);
    background:rgba(59,130,246,.07);
    color:var(--muted);
    border-radius:12px;
    font-size:12.5px;
    line-height:1.4;
}
.contract-folder-note i{color:#2563eb;margin-top:2px}
.contract-folder-note.warn{
    border-color:rgba(217,131,19,.30);
    background:rgba(217,131,19,.08);
}
.contract-folder-note.warn i{color:var(--warning)}


.enroll-doc input[disabled]{
    accent-color:var(--success);
    opacity:.9;
}
.enroll-doc:has(input[disabled]:checked){
    border-color:rgba(22,163,74,.35);
    background:rgba(22,163,74,.05);
}

</style>
@endpush

@section('modals')
@if($isAdmin && $client->accounts->count())
    @foreach($client->accounts as $account)
        <div class="modal-backdrop" id="modal-edit-vinc-{{ $account->id }}">
            <div class="modal modal-vinc-edit">
                <div class="modal-head">
                    <h3><i class="fa-solid fa-pen text-gold"></i> Editar vinculación</h3>
                    <button class="modal-close" type="button" data-modal-close>&times;</button>
                </div>
                <form method="post" action="{{ route('accounts.update', $account) }}" data-vinc-edit-form>
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="client_id" value="{{ $client->id }}">
                    <input type="hidden" name="property_id" value="{{ $account->property_id }}">
                    <input type="hidden" name="lote_id" value="{{ $account->lote_id }}">

                    <div class="modal-body">
                        <div class="vinc-edit-head">
                            <strong>{{ $account->unit_label }}</strong>
                            <span>Actualiza las condiciones financieras y el estado de esta operación.</span>
                        </div>

                        <div class="form-grid two">
                            <label>Precio del lote *
                                <input name="total_price" type="number" step="0.01" min="0.01" value="{{ number_format((float) $account->total_price, 2, '.', '') }}" required readonly>
                            </label>
                            <label>Abonado / enganche
                                <input name="paid_amount" type="number" step="0.01" min="0" value="{{ number_format((float) $account->paid_amount, 2, '.', '') }}">
                            </label>

                            <label>Forma de pago *
                                <select name="payment_type" data-vinc-payment-type required>
                                    <option value="Contado" @selected($account->payment_type === 'Contado')>Contado</option>
                                    <option value="Plazo" @selected($account->payment_type === 'Plazo')>Aportaciones a plazo</option>
                                    <option value="Apartado" @selected($account->payment_type === 'Apartado')>Apartado de acción</option>
                                </select>
                            </label>

                            <label>Estado
                                <select name="status" data-vinc-status>
                                    @foreach($accountStatuses as $st)
                                        <option value="{{ $st }}" @selected($account->status === $st)>{{ $st }}</option>
                                    @endforeach
                                </select>
                            </label>

                            <label class="vinc-edit-plazo">Plazo en meses *
                                <input name="term_months" type="number" min="1" max="600" value="{{ $account->term_months }}">
                            </label>

                            <label class="vinc-edit-plazo">Fecha del primer pago
                                <input name="next_payment_due_on" type="date" value="{{ optional($account->next_payment_due_on)->format('Y-m-d') }}">
                            </label>

                            <label class="vinc-edit-plazo">Plan de aportación
                                <select name="plan_type" data-vinc-plan-type>
                                    <option value="Sin anualidad" @selected($account->plan_type !== 'Con anualidad')>Plan de Aportación 2 (Sin Anualidad)</option>
                                    <option value="Con anualidad" @selected($account->plan_type === 'Con anualidad')>Plan de Aportación 1 (Con Anualidad)</option>
                                </select>
                            </label>

                            <label class="vinc-edit-plazo vinc-edit-annuity">Anualidad *
                                <input name="annuity_amount" type="number" step="0.01" min="0" value="{{ number_format((float) $account->annuity_amount, 2, '.', '') }}">
                            </label>

                            <label class="vinc-edit-plazo vinc-edit-annuity">Fecha personalizada de anualidad
                                <input name="annuity_due_date" type="date" value="{{ optional($account->annuity_due_date)->format('Y-m-d') }}">
                                <small class="sub">Vacía: la anualidad se integra cada 12 meses.</small>
                            </label>

                            <label class="vinc-edit-apartado" style="grid-column:1/-1">Vencimiento del apartado *
                                <input name="reservation_expires_on" type="date" value="{{ optional($account->reservation_expires_on)->format('Y-m-d') }}">
                            </label>
                        </div>
                    </div>
                    <div class="modal-foot">
                        <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                        <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar cambios</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal-backdrop" id="modal-delete-vinc-{{ $account->id }}">
            <div class="modal narrow">
                <div class="modal-head">
                    <h3><i class="fa-solid fa-triangle-exclamation text-danger"></i> Eliminar vinculación</h3>
                    <button class="modal-close" type="button" data-modal-close>&times;</button>
                </div>
                <form method="post" action="{{ route('accounts.destroy', $account) }}">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <div class="vinc-delete-warning">
                            <strong>{{ $account->unit_label }}</strong>
                            <span>Se eliminará la vinculación, sus pagos programados y los contratos ligados a este terreno. El lote se liberará únicamente si no está asociado a otra cuenta.</span>
                        </div>
                    </div>
                    <div class="modal-foot">
                        <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                        <button class="btn btn-danger" type="submit"><i class="fa-solid fa-trash-can"></i> Eliminar vinculación</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endif

{{-- Editar cliente --}}
<div class="modal-backdrop" id="modal-edit-client">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar — {{ $client->name }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('clients.update', $client) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label style="grid-column:1/-1">Nombre *<input name="name" value="{{ $client->name }}" required></label>
                    <label>RFC<input name="rfc" value="{{ $client->rfc }}" style="text-transform:uppercase"></label>
                    <label>CURP<input name="curp" maxlength="18" value="{{ $client->curp }}" style="text-transform:uppercase"></label>
                    @php $sexoCli = in_array($client->genero ?? '', ['EL ASOCIADO','LOS ASOCIADOS','El Asociado','Los Asociados']) ? 'Masculino' : (in_array($client->genero ?? '', ['LA ASOCIADA','LAS ASOCIADAS','La Asociada','Las Asociadas']) ? 'Femenino' : ''); @endphp
                    <label>Sexo
                        <select data-sexo>
                            <option value="">— Selecciona —</option>
                            <option value="Masculino" @selected($sexoCli === 'Masculino')>Masculino</option>
                            <option value="Femenino" @selected($sexoCli === 'Femenino')>Femenino</option>
                        </select>
                    </label>
                    <label>Estado civil
                        <select name="estado_civil" data-estado-civil data-current="{{ $client->estado_civil ?? '' }}">
                            <option value="">— Selecciona —</option>
                        </select>
                    </label>
                    <label>Ocupación<input name="ocupacion" value="{{ $client->ocupacion ?? '' }}" placeholder="Ej. Comerciante, Empleado"></label>
                    <label>Tipo de identificación
                        <select name="tipo_identificacion">
                            <option value="">— Selecciona —</option>
                            @foreach(['INE vigente','Pasaporte vigente','Cédula profesional','Licencia de conducir vigente'] as $tipoId)
                                <option value="{{ $tipoId }}" @selected(($client->tipo_identificacion ?? '') === $tipoId)>{{ $tipoId }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Beneficiario sustituto (en caso de fallecimiento)<input name="beneficiario_sustituto" value="{{ $client->beneficiario_sustituto ?? '' }}" maxlength="160" placeholder="Nombre del sustituto"></label>
                    <label>Representante legal<input name="representante_legal" value="{{ $client->representante_legal ?? '' }}" maxlength="180" placeholder="Si aplica"></label>
                    <label style="grid-column:1/-1">Lugar de residencia en el extranjero<input name="residencia_extranjero" value="{{ $client->residencia_extranjero ?? '' }}" maxlength="180" placeholder="Cuando el cliente reside fuera de México"></label>
                    <label>Asesor<select name="advisor_id"><option value="">Sin asignar</option>@foreach($advisors as $a)<option value="{{ $a->id }}" @selected($client->advisor_id === $a->id)>{{ $a->name }}</option>@endforeach</select></label>
                </div>

                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Domicilio</legend>
                    @if($client->domicilio && ! ($client->calle ?? null))
                        <div class="sub" style="margin-bottom:8px;font-size:11px;color:var(--soft)"><i class="fa-solid fa-circle-info"></i> Domicilio actual: {{ $client->domicilio }}</div>
                    @endif
                    <div class="form-grid two" style="margin-top:4px">
                        <label style="grid-column:1/-1">Calle<input name="calle" value="{{ $client->calle ?? '' }}" placeholder="Av. México"></label>
                        <label>Número<input name="numero" value="{{ $client->numero ?? '' }}" placeholder="123 / S/N"></label>
                        <label>Colonia<input name="colonia" value="{{ $client->colonia ?? '' }}" placeholder="Centro"></label>
                        <label>Código Postal<input name="codigo_postal" maxlength="10" value="{{ $client->codigo_postal ?? '' }}" placeholder="63000"></label>
                        <label>Municipio<input name="municipio" value="{{ $client->municipio ?? '' }}" placeholder="Tepic"></label>
                        <label>Estado<input name="estado" value="{{ $client->estado ?? '' }}" placeholder="Nayarit"></label>
                        <label>Teléfono / Celular<input name="phone" value="{{ $client->phone }}" placeholder="3111234567"></label>
                    </div>
                </fieldset>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar cambios</button>
            </div>
        </form>
    </div>
</div>

{{-- Vincular lote/inmueble (crear cuenta) --}}
<div class="modal-backdrop" id="modal-assoc-inventory">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-link text-gold"></i> Vincular Terreno</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('accounts.store') }}" id="assoc-form">
            @csrf
            <input type="hidden" name="client_id" value="{{ $client->id }}">
            <div class="modal-body">
                <div class="form-grid two" style="align-items:start">
                    <label style="grid-column:1/-1">Proyecto *
                        <select id="assoc-project" onchange="assocLoadManzanas()" required>
                            <option value="">— Selecciona proyecto —</option>
                        </select>
                        @if(empty($inventory))
                            <span class="sub text-danger" style="display:block;margin-top:6px">No hay proyectos con lotes disponibles para vincular. Revisa que el proyecto tenga manzanas y lotes con estado Disponible o Apartado.</span>
                        @endif
                    </label>
                    <label>Manzana *
                        <select id="assoc-manzana" onchange="assocLoadLotes()" required>
                            <option value="">— Selecciona manzana —</option>
                        </select>
                    </label>
                    <label>Lote *
                        <select name="lote_id" id="assoc-lote" onchange="assocPickLote()" required>
                            <option value="">— Selecciona lote —</option>
                        </select>
                    </label>

                    <label style="grid-column:1/-1">Forma de pago *
                        <select name="payment_type" id="assoc-type" onchange="assocTogglePlan()" required>
                            <option value="Contado">Contado</option>
                            <option value="Plazo">Aportaciones a plazo</option>
                        </select>
                        <small class="sub">Los apartados se crean desde el módulo Apartados.</small>
                    </label>

                    <label>Precio del lote *<input name="total_price" id="assoc-total" type="number" step="0.01" min="0" required readonly oninput="assocCalc()"><small class="sub">Se toma del lote seleccionado.</small></label>

                    {{-- Enganche para venta a plazo --}}
                    <label class="assoc-pay" style="display:none">Enganche<input name="paid_amount" id="assoc-paid" type="number" step="0.01" min="0" value="0" oninput="assocCalc()"></label>
                    <label class="assoc-pay" style="display:none">Fecha del enganche<input name="enganche_date" type="date" value="{{ now()->format('Y-m-d') }}"></label>
                    <label class="assoc-pay" style="display:none">Forma de pago del enganche
                        <select name="enganche_method">
                            <option>Efectivo</option>
                            <option>Deposito</option>
                            <option>Transferencia</option>
                        </select>
                    </label>
                    <label class="assoc-fin" style="display:none">Plazo (meses) *<input name="term_months" id="assoc-term" type="number" min="1" max="600" placeholder="Ej. 24" oninput="assocCalc()"></label>
                    <label class="assoc-fin" style="display:none">Plan de financiamiento *
                        <select name="plan_type" id="assoc-plan" onchange="assocTogglePlan()">
                            <option value="Sin anualidad">Plan de Aportación 2 (Sin Anualidad)</option>
                            <option value="Con anualidad">Plan de Aportación 1 (Con Anualidad)</option>
                        </select>
                    </label>
                    <label class="assoc-fin assoc-annuity" style="display:none">Anualidad (monto) *<input name="annuity_amount" id="assoc-annuity" type="number" step="0.01" min="0" placeholder="Ej. 10000" oninput="assocCalc()"></label>
                    <label class="assoc-fin assoc-annuity" style="display:none">Fecha personalizada de anualidad<input name="annuity_due_date" id="assoc-annuity-date" type="date" oninput="assocCalc()"><small class="sub">Vacía: se suma cada 12 meses junto con la mensualidad.</small></label>
                    <label class="assoc-fin" style="display:none">Fecha del primer pago<input name="next_payment_due_on" id="assoc-first" type="date" oninput="assocCalc()"></label>

                    <div class="assoc-summary" style="display:none;grid-column:1/-1;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.25);border-radius:12px;padding:12px 14px">
                        <div class="sub" style="margin-bottom:2px">Mensualidad estimada</div>
                        <div id="assoc-monthly" class="metric-val text-gold" style="font-size:24px">$0.00</div>
                        <div class="sub" id="assoc-monthly-detail" style="font-size:11px;margin-top:2px">Captura el plazo para calcular la mensualidad.</div>
                    </div>

                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-link"></i> Vincular Terreno</button>
            </div>
        </form>
    </div>
</div>

{{-- Registrar abono por cuenta --}}
@foreach($client->accounts as $account)

<div class="modal-backdrop" id="modal-abono-{{ $account->id }}">
    <div class="modal abono-modal">
        <div class="modal-head">
            <div class="abono-headline">
                <div class="abono-headline-icon"><i class="fa-solid fa-hand-holding-dollar"></i></div>
                <div>
                    <h3 style="margin:0">Registrar abono</h3>
                    <div class="abono-subtitle">Registra el monto recibido; el sistema lo aplicará automáticamente a las aportaciones más antiguas.</div>
                </div>
            </div>
            <button class="modal-close" type="button" data-modal-close>&times;</button>
        </div>

        @php
            $abonoInstallments = $account->installments
                ->filter(fn ($i) => in_array($i->status, ['Pendiente', 'Parcial'], true))
                ->sortBy('number')
                ->values();
            $abonoNext = $abonoInstallments->first();
            $abonoUnit = $account->unit_label;
            $abonoProject = $account->lote?->project?->name
                ?? $account->lote?->manzana?->project?->name
                ?? $account->property?->name
                ?? '—';
        @endphp

        <form method="post" action="{{ route('payments.store') }}" class="abono-smart-form" data-account-id="{{ $account->id }}" data-balance="{{ (float) $account->balance }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="customer_account_id" value="{{ $account->id }}">
            <input type="hidden" name="status" value="Aplicado">

            <div class="modal-body">
                <div class="abono-simple-panel compact">
                    <div class="abono-mini-summary">
                        <span><strong>Cliente:</strong> {{ $account->client?->name ?? 'Cliente sin nombre' }}</span>
                        <span><strong>Saldo pendiente:</strong> ${{ number_format((float) $account->balance, 2) }}</span>
                    </div>

                    <div class="abono-fields compact">
                        <label>Tipo de abono *
                            <select class="abono-mode-select" name="payment_mode" required>
                                <option value="mensualidades">Pagar mensualidad(es)</option>
                                <option value="extraordinario">Pagar otra cantidad / extraordinario</option>
                            </select>
                        </label>

                        <div class="abono-months-section">
                            <label>Mensualidades a pagar *</label>
                            <div class="abono-month-list compact">
                                @forelse($abonoInstallments as $inst)
                                    @php
                                        $instPaid = (float) ($inst->paid_amount ?? 0);
                                        $instPending = max(0, (float) $inst->amount - $instPaid);
                                        $isPartial = $inst->status === 'Parcial';
                                    @endphp
                                    <label class="abono-month-item compact">
                                        <input class="abono-check" type="checkbox" name="installment_ids[]" value="{{ $inst->id }}"
                                            data-number="{{ $inst->number }}"
                                            data-amount="{{ $instPending }}"
                                            data-original="{{ (float) $inst->amount }}"
                                            data-paid="{{ $instPaid }}"
                                            data-label="Mes #{{ $inst->number }}"
                                            @checked($loop->first)>
                                        <span>Mes #{{ $inst->number }}{{ $isPartial ? ' · Parcial' : '' }}</span>
                                        <b>${{ number_format($instPending, 2) }}</b>
                                    </label>
                                @empty
                                    <div class="abono-empty-months">No hay meses pendientes.</div>
                                @endforelse
                            </div>
                        </div>

                        <label class="abono-extra-section" style="display:none">Monto extraordinario *
                            <input class="abono-extra-amount" type="text" inputmode="decimal" autocomplete="off" placeholder="Escriba la cantidad">
                        </label>

                        <label class="abono-total-section">Total a pagar *
                            <input class="abono-amount-display" type="text" inputmode="decimal" autocomplete="off" value="{{ $abonoNext ? number_format(max(0, (float) $abonoNext->amount - (float) ($abonoNext->paid_amount ?? 0)), 2, '.', ',') : '' }}" readonly>
                        </label>
                        <input class="abono-amount" name="amount" type="hidden" value="{{ $abonoNext ? number_format(max(0, (float) $abonoNext->amount - (float) ($abonoNext->paid_amount ?? 0)), 2, '.', '') : '' }}">

                        <label>Fecha del pago *
                            <input name="payment_date" type="date" value="{{ now()->format('Y-m-d') }}" required>
                        </label>

                        <label>Forma de pago *
                            <select class="abono-method" name="method" required>
                                <option selected>Efectivo</option>
                                <option>Deposito</option>
                                <option>Transferencia</option>
                            </select>
                        </label>

                        <label class="abono-reference-field show">Referencia / folio
                            <input class="abono-reference" name="reference" placeholder="Folio o referencia">
                        </label>

                        <label class="abono-receipt-field show">Subir comprobante
                            <input class="abono-receipt-input" name="transfer_receipt" type="file" accept=".jpg,.jpeg,.png,.webp,.pdf">
                        </label>

                        <input class="abono-concept" type="hidden" name="concept" value="{{ $abonoNext ? 'Mes #'.$abonoNext->number : 'Abono' }}">
                    </div>

                    <div class="abono-simple-result compact">
                        <span>Saldo después del abono</span>
                        <strong data-abono-new-balance>${{ number_format((float) $account->balance, 2) }}</strong>
                    </div>
                </div>
            </div>

            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-success" type="submit"><i class="fa-solid fa-check"></i> Registrar abono</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection

@push('scripts')

<script>
function docCardClick(event, el){
    const card = el.closest('.doc-card');
    if (!card) return;
    const grid = card.closest('#doc-grid');
    const checkbox = card.querySelector('.doc-check');

    if (grid && grid.classList.contains('selecting')) {
        if (checkbox) {
            checkbox.checked = !checkbox.checked;
            updateDocSel();
        }
        return;
    }

    const url = card.dataset.url;
    if (url) window.open(url, '_blank', 'noopener');
}

function printDoc(url){
    if (!url) return;
    window.open(url, '_blank', 'noopener');
}

function toggleDocSelect(){
    const grid = document.getElementById('doc-grid');
    const btn = document.getElementById('doc-select-toggle');
    const allBtn = document.getElementById('doc-select-all-btn');
    const deleteBtn = document.getElementById('doc-delete-btn');
    if (!grid) return;
    const selecting = !grid.classList.contains('selecting');
    grid.classList.toggle('selecting', selecting);
    if (btn) btn.innerHTML = selecting
        ? '<i class="fa-solid fa-xmark"></i> Cancelar selección'
        : '<i class="fa-solid fa-square-check"></i> Seleccionar';
    if (allBtn) allBtn.style.display = selecting ? '' : 'none';
    if (deleteBtn) deleteBtn.style.display = selecting ? '' : 'none';
    if (!selecting) {
        grid.querySelectorAll('.doc-check').forEach(c => c.checked = false);
    }
    updateDocSel();
}

function selectAllDocs(){
    const grid = document.getElementById('doc-grid');
    if (!grid) return;
    const checks = [...grid.querySelectorAll('.doc-check')];
    const allSelected = checks.length > 0 && checks.every(c => c.checked);
    checks.forEach(c => c.checked = !allSelected);
    updateDocSel();
}

function updateDocSel(){
    const grid = document.getElementById('doc-grid');
    const deleteBtn = document.getElementById('doc-delete-btn');
    const countEl = document.getElementById('doc-sel-count');
    const count = grid ? grid.querySelectorAll('.doc-check:checked').length : 0;
    if (countEl) countEl.textContent = String(count);
    if (deleteBtn) deleteBtn.disabled = count === 0;
}

function confirmBulkDocDelete(){
    const grid = document.getElementById('doc-grid');
    const count = grid ? grid.querySelectorAll('.doc-check:checked').length : 0;
    if (count === 0) {
        alert('Selecciona al menos un documento para eliminar.');
        return false;
    }
    return confirm('¿Eliminar ' + count + ' documento(s) seleccionado(s) del expediente? Esta acción no se puede deshacer.');
}

function askPaymentCancellationReason(form, ev){
    if (form.dataset.approvalSubmitting === '1') return true;
    if (ev) { ev.preventDefault(); ev.stopPropagation(); }
    const input = form.querySelector('[name="cancellation_reason"]');
    const detail = form.dataset.cancelDetail || '';
    const setHidden = function(name, val){
        if (!form.querySelector('input[name="'+name+'"]')) {
            const h = document.createElement('input'); h.type = 'hidden'; h.name = name; h.value = val; form.appendChild(h);
        }
    };
    const finish = function(reason){
        if (input) input.value = reason;
        setHidden('_edit_approval_reason', reason);
        if (detail) setHidden('_edit_approval_details', detail);
        form.dataset.approvalSubmitting = '1';
        if (form.requestSubmit) form.requestSubmit(); else form.submit();
    };
    if (input && input.value && input.value.trim().length >= 5) { finish(input.value.trim()); return false; }
    askReason('cancelar el abono', finish, 'Escribe el motivo de la cancelación de este abono (mínimo 5 caracteres). Se revertirá saldo, mensualidades y balance, y se enviará al administrador para autorización.');
    return false;
}

(function(){
    document.addEventListener('click', function(e){
        const trigger = e.target.closest('[data-vinc-menu-toggle]');

        document.querySelectorAll('.vinc-menu.open').forEach(menu => {
            if (!trigger || !menu.contains(trigger)) {
                menu.classList.remove('open');
            }
        });

        if (trigger) {
            e.preventDefault();
            e.stopPropagation();
            trigger.closest('.vinc-menu')?.classList.toggle('open');
        }
    });

    document.addEventListener('click', function(e){
        const option = e.target.closest('.vinc-menu-dropdown [data-modal-open]');
        if (option) {
            option.closest('.vinc-menu')?.classList.remove('open');
        }
    });
})();
</script>

<script>
(function(){
    function syncVincEditForm(form){
        const type = form.querySelector('[data-vinc-payment-type]')?.value;
        const plan = form.querySelector('[data-vinc-plan-type]')?.value;
        const isPlazo = type === 'Plazo';
        const isApartado = type === 'Apartado';
        const hasAnnuity = isPlazo && plan === 'Con anualidad';

        form.querySelectorAll('.vinc-edit-plazo').forEach(field => {
            const annuityField = field.classList.contains('vinc-edit-annuity');
            const visible = isPlazo && (!annuityField || hasAnnuity);
            field.style.display = visible ? '' : 'none';
            field.querySelectorAll('input,select').forEach(input => input.disabled = !visible);
        });
        form.querySelectorAll('.vinc-edit-apartado').forEach(field => {
            field.style.display = isApartado ? '' : 'none';
            field.querySelectorAll('input,select').forEach(input => input.disabled = !isApartado);
        });

        const term = form.querySelector('[name="term_months"]');
        const annuity = form.querySelector('[name="annuity_amount"]');
        const reservation = form.querySelector('[name="reservation_expires_on"]');
        if (term) term.required = isPlazo;
        if (annuity) annuity.required = hasAnnuity;
        if (reservation) reservation.required = isApartado;

        const status = form.querySelector('[data-vinc-status]');
        if (status) {
            if (isApartado) status.value = 'Apartado';
            else if (status.value === 'Apartado') status.value = 'Al corriente';
            status.disabled = isApartado;
        }
    }

    document.querySelectorAll('[data-vinc-edit-form]').forEach(form => {
        form.addEventListener('change', event => {
            if (event.target.matches('[data-vinc-payment-type],[data-vinc-plan-type]')) syncVincEditForm(form);
        });
        syncVincEditForm(form);
    });
})();
</script>


<script>
(function(){
    function activateClientTab(tabName){
        if (!tabName) return;

        document.querySelectorAll('.ctab').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.tab === tabName);
        });

        document.querySelectorAll('.ctab-panel').forEach(panel => {
            panel.classList.toggle('active', panel.id === 'tab-' + tabName);
        });

        if (history.replaceState) {
            history.replaceState(null, '', '#' + tabName);
        } else {
            location.hash = tabName;
        }
    }

    document.addEventListener('click', function(e){
        const tab = e.target.closest('.ctab');
        if (!tab) return;

        e.preventDefault();
        activateClientTab(tab.dataset.tab);
    });

    function normalizeMovementText(value){
        return String(value || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();
    }

    function activeMovementScope(){
        return document.querySelector('#tab-movimientos .card');
    }

    function applyMovementFilters(){
        const scope = activeMovementScope();
        if (!scope) return;

        const activeLote = scope.querySelector('.mov-subtab.active')?.dataset.mov || 'todos';
        const query = normalizeMovementText(scope.querySelector('#mov-search-input')?.value || '');
        const kind = scope.querySelector('#mov-kind-filter')?.value || '';
        const status = scope.querySelector('#mov-status-filter')?.value || '';
        const from = scope.querySelector('#mov-date-from')?.value || '';
        const to = scope.querySelector('#mov-date-to')?.value || '';
        let visible = 0;
        let total = 0;

        scope.querySelectorAll('.tl-item').forEach(item => {
            total++;
            const itemDate = item.dataset.date || '';
            const matchesLote = activeLote === 'todos' || item.dataset.mov === activeLote;
            const matchesQuery = !query || normalizeMovementText(item.dataset.search || '').includes(query);
            const matchesKind = !kind || item.dataset.kind === kind;
            const matchesStatus = !status || item.dataset.status === status;
            const matchesFrom = !from || (itemDate && itemDate >= from);
            const matchesTo = !to || (itemDate && itemDate <= to);
            const show = matchesLote && matchesQuery && matchesKind && matchesStatus && matchesFrom && matchesTo;
            item.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        const count = scope.querySelector('#mov-filter-count');
        if (count) {
            count.textContent = visible === total
                ? `${total} movimiento(s)`
                : `${visible} de ${total} movimiento(s)`;
        }

        const empty = scope.querySelector('#mov-empty-filter');
        if (empty) empty.style.display = visible === 0 ? 'block' : 'none';
    }

    // Sub-pestañas y filtros de Movimientos: solo historial de lotes.
    document.addEventListener('click', function(e){
        const clear = e.target.closest('#mov-clear-filters');
        if (clear) {
            const scope = clear.closest('.card');
            if (!scope) return;
            scope.querySelectorAll('#mov-filters input').forEach(input => input.value = '');
            scope.querySelectorAll('#mov-filters select').forEach(select => select.value = '');
            applyMovementFilters();
            return;
        }

        const sub = e.target.closest('.mov-subtab');
        if (!sub) return;
        const scope = sub.closest('.card');
        if (!scope) return;
        scope.querySelectorAll('.mov-subtab').forEach(b => b.classList.toggle('active', b === sub));
        applyMovementFilters();
    });

    document.addEventListener('input', function(e){
        if (e.target.closest('#mov-filters')) applyMovementFilters();
    });

    document.addEventListener('change', function(e){
        if (e.target.closest('#mov-filters')) applyMovementFilters();
    });

    document.addEventListener('DOMContentLoaded', function(){
        const fromHash = location.hash ? location.hash.replace('#', '') : '';
        const initial = document.querySelector('.ctab[data-tab="' + fromHash + '"]')
            ? fromHash
            : (document.querySelector('.ctab.active')?.dataset.tab || document.querySelector('.ctab')?.dataset.tab);

        activateClientTab(initial);
        applyMovementFilters();
    });
})();
</script>

<script>
const ASSOC_INV = @json($inventory ?? []);
function assocById(id){ return document.getElementById(id); }
function assocMoney(value){
    return Number(value || 0).toLocaleString('es-MX', {style:'currency', currency:'MXN'});
}
// Lee un input numérico tolerando comas de miles (el formateador global agrega "1,000").
function assocNum(id){ return Number(String(assocById(id)?.value ?? '').replace(/,/g,'').replace(/[^0-9.\-]/g,'')) || 0; }
function assocInitInventory(){
    const project = assocById('assoc-project');
    if (!project || project.dataset.ready === '1') return;

    project.innerHTML = '<option value="">— Selecciona proyecto —</option>';

    if (!Array.isArray(ASSOC_INV) || ASSOC_INV.length === 0) {
        const o = document.createElement('option');
        o.value = '';
        o.textContent = 'No hay proyectos con lotes disponibles';
        project.appendChild(o);
        project.disabled = true;
        return;
    }

    ASSOC_INV.forEach(p => {
        const option = document.createElement('option');
        option.value = p.id;
        option.textContent = p.name;
        project.appendChild(option);
    });

    project.dataset.ready = '1';
}
function assocLoadManzanas(){
    const projectId = assocById('assoc-project')?.value;
    const project = ASSOC_INV.find(p => String(p.id) === String(projectId));
    const manzana = assocById('assoc-manzana');
    const lote = assocById('assoc-lote');

    if (manzana) manzana.innerHTML = '<option value="">— Selecciona manzana —</option>';
    if (lote) lote.innerHTML = '<option value="">— Selecciona lote —</option>';

    if (!project || !manzana) return;

    (project.manzanas || []).forEach(m => {
        const option = document.createElement('option');
        option.value = m.id;
        option.textContent = 'Mz ' + (m.nombre || m.id);
        manzana.appendChild(option);
    });
}
function assocLoadLotes(){
    const projectId = assocById('assoc-project')?.value;
    const manzanaId = assocById('assoc-manzana')?.value;
    const project = ASSOC_INV.find(p => String(p.id) === String(projectId));
    const manzana = project ? (project.manzanas || []).find(m => String(m.id) === String(manzanaId)) : null;
    const lote = assocById('assoc-lote');

    if (!lote) return;
    lote.innerHTML = '<option value="">— Selecciona lote —</option>';

    if (!manzana) return;

    (manzana.lotes || []).forEach(l => {
        const option = document.createElement('option');
        option.value = l.id;
        option.dataset.price = l.precio || 0;
        option.textContent = 'Lote ' + l.numero + ' · ' + assocMoney(l.precio || 0) + (l.estado && l.estado !== 'Disponible' ? ' (' + l.estado + ')' : '');
        lote.appendChild(option);
    });
}
function assocPickLote(){
    const lote = assocById('assoc-lote');
    const option = lote?.options[lote.selectedIndex];
    const total = assocById('assoc-total');
    if (option?.dataset.price && total) {
        total.value = Number(option.dataset.price || 0).toFixed(2);
    }
    assocCalc();
}
function assocTogglePlan(){
    const type = assocById('assoc-type')?.value;
    const isPlazo = type === 'Plazo';
    const isApartado = type === 'Apartado';
    const conAnualidad = isPlazo && assocById('assoc-plan')?.value === 'Con anualidad';

    document.querySelectorAll('.assoc-fin').forEach(el => el.style.display = isPlazo ? '' : 'none');
    document.querySelectorAll('.assoc-pay').forEach(el => el.style.display = (isPlazo || isApartado) ? '' : 'none');
    document.querySelectorAll('.assoc-summary').forEach(el => el.style.display = isPlazo ? '' : 'none');
    document.querySelectorAll('.assoc-apartado').forEach(el => el.style.display = isApartado ? '' : 'none');
    // Anualidad (monto) y fecha personalizada de anualidad: solo en plan Con Anualidad.
    document.querySelectorAll('.assoc-annuity').forEach(el => el.style.display = conAnualidad ? '' : 'none');

    const term = assocById('assoc-term');
    const annuity = assocById('assoc-annuity');
    const reservation = assocById('assoc-reservation');
    if (term) term.required = isPlazo;
    if (annuity) annuity.required = conAnualidad;
    if (reservation) reservation.required = isApartado;
    assocCalc();
}
function assocCalc(){
    const total = assocNum('assoc-total');
    const paid = assocNum('assoc-paid');
    const term = assocNum('assoc-term');
    const annuity = assocNum('assoc-annuity');
    const annuityDate = assocById('assoc-annuity-date')?.value || '';
    const plan = assocById('assoc-plan')?.value || 'Sin anualidad';
    const monthly = assocById('assoc-monthly');
    const detail = assocById('assoc-monthly-detail');

    const financed = Math.max(0, total - paid);
    let annualTotal = 0;
    const customAnnuality = plan === 'Con anualidad' && annuity > 0 && annuityDate;
    if (plan === 'Con anualidad' && term > 0 && annuity > 0 && !customAnnuality) {
        annualTotal = Math.floor(term / 12) * annuity;
    }

    const base = customAnnuality ? financed : Math.max(0, financed - annualTotal);
    const monthlyAmount = term > 0 ? (base / term) : 0;

    if (monthly) monthly.textContent = assocMoney(monthlyAmount);
    if (detail) detail.textContent = term > 0
        ? 'Financiado: ' + assocMoney(financed)
            + (customAnnuality ? ' · Anualidad en hoja separada desde ' + annuityDate : (annualTotal > 0 ? ' · Anualidades integradas: ' + assocMoney(annualTotal) : ''))
        : 'Captura el plazo para calcular la mensualidad.';
}
document.addEventListener('DOMContentLoaded', () => {
    assocInitInventory();
    assocTogglePlan();
});
document.addEventListener('click', e => {
    if (e.target.closest('[data-modal-open="modal-assoc-inventory"]')) {
        setTimeout(() => {
            assocInitInventory();
            assocTogglePlan();
        }, 50);
    }
});
</script>

<script>

/* Modal inteligente de abonos */
(function(){
    const money = value => Number(value || 0).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2});

    function cleanMoney(value){
        const raw = String(value || '').replace(/,/g, '').replace(/[^0-9.]/g, '');
        const firstDot = raw.indexOf('.');
        if (firstDot === -1) return raw;
        return raw.slice(0, firstDot + 1) + raw.slice(firstDot + 1).replace(/\./g, '');
    }

    function parseMoney(value){
        const clean = cleanMoney(value);
        return Number(clean || 0);
    }

    function formatTyping(value){
        const clean = cleanMoney(value);
        if (clean === '') return '';

        const hasDot = clean.includes('.');
        const parts = clean.split('.');
        const integer = parts[0] || '0';
        const decimals = parts[1] ?? '';

        const formattedInteger = Number(integer || 0).toLocaleString('es-MX');
        if (hasDot) return formattedInteger + '.' + decimals.slice(0, 2);
        return formattedInteger;
    }

    function rows(form){ return [...form.querySelectorAll('.abono-check')]; }
    function checkedRows(form){ return rows(form).filter(i => i.checked); }
    function getMode(form){ return form.querySelector('.abono-mode-select')?.value || 'mensualidades'; }

    function buildConcept(form){
        const selected = checkedRows(form);
        if (!selected.length) return 'Abono';
        return selected.length === 1 ? (selected[0].dataset.label || 'Mes') : 'Pago de mensualidades';
    }

    function setAmount(form, value){
        const hidden = form.querySelector('.abono-amount');
        const display = form.querySelector('.abono-amount-display');
        const numeric = Math.max(0, Number(value || 0));
        if (hidden) hidden.value = numeric ? numeric.toFixed(2) : '';
        if (display) display.value = numeric ? money(numeric) : '';
    }

    function syncReference(form){
        const method = form.querySelector('.abono-method')?.value || '';
        const show = method === 'Transferencia' || method === 'Deposito';

        const refWrap = form.querySelector('.abono-reference-field');
        const refInput = form.querySelector('.abono-reference');
        const receiptWrap = form.querySelector('.abono-receipt-field');
        const receiptInput = form.querySelector('.abono-receipt-input');

        if (refWrap) refWrap.classList.toggle('show', show);
        if (refInput) {
            refInput.disabled = !show;
            if (!show) refInput.value = '';
        }

        if (receiptWrap) receiptWrap.classList.toggle('show', show);
        if (receiptInput) {
            receiptInput.disabled = !show;
            if (!show) receiptInput.value = '';
        }
    }

    function updateSaldo(form){
        const balance = Number(form.dataset.balance || 0);
        const amount = Number(form.querySelector('.abono-amount')?.value || 0);
        const label = form.querySelector('[data-abono-new-balance]');
        if (label) label.textContent = '$' + money(Math.max(0, balance - amount));
    }

    function sync(form){
        syncReference(form);

        const mode = getMode(form);
        const months = form.querySelector('.abono-months-section');
        const extra = form.querySelector('.abono-extra-section');
        const totalSection = form.querySelector('.abono-total-section');
        const extraAmount = form.querySelector('.abono-extra-amount');
        const concept = form.querySelector('.abono-concept');

        if (months) months.style.display = mode === 'mensualidades' ? '' : 'none';
        if (extra) extra.style.display = mode === 'extraordinario' ? '' : 'none';
        if (totalSection) totalSection.style.display = mode === 'mensualidades' ? '' : 'none';

        rows(form).forEach(input => {
            input.disabled = mode !== 'mensualidades';
            if (mode !== 'mensualidades') input.checked = false;
        });

        if (extraAmount) extraAmount.disabled = mode !== 'extraordinario';

        if (mode === 'mensualidades') {
            const total = checkedRows(form).reduce((sum, input) => sum + Number(input.dataset.amount || 0), 0);
            setAmount(form, total);
            if (concept) concept.value = buildConcept(form);
        } else {
            const value = parseMoney(extraAmount?.value || '');
            setAmount(form, value);
            if (concept) concept.value = 'Abono extraordinario';
        }

        updateSaldo(form);
    }

    document.addEventListener('change', e => {
        const form = e.target.closest('.abono-smart-form');
        if (form) sync(form);
    });

    document.addEventListener('input', e => {
        const form = e.target.closest('.abono-smart-form');
        if (!form) return;

        if (e.target.matches('.abono-extra-amount')) {
            e.target.value = formatTyping(e.target.value);
            const value = parseMoney(e.target.value);
            const hidden = form.querySelector('.abono-amount');
            if (hidden) hidden.value = value ? value.toFixed(2) : '';
            updateSaldo(form);
            return;
        }

        sync(form);
    });

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.abono-smart-form').forEach(form => sync(form));
    });
})();
</script>
@endpush

@push('scripts')
<script>
(function(){
    // Sexo controla las opciones de Género y Estado civil (forma correcta por género).
    const GEN = { Masculino:['EL ASOCIADO','LOS ASOCIADOS'], Femenino:['LA ASOCIADA','LAS ASOCIADAS'] };
    const EST = { Masculino:['Soltero','Casado','Unión libre','Divorciado','Viudo'], Femenino:['Soltera','Casada','Unión libre','Divorciada','Viuda'] };
    function fill(sel, opts, preserve){
        if(!sel) return;
        const cur = preserve ? (sel.getAttribute('data-current') || '') : '';
        sel.innerHTML = '<option value="">— Selecciona —</option>';
        let matched = false;
        (opts||[]).forEach(o => { const op=document.createElement('option'); op.value=o; op.textContent=o; if(o===cur){op.selected=true;matched=true;} sel.appendChild(op); });
        if(preserve && cur && !matched){ const op=document.createElement('option'); op.value=cur; op.textContent=cur; op.selected=true; sel.appendChild(op); }
    }
    function sync(form, preserve){
        if(!form) return;
        const sx = form.querySelector('[data-sexo]'); if(!sx) return;
        fill(form.querySelector('[data-genero]'), GEN[sx.value] || [], preserve);
        fill(form.querySelector('[data-estado-civil]'), EST[sx.value] || [], preserve);
    }
    function initAll(){ document.querySelectorAll('[data-sexo]').forEach(sx => sync(sx.closest('form'), true)); }
    if(document.readyState !== 'loading') initAll(); else document.addEventListener('DOMContentLoaded', initAll);
    document.addEventListener('change', e => { if(e.target && e.target.hasAttribute('data-sexo')) sync(e.target.closest('form'), false); });
})();
</script>
@endpush