{{--
    Main Sidebar Component
    
    کامپوننت اصلی سایدبار که تمام بخش‌ها را ترکیب می‌کند
    
    @param string $type - نوع سایدبار (admin, sales, purchase)
    @param array $config - پیکربندی سفارشی (اختیاری)
    @param bool $showToggle - نمایش دکمه جمع/باز کردن
--}}

@php
    $type = $type ?? 'admin';
    $config = $config ?? null;
    $showToggle = $showToggle ?? true;
    
    // پیکربندی پیش‌فرض بر اساس نوع
    $defaultConfigs = [
        'admin' => [
            'title' => 'سیستم مدیریت خرید / فروش',
            'logo' => '🏢',
            'sections' => ['dashboard', 'admin']
        ],
        'sales' => [
            'title' => 'بخش فروش',
            'logo' => '📈',
            'sections' => ['dashboard', 'sales']
        ],
        'purchase' => [
            'title' => 'سیستم مدیریت خرید / فروش',
            'logo' => '🏢',
            'sections' => ['dashboard', 'purchase']
        ],
    ];
    
    $sidebarConfig = $config ?? $defaultConfigs[$type] ?? $defaultConfigs['admin'];
    $title = $sidebarConfig['title'] ?? 'سیستم مدیریت خرید / فروش';
    $logo = $sidebarConfig['logo'] ?? '🏢';
    $sections = $sidebarConfig['sections'] ?? ['dashboard', 'admin'];
@endphp

<div class="fixed right-0 top-0 z-30 h-full w-72 glass border-l border-slate-800/60">
    {{-- Navigation --}}
    <nav class="px-3">
        <div class="space-y-2" style="margin-top: 10px;">
            {{-- Include sections based on configuration --}}
            @foreach($sections as $section)
                @if($section === 'dashboard')
                    {{-- Dashboard Section --}}
                    <div class="menu-item">
                        <a href="{{ $type === 'purchase' ? route('purchase.dashboard') : route('dashboard') }}" 
                           class="group flex items-center gap-3 rounded-xl px-4 py-3 text-white hover:bg-white/5 {{ ($type === 'purchase' && request()->routeIs('purchase.dashboard')) || ($type !== 'purchase' && request()->routeIs('dashboard')) ? 'bg-white/5' : '' }}">
                            <span class="inline-flex size-8 items-center justify-center rounded-lg bg-green-500/15 text-green-400 ring-1 ring-inset ring-green-400/20">
                                <span class="text-xl">🏠</span>
                            </span>
                            <span class="font-medium">داشبورد</span>
                        </a>
                    </div>
                @elseif($section === 'admin')
                    {{-- Admin Section --}}
                    @include('sidebar.sections.admin', ['salesPurchaseRequestsCount' => $salesPurchaseRequestsCount ?? 0])
                @elseif($section === 'sales')
                    {{-- Sales Section --}}
                    @include('sidebar.sections.sales', ['salesPurchaseRequestsCount' => $salesPurchaseRequestsCount ?? 0])
                @elseif($section === 'purchase')
                    {{-- Purchase Section --}}
                    @include('sidebar.sections.purchase', ['salesPurchaseRequestsCount' => $salesPurchaseRequestsCount ?? 0])
                @endif
            @endforeach
            
            {{-- Custom Sections --}}
            @if(isset($slot))
                {{ $slot }}
            @endif
        </div>
    </nav>
</div>

{{-- JavaScript for submenu toggle functionality --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Submenu toggle functionality
    document.querySelectorAll('.submenu-toggle').forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const targetId = this.getAttribute('data-target');
            const submenu = document.getElementById(targetId);
            const icon = this.querySelector('svg');
            
            if (submenu) {
                const isHidden = submenu.style.display === 'none' || submenu.classList.contains('hidden');
                
                if (isHidden) {
                    submenu.style.display = 'block';
                    submenu.classList.remove('hidden');
                    icon.style.transform = 'rotate(90deg)';
                } else {
                    submenu.style.display = 'none';
                    submenu.classList.add('hidden');
                    icon.style.transform = 'rotate(0deg)';
                }
            }
        });
    });
    
    // Sidebar toggle functionality
    document.querySelectorAll('[data-toggle="sidebar"]').forEach(toggle => {
        toggle.addEventListener('click', function() {
            const sidebar = this.closest('.fixed');
            if (sidebar) {
                sidebar.classList.toggle('hidden');
            }
        });
    });
});
</script>