@extends('layouts.dashboard.inface', ['section' => 'sales'])

@section('content')
    <div class="flex-1 overflow-auto bg-background-light p-6 dark:bg-background-dark" x-data="{ existingSaleModal: @js((bool) session('show_existing_sale_modal')), cancelContractModal: false }">
        <div class="mx-auto flex max-w-[1180px] flex-col gap-6">
            <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div>
                    <a class="mb-4 inline-flex items-center text-sm font-medium text-slate-500 transition-colors hover:text-primary dark:text-slate-400 dark:hover:text-blue-400"
                        href="{{ route('realEstate.sales') }}">
                        <span class="material-symbols-outlined mr-1 text-[18px]">arrow_back</span>
                        Volver a ventas
                    </a>
                    <div class="flex flex-wrap items-center gap-3">
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $contract->folio }}</h3>
                        <span @class([
                            'inline-flex rounded-full border px-3 py-1 text-xs font-semibold',
                            'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/40 dark:bg-amber-900/20 dark:text-amber-300' => $contract->status === 'pending_signature',
                            'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-300' => $contract->status === 'signed',
                        ])>
                            {{ $contract->statusLabel }}
                        </span>
                    </div>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $contract->buyerName }}</p>
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <a class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
                        href="{{ route('realEstate.sale.contracts.word', ['id' => $contract->id]) }}">
                        <span class="material-symbols-outlined text-[20px]">download</span>
                        Descargar Word
                    </a>
                    <a class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
                        href="{{ route('realEstate.sale.contracts.print', ['id' => $contract->id]) }}" target="_blank">
                        <span class="material-symbols-outlined text-[20px]">print</span>
                        Imprimir
                    </a>

                    @if ($contract->status === 'pending_signature')
                        @if (count($existingSalesForContract ?? []) > 0)
                            <button type="button" x-on:click="existingSaleModal = true" class="rounded-lg bg-primary px-4 py-2 font-semibold text-white">Resolver venta existente</button>
                        @else
                        <form action="{{ route('realEstate.sale.contracts.sign', ['id' => $contract->id]) }}" method="POST">
                            @csrf
                            <button
                                class="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-600"
                                type="submit">
                                <span class="material-symbols-outlined text-[20px]">draw</span>
                                Marcar firmado y crear venta
                            </button>
                        </form>
                        @endif
                    @elseif ($contract->saleId)
                        <a class="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-600"
                            href="{{ route('realEstate.sale.details', ['id' => $contract->saleId]) }}">
                            <span class="material-symbols-outlined text-[20px]">receipt_long</span>
                            Ver venta
                        </a>
                    @endif
                </div>
            </div>

            @if ($contract->status === 'pending_signature' && count($existingSalesForContract ?? []) > 0)
                <div x-cloak x-show="existingSaleModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 p-4" role="dialog" aria-modal="true" aria-labelledby="existing-sale-title" x-on:keydown.escape.window="existingSaleModal = false">
                    <div class="max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-6 shadow-xl dark:bg-slate-900">
                        <h3 id="existing-sale-title" class="text-lg font-bold">Ya existe una venta para este lote</h3>
                        <p class="my-3 text-sm">Revisa el comprador y el importe. Puedes vincular el contrato a la venta y marcarlo firmado sin generar otra venta ni nuevos cobros, o cancelar únicamente el contrato.</p>
                        @foreach ($existingSalesForContract as $existingSale)
                            <div class="my-3 rounded-lg border p-3 text-sm">Venta #{{ $existingSale->id }} · {{ trim(($existingSale->lead?->first_name ?? '').' '.($existingSale->lead?->last_name ?? '')) }} · {{ number_format((float) $existingSale->total_price, 2) }}</div>
                        @endforeach
                        <div class="flex flex-wrap justify-end gap-3">
                            <button type="button" x-on:click="existingSaleModal = false" class="rounded-lg border px-4 py-2">Volver</button>
                            <button type="button" x-on:click="cancelContractModal = true" class="rounded-lg border border-red-300 px-4 py-2 text-red-600">Cancelar contrato</button>
                            @if (count($existingSalesForContract) === 1)
                                <form action="{{ route('realEstate.sale.contracts.sign', ['id' => $contract->id]) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="existing_sale_id" value="{{ $existingSalesForContract->first()->id }}">
                                    <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-white">Vincular y marcar firmado</button>
                                </form>
                            @else
                                <p class="text-sm text-amber-700">Los lotes pertenecen a varias ventas. Revisa el contrato antes de vincularlo.</p>
                            @endif
                        </div>
                        <form x-cloak x-show="cancelContractModal" class="mt-5 rounded-lg border border-red-200 p-4" action="{{ route('realEstate.sale.contracts.cancel', ['id' => $contract->id]) }}" method="POST">
                            @csrf
                            <p class="mb-3 text-sm">Se cancelarán el contrato y sus enlaces de firma activos. La venta existente se conservará.</p>
                            <input type="hidden" name="confirm_cancellation" value="1">
                            <button type="submit" class="rounded-lg bg-red-600 px-4 py-2 text-white">Confirmar cancelación del contrato</button>
                        </form>
                    </div>
                </div>
            @endif

            @if ($errors->has('contract'))
                <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-300">
                    {{ $errors->first('contract') }}
                </div>
            @endif

            @if (session('success'))
                <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ session('success') }}</div>
            @endif

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                    <p class="text-xs font-semibold uppercase text-slate-500">Precio</p>
                    <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white">{{ $contract->totalPriceFormatted }}</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                    <p class="text-xs font-semibold uppercase text-slate-500">Enganche</p>
                    <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white">{{ $contract->downPaymentFormatted }}</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                    <p class="text-xs font-semibold uppercase text-slate-500">Saldo</p>
                    <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white">{{ $contract->remainingBalanceFormatted }}</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                    <p class="text-xs font-semibold uppercase text-slate-500">Mensualidad</p>
                    <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white">{{ $contract->monthlyPaymentFormatted }}</p>
                </div>
            </div>

            <section class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <div><h4 class="text-lg font-bold text-slate-900 dark:text-white">Firma electrónica</h4><p class="text-sm text-slate-500">Documento congelado, OTP, auditoría SHA-256 e integración desacoplada con proveedor NOM-151.</p></div>
                </div>
                @if ($contract->status === 'pending_signature')
                    <form class="mt-4 grid gap-3 md:grid-cols-4" method="POST" action="{{ route('realEstate.sale.contracts.electronic-signatures.start', $contract->id) }}">
                        @csrf
                        <input class="rounded-lg border-slate-300" name="signer_name" value="{{ old('signer_name', $contract->buyerName) }}" placeholder="Firmante" required>
                        <input class="rounded-lg border-slate-300" type="email" name="signer_email" value="{{ old('signer_email', $contract->buyerEmail) }}" placeholder="Correo" required>
                        <select class="rounded-lg border-slate-300" name="signature_mode"><option value="parallel">Firma independiente</option><option value="sequential">Firma secuencial</option></select>
                        <button class="rounded-lg bg-primary px-4 py-2 font-semibold text-white" type="submit">Iniciar y enviar</button>
                    </form>
                @endif
                <div class="mt-5 space-y-3">
                    @forelse ($signingSessions as $session)
                        <div class="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
                            <div class="flex flex-wrap justify-between gap-2"><strong>{{ $session->status }}</strong><span class="text-xs text-slate-500">{{ $session->uuid }}</span></div>
                            <p class="mt-2 text-sm">Firmas: {{ $session->signers->where('status', 'signed')->count() }}/{{ $session->signers->count() }} · vence {{ optional($session->expires_at)->format('d/m/Y H:i') }}</p>
                            <p class="text-sm">NOM-151: {{ $session->nom151Evidence?->status ?? 'pendiente' }}</p>
                            @if ($session->status === 'integrity_failed')
                                <p class="mt-2 text-sm text-red-600" role="alert">Sesión invalidada por integridad. La descarga del PDF firmado está bloqueada; el incidente está disponible en el expediente.</p>
                            @endif
                            <div class="mt-3 flex flex-wrap gap-2 text-sm">
                                <a class="text-primary" href="{{ url('/verify/'.$session->uuid) }}" target="_blank">Verificar</a>
                                @if ($session->status === 'completed')
                                    <a class="text-primary" href="{{ route('realEstate.sale.contracts.electronic-signatures.download', [$session, 'signed']) }}">Descargar firmado</a>
                                @endif
                                <a class="text-primary" href="{{ route('realEstate.sale.contracts.electronic-signatures.download', [$session, 'audit']) }}">Auditoría (JSON)</a>
                                <a class="text-primary" href="{{ route('realEstate.sale.contracts.electronic-signatures.download', [$session, 'package']) }}">Expediente probatorio (JSON)</a>
                                @if (in_array($session->status, ['draft', 'pending', 'in_progress']))
                                    <form method="POST" action="{{ route('realEstate.sale.contracts.electronic-signatures.cancel', $session) }}">@csrf<button class="text-red-600" type="submit">Cancelar</button></form>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">No hay sesiones de firma electrónica.</p>
                    @endforelse
                </div>
            </section>

            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-[#1e232e]">
                <div class="prose max-w-none prose-slate dark:prose-invert">
                    {!! $contract->generatedHtml !!}
                </div>
            </div>
        </div>
    </div>
@endsection