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

@section('title', ($pageTitle ?? 'خدمات الفيزا') . ' - ' . ($siteName ?? 'البطل الروماني'))

@push('styles')
<style>
  :root {
    --primary-color: #2c5aa0;
    --secondary-color: #e85a18;
    --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: #ffd166;
  }
  
  .search-section {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    margin-top: -60px;
    position: relative;
    z-index: 10;
    border: 1px solid #e2e8f0;
  }
  
  .search-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .search-input-group {
    position: relative;
    margin-bottom: 1.5rem;
  }
  
  .search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-text);
  }
  
  .search-input {
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 1rem 3rem 1rem 1.5rem;
    font-size: 1.1rem;
    height: 60px;
  }
  
  .search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
  }
  
  .filter-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .filter-group {
    flex: 1;
    min-width: 200px;
  }
  
  .filter-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-text);
    display: block;
  }
  
  .form-select-custom {
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    padding: 0.75rem 1rem;
    height: 50px;
  }
  
  .btn-search {
    background: var(--secondary-color);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    color: white;
    height: 50px;
    min-width: 140px;
  }
  
  .btn-reset {
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    height: 50px;
    border: 2px solid #e2e8f0;
  }
  
  .countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    width: 100%;
  }
  
  .country-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
  }
  
  .country-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
  }
  
  .country-flag {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .country-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #f1f5f9;
  }
  
  .country-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 0;
  }
  
  .country-body {
    padding: 1rem 1.5rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .visa-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .visa-type-item {
    background: rgba(44, 90, 160, 0.08);
    border: 1px solid rgba(44, 90, 160, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary-color);
  }
  
  .visa-type-more {
    grid-column: 1 / -1;
    background: rgba(107, 114, 128, 0.1);
    color: var(--gray-text);
    text-align: center;
    border: 1px solid rgba(107, 114, 128, 0.2);
    font-size: 0.75rem;
  }
  
  .country-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
  }
  
  .processing-time {
    color: var(--gray-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
  }
  
  .price {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.1rem;
  }
  
  .price small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-text);
  }
  
  .country-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
  }
  
  .btn-details {
    flex: 1;
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
  }
  
  .btn-details:hover {
    background: #23447c;
    color: white;
  }
  
  .btn-whatsapp {
    background: #25D366;
    border: none;
    border-radius: 10px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
  }
  
  .no-results {
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    grid-column: 1 / -1;
  }
  
  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .results-count {
    text-align: center;
    color: var(--gray-text);
    margin-bottom: 2rem;
    font-size: 1.1rem;
  }
  
  .results-count .count {
    color: var(--primary-color);
    font-weight: 700;
  }
  
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.2rem;
    }
    
    .hero-subtitle {
      font-size: 1rem;
    }
    
    .search-section {
      margin-top: -40px;
      padding: 1.5rem;
    }
    
    .search-input {
      height: 50px;
      font-size: 1rem;
    }
    
    .filter-row {
      flex-direction: column;
    }
    
    .filter-group {
      width: 100%;
    }
    
    .countries-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    .country-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    
    .country-actions {
      flex-direction: column;
    }
    
    .btn-whatsapp {
      width: 100%;
    }
  }
</style>
@endpush

@section('content')
@php
  $titlePage = $pageTitle ?? 'خدمات الفيزا';
  $heroImg = $hero_image ?? ($settings['hero_visas'] ?? ($settings['hero_image'] ?? 'https://images.unsplash.com/photo-1488085061387-422e29b40054?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'));
  $countries = $countries ?? collect();
  $visaTypes = [
    'tourist' => 'فيزا سياحية',
    'business' => 'فيزا عمل', 
    'student' => 'فيزا طالب',
    'transit' => 'فيزا ترانزيت'
  ];
  $currentUrl = url()->current();
@endphp

{{-- الهيرو --}}
<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">
        <h1 class="hero-title">{{ $titlePage }}</h1>
        <p class="hero-subtitle">احصل على فيزا السفر بسهولة وأمان إلى أكثر من 50 دولة حول العالم</p>
        <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 active">خدمات الفيزا</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>

{{-- البحث --}}
<section class="py-4 bg-light">
  <div class="container">
    <div class="search-section">
      <h3 class="search-title">ابحث عن وجهتك المفضلة</h3>
      <form method="GET" action="{{ $currentUrl }}">
        <div class="search-input-group">
          <i class="fas fa-search search-icon"></i>
          <input type="text" name="q" value="{{ request('q') }}" class="form-control search-input" placeholder="ابحث عن الدولة... مثل: تركيا، ماليزيا، دبي">
        </div>
        
        <div class="filter-row">
          <div class="filter-group">
            <label class="filter-label">نوع الفيزا</label>
            <select class="form-select form-select-custom" name="type">
              <option value="">جميع أنواع الفيزا</option>
              @foreach($visaTypes as $key=>$label)
                <option value="{{ $key }}" @selected(request('type')==$key)>{{ $label }}</option>
              @endforeach
            </select>
          </div>
          
          <div class="d-flex gap-2 align-items-end">
            <button class="btn btn-search" type="submit">
              <i class="fas fa-search me-2"></i> بحث
            </button>
            <a href="{{ $currentUrl }}" class="btn btn-reset">
              <i class="fas fa-times me-2"></i> إعادة
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

