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

@section('content')
    <div class="flex-1 overflow-auto bg-background-light p-6 dark:bg-background-dark">
        <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>

                @if ($contract->status === 'pending_signature')
                    <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>
                @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>

            @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

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

            <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