{{-- resources/views/web/visas/show.blade.php --}}
@extends('web.layouts.app')

@php
    $siteName = config('app.name', 'البطل الروماني');
    $title = ($visa->name_ar ?? $visa->country_name ?? $visa->name_en ?? 'تفاصيل الفيزا');
    $slug  = $visa->slug ?? \Illuminate\Support\Str::slug($visa->name_en ?? $visa->name_ar ?? 'visa');
    $region = $visa->region ?? null;

    // تنسيق السعر
    $fmtPrice = function ($amount) {
        if ($amount === null || $amount === '') return 'السعر حسب الحالة';
        return number_format((float)$amount, 0) . ' ر.س';
    };

    // صورة الغلاف
    $heroImg = null;
    
    // الأولوية: صورة الفيزا الخاصة
    if (!empty($visa->cover_image)) {
        $heroImg = $visa->cover_image;
    } elseif (!empty($visa->image_url)) {
        $heroImg = $visa->image_url;
    }
    
    // إذا لم توجد صورة خاصة، استخدم الصورة العامة للفيزات
    if (!$heroImg && !empty($settings['hero_visas'])) {
        $heroImg = $settings['hero_visas'];
    }
    
    // إذا لم توجد، استخدم الصورة الرئيسية للموقع
    if (!$heroImg && !empty($settings['hero_image'])) {
        $heroImg = $settings['hero_image'];
    }
    
    // معالجة الصورة - إذا كانت مسار محلي
    if ($heroImg && !\Illuminate\Support\Str::startsWith($heroImg, ['http://', 'https://'])) {
        if (\Illuminate\Support\Facades\Storage::exists($heroImg)) {
            $heroImg = \Illuminate\Support\Facades\Storage::url($heroImg);
        } else {
            $heroImg = asset($heroImg);
        }
    }
    
    // العلم
    $flag = null;
    if ($slug) {
        $trySvg = public_path('images/flags/'.$slug.'.svg');
        $tryPng = public_path('images/flags/'.$slug.'.png');
        $flag   = file_exists($trySvg) ? asset('images/flags/'.$slug.'.svg') :
                 (file_exists($tryPng) ? asset('images/flags/'.$slug.'.png') : null);
    }

    // أنواع الفيزا
    $visaTypesVal = $visa->visa_types ?? [];
    $visaTypesArr = is_string($visaTypesVal) ? (json_decode($visaTypesVal, true) ?: []) : (is_array($visaTypesVal) ? $visaTypesVal : []);
    $visaTypeLabels = [
        'tourist'  => 'فيزا سياحية',
        'business' => 'فيزا عمل',
        'student'  => 'فيزا طالب',
        'transit'  => 'فيزا ترانزيت',
        'family'   => 'فيزا عائلية',
        'medical'  => 'فيزا علاجية',
    ];

    // البيانات الأساسية
    $processing = $visa->processing_time_text ?? null;
    $priceFrom  = $visa->price_from ?? null;
    $requirementsHtml = $visa->requirements_richtext ?? ($visa->requirements_html ?? null);

    $faqsVal = $visa->faqs ?? [];
    $faqsArr = is_string($faqsVal) ? (json_decode($faqsVal, true) ?: []) : (is_array($faqsVal) ? $faqsVal : []);

    // واتساب
    $wa     = $visa->whatsapp ?? ($settings['whatsapp'] ?? null);
    $waLink = $wa ? 'https://wa.me/'.preg_replace('~\D~', '', $wa) : null;

    // الروابط
    $indexUrl = route('visas.index');
    $showUrl = route('visas.show', $slug);
    
    // استخدام رابط بديل إذا كان visas.apply غير معرّف
    try {
        $applyUrl = route('visas.apply', $slug);
    } catch (Exception $e) {
        $applyUrl = $waLink ?: url('/contact');
    }

    // SEO
    $metaTitle = $title . ' - ' . $siteName;
    $metaDesc  = 'كل ما تحتاج معرفته عن فيزا ' . $title . ' من ' . $siteName . ' (المدّة، المتطلبات، السعر، ونصائح مهمة).';
