@extends('backend.layout.master-tailwind')
@section('title', __('Category Section 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">{{ __('Category Section Settings') }}</h1>
      <p class="page-sub">{{ __('Control where the category section is displayed') }}</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>
      {{ __('To keep the category section hidden on the frontend, make sure both settings are set to Disabled.') }}
    </div>

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

        {{-- Row 1 --}}
        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Category Section — Home Page') }}</div>
            <div class="desc">{{ __('Show or hide the category section on the home page.') }}</div>
          </div>
          <div style="width:130px;flex:none">
            <input type="hidden" name="category_section_enable_disable_for_homepage"
                   id="val-homepage"
                   value="{{ get_static_option('category_section_enable_disable_for_homepage') ?? 'enable' }}">
            <div class="pop-wrap" style="display:block;width:100%">
              <button type="button" class="xsel-btn" data-pop="pop-homepage">
                <span id="lbl-homepage">
                  {{ get_static_option('category_section_enable_disable_for_homepage') == 'disable' ? __('Disabled') : __('Enabled') }}
                </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-homepage" style="right:0;left:auto;width:auto">
                <div class="pop-section">
                  <button type="button" class="menu-item xsel-opt" data-target="homepage" data-value="enable">{{ __('Enabled') }}</button>
                  <button type="button" class="menu-item xsel-opt" data-target="homepage" data-value="disable">{{ __('Disabled') }}</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- Row 2 --}}
        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Category Section — All Pages') }}</div>
            <div class="desc">{{ __('Show or hide the category section globally across all pages.') }}</div>
          </div>
          <div style="width:130px;flex:none">
            <input type="hidden" name="category_section_enable_disable"
                   id="val-allpages"
                   value="{{ get_static_option('category_section_enable_disable') ?? 'enable' }}">
            <div class="pop-wrap" style="display:block;width:100%">
              <button type="button" class="xsel-btn" data-pop="pop-allpages">
                <span id="lbl-allpages">
                  {{ get_static_option('category_section_enable_disable') == 'disable' ? __('Disabled') : __('Enabled') }}
                </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-allpages" style="right:0;left:auto;width:auto">
                <div class="pop-section">
                  <button type="button" class="menu-item xsel-opt" data-target="allpages" data-value="enable">{{ __('Enabled') }}</button>
                  <button type="button" class="menu-item xsel-opt" data-target="allpages" data-value="disable">{{ __('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 () {
      var target = opt.dataset.target;
      document.getElementById('lbl-' + target).textContent = opt.textContent.trim();
      document.getElementById('val-' + target).value = opt.dataset.value;
      var pop = document.getElementById('pop-' + target);
      if (pop) pop.classList.remove('open');
    });
  });
}());
</script>
@endsection