@extends('layouts.portal')

@section('sidebar')
    <div class="w-64 portal-sidebar text-white flex flex-col">
        <!-- Logo -->
        <div class="p-6 border-b border-gray-700">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-800 to-red-900 flex items-center justify-center text-white font-bold">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
                <div class="ml-3">
                    <h1 class="text-xl font-bold">Estate Planning</h1>
                    <p class="text-xs text-red-200">Professional Will Management</p>
                </div>
            </div>
        </div>

        <!-- User Info -->
        <div class="p-4 border-b border-gray-700">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-800 to-red-900 flex items-center justify-center text-white font-bold">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-red-200">{{ auth()->user()->role }}</p>
                </div>
            </div>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 p-4 space-y-2">
            <!-- Dashboard -->
            <li class="sidebar-item {{ request()->routeIs('staff.dashboard') ? 'active' : '' }}">
                <a href="{{ route('staff.dashboard') }}" class="flex items-center p-2 {{ request()->routeIs('staff.dashboard') ? 'text-white bg-red-700' : 'text-red-200 hover:text-white hover:bg-red-600' }} text-sm rounded">
                    <i class="fas fa-tachometer-alt w-5 mr-3 text-center"></i>
                    <span>Dashboard</span>
                </a>
            </li>

            <!-- Will & Trust Section -->
            <li class="sidebar-section {{ in_array(request()->route()->getName(), ['staff.wills', 'lawyer.wills', 'client.will.type', 'client.will.status']) ? 'expanded' : '' }}">
                <div class="sidebar-section-header flex items-center justify-between p-3 text-gray-300 hover:text-white" onclick="toggleSection(this)">
                    <div class="flex items-center">
                        <i class="fas fa-file-contract w-5 mr-3 text-center"></i>
                        <span class="font-medium">Will & Trust</span>
                    </div>
                    <i class="fas fa-chevron-down text-xs transition-transform"></i>
                </div>
                <div class="sidebar-section-content">
                    <ul class="space-y-0 pl-10">
                        <li class="sidebar-item {{ request()->routeIs('client.dummy.will.type') ? 'active' : '' }}">
                            <a href="{{ route('client.dummy.will.type') }}" class="flex items-center p-2 {{ request()->routeIs('client.dummy.will.type') ? 'text-white bg-blue-600' : 'text-yellow-300 hover:text-white hover:bg-blue-700' }} text-sm rounded">
                                <i class="fas fa-flask text-xs mr-2"></i>
                                <span>Will Creation</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            <!-- Will Status Section -->
            <li class="sidebar-section {{ request()->routeIs('client.will.status') ? 'expanded' : '' }}">
                <div class="sidebar-section-header flex items-center justify-between p-3 text-gray-300 hover:text-white" onclick="toggleSection(this)">
                    <div class="flex items-center">
                        <i class="fas fa-chart-line w-5 mr-3 text-center"></i>
                        <span>Will Status</span>
                    </div>
                    <i class="fas fa-chevron-down text-xs transition-transform"></i>
                </div>
                <div class="sidebar-section-content">
                    <ul class="space-y-0 pl-10">
                        <li class="sidebar-item {{ request()->routeIs('client.will.status') ? 'active' : '' }}">
                            <a href="{{ route('client.will.status') }}" class="flex items-center p-2 {{ request()->routeIs('client.will.status') ? 'text-white' : 'text-gray-300 hover:text-white' }} text-sm">
                                <i class="fas fa-list-alt text-xs mr-2"></i>
                                <span>My Wills</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            <!-- Logout -->
            <li class="sidebar-item mt-auto">
                <a href="{{ route('logout') }}" class="flex items-center p-2 text-red-200 hover:text-white hover:bg-red-600 text-sm rounded">
                    <i class="fas fa-sign-out-alt w-5 mr-3 text-center"></i>
                    <span>Logout</span>
                </a>
            </li>
        </nav>
    </div>

    <script>
        function toggleSection(header) {
            const content = header.nextElementSibling;
            const chevron = header.querySelector('.fa-chevron-down');
            
            if (content.style.display === 'none' || content.style.display === '') {
                content.style.display = 'block';
                chevron.style.transform = 'rotate(180deg)';
            } else {
                content.style.display = 'none';
                chevron.style.transform = 'rotate(0deg)';
            }
        }
    </script>
@endsection