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

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Job Country Restriction Settings') }}</h1>
      <p class="page-sub">{{ __('Control how country restrictions apply to jobs posted by clients') }}</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>
        {{ __('If disabled, clients cannot set any country restrictions and jobs are global by default.') }}
      </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 enabled, you can also choose whether restrictions apply at VIEW level or only at the APPLY level.') }}
      </div>
    </div>

    <form action="{{ route('admin.job.country.restriction.settings') }}" method="POST">
      @csrf

      {{-- hidden checkboxes for form submission --}}
      <input type="checkbox" name="job_country_restriction_enabled" id="job_country_restriction_enabled"
             style="display:none" @if(get_static_option('job_country_restriction_enabled', 0)) checked @endif>
      <input type="checkbox" name="job_country_view_level_enabled" id="job_country_view_level_enabled"
             style="display:none" @if(get_static_option('job_country_view_level_enabled', 0)) checked @endif>

      <div class="card">

        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Enable Country Restrictions') }}</div>
            <div class="desc">{{ __('Allow clients to choose allowed or excluded countries when posting a job. If off, all jobs are globally visible.') }}</div>
          </div>
          <div class="switch {{ get_static_option('job_country_restriction_enabled', 0) ? 'on' : '' }}"
               data-target="job_country_restriction_enabled"></div>
        </div>

        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Restrict at View Level') }}</div>
            <div class="desc">{{ __('Hide jobs from freelancers in restricted countries. If off, restrictions only apply when a freelancer tries to apply — jobs remain visible.') }}</div>
          </div>
          <div class="switch {{ get_static_option('job_country_view_level_enabled', 0) ? 'on' : '' }}"
               data-target="job_country_view_level_enabled"></div>
        </div>

        @can('job-country-restriction-settings')
        <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 ($) {
  $(document).on('click', '.switch[data-target]', function () {
    $(this).toggleClass('on');
    var $cb = $('#' + $(this).data('target'));
    $cb.prop('checked', $(this).hasClass('on'));
  });
}(jQuery));
</script>
@endsection