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


@section('navbar-buttons')
    <div class="flex gap-3">
        <a
            class="hidden md:flex items-center justify-center gap-2 h-10 px-4 rounded-lg border border-[#d1d5db] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm font-medium hover:bg-gray-50 dark:hover:bg-[#3d4059] transition-colors">
            <span class="material-symbols-outlined text-[20px]">file_upload</span>
            Export
        </a>
        <a href="{{ route('realEstate.property.create') }}"
            class="flex items-center justify-center gap-2 h-10 px-4 rounded-lg bg-primary text-white text-sm font-bold shadow-lg shadow-primary/30 hover:bg-blue-700 transition-colors">
            <span class="material-symbols-outlined text-[20px]">add</span>
            Add Property
        </a>
    </div>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 md:p-10">
        <div class="max-w-7xl mx-auto flex flex-col gap-6">
            <!-- Breadcrumbs & Heading -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <nav class="flex items-center gap-2 text-sm text-[#616589] dark:text-gray-400 mb-1">
                        <a class="hover:text-primary transition-colors" href="#">Dashboard</a>
                        <span class="material-symbols-outlined text-base">chevron_right</span>
                        <span class="text-[#111218] dark:text-white font-medium">Inventory</span>
                    </nav>
                    <h1 class="text-3xl font-bold text-[#111218] dark:text-white tracking-tight">Property Inventory
                    </h1>
                    <p class="text-[#616589] dark:text-gray-400 mt-1">Manage listings, lots, and availability
                        status.</p>
                </div>

            </div>
            <!-- Filters & Search Toolbar -->
            <div
                class="bg-white dark:bg-[#1e2030] p-4 rounded-xl border border-[#e5e7eb] dark:border-[#2d2f45] shadow-sm flex flex-col lg:flex-row gap-4">
                <!-- Search -->
                <div class="flex-1 relative min-w-[240px]">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#9ca3af]">search</span>
                    <input
                        class="w-full h-10 pl-10 pr-4 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-gray-50 dark:bg-[#2d2f45] text-[#111218] dark:text-white placeholder-[#9ca3af] focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm"
                        placeholder="Search by Lot # or Property ID..." type="text" />
                </div>
                <!-- Filters Group -->
                <div class="flex flex-wrap items-center gap-3">
                    <!-- Development Filter -->
                    <div class="relative">
                        <select
                            class="h-10 pl-3 pr-8 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 appearance-none cursor-pointer min-w-[160px]">
                            <option>All Developments</option>
                            <option>Cielo Vista Towers</option>
                            <option>Marina Blue</option>
                            <option>Centro Historico Lofts</option>
                        </select>
                        <span
                            class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-[#9ca3af] pointer-events-none text-lg">expand_more</span>
                    </div>
                    <!-- Type Filter -->
                    <div class="relative">
                        <select
                            class="h-10 pl-3 pr-8 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 appearance-none cursor-pointer min-w-[140px]">
                            <option>All Types</option>
                            <option>Residential</option>
                            <option>Commercial</option>
                            <option>Land</option>
                        </select>
                        <span
                            class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-[#9ca3af] pointer-events-none text-lg">expand_more</span>
                    </div>
                    <!-- Status Filter -->
                    <div class="relative">
                        <select
                            class="h-10 pl-3 pr-8 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 appearance-none cursor-pointer min-w-[140px]">
                            <option>All Statuses</option>
                            <option>Available</option>
                            <option>Reserved</option>
                            <option>Sold</option>
                            <option>Blocked</option>
                        </select>
                        <span
                            class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-[#9ca3af] pointer-events-none text-lg">expand_more</span>
                    </div>
                    <!-- Price Range Trigger (Simplified) -->
                    <button
                        class="h-10 px-3 rounded-lg border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm font-medium hover:bg-gray-50 dark:hover:bg-[#3d4059] flex items-center gap-2">
                        <span class="material-symbols-outlined text-[18px]">tune</span>
                        Price Range
                    </button>
                </div>
            </div>
            <!-- Data Table Container -->
            <div
                class="bg-white dark:bg-[#1e2030] rounded-xl border border-[#e5e7eb] dark:border-[#2d2f45] shadow-sm overflow-hidden flex flex-col flex-1 min-h-[500px]">
                <div class="overflow-x-auto flex-1">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-[#f9fafb] dark:bg-[#252736] border-b border-[#e5e7eb] dark:border-[#2d2f45]">
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 min-w-[120px]">
                                    <div class="flex items-center gap-1 cursor-pointer hover:text-primary">
                                        Property ID
                                        <span class="material-symbols-outlined text-[16px]">unfold_more</span>
                                    </div>
                                </th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 min-w-[180px]">
                                    <div class="flex items-center gap-1 cursor-pointer hover:text-primary">
                                        Development
                                        <span class="material-symbols-outlined text-[16px]">unfold_more</span>
                                    </div>
                                </th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400">
                                    Type</th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 text-right">
                                    <div class="flex items-center justify-end gap-1 cursor-pointer hover:text-primary">
                                        Size
                                        <span class="material-symbols-outlined text-[16px]">unfold_more</span>
                                    </div>
                                </th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 text-right">
                                    <div class="flex items-center justify-end gap-1 cursor-pointer hover:text-primary">
                                        Price (MXN)
                                        <span class="material-symbols-outlined text-[16px]">arrow_drop_down</span>
                                    </div>
                                </th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 text-center">
                                    Status</th>
                                <th
                                    class="py-3 px-6 text-xs font-semibold uppercase tracking-wider text-[#6b7280] dark:text-gray-400 text-center">
                                    Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[#e5e7eb] dark:divide-[#2d2f45]">
                            <!-- Row 1 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors ">
                                <td
                                    class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline relative">
                                    <a href="{{ route('realEstate.property.show', 1) }}" class="absolute inset-0 z-10"
                                        aria-label="Ver agente ">
                                    </a>
                                    LOT-402
                                </td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Cielo Vista Towers"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCAoFDtVnBzl4myY-eSHC4Pjb95YcWdEFNrlSiV2kv9BCgV4djnfnsILdsbpwPA5v8zSBJn38NBcJ61DiPRUSLer8NFb-HQwaSJM2LaoxZ2o20fkpoeKBcghKmHzzl2wL57z9X_FtMXKnNKq4DmnY3fGtoAyTAOXJiaDbswOC5yM_2vIfcn5_DJZ9PfO4IMnWlnlkKsGRCgOuEU-GIR8HmvX8ZYFn79eSR9qF9iDweD5XMT7WfGhowNhsLn5jO4KkiR1-YewTFnVt0');">
                                        </div>
                                        Cielo Vista Towers
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Residential</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    120 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $4,500,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                        Available
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center relative">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline">
                                    LOT-405</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Cielo Vista Towers"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAx2OPHyexAHU73M_aZR6OzPUuw4Wu82F6AYrk6cUR20-AKD_n95Q_qh1bvV46BHcjSwPBRDo1NxB6uSoMjlPYvUNC1EKS7l3akBlP9nK1J4O8iH-5qwFBHuBL1ikYpb0EoxLuZVN8WdazMhEFlGLa9iRvjWUl4M9nk3bblVPXlw9zQqXR_HwotzbFZbf7r7gMpJOQvLcWhasnTbbClNilF5jViMq2SjGlP2ib3XeMUo5lDrI2qf3-ZlWDTUw_lVQ1eFTs5JVMvh1Q');">
                                        </div>
                                        Cielo Vista Towers
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Residential</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    145 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $5,250,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
                                        Reserved
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 3 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline">
                                    MAR-102</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Marina Blue"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA2W1BvyjA5ETiwztbKkvAvD-roRdOnKPYAFnqDJW4iGgWBDPc1w3uUuNJVmz7NU_Z5wXgs3QOQMbrKeSkIUw50GL_P9jPb5jmfSfYqFxBfbYK-0SXTCVnqbEnu_K1x2bNH17_k_GYM_LjpswGIBkIaGtNCJgSFszkNENhmQD42nTLPjGSkXZ64pTO7RqI7Haoc2Os0PvxpEHkjkkpioJWZyHvMihAEzOqvkrcHAeprdbK3A43Ec5lhIl3jZmbF6UxSQJSkVAJ8hhM');">
                                        </div>
                                        Marina Blue
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Commercial</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    85 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $3,100,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                        Available
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline">
                                    MAR-103</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Marina Blue"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCcjfK2fZ-53VAVLnuAhN_6uGpBLcb2Fig_DrXwTCrEGN0QvgWD52Hg4zXxCsJMhVGKG9__fjdVYkNa1r5hBH8n9ixcwoEV8WUmCWTvU59PxZNCI5fuS47z0G0ce6TVfcRjzrQ6nOAzRHy0i_q15ayPcQ7XIkhwa1qY4XZ1wmVgqTbyqIbe6u4gD4GvUYjzRN5CJ-RqZm_jE5gKeLLj6XkddeXZ8bwSv4H1dTUcAEndXlxFx6tME7NbuG7aBMBnRlmanOZNWJcFFAM');">
                                        </div>
                                        Marina Blue
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Commercial</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    90 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $3,300,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                                        Sold
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 5 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline">
                                    CEN-001</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Centro Historico Lofts"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCM084SOKetyJirGhNNb_DKeAULkJumL4rOw3QmmnKruinmcDAcICh8EshKodt-OzskwyYcAj9SkuRchhOskDSN8wfLnRyj5Qv3LP036PNgVKhvsTZe8T4647_3mCUqZ7nnhoHusWEnZccpkScmHJ-Qsr_BRM4GXWQEaRBkUC31Div29aOgcfqJvZ7PcRNKtWlzeP-7UKFD8ylNYSl3Ale3ic6rrphpNQ_fsrRhCd8zLuGxn2ourObEJn_bSKjL3--gQqxJALtzjTI');">
                                        </div>
                                        Centro Historico Lofts
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Loft</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    65 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $2,100,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                        Blocked
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 6 -->
                            <tr class="group hover:bg-gray-50 dark:hover:bg-[#252736] transition-colors">
                                <td class="py-4 px-6 text-sm font-medium text-primary cursor-pointer hover:underline">
                                    CEN-002</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white">
                                    <div class="flex items-center gap-2">
                                        <div class="w-6 h-6 rounded bg-gray-200 bg-cover"
                                            data-alt="Thumbnail of Centro Historico Lofts"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDYRxwkgL0FfQiD1-htPYiqfBwTIp6w7XFexC4CUI2aHSWaMJb8o_BGv5RZO_O0maF82tApqvQxX2Dd_41QEn1ns6iGpuG6gXOBVAqCao09QcLOBigUGFRlYTFJqaFE9VsLFyID0MmxcgRS3l95DNafVJq1TRpfYy3wiewNY7VYhMlmk-jYxWjAfip4y008TxaQtH6Mf78ZfwBolJptHK4WuLMbNDmEgk2YnyzN_z2VvtcWQ4etwUdaconvqBxz1rUVE9fq4kfykZc');">
                                        </div>
                                        Centro Historico Lofts
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-sm text-[#616589] dark:text-gray-400">Loft</td>
                                <td class="py-4 px-6 text-sm text-[#111218] dark:text-white text-right tabular-nums">
                                    72 m²</td>
                                <td
                                    class="py-4 px-6 text-sm font-medium text-[#111218] dark:text-white text-right tabular-nums">
                                    $2,450,000</td>
                                <td class="py-4 px-6 text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                        Available
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-[#9ca3af] hover:text-[#111218] dark:hover:text-white transition-colors p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                                        <span class="material-symbols-outlined text-xl">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div
                    class="border-t border-[#e5e7eb] dark:border-[#2d2f45] p-4 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div class="text-sm text-[#616589] dark:text-gray-400">
                        Showing <span class="font-medium text-[#111218] dark:text-white">1-6</span> of <span
                            class="font-medium text-[#111218] dark:text-white">42</span> results
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-[#616589] dark:text-gray-400 mr-2">Rows per page:</span>
                        <select
                            class="h-8 pl-2 pr-6 rounded border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-xs focus:outline-none focus:ring-1 focus:ring-primary/50">
                            <option>10</option>
                            <option>25</option>
                            <option>50</option>
                        </select>
                        <div class="flex items-center gap-1 ml-4">
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#616589] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-[#3d4059] disabled:opacity-50"
                                disabled="">
                                <span class="material-symbols-outlined text-lg">chevron_left</span>
                            </button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white text-sm font-medium">1</button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm font-medium hover:bg-gray-50 dark:hover:bg-[#3d4059]">2</button>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#111218] dark:text-white text-sm font-medium hover:bg-gray-50 dark:hover:bg-[#3d4059]">3</button>
                            <span class="text-[#616589] px-1">...</span>
                            <button
                                class="w-8 h-8 flex items-center justify-center rounded border border-[#e5e7eb] dark:border-[#4b5563] bg-white dark:bg-[#2d2f45] text-[#616589] dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-[#3d4059]">
                                <span class="material-symbols-outlined text-lg">chevron_right</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection