@extends('backoffice.dashboard')

@section('content')
<style>
  /* small scoped utilities to match users index look */
  .btn-success-custom { background-color: #28a745; color: #fff; }
  .btn-orange { background-color: #fd7e14; color: #fff; }
  .block-card { background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(28,34,40,0.06); overflow:hidden; }
  .block-card-header { padding: 18px 20px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .block-card-body { padding: 16px 20px; }
  .widget-title { font-size:1.25rem; font-weight:700; margin:0; }
  .small-muted { color:#6c757d; font-size:.95rem; }
  .table-news th, .table-news td { vertical-align: middle; }
  /* RTL tweaks */
  .table-news th, .table-news td { text-align: right; direction: rtl; }
  .actions-cell { text-align: left; direction: ltr; }
  .status-badge { display:inline-block; padding:6px 10px; border-radius:10px; font-weight:600; min-width:80px; text-align:center; }
  .status-draft { background:#fff3cd; color:#856404; }
  .status-published { background:#e8f9ee; color:#218838; }
  .status-closed { background:#e9ecef; color:#6c757d; }
</style>

@if(Auth::check())
<div class="container-fluid dashboard-inner-body-container">
   <div class="row">
     <div class="col-lg-12">
           <div class="block-card dashboard-card mb-4 px-0">

        {{-- header (title + create) --}}
         <div class="block-card-header px-4 border-bottom-0 pb-0 d-flex justify-content-between">
        
            <h2 class="widget-title">المناظرات</h2>
         

    <a class="btn btn-success btn-sm" href="{{ route('concours.create') }}">
              <i class="la la-plus me-1"></i> إنشاء مناظرة
            </a>
        </div>

        {{-- optional second header row (filters etc) - keep empty for now or reuse) --}}
        <div class="block-card-header px-4 border-bottom-0 pb-0">
                <div class="d-flex gap-2 w-100 w-md-auto">
            <form method="GET" action="{{ route('concours.index') }}" class="d-flex gap-2 align-items-center" style="min-width:260px;">
              <input name="q" value="{{ $q ?? '' }}" class="form-control form-control-sm" placeholder="بحث بعنوان المسابقة" />
              <button type="submit" class="btn btn-secondary btn-sm">بحث</button>
              <a href="{{ route('concours.index') }}" class="btn btn-light btn-sm" title="إعادة تعيين">إعادة</a>
            </form>

        
          </div>
        </div>

        {{-- body --}}
        <div class="block-card-body">
          @if(session('success'))
            <div class="alert alert-success text-end">{{ session('success') }}</div>
          @endif
          @if(session('error'))
            <div class="alert alert-danger text-end">{{ session('error') }}</div>
          @endif

          <div class="my-table table-responsive">
            <table class="table align-items-center table-flush mb-0 table-news">
              <thead class="thead-light">
                <tr>
                  <th width="30%">العنوان</th>
                  <th width="18%">الفترة</th>
                  <th width="10%">الحالة</th>
                 <th width="12%">المنشئ</th>
                  <th width="10%">المترشحون</th>
                   <th width="10%">عرض</th>
                  <th width="20%" class="text-start">إجراءات</th>
                </tr>
              </thead>
              <tbody>
                @forelse($concours as $c)
                <tr>
                  <td class="fw-semibold">
                    <div>{{ $c->titre }}</div>
                    @if(!empty($c->description))
                      <small class="text-muted d-block mt-1">{{ Str::limit($c->description, 80) }}</small>
                    @endif
                  </td>

                  <td>
                    <div class="small text-muted">
                      {{ optional($c->date_debut)->format('Y-m-d') ?? '—' }}
                      —
                      {{ optional($c->date_fin)->format('Y-m-d') ?? '—' }}
                    </div>
                  </td>

                  <td>
                    @php
                      $etat = $c->etat ?? 'draft';
                      $etatLabel = $c->etat_label ?? ucfirst($etat);
                      $badgeClass = $etat === 'published' ? 'status-published' : ($etat === 'closed' ? 'status-closed' : 'status-draft');
                    @endphp
                    <span class="status-badge {{ $badgeClass }}">{{ $etatLabel }}</span>
                  </td>

                 <td>
  <div class="fw-medium">
    {{ optional($c->user)->nom_prenom ?? '—' }}
  </div>
  {{-- <small class="text-muted">ID: {{ $c->user->id ?? '—' }}</small> --}}
</td>


                  <td>
                    <small class="text-muted">{{ $c->candidates_count ?? $c->candidates()->count() }} مترشح</small>
                  </td>
   <td>
                    <a href="{{ route('concours_ext.index', $c) }}" class="btn btn-sm btn-outline-primary">المترشحين</a>
                 </td>
                  <td class="actions-cell">
                    <div class="btn-group" role="group" aria-label="actions">
      
                      <a href="{{ route('concours.edit', $c) }}" class="btn btn-outline-secondary btn-sm">
                        <i class="la la-edit me-1"></i> تعديل
                      </a>

                      <form action="{{ route('concours.destroy', $c) }}" method="POST" class="d-inline ms-1" onsubmit="return confirmAction('هل تريد حذف هذه المسابقة؟ سيتم إزالة الروابط مع المرشحين والحقول.', null, this);">
                        @csrf @method('DELETE')
                        <button type="button" class="btn btn-danger btn-sm" onclick="return confirmAction('هل تريد حذف هذه المسابقة؟', null, this.closest('form'));">
                          <i class="la la-trash me-1"></i> حذف
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
                @empty
                <tr>
                  <td colspan="6" class="text-center py-4">لا توجد مسابقات بعد.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          <div class="mt-3 d-flex justify-content-between align-items-center">
            <div class="text-muted small">إجمالي: {{ $concours->total() }}</div>
            <div>
              {{ $concours->appends(request()->query())->links('pagination::bootstrap-5') }}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

{{-- SweetAlert2 for nicer confirmations --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmAction(message, url = null, form = null) {
    Swal.fire({
        title: 'تأكيد',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#d33',
        confirmButtonText: 'نعم',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.isConfirmed) {
            if (url) {
                window.location.href = url;
            } else if (form) {
                form.submit();
            }
        }
    });
    return false;
}
</script>

@else
    <script>window.location.href = "{{ route('login') }}";</script>
@endif

@endsection