<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>توثيق النظام - @yield('title')</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Cairo', sans-serif; }
        .sidebar-active { color: #3b82f6; border-right: 2px solid #3b82f6; background-color: #f3f4f6; }
    </style>
</head>
<body class="bg-gray-50 text-gray-900">
    <div class="min-h-screen flex flex-col">
        <!-- Header -->
        <header class="bg-white border-b border-gray-200 sticky top-0 z-40">
            <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16 items-center">
                    <div class="flex items-center">
                        <a href="{{ route('docs.index') }}" class="flex items-center gap-2">
                            <span class="text-2xl font-bold text-blue-600 tracking-tight">CONTRACTS</span>
                            <span class="text-sm font-semibold bg-blue-100 text-blue-800 px-2 py-0.5 rounded">ERP</span>
                        </a>
                    </div>
                    <div class="flex items-center gap-4">
                        <a href="/" class="text-sm text-gray-600 hover:text-blue-600">العودة للموقع الرئيسي</a>
                    </div>
                </div>
            </div>
        </header>

        <div class="flex-1 max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex">
            <!-- Sidebar -->
            <aside class="hidden lg:block w-64 flex-shrink-0 border-l border-gray-200 pt-8 pb-10 pr-4">
                <nav class="space-y-8 sticky top-24">
                    @foreach($menu as $category => $items)
                        <div>
                            <h5 class="text-sm font-bold text-gray-900 uppercase tracking-wider mb-4">{{ $category }}</h5>
                            <ul class="space-y-2">
                                @foreach($items as $itemSlug => $itemName)
                                    <li>
                                        <a href="{{ route('docs.show', $itemSlug) }}" 
                                           class="block px-3 py-2 text-sm font-medium rounded-md transition-colors {{ $slug == $itemSlug ? 'sidebar-active' : 'text-gray-600 hover:text-blue-600 hover:bg-gray-100' }}">
                                            {{ $itemName }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach
                </nav>
            </aside>

            <!-- Content -->
            <main class="flex-1 pt-8 pb-16 lg:pr-10">
                <div class="max-w-3xl mx-auto">
                    <article class="prose prose-blue prose-lg max-w-none">
                        @yield('content')
                    </article>

                    <!-- Navigation -->
                    <div class="mt-16 pt-8 border-t border-gray-200 flex justify-between items-center text-sm font-medium">
                        <div>
                            @php
                                $prevItem = null;
                                $found = false;
                                foreach($menu as $cat => $items) {
                                    foreach($items as $s => $n) {
                                        if($s == $slug) { $found = true; break; }
                                        $prevItem = ['slug' => $s, 'name' => $n];
                                    }
                                    if($found) break;
                                }
                            @endphp
                            @if($prevItem)
                                <a href="{{ route('docs.show', $prevItem['slug']) }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                    <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    السابق: {{ $prevItem['name'] }}
                                </a>
                            @endif
                        </div>
                        <div>
                            @php
                                $nextItem = null;
                                $found = false;
                                foreach($menu as $cat => $items) {
                                    foreach($items as $s => $n) {
                                        if($found) { $nextItem = ['slug' => $s, 'name' => $n]; break; }
                                        if($s == $slug) $found = true;
                                    }
                                    if($nextItem || $found && $nextItem) break;
                                }
                            @endphp
                            @if($nextItem)
                                <a href="{{ route('docs.show', $nextItem['slug']) }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                    التالي: {{ $nextItem['name'] }}
                                    <svg class="mr-2 w-4 h-4 transform -rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Tailwind Typography Plugin Support -->
    <style>
        .prose h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 2rem; color: #111827; }
        .prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; color: #1f2937; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
        .prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; color: #374151; }
        .prose p { margin-top: 1.25rem; margin-bottom: 1.25rem; line-height: 1.75; color: #4b5563; }
        .prose ul { list-style-type: disc; margin-top: 1.25rem; margin-bottom: 1.25rem; padding-right: 1.5rem; }
        .prose li { margin-top: 0.5rem; margin-bottom: 0.5rem; color: #4b5563; }
        .prose strong { font-weight: 700; color: #111827; }
        .card { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; margin-top: 1.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
    </style>
</body>
</html>
