@extends('layouts.app', ['title' => term('nav_contracts','Documentos enrolados')])

@section('header_actions')
<a class="btn btn-primary" href="{{ url('/formats') }}"><i class="fa-solid fa-wand-magic-sparkles"></i>Editor de documentos</a>
@endsection

@push('styles')
<style>
.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)}
.status-quick{display:inline-flex;align-items:center;gap:6px}
.status-quick select{padding:5px 8px;font-size:12px;border-radius:8px}
@media (max-width:760px){.contract-folder-head{align-items:flex-start;flex-direction:column}.contract-folder-count{white-space:normal}}
</style>
@endpush

@section('content')
<div style="margin-bottom:16px">
    <div class="metric" style="max-width:260px"><i class="fa-solid fa-file-signature"></i><div class="metric-val">{{ $contracts->count() }}</div><div class="metric-label">Documentos enrolados</div></div>
</div>

<div class="card">
    <div class="card-head">
        <div>
            <div class="card-title">Documentos enrolados por inmueble</div>
            <div class="sub">Registro de documentos generados al enrolar. Las plantillas se diseñan en <a href="{{ url('/formats') }}" style="color:var(--gold-dark);font-weight:600">Gestión de documentos</a> y el contenido se autollena al enrolar desde el expediente del cliente.</div>
        </div>
    </div>

    @php
        $contractFolders = $contracts->groupBy(function ($contract) {
            return $contract->lote?->label
                ?? $contract->property?->name
                ?? 'Sin inmueble vinculado';
        });
    @endphp

    @forelse($contractFolders as $folderName => $folderContracts)
        <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">{{ $folderContracts->first()?->client?->name ?? 'Sin cliente' }} · {{ $folderContracts->count() }} documento(s) enrolado(s)</div>
                    </div>
                </div>
                <div class="contract-folder-count">
                    <span class="badge gray">{{ $folderContracts->count() }} documento(s)</span>
                </div>
            </summary>
            <div class="contract-folder-body">
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>Documento</th><th>Cliente</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' }}</div>
                                </td>
                                <td class="sub">{{ $contract->client?->name ?? '—' }}</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="{{ url('/contracts/'.$contract->id.'/print') }}" target="_blank"><i class="fa-solid fa-print"></i> Imprimir / PDF</a>
                                            @if($contract->client_id)
                                                <a href="{{ url('/clients/'.$contract->client_id) }}"><i class="fa-solid fa-user"></i> Ver expediente del cliente</a>
                                            @endif
                                            @if($contract->template && $contract->status !== 'Firmado' && ! $contract->signed_at)
                                                <form method="post" action="{{ url('/contracts/'.$contract->id.'/refresh-data') }}" 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="{{ url('/contracts/'.$contract->id.'/restore-refresh') }}" 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
                                            <form method="post" action="{{ url('/contracts/'.$contract->id) }}" onsubmit="return confirm('¿Eliminar este documento enrolado? Esta acción no se puede deshacer.')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </details>
    @empty
        <div class="contract-folder-empty">Sin documentos enrolados. Diseña tus plantillas en <a href="{{ url('/formats') }}" style="color:var(--gold-dark);font-weight:600">Gestión de documentos</a>, vincula al cliente con su lote y enrola los documentos desde su expediente.</div>
    @endforelse
</div>
@endsection