@extends('layouts.app', ['title' => term('nav_accounts','Cuentas de clientes')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-account"><i class="fa-solid fa-file-invoice-dollar"></i>Nueva cuenta</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-file-invoice-dollar"></i><div class="metric-val">{{ $accounts->count() }}</div><div class="metric-label">Cuentas</div></div>
    <div class="metric"><i class="fa-solid fa-coins"></i><div class="metric-val text-gold">${{ number_format($totals['total'],0) }}</div><div class="metric-label">Vendido</div></div>
    <div class="metric"><i class="fa-solid fa-cash-register"></i><div class="metric-val text-success">${{ number_format($totals['paid'],0) }}</div><div class="metric-label">Cobrado</div></div>
    <div class="metric"><i class="fa-solid fa-triangle-exclamation"></i><div class="metric-val text-danger">${{ number_format($totals['balance'],0) }}</div><div class="metric-label">Saldo · {{ $totals['overdue'] }} vencidas</div></div>
</div>

<div class="toolbar">
    <form class="filter-bar" method="get">
        <div class="fb-search">
            <span class="fb-search-icon"><i class="fa-solid fa-magnifying-glass"></i></span>
            <input name="search" placeholder="Buscar cuenta por cliente…" value="{{ $filters['search'] ?? '' }}">
        </div>
        <div class="fb-divider"></div>
        <label class="fb-field">
            <span class="fb-label">Estado</span>
            <select name="status">
                <option value="">Todos los estados</option>
                @foreach(['Al corriente','Adelantado','Vencido','Liquidado','Pausado'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ $s }}</option>
                @endforeach
            </select>
        </label>
        <div class="fb-actions">
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-magnifying-glass"></i> Buscar</button>
            @if(($filters['search'] ?? null) || ($filters['status'] ?? null))<a class="btn btn-ghost" href="{{ route('accounts.index') }}" data-tip="Limpiar"><i class="fa-solid fa-xmark"></i></a>@endif
        </div>
    </form>
</div>

<style>
.accounts-vertical-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:18px;
    align-items:stretch;
}
.account-v-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);
}
.account-v-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 62px -34px rgba(15,23,42,.85);
    border-color:rgba(201,168,76,.36);
}
.account-v-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;
}
.account-v-status{
    display:inline-flex;
    margin-bottom:12px;
    box-shadow:0 12px 28px -18px rgba(0,0,0,.35);
}
.account-v-menu{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
}
.account-v-client{
    font-family:var(--display,inherit);
    font-size:19px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.15;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding-right:34px;
}
.account-v-unit{
    font-size:12.5px;
    color:var(--soft);
    margin-top:7px;
    line-height:1.35;
    padding-right:24px;
}
.account-v-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:13px;
    flex:1;
}
.account-v-plan{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.account-v-plan .pill{
    white-space:normal;
    line-height:1.25;
}
.account-v-stats{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}
.account-v-stats>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border-bottom:1px solid var(--line);
}
.account-v-stats>div:last-child{
    border-bottom:0;
    background:rgba(201,168,76,.08);
}
.account-v-stats .sub{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0;
    color:var(--soft);
    font-weight:800;
}
.account-v-stats strong{
    font-size:16px;
    text-align:right;
}
.account-v-progress{
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}
.account-v-progress .progress{
    height:9px;
    margin-top:8px;
    border-radius:999px;
    overflow:hidden;
}
.account-v-next{
    font-size:11.8px;
    color:var(--soft);
    line-height:1.35;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(15,23,42,.035);
}
.account-v-actions{
    display:grid;
    grid-template-columns:1fr 44px 44px;
    gap:8px;
    margin-top:auto;
}
.account-v-actions .btn{
    min-height:40px;
    justify-content:center;
}
.account-v-actions .btn-success{
    width:100%;
}
@media(max-width:700px){
    .accounts-vertical-grid{grid-template-columns:1fr}
    .account-v-card{min-height:auto}
}

