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

@section('navbar-buttons')
    <a href="{{ route('realEstate.appointment.create') }}"
        class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 shadow-sm transition-colors w-full md:w-auto justify-center">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span>Agendar Cita</span>
    </a>
@endsection

@section('content')
    <div class="px-6 py-4 flex flex-col md:flex-row items-center justify-between gap-4 shrink-0 bg-white">
        <div class="flex items-center gap-4 w-full md:w-auto">
            <div class="flex items-center bg-white border border-[#f0f0f4] rounded-lg p-0.5 shadow-sm">
                <button class="p-1.5 hover:bg-[#f0f0f4] rounded-md text-[#111218]">
                    <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                </button>
                <span class="px-3 text-sm font-semibold text-[#111218] min-w-[140px] text-center">Noviembre
                    2023</span>
                <button class="p-1.5 hover:bg-[#f0f0f4] rounded-md text-[#111218]">
                    <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                </button>
            </div>
            <button class="text-sm font-medium text-primary px-3 py-1.5 hover:bg-primary/5 rounded-md transition-colors">
                Hoy
            </button>
        </div>
        <div class="flex bg-[#f0f0f4] p-1 rounded-lg">
            <button
                class="px-4 py-1.5 bg-white text-[#111218] shadow-sm rounded-md text-sm font-medium transition-all">Mes</button>
            <button
                class="px-4 py-1.5 text-[#616589] hover:text-[#111218] rounded-md text-sm font-medium transition-all">Semana</button>
            <button
                class="px-4 py-1.5 text-[#616589] hover:text-[#111218] rounded-md text-sm font-medium transition-all">Día</button>
        </div>

    </div>
    <!-- Filters / Legend -->
    <div class="px-6 pb-2 flex gap-3 overflow-x-auto scrollbar-hide shrink-0">
        <div
            class="flex h-7 shrink-0 items-center justify-center gap-x-2 rounded-full border border-primary/20 bg-primary/5 px-3">
            <div class="size-2 rounded-full bg-primary"></div>
            <p class="text-primary text-xs font-semibold leading-normal">Visita Propiedad</p>
        </div>
        <div
            class="flex h-7 shrink-0 items-center justify-center gap-x-2 rounded-full border border-emerald-200 bg-emerald-50 px-3">
            <div class="size-2 rounded-full bg-emerald-500"></div>
            <p class="text-emerald-700 text-xs font-semibold leading-normal">Firma Contrato</p>
        </div>
        <div
            class="flex h-7 shrink-0 items-center justify-center gap-x-2 rounded-full border border-amber-200 bg-amber-50 px-3">
            <div class="size-2 rounded-full bg-amber-500"></div>
            <p class="text-amber-700 text-xs font-semibold leading-normal">Llamada Seguimiento</p>
        </div>
    </div>
    <!-- Calendar Grid -->
    <div class="flex-1 px-6 pb-6 pt-2 overflow-hidden flex flex-col">
        <!-- Days Header -->
        <div class="grid grid-cols-7 gap-px border-b border-[#f0f0f4] pb-2 shrink-0">
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Dom</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Lun</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Mar</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Mié</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Jue</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Vie</div>
            <div class="text-center text-xs font-semibold text-[#616589] uppercase tracking-wide">Sáb</div>
        </div>
        <!-- Grid Body -->
        <div
            class="flex-1 grid grid-cols-7 grid-rows-5 gap-px bg-[#f0f0f4] border border-[#f0f0f4] rounded-lg overflow-hidden">
            <!-- Day Cells Generator (Simplified logic for visuals) -->
            <!-- Previous Month Days -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 text-[#a0a4b8]">29</div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 text-[#a0a4b8]">30</div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 text-[#a0a4b8]">31</div>
            <!-- November Days -->
            <!-- Day 1 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">1</span>
            </div>
            <!-- Day 2 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">2</span>
                <div
                    class="px-2 py-1 rounded bg-amber-50 border border-amber-100 border-l-2 border-l-amber-500 cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-amber-900 truncate">10:00 AM - Llamada</p>
                </div>
            </div>
            <!-- Day 3 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">3</span>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-primary truncate">2:00 PM - Visita</p>
                </div>
            </div>
            <!-- Day 4 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">4</span>
            </div>
            <!-- Row 2 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">5</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">6</span>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-primary truncate">11:00 AM - Visita</p>
                </div>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-primary truncate">4:30 PM - Visita</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">7</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">8</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">9</span>
                <div
                    class="px-2 py-1 rounded bg-emerald-50 border border-emerald-100 border-l-2 border-l-emerald-500 cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-emerald-900 truncate">12:00 PM - Firma</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">10</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">11</span>
            </div>
            <!-- Row 3 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">12</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">13</span>
                <div
                    class="px-2 py-1 rounded bg-amber-50 border border-amber-100 border-l-2 border-l-amber-500 cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-amber-900 truncate">9:00 AM - Seguimiento</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">14</span>
                <!-- Current Date Indicator -->
                <span class="absolute top-2 right-2 flex size-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                    <span class="relative inline-flex rounded-full size-2 bg-primary"></span>
                </span>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all shadow-sm ring-1 ring-primary/20">
                    <p class="text-[11px] font-semibold text-primary truncate">16:00 - Visita Lomas</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">15</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">16</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">17</span>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-primary truncate">5:00 PM - Visita</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">18</span>
            </div>
            <!-- Row 4 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">19</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">20</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">21</span>
                <div
                    class="px-2 py-1 rounded bg-emerald-50 border border-emerald-100 border-l-2 border-l-emerald-500 cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-emerald-900 truncate">10:00 AM - Firma Notaría</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">22</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">23</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">24</span>
                <div
                    class="px-2 py-1 rounded bg-amber-50 border border-amber-100 border-l-2 border-l-amber-500 cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-amber-900 truncate">12:00 PM - Llamada</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">25</span>
            </div>
            <!-- Row 5 -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">26</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">27</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">28</span>
                <div
                    class="px-2 py-1 rounded bg-primary/5 border border-primary/10 border-l-2 border-l-primary cursor-pointer hover:brightness-95 transition-all">
                    <p class="text-[11px] font-semibold text-primary truncate">3:00 PM - Visita</p>
                </div>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">29</span>
            </div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 group hover:bg-gray-50 transition-colors">
                <span
                    class="text-sm font-medium text-[#111218] size-7 flex items-center justify-center rounded-full">30</span>
            </div>
            <!-- Next Month -->
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 text-[#a0a4b8]">1</div>
            <div class="bg-white p-2 min-h-0 relative flex flex-col gap-1 text-[#a0a4b8]">2</div>
        </div>
    </div>
@endsection

@section('right-slide')
    <aside class="w-80 bg-white border-l border-[#f0f0f4] flex flex-col shrink-0 overflow-y-auto shadow-xl z-20">
        <div class="p-6 border-b border-[#f0f0f4] flex justify-between items-start">
            <div>
                <h3 class="text-lg font-bold text-[#111218]">Detalles de la Cita</h3>
                <p class="text-sm text-[#616589] mt-1">Martes, 14 de Noviembre</p>
            </div>
            <button class="text-[#616589] hover:text-[#111218]">
                <span class="material-symbols-outlined text-[20px]">close</span>
            </button>
        </div>
        <div class="p-6 flex flex-col gap-6">
            <!-- Time Status -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2 text-primary">
                    <span class="material-symbols-outlined text-[20px]">schedule</span>
                    <span class="text-base font-semibold">16:00 - 17:00</span>
                </div>
                <span
                    class="px-2.5 py-0.5 rounded-full bg-green-100 text-green-700 text-xs font-bold border border-green-200">Confirmada</span>
            </div>
            <hr class="border-[#f0f0f4]" />
            <!-- Prospect Info -->
            <div class="flex flex-col gap-3">
                <h4 class="text-xs font-bold text-[#616589] uppercase tracking-wider">Cliente Potencial</h4>
                <div class="flex items-center gap-3">
                    <div class="bg-center bg-no-repeat bg-cover rounded-full size-12"
                        data-alt="Portrait of the potential client Roberto Sanchez"
                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDhuCX1jFK6NyWRBHUaI8H0hn11L2zCp6njz7RuyJDzuiAFrzghIdH5gNbe-2v403UI1w9I5OdscpwqtTXhBiZ8xCyXMptRgW-wjrOBg7JEqQiAx4WnqIO4Dqei8ARmjT3XTngF5an2V9brECYn1AG4EO5BtE9kBauhQ_GW6lfXqowlTiEgaZpHYdYiKoOrbsm4JFz6_fStH2NOc_dHgiO-N4mC5jF_gxLSHNTn6OUetyYDZdgW5N0Gg8EGZlzVe2ERI_fBjviTky4");'>
                    </div>
                    <div>
                        <p class="text-[#111218] text-sm font-bold">Roberto Sánchez</p>
                        <p class="text-[#616589] text-xs">Interesado en compra</p>
                    </div>
                </div>
                <div class="flex gap-2 mt-1">
                    <button
                        class="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg border border-[#f0f0f4] text-[#111218] text-xs font-medium hover:bg-[#f0f0f4] transition-colors">
                        <span class="material-symbols-outlined text-[16px]">call</span>
                        Llamar
                    </button>
                    <button
                        class="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg border border-[#f0f0f4] text-[#111218] text-xs font-medium hover:bg-[#f0f0f4] transition-colors">
                        <span class="material-symbols-outlined text-[16px]">mail</span>
                        Email
                    </button>
                </div>
            </div>
            <hr class="border-[#f0f0f4]" />
            <!-- Property Info -->
            <div class="flex flex-col gap-3">
                <h4 class="text-xs font-bold text-[#616589] uppercase tracking-wider">Propiedad de Interés</h4>
                <div class="rounded-lg border border-[#f0f0f4] overflow-hidden">
                    <div class="h-28 bg-center bg-no-repeat bg-cover"
                        data-alt="Modern house facade in Lomas de Chapultepec"
                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA6GjcH8OKrT9j1kGT5IxGBs0bgE-YbmHqrBJxr0WxOz0yoYP4a8MHms1Hs1N7EzJ9W8bJl4rnak2uaIgY3zKcXdbhNw1vNAWyWr6QKRlxycq7nhpRtduDxkLaHikF3rZgWutlFmUcE3hXnDdl06qCrjOdvwc6vrIhqY_KIe6p1qJRMaWbh072qvebRlywKKijpxDrp-EppHtTqY_UE4rRPaYxYY2zbd6kuD3FbQDdDJTdwIMl0drX_Ns-c6KdUJAjiVK1uK8GFvWI");'>
                    </div>
                    <div class="p-3 bg-[#f6f6f8]">
                        <p class="text-[#111218] text-sm font-bold truncate">Casa en Lomas de Chapultepec</p>
                        <div class="flex items-center gap-1 mt-1 text-[#616589]">
                            <span class="material-symbols-outlined text-[14px]">location_on</span>
                            <p class="text-xs truncate">Sierra Gorda 45, CDMX</p>
                        </div>
                        <p class="text-primary text-sm font-bold mt-2">$12,500,000 MXN</p>
                    </div>
                </div>
            </div>
            <div class="flex flex-col gap-3 mt-auto pt-6">
                <button
                    class="w-full py-2.5 rounded-lg bg-primary text-white text-sm font-bold shadow hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-[18px]">check_circle</span>
                    Registrar Visita
                </button>
                <div class="grid grid-cols-2 gap-3">
                    <button
                        class="py-2.5 rounded-lg border border-[#f0f0f4] text-[#111218] text-sm font-medium hover:bg-gray-50 transition-colors">
                        Reprogramar
                    </button>
                    <button
                        class="py-2.5 rounded-lg border border-[#f0f0f4] text-red-600 text-sm font-medium hover:bg-red-50 transition-colors">
                        Cancelar
                    </button>
                </div>
            </div>
        </div>
    </aside>
@endsection