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

@section('admin_styles')
<style>
@media (max-width: 640px) {
  .tbl th:nth-child(3), .tbl td:nth-child(3),
  .tbl th:nth-child(4), .tbl td:nth-child(4) { display: none; }
}
</style>
@endsection

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Job History') }}</h1>
      <p class="page-sub">{{ $all_histories->total() }} {{ __('records') }}</p>
    </div>
  </div>

  <div class="card">
    <div class="toolbar">
      <div style="position:relative;width:260px">
        <svg class="icon" style="position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
        <input type="text" id="string_search" placeholder="{{ __('Search by job title…') }}"
               style="width:100%;padding:4px 10px 4px 30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);outline:none;height:32px">
      </div>
    </div>
    <div class="search_result">
      @include('backend.pages.job-history.search-result')
    </div>
  </div>

</div>

@endsection

@section('script')
@include('backend.pages.job-history.history-js')
@endsection