@extends('backend.layout.master-tailwind')
@section('title', __('Empty Category 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">{{ __('Empty Category Settings') }}</h1>
      <p class="page-sub">{{ __('Control visibility of categories with no content') }}</p>
    </div>
  </div>

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

    <div style="background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:16px;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(--text-3)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/></svg>
      {{ __("Enable this option to hide categories that don't have any related projects, jobs, or talents on the frontend.") }}
    </div>

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

        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Hide Empty Categories') }}</div>
            <div class="desc">{{ __('When enabled, categories without any projects, jobs, or talents will not be displayed on the frontend.') }}</div>
          </div>
          <div style="width:130px;flex:none">
            <input type="hidden" name="hide_empty_categories" id="val-hide-empty"
                   value="{{ get_static_option('hide_empty_categories') ?? 'off' }}">
            <div class="pop-wrap" style="display:block;width:100%">
              <button type="button" class="xsel-btn" data-pop="pop-hide-empty">
                <span id="lbl-hide-empty">
                  {{ get_static_option('hide_empty_categories') == 'on' ? __('Enabled') : __('Disabled') }}
                </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-hide-empty" style="right:0;left:auto;width:auto">
                <div class="pop-section">
                  <button type="button" class="menu-item xsel-opt" data-value="on">{{ __('Enabled') }}</button>
                  <button type="button" class="menu-item xsel-opt" data-value="off">{{ __('Disabled') }}</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <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>

      </div>
    </form>

  </div>

</div>

@endsection

@section('script')
<script>
(function () {
  document.querySelectorAll('.xsel-opt').forEach(function (opt) {
    opt.addEventListener('click', function () {
      document.getElementById('lbl-hide-empty').textContent = opt.textContent.trim();
      document.getElementById('val-hide-empty').value = opt.dataset.value;
      document.getElementById('pop-hide-empty').classList.remove('open');
    });
  });
}());
</script>
@endsection