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

@section('extra-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            font-size: 20px;
            vertical-align: middle;
        }

        .icon-fill {
            font-variation-settings: 'FILL' 1;
        }

        @media (min-width: 1024px) {
            .custom-scrollbar::-webkit-scrollbar {
                width: 6px;
            }

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

            .custom-scrollbar::-webkit-scrollbar-thumb {
                background: #e2e8f0;
                border-radius: 10px;
            }

            .dark .custom-scrollbar::-webkit-scrollbar-thumb {
                background: #334155;
            }
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="{{ route('realEstate.agent.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" style="font-size: 18px;">add</span>
        <span class="hidden sm:inline">Agregar Vendedor</span>

    </a>
@endsection

@section('content')
    <a href="{{ route('realEstate.agent.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-y-auto">
        <div class="w-full max-w-7xl mx-auto p-6 md:p-8 flex flex-col gap-6">
            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">
                        Equipo de Ventas</h1>
                    <p class="text-slate-500 dark:text-slate-400 mt-1">Gestiona el rendimiento, leads y metas de
                        tus agentes.</p>
                </div>
            </div>
            <livewire:real-estate.agents.agents-table></livewire:real-estate.agents.agents-table>
        </div>
    </div>
@endsection