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

@section('admin_styles')
<style>
.xsel-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer; height: 38px; 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); }
</style>
@endsection

@section('content')
<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Page Loader Settings') }}</h1>
      <p class="page-sub">{{ __('Control the page loading animation shown to visitors') }}</p>
    </div>
  </div>

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

    @if($errors->any())
    <div style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px;margin-bottom:16px">
      @foreach($errors->all() as $error)<div>{{ $error }}</div>@endforeach
    </div>
    @endif

    <div class="card" style="padding:20px;display:flex;flex-direction:column;gap: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:8px;padding:10px 14px;font-size:12px;color:color-mix(in oklch,var(--warning,#f59e0b) 80%,var(--text));display:flex;gap:8px;align-items:center">
        <svg class="icon" style="flex:none" 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>
        {{ __('Set to "Disable" to turn off the page loading animation.') }}
      </div>

      @php
        $loaderVal = get_static_option('page_loader') ?? '';
        $loaderLbl = $loaderVal === 'enable' ? __('Enable') : ($loaderVal === 'disable' ? __('Disable') : __('Select option'));
      @endphp

      <form action="{{ route('admin.loader.settings') }}" method="POST" style="display:flex;flex-direction:column;gap:16px">
        @csrf
        <div>
          <label class="field-label">{{ __('Page Loader') }}</label>
          <input type="hidden" name="page_loader" id="val-page-loader" value="{{ $loaderVal }}">
          <div class="pop-wrap" style="display:block;width:100%">
            <button type="button" class="xsel-btn" data-pop="pop-page-loader">
              <span id="lbl-page-loader">{{ $loaderLbl }}</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-page-loader" style="right:0;left:auto;width:auto">
              <div class="pop-section">
                <button type="button" class="menu-item xsel-opt" data-value="enable">{{ __('Enable') }}</button>
                <button type="button" class="menu-item xsel-opt" data-value="disable">{{ __('Disable') }}</button>
              </div>
            </div>
          </div>
        </div>
        <div>
          <button type="submit" class="btn primary sm">{{ __('Update') }}</button>
        </div>
      </form>

    </div>
  </div>

</div>
@endsection

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