@endphp

@section('title', $metaTitle)

@push('meta')
    <meta name="description" content="{{ $metaDesc }}">
    <meta property="og:title" content="{{ $metaTitle }}">
    <meta property="og:description" content="{{ $metaDesc }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ $showUrl }}">
    <meta property="og:image" content="{{ $heroImg }}">
@endpush

@push('styles')
<style>
  :root {
    --primary-color: #2c5aa0;
    --secondary-color: #e85a18;
    --accent-color: #ffd166;
    --light-bg: #f8f9fa;
    --dark-text: #2d3748;
    --gray-text: #6c757d;
    --border-radius: 16px;
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.12);
    --transition: all 0.3s ease;
  }
  
  /* البنر */
  .hero-visa {
    min-height: 420px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  
  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 90, 160, 0.85) 0%, rgba(30, 58, 138, 0.9) 100%);
    z-index: 2;
  }
  
  .hero-content {
    position: relative;
    z-index: 3;
  }
  
  .hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
  }
  
  .breadcrumb-custom .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
  }
  
  .breadcrumb-custom .breadcrumb-item.active {
    color: var(--accent-color);
  }
  
  /* البطاقات */
  .info-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid #f1f5f9;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .info-card:hover {
    box-shadow: var(--shadow-hover);
  }
  
  .country-flag {
    width: 50px;
    height: 35px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  /* أنواع الفيزا */
  .visa-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
  }
  
  .visa-type-item {
    background: rgba(44, 90, 160, 0.08);
    border: 1px solid rgba(44, 90, 160, 0.2);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
    transition: var(--transition);
  }
  
  .visa-type-item:hover {
    background: rgba(44, 90, 160, 0.15);
    transform: translateY(-2px);
  }
  
  /* معلومات سريعة */
  .quick-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
  }
  
  .info-box {
    background: rgba(44, 90, 160, 0.05);
    border: 1px solid rgba(44, 90, 160, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
  }
  
  .info-label {
    font-size: 0.9rem;
    color: var(--gray-text);
    margin-bottom: 0.5rem;
    display: block;
  }
  
  .info-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
  }
  
  /* خطوات */
  .steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .step-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
  }
  
  .step-number {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 1rem;
  }
  
  /* الأكورديون */
  .accordion-custom .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  
  .accordion-custom .accordion-button {
    background: white;
    color: var(--dark-text);
    font-weight: 600;
    padding: 1.25rem;
    border: none;
  }
  
  .accordion-custom .accordion-button:not(.collapsed) {
    background: var(--primary-color);
    color: white;
  }
  
  .accordion-custom .accordion-body {
    padding: 1.25rem;
    background: #f8fafc;
  }
  
  /* الأزرار */
  .btn-primary-custom {
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: 600;
    color: white;
    transition: var(--transition);
  }
  
  .btn-primary-custom:hover {
    background: #23447c;
    color: white;
    transform: translateY(-2px);
  }
  
  .btn-whatsapp-custom {
    background: #25D366;
    border: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: 600;
    color: white;
    transition: var(--transition);
  }
  
  .btn-whatsapp-custom:hover {
    background: #128C7E;
    color: white;
    transform: translateY(-2px);
  }
  
  /* الدول المشابهة */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .related-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
  }
  
  .related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    color: inherit;
  }
  
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.2rem;
    }
    
    .visa-types-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-info {
      grid-template-columns: 1fr;
    }
    
    .steps-container {
      grid-template-columns: 1fr;
    }
    
    .related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
@endpush

@section('content')

