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

@section('extra-styles')
    <style>
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="#"
        class="hidden md:flex h-11 shrink-0 items-center justify-center gap-2 rounded-lg bg-primary px-6 text-sm font-semibold text-white shadow-md shadow-blue-500/20 transition-all hover:bg-primary/90 active:scale-95">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span>Nuevo Cliente</span>
    </a>
@endsection

@section('content')
    <a href="#"
        class="fixed bottom-6 right-6 z-50 flex size-14 items-center justify-center rounded-full bg-primary text-white shadow-xl shadow-primary/40 transition-transform active:scale-95 md:hidden">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>

    <div class="mx-auto flex max-w-[1400px] flex-col gap-6 overflow-x-auto p-6 md:p-10">
        <div class="flex flex-col gap-1">
            <h1 class="text-3xl font-bold tracking-tight text-[#111318] dark:text-white">Clientes</h1>
            <p class="max-w-xl text-sm text-gray-500 dark:text-gray-400">
                Gestiona tu cartera de clientes, monitorea el estatus de sus expedientes y valida la documentación KYC.
            </p>
        </div>

        <livewire:real-estate.clients.clients-table></livewire:real-estate.clients.clients-table>
    </div>
@endsection