@extends('layouts.app')

@section('content')
<section class="it-about-3-area p-relative pt-30 pb-125" dir="rtl" lang="ar">
<img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
                <div class="container">
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
           <a href="{{ url('/') }}">
                <i class="bi bi-house-fill"></i>
                <span>الرئيسية</span>
            </a>
        </li>
      
        <li class="breadcrumb-item active" aria-current="page">مناظرات وإنتدابات</li>
    </ol>
</nav>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center mb-4">
        <span class="it-section-subtitle">فرص وخدمات</span>
        <h4 class="it-section-title it-split-in-right mb-0">مناظرات وإنتدابات</h4>
        <p class="text-muted mt-2">قائمة المناظرات المتاحة حالياً. انقر على "التسجيل" لفتح صفحة التسجيل</p>
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-lg-8 mx-auto">
        <form method="GET" action="{{ route('concours.available') }}" class="d-flex gap-2 align-items-center">
          <input name="q" value="{{ $q ?? '' }}" class="conc-input form-control form-control-sm" placeholder="ابحث بعنوان المسابقة..." />
          <div class="d-flex gap-2">
            <button class="btn bg-rgb-primary1 font-weight-medium" style="width: 105px;">بحث</button>
            <a href="{{ route('concours.available') }}" style="width: 105px;" class="btn bg-rgb-primary1 font-weight-medium">إعادة</a>
          </div>
        </form>
      </div>
    </div>

    {{-- Bootstrap grid: each card inside a column --}}
    <div class="services-grid">
      @forelse($concours as $c)
            <div class="service-card">
                <div class="service-iconn">
                    <i class="ri-file-list-line"></i>
                </div>
                <h3 class="service-title">{{ $c->titre }}</h3>
                <p class="text-muted mb-3">
                    انتهاء التسجيل:
                    @if($c->date_fin)
                        {{ $c->date_fin->format('Y-m-d') }}
                    @else
                        —
                    @endif
                </p>
                @if(!empty($c->description))
                    <p class="text-muted mb-3">{{ \Illuminate\Support\Str::limit(strip_tags($c->description), 120) }}</p>
                @endif
                <div class="service-actions">
                    <a href="{{ route('concours.show', $c) }}" class="service-link">التسجيل <i class="ri-arrow-left-line"></i></a>
                    <a href="{{ route('concours.results', $c) }}" class="service-link">نتائج <i class="ri-arrow-left-line"></i></a>
                </div>
            </div>
      @empty
        <div class="col-12 text-center py-5">
          <p class="mb-0 text-muted">لا توجد مسابقات متاحة حالياً.</p>
        </div>
      @endforelse
    </div>

    <div class="row mt-4">
      <div class="col-12 d-flex justify-content-center">
        {{ $concours->links('pagination::bootstrap-5') }}
      </div>
    </div>
  </div>
</section>
@endsection