{{-- البنر --}}
<section class="hero-visa">
  <div class="hero-bg" style="background-image: url('{{ $heroImg }}')"></div>
  <div class="hero-overlay"></div>
  <div class="container hero-content py-5">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8">
        <div class="d-flex align-items-center justify-content-center gap-3 mb-3">
          @if($flag)
            <img class="country-flag" src="{{ $flag }}" alt="{{ $title }}">
          @endif
          <h1 class="hero-title">{{ $title }}</h1>
        </div>
        
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-3">
          @if($region)
            <span class="badge bg-light text-dark rounded-pill px-3 py-2">{{ $region }}</span>
          @endif
          @foreach($visaTypesArr as $t)
            <span class="badge bg-warning text-dark rounded-pill px-3 py-2">{{ $visaTypeLabels[$t] ?? $t }}</span>
          @endforeach
        </div>
        
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom justify-content-center">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">الرئيسية</a></li>
            <li class="breadcrumb-item"><a href="{{ $indexUrl }}">الفيزا</a></li>
            <li class="breadcrumb-item active">{{ $title }}</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>

{{-- المحتوى الرئيسي --}}
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4">
      {{-- العمود الرئيسي --}}
      <div class="col-12 col-lg-8">
        {{-- معلومات سريعة --}}
        <div class="info-card">
          <div class="quick-info">
            <div class="info-box">
              <span class="info-label">مدة المعالجة</span>
              <div class="info-value">{{ $processing ?? 'حسب السفارة' }}</div>
            </div>
            <div class="info-box">
              <span class="info-label">السعر الابتدائي</span>
              <div class="info-value">{{ $fmtPrice($priceFrom) }}</div>
            </div>
            <div class="info-box">
              <span class="info-label">أنواع الفيزا</span>
              <div class="info-value">{{ count($visaTypesArr) }}</div>
            </div>
          </div>

          {{-- الوصف --}}
          @if(!empty($visa->short_description))
            <div class="mt-4">
              <h4 class="fw-bold mb-3">نظرة عامة</h4>
              <div class="text-muted fs-6">{!! $visa->short_description !!}</div>
            </div>
          @endif
        </div>

        {{-- أنواع الفيزا --}}
        @if(!empty($visaTypesArr))
          <div class="info-card">
            <h4 class="fw-bold mb-4">أنواع التأشيرات المتاحة</h4>
            <div class="visa-types-grid">
              @foreach($visaTypesArr as $t)
                <div class="visa-type-item">
                  {{ $visaTypeLabels[$t] ?? $t }}
                </div>
              @endforeach
            </div>
          </div>
        @endif

        {{-- خطوات التقديم --}}
        <div class="info-card">
          <h4 class="fw-bold mb-4">خطوات التقديم</h4>
          <div class="steps-container">
            <div class="step-card">
              <div class="step-number">1</div>
              <h6>تعبئة النموذج</h6>
              <p class="text-muted mb-0">املأ بياناتك ومعلومات السفر</p>
            </div>
            <div class="step-card">
              <div class="step-number">2</div>
              <h6>رفع المستندات</h6>
              <p class="text-muted mb-0">أرفق جميع المستندات المطلوبة</p>
            </div>
            <div class="step-card">
              <div class="step-number">3</div>
              <h6>المراجعة والدفع</h6>
              <p class="text-muted mb-0">راجع البيانات وادفع الرسوم</p>
            </div>
            <div class="step-card">
              <div class="step-number">4</div>
              <h6>استلام الفيزا</h6>
              <p class="text-muted mb-0">احصل على الفيزا في وقت قياسي</p>
            </div>
          </div>
        </div>

        {{-- المتطلبات --}}
        <div class="info-card">
          <h4 class="fw-bold mb-4">المتطلبات والمواعيد المطلوبة</h4>
          <div class="text-muted fs-6">
            {!! $requirementsHtml ?? '<p class="text-muted">سيتم تحديث متطلبات هذه الدولة قريباً.</p>' !!}
          </div>
        </div>

        {{-- الأسئلة الشائعة --}}
        @if(!empty($faqsArr))
          <div class="info-card">
            <h4 class="fw-bold mb-4">الأسئلة الشائعة</h4>
            <div class="accordion accordion-custom" id="visaFaqs">
              @foreach($faqsArr as $i=>$f)
                @php
                  $qid = 'q'.$i;
                  $q = (is_array($f) ? ($f['q'] ?? $f['question'] ?? '') : '');
                  $a = (is_array($f) ? ($f['a'] ?? $f['answer'] ?? '') : '');
                @endphp
                @if(!empty($q) && !empty($a))
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="h{{ $qid }}">
                      <button class="accordion-button @if($i>0) collapsed @endif" type="button" data-bs-toggle="collapse" data-bs-target="#c{{ $qid }}">
                        {{ $q }}
                      </button>
                    </h2>
                    <div id="c{{ $qid }}" class="accordion-collapse collapse @if($i==0) show @endif" data-bs-parent="#visaFaqs">
                      <div class="accordion-body">
                        {!! $a !!}
                      </div>
                    </div>
                  </div>
                @endif
              @endforeach
            </div>
          </div>
        @endif
      </div>

      {{-- الشريط الجانبي - تم إصلاح النصوص هنا --}}
      <div class="col-12 col-lg-4">
        {{-- طلب الفيزا - النصوص مصححة --}}
        <div class="info-card">
          <h5 class="fw-bold mb-3">تقديم طلب التأشيرة</h5>
          <p class="text-muted mb-4">نساعدك خطوة بخطوة.</p>

          <div class="d-grid gap-3">
            @if($waLink)
              <a href="{{ $waLink }}" target="_blank" class="btn btn-whatsapp-custom">
                <i class="fab fa-whatsapp me-2"></i> تواصل عبر واتساب
              </a>
            @endif
            
            @if($applyUrl)
              <a href="{{ $applyUrl }}" class="btn btn-primary-custom">
                <i class="fas fa-file-alt me-2"></i> إبدأ طلب التأشيرة
              </a>
            @endif
          </div>

          {{-- ملخص سريع - النصوص مصححة --}}
          <div class="mt-4 pt-4 border-top">
            <h6 class="fw-bold mb-3">ملخص الطلب</h6>
            <div class="d-flex justify-content-between mb-2">
              <span class="text-muted">الدولة:</span>
              <strong>{{ $title }}</strong>
            </div>
            @if($region)
              <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">المنطقة:</span>
                <span>{{ $region }}</span>
              </div>
            @endif
            <div class="d-flex justify-content-between mb-2">
              <span class="text-muted">السعر:</span>
              <span>{{ $fmtPrice($priceFrom) }}</span>
            </div>
            @if($processing)
              <div class="d-flex justify-content-between">
                <span class="text-muted">مدة المعالجة:</span>
                <span>{{ $processing }}</span>
              </div>
            @endif
          </div>
        </div>

        {{-- روابط سريعة --}}
        <div class="info-card">
          <h6 class="fw-bold mb-3">روابط مهمة</h6>
          <div class="d-grid gap-2">
            <a href="{{ $indexUrl }}" class="btn btn-outline-primary text-start">
              <i class="fas fa-globe me-2"></i> جميع خدمات الفيزا
            </a>
            <a href="{{ url('/') }}" class="btn btn-outline-primary text-start">
              <i class="fas fa-home me-2"></i> الصفحة الرئيسية
            </a>
          </div>
        </div>
      </div>
    </div>

    {{-- فيزا مشابهة --}}
    @isset($related)
      @if(count($related))
        <div class="mt-5">
          <h4 class="fw-bold mb-4">دول أخرى قد تهمك</h4>
          <div class="related-grid">
            @foreach($related as $r)
              @php
                $rTitle = $r->name_ar ?? $r->country_name ?? $r->name_en ?? 'دولة';
                $rSlug  = $r->slug ?? $r->id;
                $rUrl   = route('visas.show', $rSlug);
              @endphp
              <a href="{{ $rUrl }}" class="related-card">
                <h6 class="fw-bold mb-2">{{ $rTitle }}</h6>
                <p class="text-muted mb-0 small">اطلع على التفاصيل</p>
              </a>
            @endforeach
          </div>
        </div>
      @endif
    @endisset
  </div>
</section>
@endsection