@extends('front.layouts.app')

@section('title', $policy->title . ' | منصة MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/legal.css') }}">
@endsection

@section('content')
    <section class="legal-page">
        <div class="container">
            <div class="legal-container">
                <div class="legal-header">
                    <div class="legal-icon mb-4">
                        <i class="{{ $policy->intro_icon ?: 'fa-solid fa-file-shield' }} text-5xl text-blue-600"></i>
                    </div>
                    <h1>{{ $policy->title }}</h1>
                    @if($policy->last_updated_at)
                    <p class="last-updated">آخر تحديث: {{ $policy->last_updated_at->format('Y/m/d') }}</p>
                    @endif
                </div>

                @if($policy->intro_description)
                <div class="legal-intro mb-10 text-lg leading-relaxed text-gray-700 text-center italic">
                    {{ $policy->intro_description }}
                </div>
                @endif

                <div class="legal-content">
                    @forelse($policy->sections as $section)
                    <div class="legal-section">
                        @if($policy->slug != 'faq')
                        <h2>
                            <i class="{{ $section->icon ?: 'fa-solid fa-chevron-left' }}"></i>
                            {{ $section->title }}
                        </h2>
                        @endif

                        @if($section->description)
                        <p>{{ $section->description }}</p>
                        @endif

                        @if($section->items->isNotEmpty())
                        <ul class="space-y-4">
                            @foreach($section->items as $item)
                            <li class="{{ $policy->slug == 'faq' ? 'bg-gray-50 p-6 rounded-2xl border border-gray-100' : '' }}">
                                @if($policy->slug == 'faq')
                                <div class="font-bold text-blue-600 text-lg mb-2 flex items-center gap-2">
                                    <i class="fa-solid fa-circle-question"></i>
                                    {{ $section->title }}
                                </div>
                                <div class="text-gray-700">
                                    {{ $item->content }}
                                </div>
                                @else
                                    {{ $item->content }}
                                @endif
                            </li>
                            @endforeach
                        </ul>
                        @endif
                    </div>
                    @empty
                    <div class="text-center py-20 text-gray-400">
                        <i class="fa-solid fa-folder-open text-6xl mb-4"></i>
                        <p>لا يوجد محتوى متاح حالياً لهذه الصفحة.</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
@endsection