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

@section('extra-styles')
    <style>
        .icon-filled {
            font-variation-settings: 'FILL' 1;
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="{{ route('realEstate.developmentPromotions.index') }}"
        class="hidden md:flex h-10 items-center justify-center gap-2 rounded-lg border border-amber-300 bg-amber-50 px-4 text-sm font-semibold text-amber-800 shadow-sm hover:bg-amber-100 transition-colors">
        <span class="material-symbols-outlined !text-[20px]">campaign</span>
        <span class="hidden sm:inline">Catálogo para promoción</span>
    </a>
    <a href="{{ route('realEstate.development.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">Nuevo Fraccionamiento</span>

    </a>
@endsection

@section('content')
    <div class="fixed bottom-6 right-6 z-50 flex flex-col gap-3 md:hidden">
        <a href="{{ route('realEstate.developmentPromotions.index') }}" aria-label="Catálogo para promoción"
            class="flex size-12 items-center justify-center rounded-full border border-amber-300 bg-amber-50 text-amber-800 shadow-lg active:scale-95">
            <span class="material-symbols-outlined">campaign</span>
        </a>
        <a href="{{ route('realEstate.development.create') }}" aria-label="Crear fraccionamiento"
            class="flex size-14 items-center justify-center rounded-full bg-primary text-white shadow-xl shadow-primary/40 transition-transform active:scale-95">
            <span class="material-symbols-outlined text-3xl">add</span>
        </a>
    </div>
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6">
        <div class="max-w-[1400px] mx-auto flex flex-col gap-6">
            <!-- Breadcrumbs & Heading -->
            <div class="flex flex-col gap-4">
                <div class="flex items-center gap-2 text-sm text-text-secondary">
                    <a class="hover:text-primary" href="#">Home</a>
                    <span class="text-gray-400">/</span>
                    <span class="text-text-main dark:text-white font-medium">Fraccionamientos</span>
                </div>
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                    <div>
                        <h2 class="text-3xl font-bold text-text-main dark:text-white tracking-tight">
                            Fraccionamientos</h2>
                        <p class="text-text-secondary mt-1">Consulta tus desarrollos propios y los fraccionamientos externos
                            que tu inmobiliaria promueve.</p>
                    </div>

                </div>
            </div>
            <livewire:real-estate.developments.developments-grid></livewire:real-estate.developments.developments-grid>
        </div>
    </div>
@endsection