{{-- resources/views/errors/custom404.blade.php --}}
@extends('layouts.app')

@section('title', 'الصفحة غير موجودة')

@section('content')
<div class="error-404-page" dir="rtl" lang="ar">
  <div class="container py-5">
    <div class="row justify-content-center align-items-center">
      <div class="col-lg-8 col-md-10">
        <div class="card shadow-lg border-0 overflow-hidden">
          <div class="card-body p-4 p-md-5 d-flex gap-4 align-items-center flex-column flex-md-row" style="min-height:220px;">
            <!-- Left: Text -->
            <div class="flex-grow-1 text-md-end text-center">
              <div class="error-code">404</div>
              <h1 class="h3 mb-2">عذرًا — الصفحة غير موجودة</h1>
              <p class="text-muted mb-3 lead-desc">
                الصفحة التي تحاول الوصول إليها غير موجودة أو تمت إزالتها أو قد تغيّر عنوانها.
                يمكنك البحث في البلاغات، العودة إلى الصفحة الرئيسية أو استخدام الروابط السريعة أدناه.
              </p>

              <!-- search form -->
              {{-- <form action="{{ route('form.index') }}" method="GET" class="d-flex justify-content-center justify-content-md-end gap-2 mb-3" role="search" aria-label="Search signalements">
                <input name="q"
                       type="search"
                       class="form-control form-control-sm search-input"
                       placeholder="ابحث باسم الضحية أو رقم الهاتف أو ID"
                       value="{{ request('q') ?? '' }}"
                       aria-label="بحث">
                <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center">
                  <i class="bx bx-search fs-5 me-1"></i> بحث
                </button>
              </form> --}}

              <div class="d-flex flex-wrap gap-2 justify-content-right justify-content-md-start mb-2">
                {{-- <a class="btn btn-outline-secondary btn-sm" href="{{ url('/') }}">
                  <i class="bx bx-home-alt me-1"></i> الصفحة الرئيسية
                </a> --}}
                <a class="btn btn-outline-secondary btn-sm" href="{{ route('sommaires.cheffes.index') }}">
                  قوائم الرؤساء
                </a>
                <a class="btn btn-outline-secondary btn-sm" href="{{ route('bureauxcommissaires.index') }}">
                  المكاتب الجهوية
                </a>
                <a class="btn btn-outline-secondary btn-sm" href="{{ route('equipes.index') }}">
                  الفرق
                </a>
              </div>

              <div class="small text-muted d-block text-center text-md-end">
                إن استمرت المشكلة تواصل مع الدعم أو تأكد من صحة عنوان الـ URL.
              </div>
            </div>

            <!-- Right: Illustration -->
            <div class="illustration d-none d-md-flex align-items-center justify-content-center">
              {{-- Inline, neutral SVG illustration (scales well, no external assets) --}}
              <svg width="220" height="160" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="404 illustration">
                <defs>
                  <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0" stop-color="#FFE8D6" />
                    <stop offset="1" stop-color="#FFF3E0" />
                  </linearGradient>
                  <linearGradient id="g2" x1="0" x2="1">
                    <stop offset="0" stop-color="#FF8A00"/>
                    <stop offset="1" stop-color="#FF5200"/>
                  </linearGradient>
                </defs>

                <rect x="0" y="0" width="400" height="300" rx="12" fill="url(#g1)" />
                <g transform="translate(40,20)">
                  <circle cx="140" cy="80" r="48" fill="#fff" opacity="0.9"/>
                  <text x="140" y="95" text-anchor="middle" font-size="34" font-weight="700" fill="url(#g2)" style="font-family:Tahoma, Arial, sans-serif;">404</text>

                  <!-- magnifier -->
                  <g transform="translate(210,120) rotate(20)">
                    <circle cx="10" cy="10" r="24" stroke="#FF8A00" stroke-width="6" fill="rgba(255,255,255,0.6)"/>
                    <rect x="30" y="30" width="8" height="40" rx="4" transform="rotate(45 34 30)" fill="#FF8A00"/>
                  </g>

                  <!-- small decorative shapes -->
                  <rect x="10" y="150" rx="6" ry="6" width="70" height="10" fill="#FFF" opacity="0.6" />
                  <rect x="100" y="150" rx="6" ry="6" width="130" height="10" fill="#FFF" opacity="0.5" />
                </g>
              </svg>
            </div>

          </div> <!-- end card-body -->
        </div> <!-- end card -->
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
/* 404 page specific styles (RTL aware) */
.error-404-page { background: linear-gradient(180deg, #ffffff 0%, #fffaf6 100%); min-height: 70vh; }
.error-code {
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -1px;
  color: #ff6b00;
  background: linear-gradient(90deg,#ff8a00,#ff5200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .15rem;
}
.lead-desc { color: #58616a; margin-bottom: .8rem; }

.card { border-radius: 12px; overflow: hidden; }
.search-input { min-width: 220px; max-width: 420px; }
.btn-outline-secondary { border-color: rgba(33,37,41,0.08); color: #444; }
.illustration svg { transform-origin: center; animation: float 6s ease-in-out infinite; }

/* micro animation */
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

/* small screens adjustments */
@media (max-width: 767.98px) {
  .illustration { display: none !important; }
  .search-input { width: 100%; }
  .card-body { padding: 1.25rem; }
}
</style>
@endpush

@push('scripts')
<script>
  // auto focus search on load for UX
  document.addEventListener('DOMContentLoaded', function(){
    const el = document.querySelector('.search-input');
    if (el) el.focus({preventScroll:true});
  });
</script>
@endpush

@endsection