@extends('layouts.app', ['title' => 'Apartados'])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-reservation"><i class="fa-solid fa-handshake"></i> Nuevo apartado</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-hourglass-half"></i><div class="metric-val">{{ $stats['active'] }}</div><div class="metric-label">Activos</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $stats['fulfilled'] }}</div><div class="metric-label">Cumplidos</div></div>
    <div class="metric"><i class="fa-solid fa-triangle-exclamation"></i><div class="metric-val text-danger">{{ $stats['expired'] }}</div><div class="metric-label">Vencidos</div></div>
    <div class="metric"><i class="fa-solid fa-cash-register"></i><div class="metric-val text-gold">${{ number_format($stats['paid'],0) }}</div><div class="metric-label">Ingresado por apartados</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 por cliente, proyecto o lote…" value="{{ $filters['search'] ?? '' }}">
        </div>
        <label class="fb-field">
            <span class="fb-label">Estado</span>
            <select name="status">
                <option value="">Todos</option>
                @foreach($statuses as $status)
                    <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>{{ $status }}</option>
                @endforeach
            </select>
        </label>
        <label class="fb-field">
            <span class="fb-label">Proyecto</span>
            <select name="project_id">
                <option value="">Todos</option>
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" @selected((string)($filters['project_id'] ?? '') === (string)$project->id)>{{ $project->name }}</option>
                @endforeach
            </select>
        </label>
        <div class="fb-actions">
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-filter"></i> Filtrar</button>
            @if(($filters['search'] ?? null) || ($filters['status'] ?? null) || ($filters['project_id'] ?? null))
                <a class="btn btn-ghost" href="{{ route('reservations.index') }}"><i class="fa-solid fa-xmark"></i></a>
            @endif
        </div>
    </form>
</div>

