@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">
                <a href="{{ route('concours.available') }}">
                        <span>المناظرات و الانتدابات</span>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">نتائج المناظرة</li>
            </ol>
        </nav>

        <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">{{ $concours->titre }}</h4>
                <p class="text-muted mt-2">انتهاء التسجيل: {{ $concours->date_fin ? $concours->date_fin->format('Y-m-d') : '—' }}</p>
                
            </div>
        </div>

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

        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm p-4">
                    <div class="form-section">
    {{-- Show a prompt if user didn't search yet --}}
    @if(! ($searchRan ?? false) )
      <div class="py-5 text-center">
        <p class="h6 text-muted mb-2">أدخل الاسم أو رقم بطاقة التعريف (CIN) ثم اضغط "بحث" لعرض النتائج.</p>
        <small class="text-muted">لن يتم عرض أي سجلات دون بحث.</small>
      </div>

    @else
      {{-- search was run: show table (may be empty if no matches) --}}
      <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle text-end">
          <thead class="table-light">
            <tr>
              <th style="width:30%;">الاسم</th>
              <th style="width:15%;">رقم بطاقة التعريف</th>
              <th style="width:25%;">البريد</th>
              <th style="width:15%;">الحالة</th>
              <th style="width:15%;">تاريخ الإنشاء</th>
            </tr>
          </thead>

          <tbody>
            @forelse($candidates as $cand)
              <tr>
                <td>
                  <div><strong>{{ $cand->nom }} {{ $cand->prenom }}</strong></div>
                  <div class="text-muted small">{{ $cand->gouvernorat ?? '—' }}</div>
                </td>
                <td>{{ $cand->cin ?? '—' }}</td>
                <td>
                  @if($cand->email)
                    <a href="mailto:{{ $cand->email }}" class="text-decoration-none">{{ $cand->email }}</a>
                  @else
                    —
                  @endif
                </td>
                <td>
                  <span class="badge 
                    {{ $cand->etat === 'acceptation_definitif' ? 'bg-success' : ($cand->etat === 'acceptation_primaire' ? 'bg-info text-dark' : ($cand->etat === 'refuse' ? 'bg-danger' : 'bg-warning text-dark')) }}">
                    {{ $cand->etat_label ?? $cand->etat }}
                  </span>
                </td>
                <td><small class="text-muted">{{ optional($cand->created_at)->format('Y-m-d') }}</small></td>
              </tr>
            @empty
              <tr>
                <td colspan="5" class="text-center py-4 text-muted">لا توجد نتائج مطابقة لبحثك.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="mt-3 d-flex justify-content-center">
        {{ $candidates->links('pagination::bootstrap-5') }}
      </div>
    @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection