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

@section('navbar-buttons')
    <a href="{{ route('realEstate.sale.contracts.create') }}"
        class="hidden md:flex h-10 items-center justify-center gap-2 rounded-lg border border-primary/20 bg-white px-4 text-sm font-semibold text-primary shadow-sm hover:bg-primary/5 transition-colors dark:bg-[#1e232e]">
        <span class="material-symbols-outlined text-[20px]">description</span>
        <span class="hidden sm:inline">Generar Contrato</span>
    </a>
    <a href="{{ route('realEstate.sale.create') }}"
        class="hidden md:flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 transition-colors">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span class="hidden sm:inline">Nueva Venta</span>
    </a>
@endsection

@section('content')
    <a href="{{ route('realEstate.sale.contracts.create') }}"
        class="md:hidden fixed bottom-24 right-6 z-50 flex items-center justify-center size-14 rounded-full border border-primary/20 bg-white text-primary shadow-xl active:scale-95 transition-transform dark:bg-[#1e232e]">
        <span class="material-symbols-outlined text-3xl">description</span>
    </a>
    <a href="{{ route('realEstate.sale.create') }}"
        class="md:hidden fixed bottom-6 right-6 z-50 flex items-center justify-center size-14 rounded-full bg-primary text-white shadow-xl shadow-primary/40 active:scale-95 transition-transform">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
    <div class="flex-1 overflow-auto bg-background-light dark:bg-background-dark p-6">
        <div class="mx-auto max-w-[1400px] flex flex-col gap-6">
            <!-- Heading & Controls -->
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Ventas Recientes</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Gestione y monitoree todas las
                        transacciones inmobiliarias de manera eficiente.</p>
                </div>
            </div>
            <livewire:real-estate.sales.sale-table></livewire:real-estate.sales.sale-table>
        </div>
    </div>
@endsection