@extends('backend.layout.master-tailwind')
@section('title', __('Jobs'))

@section('admin_styles')
<style>
@media (max-width: 640px) {
  .jobs-bar { flex-wrap: wrap; padding: 10px 14px 8px !important; }
  .jobs-bar .page-sub { font-size: 11px; }
  .tabs-flush { overflow-x: auto; white-space: nowrap; }
  .tbl th:nth-child(2), .tbl td:nth-child(2),
  .tbl th:nth-child(4), .tbl td:nth-child(4),
  .tbl th:nth-child(6), .tbl td:nth-child(6),
  .tbl th:nth-child(8), .tbl td:nth-child(8) { display: none; }
}
</style>
@endsection

@section('content')
<div class="jobs-with-tabs">
  <div class="jobs-bar" style="display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 24px 10px; background: var(--bg-elev); border-bottom: 1px solid var(--border); gap: 16px;">
    <div>
      <h1 class="page-title" style="margin:0;font-size:18px">{{ __('Jobs') }}</h1>
      <p class="page-sub" style="margin:2px 0 0">
          {{ \App\Models\JobPost::where('status', 1)->count() }} active · {{ \App\Models\JobPost::whereDate('created_at', \Carbon\Carbon::today())->count() }} posted today · {{ \App\Models\JobPost::where('status', 0)->count() }} awaiting review · {{ \App\Models\JobPost::where('status', 2)->count() }} flagged
      </p>
    </div>
    <div class="page-actions">
      <button class="btn"><svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg> {{ __('Export') }}</button>
    </div>
  </div>
  <div class="tabs tabs-flush" data-tabs="jobs">
    <div class="tab on" data-tab="active">Active <span class="ct">{{ $all_jobs->total() }}</span></div>
    <div class="tab"    data-tab="hiring">Hiring <span class="ct">0</span></div>
    <div class="tab"    data-tab="review">Pending review <span class="ct" style="color:var(--danger);background:var(--danger-soft);padding:1px 6px;border-radius:10px;margin-left:6px;font-weight:600">0</span></div>
    <div class="tab"    data-tab="closed">Closed <span class="ct">0</span></div>
    <div class="tab"    data-tab="flagged">Flagged <span class="ct" style="color:var(--danger)">0</span></div>
  </div>
  <div data-panel-group="jobs" data-panel="active" style="padding:18px 24px 40px;overflow:auto;flex:1;min-height:0">
    <div class="card">
      <div class="toolbar">
        <select id="status_search" style="background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:13px; color:var(--text); outline:none; height:32px;">
            <option value="">{{ __('All Status') }}</option>
            <option value="1">{{ __('Active') }}</option>
            <option value="0">{{ __('Inactive') }}</option>
            <option value="2">{{ __('Flagged') }}</option>
        </select>
        <span class="spacer" style="flex:1"></span>
        <div style="position:relative; width: 180px;">
            <input type="text" id="string_search" placeholder="{{ __('Search jobs...') }}" style="background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:13px; color:var(--text); width:100%; outline:none;">
        </div>
        <button class="btn sm" id="sort_toggle" data-sort="latest">
            <svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16m0 0-3-3m3 3 3-3"/><path d="M17 20V4m0 0-3 3m3-3 3 3"/></svg> 
            <span id="sort_text">{{ __('Most recent') }}</span>
        </button>
      </div>
      <div class="search_result">
        @include('backend.pages.job.search-result')
      </div>
    </div>
  </div>
  <div class="hidden" data-panel-group="jobs" data-panel="hiring" style="padding:18px 24px 40px;overflow:auto">
    <div class="card">
        <div style="padding:40px;text-align:center;color:var(--text-3)">No jobs found in this section.</div>
    </div>
  </div>
  <div class="hidden" data-panel-group="jobs" data-panel="review" style="padding:18px 24px 40px;overflow:auto;flex:1;min-height:0">
     <!-- The review shell from jobs.html can be integrated here later if needed, left placeholder for now as requested for 1:1 -->
    <div class="card">
        <div style="padding:40px;text-align:center;color:var(--text-3)">No jobs found in this section.</div>
    </div>
  </div>
  <div class="hidden" data-panel-group="jobs" data-panel="closed" style="padding:40px;text-align:center;color:var(--text-3)">0 closed jobs · use filters to find one</div>
  <div class="hidden" data-panel-group="jobs" data-panel="flagged" style="padding:40px;text-align:center;color:var(--text-3)">0 flagged jobs require review</div>
</div>
@endsection

@section('script')
    <x-sweet-alert.sweet-alert2-js/>
    @include('backend.pages.job.job-js')
    <script>
        document.addEventListener('click', function(e) {
            let deleteBtn = e.target.closest('.swal_delete_button');
            if (deleteBtn) {
                e.preventDefault();
                Swal.fire({
                  title: '{{__("Are you sure?")}}',
                  text: '{{__("You would not be able to revert this item!")}}',
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: '{{__("Yes, delete it!")}}'
                }).then((result) => {
                  if (result.isConfirmed) {
                    deleteBtn.closest('form').submit();
                  }
                });
            }

            let statusBtn = e.target.closest('.swal_status_button');
            if (statusBtn) {
                e.preventDefault();
                Swal.fire({
                  title: '{{__("Are you sure?")}}',
                  text: '{{__("You will change the status of this job!")}}',
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: '{{__("Yes, change it!")}}'
                }).then((result) => {
                  if (result.isConfirmed) {
                    statusBtn.closest('form').submit();
                  }
                });
            }
        });
    </script>
@endsection