{{-- الدول --}}
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="section-title">الدول المتاحة للفيزا</h2>
    
    @if($countries->count() > 0)
      <div class="results-count">
        عثرنا على <span class="count">{{ $countries->count() }}</span> دولة
      </div>
    @endif
    
    @if($countries->count() === 0)
      <div class="no-results">
        <i class="fas fa-globe-americas no-results-icon"></i>
        <h4 class="mb-3">لا توجد نتائج مطابقة</h4>
        <p class="text-muted mb-4">جرب تعديل معايير البحث</p>
        <a href="{{ $currentUrl }}" class="btn btn-primary">
          <i class="fas fa-redo me-2"></i> عرض جميع الدول
        </a>
      </div>
    @else
      <div class="countries-grid">
        @foreach($countries as $c)
          @php
            $nameAr = $c->name_ar ?? $c->country_name ?? null;
            $nameEn = $c->name_en ?? null;
            $title = $nameAr ?: $nameEn;
          @endphp
          
          @if(!empty($title))
            @php
              $slug = $c->slug ?? \Illuminate\Support\Str::slug($nameEn ?: $nameAr);
              $proc = $c->processing_time_text ?? '3-7 أيام عمل';
              $price = $c->price_from ?? null;

              $typesVal = $c->visa_types ?? null;
              $typesArr = is_string($typesVal) ? json_decode($typesVal, true) : (is_array($typesVal) ? $typesVal : ['tourist', 'business']);
              $typesArr = array_filter((array)$typesArr);
              $displayTypes = array_slice($typesArr, 0, 4);
              $remainingTypes = count($typesArr) - count($displayTypes);

              $showUrl = route('visas.show', $slug);
            @endphp

            <div class="country-card">
              <div class="country-header">
                <div class="d-flex align-items-center gap-3">
                  @php
                    $flag = null;
                    if ($slug) {
                      $trySvg = 'images/flags/'.$slug.'.svg';
                      $tryPng = 'images/flags/'.$slug.'.png';
                      if(file_exists(public_path($trySvg))) {
                        $flag = asset($trySvg);
                      } elseif(file_exists(public_path($tryPng))) {
                        $flag = asset($tryPng);
                      }
                    }
                  @endphp
                  
                  @if($flag)
                    <img class="country-flag" src="{{ $flag }}" alt="{{ $title }}">
                  @else
                    <span class="country-flag d-inline-flex align-items-center justify-content-center bg-secondary text-white">🏳️</span>
                  @endif
                  <h3 class="country-title">{{ $title }}</h3>
                </div>
              </div>

              <div class="country-body">
                @if(!empty($displayTypes))
                  <div class="visa-types-grid">
                    @foreach($displayTypes as $t)
                      <div class="visa-type-item">
                        {{ $visaTypes[$t] ?? $t }}
                      </div>
                    @endforeach
                    @if($remainingTypes > 0)
                      <div class="visa-type-item visa-type-more">
                        +{{ $remainingTypes }} أنواع أخرى
                      </div>
                    @endif
                  </div>
                @endif

                <div class="country-meta">
                  <div class="processing-time">
                    <i class="fas fa-clock"></i> 
                    <span>{{ $proc }}</span>
                  </div>
                  <div class="price">
                    @if(!is_null($price))
                      {{ number_format((float)$price) }} <small>ر.س</small>
                    @else
                      <span class="text-muted">السعر عند الطلب</span>
                    @endif
                  </div>
                </div>

                <div class="country-actions">
                  <a href="{{ $showUrl }}" class="btn-details">
                    <i class="fas fa-info-circle"></i> التفاصيل
                  </a>
                  @php
                    $wa = $c->whatsapp ?? ($settings['whatsapp'] ?? null);
                    if($wa) {
                      $cta = 'https://wa.me/'.preg_replace('~\D~','',$wa);
                    }
                  @endphp
                  @if(isset($cta))
                    <a href="{{ $cta }}" target="_blank" class="btn-whatsapp">
                      <i class="fab fa-whatsapp"></i>
                    </a>
                  @endif
                </div>
              </div>
            </div>
          @endif
        @endforeach
      </div>

      @if(method_exists($countries, 'hasPages') && $countries->hasPages())
        <div class="mt-5 d-flex justify-content-center">
          {{ $countries->links() }}
        </div>
      @endif
    @endif
  </div>
</section>
@endsection