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

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

    // جلب الحقول المترجمة ديناميكياً بناءً على لغة الموقع الحالية
    $title       = $job->{"title_$lang"};
    $department  = $job->{"department_$lang"};
    $category    = $job->{"category_$lang"};
    $location    = $job->{"location_$lang"};
    $type        = $job->{"type_$lang"};

    // محتويات الوظيفة التفصيلية (HTML أو نصوص من لوحة التحكم)
    $description  = $job->{"details_$lang"};
    $duties       = $job->{"duties_$lang"};
    $requirements = $job->{"requirements_$lang"};
    $offers       = $job->{"offers_$lang"};

    // تنسيق التواريخ برمجياً باستخدام كربون (Carbon)
    $postedDate   = $job->created_at ? \Carbon\Carbon::parse($job->created_at)->translatedFormat('j F Y') : '';
    $deadlineDate = $job->expiry_date ? \Carbon\Carbon::parse($job->expiry_date)->translatedFormat('j F Y') : '';

    // التحقق من حالة الوظيفة (مفتوحة أم مغلقة)
    $isClosed     = $job->status === 'closed' || (\Carbon\Carbon::parse($job->expiry_date)->isPast());
@endphp

<div id="page-job-detail" class="page-view active" style="padding: 4rem 5vw;">
  <div class="jdd-layout">

    <!-- العمود الرئيسي -->
    <div class="jdd-main">
      <div class="jdd-status-row">
        @if(!$isClosed)
          <span class="jdd-status-badge jdd-badge-open" id="jdd-status-badge">{{ trans('app.jdd_status_open') }}</span>
        @else
          <span class="jdd-status-badge jdd-badge-closed" id="jdd-status-badge" style="background: var(--bg3); color: var(--t3);">{{ trans('app.jdd_status_closed') }}</span>
        @endif

        @if($category)
          <span class="jdd-cat-badge" id="jdd-cat-badge">{{ $category }}</span>
        @endif
      </div>

      <h1 class="jdd-title" id="jdd-title">{{ $title }}</h1>
      <div class="jdd-dept" id="jdd-dept">{{ $department }}</div>

      <div class="jdd-meta-row">
        @if(false)<div class="jdd-meta-item"><span class="jdd-meta-icon">📍</span><span id="jdd-loc">{{ $location }}</span></div>
        <div class="jdd-meta-item"><span class="jdd-meta-icon">❶</span><span id="jdd-type">{{ $type }}</span></div>@endif
        <div class="jdd-meta-item">
          <span class="jdd-meta-icon">📅</span>
          <span>{{ trans('app.jdd_deadline_inline') }}</span>
          <strong id="jdd-deadline">{{ $deadlineDate }}</strong>
        </div>
      </div>

      <!-- عن الوظيفة -->
      <div class="jdd-section">
        <div class="jdd-section-title">{{ trans('app.jdd_about') }}</div>
        <div class="jdd-desc story-content-area" id="jdd-desc">
          {!! $description !!}
        </div>
      </div>

      <!-- المهام والمسؤوليات -->
      @if($duties)
        <div class="jdd-section">
          <div class="jdd-section-title">{{ trans('app.jdd_duties') }}</div>
          <div class="jdd-list story-content-area" id="jdd-duties">
            {!! $duties !!}
          </div>
        </div>
      @endif

      <!-- المتطلبات -->
      @if($requirements)
        <div class="jdd-section">
          <div class="jdd-section-title">{{ trans('app.jdd_reqs') }}</div>
          <div class="jdd-list story-content-area" id="jdd-reqs">
            {!! $requirements !!}
          </div>
        </div>
      @endif

      <!-- ما نقدمه -->
      @if($offers)
        <div class="jdd-section">
          <div class="jdd-section-title">{{ trans('app.jdd_offers') }}</div>
          <div class="jdd-list jdd-list-offers story-content-area" id="jdd-offers">
            {!! $offers !!}
          </div>
        </div>
      @endif
    </div>

    <!-- الشريط الجانبي -->
    <aside class="jdd-sidebar">
      <div class="tdd-back-wrap">
        <button class="tdd-back" id="jdd-back" onclick="location.href='{{ route('site.jobs', ['lang' => $lang]) }}'">
          <span>{{ $lang == 'ar' ? '←' : '→' }}</span> <span>{{ trans('app.jdd_back') }}</span>
        </button>
        <div class="tdd-breadcrumb">
          <span>{{ trans('app.nav_jobs') }}</span>
          <span class="tdd-bc-sep">/</span>
          <span id="jdd-bc-title">{{ $title }}</span>
        </div>
      </div>

      <!-- كرت التقديم الإلكتروني للوظيفة -->
      <div class="jdd-apply-card" id="jdd-apply-card">
        <div class="jdd-apply-deadline-lbl">{{ trans('app.jdd_apply_lbl') }}</div>
        <div class="jdd-apply-deadline-val" id="jdd-apply-deadline">{{ $deadlineDate }}</div>

        @if(false)
        @if(!$isClosed)
          @if($job->apply_link)
            <button class="jdd-apply-btn" id="jdd-apply-btn" onclick="window.open('{{ $job->apply_link }}', '_blank')">
              {{ trans('app.jdd_apply_btn') }}
            </button>
          @else
            {{-- في حال استخدام فورم داخلي مخصص بنفس كلاس الصفحة --}}
            <button class="jdd-apply-btn" id="jdd-apply-btn" onclick="location.href='{{ route('site.job.apply', ['lang' => $lang, 'id' => $job->id]) }}'">
              {{ trans('app.jdd_apply_btn') }}
            </button>
          @endif
        @else
          <button class="jdd-apply-btn jdd-apply-btn-disabled" id="jdd-apply-btn" disabled style="opacity: 0.5; pointer-events: none; background: var(--t3);">
            {{ trans('app.jdd_apply_btn_closed') }}
          </button>
        @endif
        @endif
      </div>

      <!-- بطاقة معلومات الوظيفة الثابتة -->
      <div class="jdd-info-card">
        <div class="jdd-info-title">{{ trans('app.jdd_info_title') }}</div>
        <div class="jdd-info-row">
          <span class="jdd-info-label">{{ trans('app.jdd_posted_lbl') }}</span>
          <span class="jdd-info-val" id="jdd-posted">{{ $postedDate }}</span>
        </div>
        @if(false)
        <div class="jdd-info-row">
          <span class="jdd-info-label">{{ trans('app.jdd_type_lbl') }}</span>
          <span class="jdd-info-val" id="jdd-type2">{{ $type }}</span>
        </div>
        <div class="jdd-info-row">
          <span class="jdd-info-label">{{ trans('app.jdd_loc_lbl') }}</span>
          <span class="jdd-info-val" id="jdd-loc2">{{ $location }}</span>
        </div>
        <div class="jdd-info-row">
          <span class="jdd-info-label">{{ trans('app.jdd_dept_lbl') }}</span>
          <span class="jdd-info-val" id="jdd-dept2">{{ $department }}</span>
        </div>
        @endif
      </div>

      <!-- قسم وظائف أخرى ذات صلة (يستثني الوظيفة المعروضة حالياً) -->
      @if(isset($relatedJobs) && $relatedJobs->count() > 0)
        <div class="jdd-other-jobs">
          <div class="jdd-other-title">{{ trans('app.jdd_other_title') }}</div>
          <div id="jdd-other-list">
            @foreach($relatedJobs as $other)
              <div class="jdd-other-item" onclick="location.href='{{ route('site.job.detail', ['lang' => $lang, 'id' => $other->id]) }}'">
                <div class="jdd-other-dept">{{ $other->{"department_$lang"} }}</div>
                <div class="jdd-other-ttl">{{ $other->{"title_$lang"} }}</div>
              </div>
            @endforeach
          </div>
        </div>
      @endif
    </aside>

  </div>
</div>
@endsection