<div x-data="{ collapsed: false }" class="bg-white text-black flex-shrink-0 shadow-md transition-all duration-300" :class="{ 'w-20': collapsed, 'w-80': !collapsed }">
    <div class="text-center mb-5 cursor-pointer" @click="collapsed = !collapsed">
        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto transition-all duration-300" :class="{ 'w-20 p-5': collapsed, 'w-40 mt-5': !collapsed }">
    </div>

    <nav class="flex flex-col space-y-2 p-4">
        @php
        function activeClass($path) {
        return request()->is($path) ? 'text-orange-500' : '';
        }
        @endphp

        <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
            <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/user-management') }}">User Management</span>
        </a>

        <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
            <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/notification') }}">Notifications</span>
        </a>

        <!-- Dropdown: Member Management -->
        <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/member-management*') }}">Member Management</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/member-management/card-member" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
                <a wire:navigate href="/main/member-management/locked-account" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
            </div>
        </div>

        <!-- Dropdown: Home Page (Mobile) -->
        <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
            </div>
        </div>

        <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
            <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/promotion') }}">Promotions</span>
        </a>

        <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
            <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/top-up') }}">Top Up</span>
        </a>

        <!-- Dropdown: About Us -->
        <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/about-us*') }}">About Us</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/about-us/card-type" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
                <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
            </div>
        </div>

        <!-- Dropdown: Reports -->
        <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/report*') }}">Reports</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/report/registration-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
                <a wire:navigate href="/main/report/top-up-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
                <a wire:navigate href="/main/report/mobile-usage-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
                <a wire:navigate href="/main/report/station-rating-report" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
            </div>
        </div>

        <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
            <x-heroicon-o-adjustments-horizontal class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
        </a>

        <!-- Dropdown: Station Locator -->
        <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/station-locator/branch" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
                <a wire:navigate href="/main/station-locator/station" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
                <a wire:navigate href="/main/station-locator/fuel" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
            </div>
        </div>

        <!-- Top-Up Settings -->
        <a wire:navigate href="/main/top-up-settings" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up-settings') }}">
            <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/top-up-settings') }}" />
            <span x-show="!collapsed" class="{{ activeClass('main/top-up-settings') }}">Top-Up Settings</span>
        </a>

        <!-- Dropdown: Fuel Price Update -->
        <div x-data="{ open: $persist(false).as('dropdown-fuel-price') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-arrow-path class="w-5 h-5 {{ activeClass('main/fuel-price*') }}" />
                    <span x-show="!collapsed" class="{{ activeClass('main/fuel-price*') }}">Fuel Price Update</span>
                </div>
                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/fuel-price/on-demand" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/on-demand') }}">On-Demand</a>
                <a wire:navigate href="/main/fuel-price/schedule" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/schedule') }}">Schedule</a>
                <a wire:navigate href="/main/fuel-price/update-logs" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/update-logs') }}">Update Logs</a>
            </div>
        </div>
    </nav>
</div>