<style>
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.res-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 20px 52px -38px rgba(15,23,42,.55);display:flex;flex-direction:column;min-height:420px}
.res-head{padding:17px 18px;background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(255,255,255,.94));border-bottom:1px solid var(--line)}
.res-client{font-family:var(--display);font-size:19px;font-weight:900;line-height:1.15;letter-spacing:-.03em;margin-top:10px}
.res-unit{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.35}
.res-body{padding:17px;display:flex;flex-direction:column;gap:12px;flex:1}
.res-stats{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}
.res-stats>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.res-stats>div:last-child{border-bottom:0;background:rgba(201,168,76,.08)}
.res-stats strong{text-align:right}.res-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.res-actions .btn{justify-content:center}.res-actions .full{grid-column:1/-1}
.res-progress{border:1px solid var(--line);border-radius:15px;background:#fff;padding:11px 12px}
.badge.gray{background:#f1f5f9;color:#475569}.badge.blue{background:#dbeafe;color:#1d4ed8}
.res-note{font-size:12px;color:var(--muted);line-height:1.45;background:rgba(15,23,42,.035);padding:10px 12px;border-radius:14px}
@media(max-width:700px){.res-grid{grid-template-columns:1fr}.res-actions{grid-template-columns:1fr}}
</style>

<div class="res-grid stagger">
@forelse($reservations as $reservation)
    @php
        $badge = match($reservation->status) {
            'Activo' => 'amber',
            'Cumplido' => 'green',
            'Vencido', 'Cancelado', 'Reembolsado' => 'red',
            'Convertido' => 'blue',
            default => 'gray',
        };
        $paid = $reservation->paid_total;
        $pending = $reservation->pending_deposit;
        $maxPayable = max(0, (float) $reservation->total_price - (float) $paid);
        $suggestedPayment = min(max((float) $pending, 0.01), $maxPayable);
    @endphp
    <div class="res-card">
        <div class="res-head">
            <div class="row between" style="align-items:flex-start">
                <span class="badge {{ $badge }}">{{ $reservation->status }}</span>
                <div class="row" style="gap:6px;align-items:center">
                    <span class="pill gold"><i class="fa-solid fa-calendar-day"></i> Vence {{ optional($reservation->expires_at)->format('d/m/Y') ?? '—' }}</span>
                    @if(in_array($reservation->status, ['Activo','Cumplido'], true))
                        <div class="kebab">
                            <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">
                                <form method="post" action="{{ route('reservations.cancel', $reservation) }}" onsubmit="return confirm('¿Cancelar el apartado y liberar el lote?')">@csrf @method('patch')<button type="submit" class="danger"><i class="fa-solid fa-ban"></i> Cancelar apartado</button></form>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="res-client">{{ $reservation->client?->name ?? 'Cliente' }}</div>
            <div class="res-unit">{{ $reservation->unit_label }}</div>
        </div>
        <div class="res-body">
            <div class="row" style="gap:6px">
                <span class="pill"><i class="fa-solid fa-building"></i>{{ $reservation->project?->name ?? 'Proyecto' }}</span>
                @if($reservation->advisor)<span class="pill"><i class="fa-solid fa-user-tie"></i>{{ $reservation->advisor->name }}</span>@endif
            </div>

            <div class="res-stats">
                <div><span class="sub">Precio lote</span><strong>${{ number_format((float)$reservation->total_price,0) }}</strong></div>
                <div><span class="sub">Enganche requerido</span><strong>${{ number_format((float)$reservation->deposit_required,0) }}</strong></div>
                <div><span class="sub">Pagado</span><strong class="text-success">${{ number_format($paid,0) }}</strong></div>
                <div><span class="sub">Pendiente enganche</span><strong class="text-gold">${{ number_format($pending,0) }}</strong></div>
            </div>

            <div class="res-progress">
                <div class="row between sub"><span>Avance del enganche</span><span>{{ $reservation->progress }}%</span></div>
                <div class="progress"><div class="bar" style="width:{{ $reservation->progress }}%"></div></div>
            </div>

            @if($reservation->notes)
                <div class="res-note">{{ $reservation->notes }}</div>
            @endif

            <div class="sub"><i class="fa-solid fa-receipt"></i> {{ $reservation->payments->count() }} pago(s) registrados</div>

            <div class="res-actions">
                @if($reservation->status === 'Activo')
                    <button class="btn btn-success btn-sm" type="button" data-modal-open="modal-res-payment-{{ $reservation->id }}"><i class="fa-solid fa-hand-holding-dollar"></i> Realizar aportación</button>
                    <button class="btn btn-sm" type="button" data-modal-open="modal-res-movs-{{ $reservation->id }}"><i class="fa-solid fa-clock-rotate-left"></i> Movimientos</button>
                @else
                    <button class="btn btn-sm full" type="button" data-modal-open="modal-res-movs-{{ $reservation->id }}"><i class="fa-solid fa-clock-rotate-left"></i> Movimientos</button>
                @endif

                @if($reservation->can_convert)
                    <button class="btn btn-primary btn-sm full" type="button" data-reservation-convert-open="modal-convert-{{ $reservation->id }}"><i class="fa-solid fa-right-left"></i> Realizar vinculación</button>
                @elseif($reservation->status === 'Cumplido')
                    <span class="pill full" style="justify-content:center">Listo para convertir</span>
                @endif
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="modal-res-payment-{{ $reservation->id }}">
        <div class="modal narrow">
            <form method="post" action="{{ route('reservations.payments.store', $reservation) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-head"><h3>Realizar aportación</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
                <div class="modal-body form-grid two">
                    <div class="full"><div class="res-note">Pendiente para completar enganche: <strong>${{ number_format($pending,2) }}</strong>. Saldo máximo del lote: <strong>${{ number_format($maxPayable,2) }}</strong></div></div>
                    <label>Monto<input name="amount" type="number" step="0.01" min="0.01" max="{{ number_format($maxPayable,2,'.','') }}" value="{{ number_format($suggestedPayment,2,'.','') }}" placeholder="0.00" required></label>
                    <label>Fecha<input name="payment_date" type="date" value="{{ now()->toDateString() }}" required></label>
                    <label>Método<select name="method" class="js-pay-method" required><option>Efectivo</option><option>Transferencia</option><option>Deposito</option></select></label>
                    <label class="js-pay-transfer-only" style="display:none">Referencia<input name="reference" placeholder="Folio o referencia"></label>
                    <label class="full">Concepto<input name="concept" placeholder="Concepto del pago"></label>
                    <label class="full js-pay-transfer-only" style="display:none">Comprobante<input name="receipt" type="file" accept="image/*,.pdf"></label>
                    <label class="full">Notas<textarea name="notes" rows="3"></textarea></label>
                </div>
                <div class="modal-foot"><button class="btn" type="button" data-modal-close>Cancelar</button><button class="btn btn-primary" type="submit">Guardar aportación</button></div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="modal-res-movs-{{ $reservation->id }}">
        <div class="modal">
            <div class="modal-head"><h3>Movimientos del apartado</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
            <div class="modal-body">
                <div class="res-stats" style="margin-bottom:14px">
                    <div><span class="sub">Enganche requerido</span><strong>${{ number_format((float)$reservation->deposit_required,2) }}</strong></div>
                    <div><span class="sub">Pagado</span><strong class="text-success">${{ number_format($paid,2) }}</strong></div>
                    <div><span class="sub">Pendiente</span><strong class="text-gold">${{ number_format($pending,2) }}</strong></div>
                </div>
                @php $movs = $reservation->payments->sortByDesc('payment_date'); @endphp
                @if($movs->count())
                    <div class="table-wrap">
                        <table>
                            <thead><tr><th>Fecha</th><th>Concepto</th><th>Método</th><th>Referencia</th><th style="text-align:right">Monto</th><th>Comprobante</th></tr></thead>
                            <tbody>
                            @foreach($movs as $p)
                                <tr>
                                    <td>{{ optional($p->payment_date)->format('d/m/Y') ?? '—' }}</td>
                                    <td>{{ $p->concept ?: 'Aportación' }}</td>
                                    <td>{{ $p->method ?: '—' }}</td>
                                    <td>{{ $p->reference ?: '—' }}</td>
                                    <td style="text-align:right" class="text-success">${{ number_format((float)$p->amount,2) }}</td>
                                    <td>@if($p->receipt_path)<a class="btn btn-sm" href="{{ asset('storage/'.$p->receipt_path) }}" target="_blank" rel="noopener"><i class="fa-solid fa-paperclip"></i> Ver</a>@else—@endif</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="sub" style="text-align:center;padding:24px"><i class="fa-solid fa-clock-rotate-left" style="font-size:34px;opacity:.3;display:block;margin-bottom:8px"></i>Aún no hay aportaciones registradas para este apartado.</div>
                @endif
                <div class="res-note" style="margin-top:12px">Registra aportaciones hasta completar el enganche requerido; al cubrirlo, el apartado podrá convertirse a vinculación.</div>
            </div>
            <div class="modal-foot"><button class="btn" type="button" data-modal-close>Cerrar</button></div>
        </div>
    </div>

    <div class="modal-backdrop" id="modal-convert-{{ $reservation->id }}">
        <div class="modal wide">
            <form method="post" action="{{ route('reservations.convert', $reservation) }}" enctype="multipart/form-data" class="reservation-convert-form" data-paid="{{ number_format($paid,2,'.','') }}">
                @csrf @method('patch')
                <div class="modal-head"><h3>Realizar vinculación</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="grid g3" style="margin-bottom:14px">
                        <div class="metric"><i class="fa-solid fa-user"></i><div class="metric-val" style="font-size:16px">{{ $reservation->client?->name }}</div><div class="metric-label">Cliente</div></div>
                        <div class="metric"><i class="fa-solid fa-map-location-dot"></i><div class="metric-val" style="font-size:16px">{{ $reservation->unit_label }}</div><div class="metric-label">Terreno</div></div>
                        <div class="metric">
                            <i class="fa-solid fa-coins"></i>
                            <div class="metric-val text-success">${{ number_format($paid,0) }}</div>
                            <div class="metric-label">Enganche acumulado</div>
                            <div class="sub" style="margin-top:6px">Precio del lote: <strong>${{ number_format((float)$reservation->total_price,0) }}</strong></div>
                        </div>
                    </div>
                    <input type="hidden" name="total_price" value="{{ number_format((float)$reservation->total_price,2,'.','') }}">
                    <div class="form-grid two">
                        <label style="grid-column:1/-1">Forma de pago *
                            <select name="payment_type" class="js-convert-type" required>
                                <option value="Plazo">Aportaciones a plazo</option>
                                <option value="Contado">Contado</option>
                            </select>
                        </label>
                        <div class="js-plazo-fields full form-grid two" style="align-items:start">
                            <label>Plazo (meses) *<input name="term_months" type="number" min="1" max="600" placeholder="Ej. 24" value="24"></label>
                            <label>Fecha del primer pago<input name="first_payment_due_on" type="date" value="{{ now()->addMonthNoOverflow()->toDateString() }}"></label>
                            <label>Plan de financiamiento *<select name="plan_type" class="js-plan-type"><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="js-annuity-fields">Anualidad (monto) *<input name="annuity_amount" type="number" step="0.01" min="0" placeholder="Ej. 10000" value="0"></label>
                            <label class="js-annuity-fields">Fecha personalizada de anualidad<input name="annuity_due_date" type="date"><small class="sub">Vacía: se suma cada 12 meses junto con la mensualidad.</small></label>
                            <div class="full" style="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">Aportación mensual estimada</div>
                                <div class="js-convert-monthly" style="font-size:24px;font-weight:800;color:var(--gold)">$0.00</div>
                                <div class="sub js-convert-monthly-detail" style="font-size:11px;margin-top:2px">Captura el plazo para calcular.</div>
                            </div>
                        </div>
                    </div>
                    <div class="res-note" style="margin-top:14px">El dinero ya registrado como apartado se aplica como enganche de la venta. El saldo restante se cobra después con <strong>Registrar abono</strong> en el expediente del cliente (de contado, la cuenta queda "Al corriente" hasta liquidarla). No se duplica el ingreso en balances.</div>
                </div>
                <div class="modal-foot"><button class="btn" type="button" data-modal-close>Cancelar</button><button class="btn btn-primary" type="submit">Realizar vinculación</button></div>
            </form>
        </div>
    </div>
@empty
    <div class="card" style="grid-column:1/-1;text-align:center;padding:36px">
        <i class="fa-solid fa-handshake" style="font-size:42px;opacity:.3;margin-bottom:10px"></i>
        <div class="card-title">Sin apartados registrados</div>
        <div class="sub">Crea un apartado para reservar un lote antes de convertirlo a vinculación formal.</div>
    </div>
@endforelse
</div>

<div style="margin-top:16px">{{ $reservations->links() }}</div>

<div class="modal-backdrop" id="modal-add-reservation">
    <div class="modal wide">
        <form method="post" action="{{ route('reservations.store') }}" enctype="multipart/form-data" id="reservation-create-form">
            @csrf
            <div class="modal-head"><h3>Nuevo apartado</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
            <div class="modal-body form-grid three" style="align-items:start">
                <label>Cliente
                    <select name="client_id" required>
                        <option value="">Selecciona cliente</option>
                        @foreach($clients as $client)<option value="{{ $client->id }}">{{ $client->name }}</option>@endforeach
                    </select>
                </label>
                <label>Asesor
                    <select name="advisor_id">
                        <option value="">Sin asesor</option>
                        @foreach($advisors as $advisor)<option value="{{ $advisor->id }}">{{ $advisor->name }}</option>@endforeach
                    </select>
                </label>
                <label>Lote disponible
                    <select name="lote_id" id="reservation-lote-select" required>
                        <option value="">Selecciona lote</option>
                        @foreach($availableLotes as $lote)
                            <option value="{{ $lote->id }}" data-price="{{ (float)$lote->precio }}">{{ $lote->label }} · ${{ number_format((float)$lote->precio,0) }}</option>
                        @endforeach
                    </select>
                </label>
                <label>Precio del lote<input name="total_price" id="reservation-total-price" type="number" step="0.01" min="0.01" required readonly></label>
                <label>Enganche requerido<input name="deposit_required" id="reservation-deposit-required" type="number" step="0.01" min="0.01" value="0" required></label>
                <label>Pago inicial de apartado<input name="initial_amount" id="reservation-initial-amount" type="number" step="0.01" min="0" value="0"></label>
                <label>Fecha apartado<input name="reserved_at" type="date" value="{{ now()->toDateString() }}" required></label>
                <label>Vencimiento<input name="expires_at" type="date" value="{{ now()->addDays(15)->toDateString() }}" required></label>
                <label>Método<select name="method" class="js-pay-method"><option>Efectivo</option><option>Transferencia</option><option>Deposito</option></select></label>
                <label class="js-pay-transfer-only" style="display:none">Referencia<input name="reference" placeholder="Folio o referencia"></label>
                <label class="js-pay-transfer-only" style="display:none">Comprobante<input name="receipt" type="file" accept="image/*,.pdf"></label>
                <label class="full">Notas<textarea name="notes" rows="3" placeholder="Promesa de apartado, acuerdos o condiciones..."></textarea></label>
            </div>
            <div class="modal-foot"><button class="btn" type="button" data-modal-close>Cancelar</button><button class="btn btn-primary" type="submit">Crear apartado</button></div>
        </form>
    </div>
</div>

<script>
document.addEventListener('click', function(e){
    const button = e.target.closest('[data-reservation-convert-open]');
    if(!button) return;
    e.preventDefault();
    e.stopPropagation();
    if(typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
    const modalId = button.getAttribute('data-reservation-convert-open');
    if(window.openModal){
        window.openModal(modalId);
    }else{
        const modal = document.getElementById(modalId);
        if(modal){ modal.classList.add('open'); document.body.style.overflow='hidden'; }
    }
}, true);

function syncConvertForm(form){
    if(!form) return;
    const typeSel = form.querySelector('.js-convert-type');
    if(!typeSel) return;
    const isPlazo = typeSel.value === 'Plazo';
    const plazo = form.querySelector('.js-plazo-fields');
    if(plazo) plazo.style.display = isPlazo ? '' : 'none';
    const term = form.querySelector('[name="term_months"]');
    if(term) term.required = isPlazo;
    const planSel = form.querySelector('.js-plan-type');
    const withAnnuity = isPlazo && planSel && planSel.value === 'Con anualidad';
    form.querySelectorAll('.js-annuity-fields').forEach(el => { el.style.display = withAnnuity ? '' : 'none'; });
    const annuity = form.querySelector('[name="annuity_amount"]');
    if(annuity) annuity.required = withAnnuity;
    syncConvertMonthly(form);
}
function syncConvertMonthly(form){
    if(!form) return;
    const out = form.querySelector('.js-convert-monthly');
    if(!out) return;
    const detail = form.querySelector('.js-convert-monthly-detail');
    const typeSel = form.querySelector('.js-convert-type');
    const fmt = n => '$' + (Number(n)||0).toLocaleString('es-MX',{minimumFractionDigits:2,maximumFractionDigits:2});
    if(typeSel && typeSel.value !== 'Plazo'){ out.textContent = '$0.00'; if(detail) detail.textContent = 'De contado no genera mensualidades.'; return; }
    // Tolerante a comas de miles ("1,000") que agrega el formateador global de montos.
    const num = v => Number(String(v ?? '').replace(/,/g,'').replace(/[^0-9.\-]/g,'')) || 0;
    const total = num(form.querySelector('[name="total_price"]')?.value);
    const paid = num(form.dataset.paid);
    const term = parseInt(num(form.querySelector('[name="term_months"]')?.value), 10);
    const planSel = form.querySelector('.js-plan-type');
    const annuity = num(form.querySelector('[name="annuity_amount"]')?.value);
    const annuityDate = form.querySelector('[name="annuity_due_date"]')?.value || '';
    const financiado = Math.max(0, total - paid);
    const conAnualidad = planSel && planSel.value === 'Con anualidad';
    const fechaPersonalizada = conAnualidad && annuity > 0 && annuityDate;
    const k = (conAnualidad && annuity > 0 && !fechaPersonalizada) ? Math.floor(term/12) : 0;
    const base = Math.max(0, financiado - annuity*k);
    const mensual = term > 0 ? base/term : 0;
    out.textContent = fmt(mensual);
    if(detail) detail.textContent = term > 0
        ? 'Financiado: ' + fmt(financiado) + (k > 0 ? ' · Anualidades integradas: ' + fmt(annuity*k) : (fechaPersonalizada ? ' · Anualidad en hoja aparte' : ''))
        : 'Captura el plazo para calcular.';
}
function syncPayMethod(form){
    if(!form) return;
    const method = form.querySelector('.js-pay-method');
    if(!method) return;
    const show = method.value === 'Transferencia' || method.value === 'Deposito';
    form.querySelectorAll('.js-pay-transfer-only').forEach(el => { el.style.display = show ? '' : 'none'; });
}
document.addEventListener('change', function(e){
    if(e.target && e.target.id === 'reservation-lote-select'){
        // Solo fija el precio del lote (no editable). El enganche lo captura el usuario (inicia en 0).
        const opt = e.target.options[e.target.selectedIndex];
        const price = parseFloat(opt?.dataset?.price || '0');
        const total = document.getElementById('reservation-total-price');
        const deposit = document.getElementById('reservation-deposit-required');
        const initial = document.getElementById('reservation-initial-amount');
        if(total && price > 0){ total.value = price.toFixed(2); }
        if(deposit && price > 0){ deposit.max = price.toFixed(2); }
        if(initial && price > 0){ initial.max = price.toFixed(2); }
    }
    if(e.target && (e.target.classList.contains('js-convert-type') || e.target.classList.contains('js-plan-type'))){
        syncConvertForm(e.target.closest('form'));
    }
    if(e.target && e.target.classList.contains('js-pay-method')){
        syncPayMethod(e.target.closest('form'));
    }
});
document.addEventListener('input', function(e){
    if(e.target && ['term_months','annuity_amount','annuity_due_date'].includes(e.target.name)){
        const form = e.target.closest('.reservation-convert-form');
        if(form) syncConvertMonthly(form);
    }
});
document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.js-convert-type').forEach(el => syncConvertForm(el.closest('form')));
    document.querySelectorAll('.js-pay-method').forEach(el => syncPayMethod(el.closest('form')));
});
</script>
@endsection