@extends('site.layout.layout')
@section('url'){{Request::fullUrl()}}@stop

@section('content')
@php
    $lang = app()->getLocale();
@endphp

<div id="page-jobs" class="page-view active">

  <!-- هيرو مخصص للوظائف والفرص -->
  <div class="td-hero">
    <div class="td-hero-inner">
      <div class="td-hero-right">
        <span class="td-hero-badge">{{ trans('app.jobs_hero_badge') }}</span>
        <h1 class="td-hero-title">{!! trans('app.jobs_hero_title') !!}</h1>
        <p class="td-hero-sub">{{ trans('app.jobs_hero_sub') }}</p>
      </div>
      <div class="td-hero-left">
        <div class="td-count-box">
          <div class="td-count-num" id="jobs-open-count">{{ $openCount ?? $jobs->where('expiry_date','>=',date('Y-m-d'))->count() }}</div>
          <div class="td-count-lbl">{{ trans('app.jobs_count_lbl') }}</div>
          @if(false)
          <div class="td-count-line"></div>
          <div class="td-compliance">
            <div class="td-comp-row"><span class="td-comp-dot td-comp-green"></span><span>{{ trans('app.jobs_comp1') }}</span></div>
            <div class="td-comp-row"><span class="td-comp-dot td-comp-grey"></span><span>{{ trans('app.jobs_comp2') }}</span></div>
            <div class="td-comp-row"><span class="td-comp-dot td-comp-gold"></span><span>{{ trans('app.jobs_comp3') }}</span></div>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>

  <!-- شريط الفلاتر والبحث -->
  <div class="td-body">
    <div class="td-filters-bar">
      <div class="td-filters-label">{{ trans('app.jobs_filters_lbl') }}</div>
      <div class="td-filters">
        <button class="td-filter on" data-jf="all">{{ trans('app.jobs_f_all') }}</button>
        <button class="td-filter" data-jf="open">{{ trans('app.jobs_f_open') }}</button>
        <button class="td-filter" data-jf="closed">{{ trans('app.jobs_f_closed') }}</button>
      </div>
      <div class="td-search-inline">
        <span class="td-search-icon">🔍</span>
        <input class="td-search-input" id="jobs-search" type="text" placeholder="{{ trans('app.jobs_search_placeholder') }}">
        <button class="td-search-clear" id="jobs-search-clear">✕</button>
      </div>
    </div>

    <!-- شبكة عرض كروت الوظائف الحية -->
    <div class="td-list" id="jobs-list">
      @forelse($jobs as $item)
        @php
            // جلب البيانات والحقول المترجمة من قاعدة البيانات
            $title      = $item->{"title_$lang"};
            $department = $item->{"department_$lang"};
            $category   = $item->{"category_$lang"};
            $type       = $item->{"type_$lang"}; // دوام كامل أو جزئي
            $location   = $item->{"location_$lang"};

            // تنسيق موعد انتهاء التقديم عبر كربون
            $endDate    = $item->expiry_date ? \Carbon\Carbon::parse($item->expiry_date)->translatedFormat('j F Y') : '';

            // التحقق من الإغلاق الفعلي عبر قاعدة البيانات أو انقضاء التاريخ
            $isClosed   = $item->status === 'closed' || (\Carbon\Carbon::parse($item->expiry_date)->isPast());
        @endphp

        @if(!$isClosed)
          <!-- كرت وظيفة مفتوحة -->
          <div class="td-card td-card-active" style="cursor:pointer" onclick="location.href='{{ route('site.job.detail', ['lang' => $lang, 'id' => $item->id]) }}'">
            <div class="td-col-status">
              <div class="td-status-dot td-dot-active"></div>
              <div class="td-status-lbl td-lbl-active">{{ trans('app.jobs_status_open') }}</div>
            </div>
            <div class="td-col-body">
                  @if(false)<div class="td-ref"><span class="td-meta-key">{{ trans('app.jobs_dep_lbl') }}</span> {{ $department }}</div>@endif
              <div class="td-title">{{ $title }}</div>
              <div class="td-meta">
                   @if(false)
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_cat_lbl') }}</span><span style="font-weight:700;color:var(--t2)">{{ $category }}</span></div>
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_type_lbl') }}</span>{{ $type }}</div>
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_loc_lbl') }}</span>{{ $location }}</div>
                @endif
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_deadline_lbl') }}</span><span class="td-meta-date-urgent">{{ $endDate }}</span></div>
              </div>
            </div>
            <div class="td-col-action">
              <span class="td-dl-btn">{{ trans('app.jobs_view_btn') }}</span>
            </div>
          </div>
        @else
          <!-- كرت وظيفة مغلقة -->
          <div class="td-card" style="cursor:pointer" onclick="location.href='{{ route('site.job.detail', ['lang' => $lang, 'id' => $item->id]) }}'">
            <div class="td-col-status">
              <div class="td-status-dot td-dot-closed"></div>
              <div class="td-status-lbl td-lbl-closed">{{ trans('app.jobs_status_closed') }}</div>
            </div>
            <div class="td-col-body">
              @if(false)<div class="td-ref"><span class="td-meta-key">{{ trans('app.jobs_dep_lbl') }}</span> {{ $department }}</div>@endif
              <div class="td-title">{{ $title }}</div>
              <div class="td-meta">
                @if(false)
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_cat_lbl') }}</span><span style="font-weight:700;color:var(--t2)">{{ $category }}</span></div>
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_type_lbl') }}</span>{{ $type }}</div>
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_loc_lbl') }}</span>{{ $location }}</div>
                @endif
                <div class="td-meta-row"><span class="td-meta-key">{{ trans('app.jobs_deadline_lbl') }}</span><span>{{ $endDate }}</span></div>
              </div>
            </div>
            <div class="td-col-action">
              <span class="td-dl-btn" style="opacity:.5;pointer-events:none">{{ trans('app.jobs_ended_btn') }}</span>
            </div>
          </div>
        @endif

      @empty
        <div class="td-empty" style="padding: 3rem; text-align: center; color: var(--t3);">
          {{ trans('app.no_jobs') }}
        </div>
      @endforelse
    </div>

    {{-- نظام الترقيم (Pagination) --}}
    @if($jobs->hasPages())
      <div class="td-pagi-wrap" style="margin-top: 2rem;">
        {{ $jobs->appends(request()->query())->links('pagination::bootstrap-4') }}
      </div>
    @endif

  </div>
</div>
@endsection