/* Icono PDF real para Plan de aportaciones: no usa PNG 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}
}

</style>

<div class="accounts-vertical-grid">
@forelse($accounts as $account)
    @php
        $statusClass = $account->status === 'Vencido'
            ? 'red'
            : ($account->status === 'Liquidado'
                ? 'green'
                : ($account->status === 'Adelantado' ? 'blue' : 'amber'));
    @endphp

    <div class="account-v-card">
        <div class="account-v-head">
            <span class="badge {{ $statusClass }} account-v-status">{{ $account->status }}</span>

            <div class="kebab account-v-menu">
                <button class="kebab-trigger" type="button" data-kebab data-tip="Más acciones"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                <div class="kebab-menu">
                    <div class="group-label">Cuenta</div>
                    <button type="button" data-modal-open="modal-pay-{{ $account->id }}"><i class="fa-solid fa-coins"></i> Registrar abono</button>
                    <button type="button" data-modal-open="modal-history-{{ $account->id }}"><i class="fa-solid fa-clock-rotate-left"></i> Ver historial</button>
                    @if($account->payment_type === 'Plazo')
                        <a target="_blank" href="{{ route('accounts.payment-plan', $account) }}"><span class="pdf-doc-icon" aria-hidden="true"><span>PDF</span></span> Plan de aportaciones</a>
                    @endif
                    <button type="button" data-modal-open="modal-edit-account-{{ $account->id }}"><i class="fa-solid fa-pen"></i> Editar cuenta</button>
                    <hr>
                    <form method="post" action="{{ route('accounts.destroy', $account) }}" onsubmit="return confirm('¿Eliminar cuenta?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar cuenta</button>
                    </form>
                </div>
            </div>

            <div class="account-v-client" title="{{ $account->client?->name }}">{{ $account->client?->name ?? 'Cliente sin nombre' }}</div>
            <div class="account-v-unit">Cuenta #{{ $account->id }} · {{ $account->unit_label }}</div>
        </div>

        <div class="account-v-body">
            <div class="account-v-plan">
                @if($account->payment_type)
                    <span class="pill">
                        <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>
                @endif

                @if($account->payment_type === 'Plazo' && $account->monthly_payment)
                    <span class="pill gold">${{ number_format((float) $account->monthly_payment, 2) }}/mes</span>
                @endif
            </div>

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

            <div class="account-v-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>

            <div class="account-v-next">
                <i class="fa-solid fa-calendar text-gold"></i>
                Próximo pago:
                <strong>${{ number_format((float) $account->next_payment_amount,0) }}</strong>
                · {{ optional($account->next_payment_due_on)->format('d/m/Y') ?: '—' }}
                @php
                    // Sólo abonos activos: los cancelados no se cuentan.
                    $activePayments = $account->payments->filter(fn ($p) => ($p->status ?? '') !== 'Cancelado');
                    $lastActivePayment = $activePayments->sortByDesc('payment_date')->first();
                @endphp
                @if($activePayments->count())
                    <br><i class="fa-solid fa-receipt text-gold"></i>
                    {{ $activePayments->count() }} abono(s)
                    · último: {{ optional($lastActivePayment?->payment_date)->format('d/m/Y') ?? '—' }}
                @endif
            </div>

            <div class="account-v-actions">
                <button class="btn btn-success btn-sm" type="button" data-modal-open="modal-pay-{{ $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>
                @else
                    <button class="btn btn-sm" type="button" data-modal-open="modal-history-{{ $account->id }}" data-tip="Historial">
                        <i class="fa-solid fa-clock-rotate-left"></i>
                    </button>
                @endif
            </div>
        </div>
    </div>
@empty
    <div class="card" style="grid-column:1/-1">
        <div class="sub" style="text-align:center;padding:24px">Sin cuentas registradas con esos filtros.</div>
    </div>
@endforelse
</div>

@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-account">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-file-invoice-dollar text-gold"></i> Nueva cuenta</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('accounts.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Cliente *<select name="client_id" required>@foreach($clients as $client)<option value="{{ $client->id }}">{{ $client->name }}</option>@endforeach</select></label>
                    <label>Propiedad<select name="property_id"><option value="">N/A</option>@foreach($properties as $property)<option value="{{ $property->id }}">{{ $property->name }}</option>@endforeach</select></label>
                    <label>Precio total *<input name="total_price" type="number" step="0.01" required></label>
                    <label>Abonado (enganche)<input name="paid_amount" type="number" step="0.01" value="0"></label>
                    <label>Fecha del enganche<input name="enganche_date" type="date" value="{{ now()->format('Y-m-d') }}"></label>
                    <label>Proximo pago<input name="next_payment_amount" type="number" step="0.01"></label>
                    <label>Vencimiento<input name="next_payment_due_on" type="date"></label>
                    <label style="grid-column:1/-1">Estado *<select name="status">@foreach(['Al corriente','Adelantado','Vencido','Liquidado','Pausado'] as $s)<option>{{ $s }}</option>@endforeach</select></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>Crear cuenta</button>
            </div>
        </form>
    </div>
</div>

@foreach($accounts as $account)
{{-- Editar cuenta --}}
<div class="modal-backdrop" id="modal-edit-account-{{ $account->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar cuenta</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('accounts.update', $account) }}" class="account-plan-edit-form">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Cliente *<select name="client_id" required>@foreach($clients as $client)<option value="{{ $client->id }}" @selected($account->client_id === $client->id)>{{ $client->name }}</option>@endforeach</select></label>
                    <label>Propiedad<select name="property_id"><option value="">N/A</option>@foreach($properties as $property)<option value="{{ $property->id }}" @selected($account->property_id === $property->id)>{{ $property->name }}</option>@endforeach</select></label>
                    @if($account->lote_id)<input type="hidden" name="lote_id" value="{{ $account->lote_id }}">@endif
                    <label>Forma de pago *
                        <select name="payment_type" class="account-payment-type" required>
                            @foreach(['Contado','Plazo','Apartado'] as $type)
                                <option value="{{ $type }}" @selected($account->payment_type === $type)>{{ $type }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Precio total *<input name="total_price" type="number" step="0.01" value="{{ $account->total_price }}" required></label>
                    <label>Abonado<input name="paid_amount" type="number" step="0.01" value="{{ $account->paid_amount }}"></label>
                    <label>Proximo pago<input name="next_payment_amount" type="number" step="0.01" value="{{ $account->next_payment_amount }}"></label>
                    <label>Vencimiento<input name="next_payment_due_on" type="date" value="{{ optional($account->next_payment_due_on)->format('Y-m-d') }}"></label>
                    <label style="grid-column:1/-1">Estado *<select name="status">@foreach(['Al corriente','Adelantado','Vencido','Liquidado','Pausado'] as $s)<option @selected($account->status === $s)>{{ $s }}</option>@endforeach</select></label>
                </div>

                <fieldset class="account-plan-fields" style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(201,168,76,.04);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:800">Corrección del plan de aportación</legend>
                    @if($account->payments->where('status','Aplicado')->count() > 0)
                        <div class="sub" style="margin-bottom:10px;line-height:1.45;color:var(--gold-dark);font-weight:700">
                            Esta cuenta ya tiene abonos. Al guardar, el sistema recalculará el plan de aportaciones con los datos corregidos y conservará el historial de abonos.
                        </div>
                    @endif
                    <div class="form-grid two">
                        <label>Plazo en meses<input name="term_months" type="number" min="1" max="600" value="{{ $account->term_months }}"></label>
                        <label>Tipo de plan
                            <select name="plan_type" class="account-plan-type">
                                <option value="Sin anualidad" @selected(($account->plan_type ?: 'Sin anualidad') === 'Sin anualidad')>Sin anualidad</option>
                                <option value="Con anualidad" @selected($account->plan_type === 'Con anualidad')>Con anualidad</option>
                            </select>
                        </label>
                        <label class="account-annuity-field">Monto de anualidad<input name="annuity_amount" type="number" step="0.01" min="0" value="{{ $account->annuity_amount }}"></label>
                        <label class="account-annuity-field">Fecha de anualidad<input name="annuity_due_date" type="date" value="{{ optional($account->annuity_due_date)->format('Y-m-d') }}"></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 y recalcular</button>
            </div>
        </form>
    </div>
</div>

{{-- Registrar abono --}}
<div class="modal-backdrop" id="modal-pay-{{ $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>

{{-- Historial --}}
<div class="modal-backdrop" id="modal-history-{{ $account->id }}">
    <div class="modal wide">
        <div class="modal-head"><h3><i class="fa-solid fa-clock-rotate-left text-gold"></i> Historial — {{ $account->client?->name }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <div class="modal-body">
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Fecha</th><th>Concepto</th><th>Metodo</th><th>Referencia</th><th>Monto</th><th>Estado</th><th style="width:54px"></th></tr></thead>
                    <tbody>
                    @forelse($account->payments->sortByDesc('payment_date') as $p)
                        <tr>
                            <td>{{ optional($p->payment_date)->format('d/m/Y') }}</td>
                            <td>{{ $p->concept ?: '—' }}</td>
                            <td>{{ $p->method }}</td>
                            <td>{{ $p->reference ?: '—' }}</td>
                            <td><strong class="{{ $p->status === 'Cancelado' ? 'text-danger' : 'text-success' }}">${{ number_format($p->amount,2) }}</strong></td>
                            <td>
                                <span class="badge {{ $p->status === 'Aplicado' ? 'green' : ($p->status === 'Cancelado' ? 'red' : 'amber') }}">{{ $p->status }}</span>
                                @if($p->status === 'Cancelado' && !empty($p->cancellation_reason))
                                    <div class="sub">Motivo: {{ $p->cancellation_reason }}</div>
                                @endif
                            </td>
                            <td>
                                @if($p->status === 'Aplicado')
                                    <form method="post" action="{{ route('payments.cancel', $p) }}" onsubmit="return askPaymentCancellationReason(this, event)"
                                          data-cancel-detail="Cliente: {{ $account->client?->name ?? '—' }} · Cuenta: {{ $account->unit_label }} · Monto: ${{ number_format((float) $p->amount, 2) }} · Fecha: {{ optional($p->payment_date)->format('d/m/Y') ?? '—' }} · Concepto: {{ $p->concept ?: '—' }}">
                                        @csrf @method('PATCH')
                                        <input type="hidden" name="cancellation_reason">
                                        <button class="btn btn-sm btn-danger" type="submit" data-tip="Cancelar abono"><i class="fa-solid fa-ban"></i></button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:18px">Sin abonos.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-foot">
            @if($account->payment_type === 'Plazo')
                <a class="btn btn-success" target="_blank" href="{{ route('accounts.payment-plan', $account) }}"><span class="pdf-doc-icon" aria-hidden="true"><span>PDF</span></span> Plan de aportaciones</a>
            @endif
            <button class="btn btn-ghost" type="button" data-modal-close>Cerrar</button>
        </div>
    </div>
</div>
@endforeach
@endsection

@push('scripts')
<script>
function syncAccountPlanForm(form){
    if(!form) return;
    const paymentType = form.querySelector('.account-payment-type')?.value || '';
    const planType = form.querySelector('.account-plan-type')?.value || '';
    const planBox = form.querySelector('.account-plan-fields');
    const isPlazo = paymentType === 'Plazo';
    if(planBox) planBox.style.display = isPlazo ? '' : 'none';
    form.querySelectorAll('[name="term_months"], [name="plan_type"]').forEach(el => {
        el.disabled = !isPlazo;
    });
    form.querySelectorAll('.account-annuity-field').forEach(el => {
        const show = isPlazo && planType === 'Con anualidad';
        el.style.display = show ? '' : 'none';
        el.querySelectorAll('input,select,textarea').forEach(input => input.disabled = !show);
    });
}
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.account-plan-edit-form').forEach(syncAccountPlanForm);
});
document.addEventListener('change', e => {
    const form = e.target.closest('.account-plan-edit-form');
    if(form && (e.target.classList.contains('account-payment-type') || e.target.classList.contains('account-plan-type'))){
        syncAccountPlanForm(form);
    }
});

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; }
    if (typeof askReason === 'function') {
        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;
}

/* 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