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

@section('admin_styles')
<style>
.xsel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  height: 34px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
}
.xsel-btn:hover { border-color: var(--border-strong); }
.xsel-btn .icon { flex: none; color: var(--text-3); }

@media (max-width: 640px) {
  .setting-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .setting-row > div:last-child { width: 100% !important; flex: none !important; }
}
</style>
@endsection

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Job Auto Approval') }}</h1>
      <p class="page-sub">{{ __('Control whether new jobs go live automatically') }}</p>
    </div>
  </div>

  <div style="max-width:560px">

    <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px">
      <div style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
        <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>
        {{ __('Job Auto Approval means a job is published immediately when a client posts it.') }}
      </div>
      <div style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
        <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>
        {{ __('If disabled, you must manually activate each job before it becomes visible to the public.') }}
      </div>
      <div style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
        <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>
        {{ __('If no option is selected, jobs will be published automatically by default.') }}
      </div>
    </div>

    <form action="{{ route('admin.job.approval.settings') }}" method="POST">
      @csrf
      <div class="card">

        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Auto Approval') }}</div>
            <div class="desc">{{ __('Automatically publish jobs as soon as they are submitted by clients.') }}</div>
          </div>
          <div style="width:130px;flex:none">
            @php $approvalVal = get_static_option('job_auto_approval') ?? ''; @endphp
            <input type="hidden" name="job_auto_approval" id="val-job-approval" value="{{ $approvalVal }}">
            <div class="pop-wrap" style="display:block;width:100%">
              <button type="button" class="xsel-btn" data-pop="pop-job-approval">
                <span id="lbl-job-approval">
                  @if($approvalVal === 'yes') {{ __('Yes') }}
                  @elseif($approvalVal === 'no') {{ __('No') }}
                  @else {{ __('Default') }}
                  @endif
                </span>
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </button>
              <div class="pop" id="pop-job-approval" style="right:0;left:auto;width:auto">
                <div class="pop-section">
                  <button type="button" class="menu-item xsel-opt" data-value="">{{ __('Default') }}</button>
                  <button type="button" class="menu-item xsel-opt" data-value="yes">{{ __('Yes') }}</button>
                  <button type="button" class="menu-item xsel-opt" data-value="no">{{ __('No') }}</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        @can('job-auto-approval')
        <div style="padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end">
          <button type="submit" class="btn primary sm">{{ __('Save Changes') }}</button>
        </div>
        @endcan

      </div>
    </form>

  </div>

</div>

@endsection

@section('script')
<script>
(function () {
  var labels = { '': '{{ __('Default') }}', 'yes': '{{ __('Yes') }}', 'no': '{{ __('No') }}' };
  document.querySelectorAll('.xsel-opt').forEach(function (opt) {
    opt.addEventListener('click', function () {
      document.getElementById('lbl-job-approval').textContent = labels[opt.dataset.value] || opt.textContent.trim();
      document.getElementById('val-job-approval').value = opt.dataset.value;
      document.getElementById('pop-job-approval').classList.remove('open');
    });
  });
}());
</script>
@endsection