@extends('layouts.dashboard')

@section('title', 'قاعدة المعرفة')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-800">📚 قاعدة المعرفة</h1>
    </div>

    <!-- Tabs -->
    <div class="bg-white rounded-xl shadow-sm">
        <div class="border-b border-gray-200">
            <nav class="flex gap-4 px-6" id="tabs">
                <button onclick="showTab('branches')" class="tab-btn py-4 px-2 border-b-2 border-emerald-500 text-emerald-600 font-medium" data-tab="branches">
                    🏢 الفروع ({{ $branches->count() }})
                </button>
                <button onclick="showTab('offers')" class="tab-btn py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="offers">
                    🎁 العروض ({{ $offers->count() }})
                </button>
                <button onclick="showTab('trips')" class="tab-btn py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="trips">
                    ✈️ الرحلات ({{ $trips->count() }})
                </button>
                <button onclick="showTab('faqs')" class="tab-btn py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700" data-tab="faqs">
                    ❓ الأسئلة الشائعة ({{ $faqs->count() }})
                </button>
            </nav>
        </div>

        <!-- Branches Tab -->
        <div id="tab-branches" class="tab-content p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @forelse($branches as $branch)
                    <div class="border rounded-lg p-4 hover:shadow-md transition {{ $branch->active ? '' : 'opacity-50' }}">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="font-bold text-gray-800">{{ $branch->name }}</h3>
                                <p class="text-emerald-600">{{ $branch->city }}</p>
                            </div>
                            @if($branch->active)
                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">نشط</span>
                            @else
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">غير نشط</span>
                            @endif
                        </div>
                        <div class="mt-3 text-sm text-gray-600 space-y-1">
                            <p>📍 {{ $branch->address }}</p>
                            <p>📞 {{ $branch->phone }}</p>
                            @if($branch->email)
                                <p>✉️ {{ $branch->email }}</p>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 col-span-3 text-center py-8">لا توجد فروع مسجلة</p>
                @endforelse
            </div>
        </div>

        <!-- Offers Tab -->
        <div id="tab-offers" class="tab-content p-6 hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @forelse($offers as $offer)
                    <div class="border rounded-lg p-4 hover:shadow-md transition {{ $offer->isValid() ? '' : 'opacity-50' }}">
                        <div class="flex items-start justify-between">
                            <h3 class="font-bold text-gray-800">{{ $offer->title }}</h3>
                            @if($offer->isValid())
                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">نشط</span>
                            @else
                                <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">منتهي</span>
                            @endif
                        </div>
                        <p class="text-gray-600 text-sm mt-2">{{ Str::limit($offer->description, 100) }}</p>
                        <div class="mt-3 flex items-center justify-between">
                            <span class="text-emerald-600 font-bold">{{ $offer->price_range }}</span>
                            @if($offer->end_date)
                                <span class="text-gray-500 text-sm">حتى {{ $offer->end_date->format('Y-m-d') }}</span>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 col-span-2 text-center py-8">لا توجد عروض مسجلة</p>
                @endforelse
            </div>
        </div>

        <!-- Trips Tab -->
        <div id="tab-trips" class="tab-content p-6 hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @forelse($trips as $trip)
                    <div class="border rounded-lg p-4 hover:shadow-md transition {{ $trip->isAvailable() ? '' : 'opacity-50' }}">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="font-bold text-gray-800">{{ $trip->destination }}</h3>
                                <p class="text-sm text-gray-500">{{ $trip->duration_days }} أيام</p>
                            </div>
                            @if($trip->hotel_rating)
                                <span class="text-amber-500">{{ $trip->hotel_stars }}</span>
                            @endif
                        </div>
                        <div class="mt-3 text-sm text-gray-600 space-y-1">
                            <p class="text-emerald-600 font-bold text-lg">{{ number_format($trip->price) }} دج</p>
                            <p>🎫 {{ $trip->available_seats }} مقعد متاح</p>
                            @if($trip->departure_date)
                                <p>📅 {{ $trip->departure_date->format('Y-m-d') }}</p>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 col-span-3 text-center py-8">لا توجد رحلات مسجلة</p>
                @endforelse
            </div>
        </div>

        <!-- FAQs Tab -->
        <div id="tab-faqs" class="tab-content p-6 hidden">
            <div class="space-y-4">
                @forelse($faqs as $faq)
                    <details class="border rounded-lg p-4 hover:shadow-md transition">
                        <summary class="cursor-pointer font-medium text-gray-800">
                            ❓ {{ $faq->question }}
                        </summary>
                        <p class="mt-3 text-gray-600 pr-6">{{ $faq->answer }}</p>
                        @if($faq->category)
                            <span class="inline-block mt-2 bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">{{ $faq->category }}</span>
                        @endif
                    </details>
                @empty
                    <p class="text-gray-500 text-center py-8">لا توجد أسئلة شائعة مسجلة</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(el => {
        el.classList.remove('border-emerald-500', 'text-emerald-600');
        el.classList.add('border-transparent', 'text-gray-500');
    });
    
    // Show selected tab
    document.getElementById('tab-' + tabName).classList.remove('hidden');
    document.querySelector('[data-tab="' + tabName + '"]').classList.add('border-emerald-500', 'text-emerald-600');
    document.querySelector('[data-tab="' + tabName + '"]').classList.remove('border-transparent', 'text-gray-500');
}
</script>
@endpush
@endsection