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

@section('admin_styles')
<x-media.css />
<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">{{ __('Register Page Settings') }}</h1>
      <p class="page-sub">{{ __('Customize the register page appearance and options') }}</p>
    </div>
  </div>

  <div style="max-width:560px">
    <div class="card" style="padding:24px">

      @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:18px">
        @foreach($errors->all() as $error)
        <div>{{ $error }}</div>
        @endforeach
      </div>
      @endif

      <form action="{{ route('admin.page.settings.register') }}" method="POST" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:16px">
        @csrf

        <div>
          <label class="field-label" for="register_page_choose_role_title">{{ __('Choose Role Title') }}</label>
          <input class="input wide" type="text" id="register_page_choose_role_title" name="register_page_choose_role_title"
            value="{{ get_static_option('register_page_choose_role_title') ?? '' }}"
            placeholder="{{ __('Choose a Role') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_choose_role_subtitle">{{ __('Choose Role Subtitle') }}</label>
          <input class="input wide" type="text" id="register_page_choose_role_subtitle" name="register_page_choose_role_subtitle"
            value="{{ get_static_option('register_page_choose_role_subtitle') ?? '' }}"
            placeholder="{{ __('Choose a role from below to continue signing up') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_choose_join_freelancer_title">{{ __('Join as Freelancer Title') }}</label>
          <input class="input wide" type="text" id="register_page_choose_join_freelancer_title" name="register_page_choose_join_freelancer_title"
            value="{{ get_static_option('register_page_choose_join_freelancer_title') ?? '' }}"
            placeholder="{{ __('Join as a freelancer') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_choose_join_client_title">{{ __('Join as Client Title') }}</label>
          <input class="input wide" type="text" id="register_page_choose_join_client_title" name="register_page_choose_join_client_title"
            value="{{ get_static_option('register_page_choose_join_client_title') ?? '' }}"
            placeholder="{{ __('Join as a client') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_continue_button_title">{{ __('Continue Button Title') }}</label>
          <input class="input wide" type="text" id="register_page_continue_button_title" name="register_page_continue_button_title"
            value="{{ get_static_option('register_page_continue_button_title') ?? '' }}"
            placeholder="{{ __('Continue') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_title">{{ __('Page Form Title') }}</label>
          <input class="input wide" type="text" id="register_page_title" name="register_page_title"
            value="{{ get_static_option('register_page_title') ?? '' }}"
            placeholder="{{ __('Sign Up') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_button_title">{{ __('Sign up Button Title') }}</label>
          <input class="input wide" type="text" id="register_page_button_title" name="register_page_button_title"
            value="{{ get_static_option('register_page_button_title') ?? '' }}"
            placeholder="{{ __('Sign up Now') }}">
        </div>

        <div>
          <label class="field-label">{{ __('Terms & Conditions Page') }}</label>
          @php
            $tocVal   = get_static_option('toc_page_link') ?? '';
            $tocLabel = collect($pages)->firstWhere('slug', $tocVal)?->title ?? __('— Select page —');
          @endphp
          <input type="hidden" name="toc_page_link" id="val-toc" value="{{ $tocVal }}">
          <div class="pop-wrap" style="display:block;width:100%">
            <button type="button" class="xsel-btn" data-pop="pop-toc">
              <span id="lbl-toc">{{ $tocLabel }}</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-toc" style="right:0;left:auto;width:auto;max-height:220px;overflow-y:auto">
              <div class="pop-section">
                <button type="button" class="menu-item xsel-opt" data-value="">{{ __('— Select page —') }}</button>
                @foreach($pages as $page)
                <button type="button" class="menu-item xsel-opt" data-value="{{ $page->slug }}">{{ $page->title }}</button>
                @endforeach
              </div>
            </div>
          </div>
        </div>

        <div>
          <label class="field-label">{{ __('Privacy Policy Page') }}</label>
          @php
            $ppVal   = get_static_option('privacy_policy_link') ?? '';
            $ppLabel = collect($pages)->firstWhere('slug', $ppVal)?->title ?? __('— Select page —');
          @endphp
          <input type="hidden" name="privacy_policy_link" id="val-pp" value="{{ $ppVal }}">
          <div class="pop-wrap" style="display:block;width:100%">
            <button type="button" class="xsel-btn" data-pop="pop-pp">
              <span id="lbl-pp">{{ $ppLabel }}</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-pp" style="right:0;left:auto;width:auto;max-height:220px;overflow-y:auto">
              <div class="pop-section">
                <button type="button" class="menu-item xsel-opt" data-value="">{{ __('— Select page —') }}</button>
                @foreach($pages as $page)
                <button type="button" class="menu-item xsel-opt" data-value="{{ $page->slug }}">{{ $page->title }}</button>
                @endforeach
              </div>
            </div>
          </div>
        </div>

        <div>
          <label class="field-label" for="register_page_sidebar_title">{{ __('Sidebar Title') }}</label>
          <input class="input wide" type="text" id="register_page_sidebar_title" name="register_page_sidebar_title"
            value="{{ get_static_option('register_page_sidebar_title') ?? '' }}"
            placeholder="{{ __('Register and start discover.') }}">
        </div>

        <div>
          <label class="field-label" for="register_page_sidebar_description">{{ __('Sidebar Description') }}</label>
          <textarea class="input wide" id="register_page_sidebar_description" name="register_page_sidebar_description"
            rows="5" placeholder="{{ __('Once register you will see the magic of xilancer marketplace.') }}"
            style="resize:vertical;min-height:120px">{{ get_static_option('register_page_sidebar_description') ?? '' }}</textarea>
        </div>

        <div>
          <label class="field-label">{{ __('Sidebar Image') }}</label>
          <small style="display:block;font-size:11px;color:var(--text-3);margin-bottom:8px">{{ __('Recommended size: 850x650') }}</small>
          @php
            $sidebarImgId = get_static_option('register_page_sidebar_image');
            $sidebarImg   = get_attachment_image_by_id($sidebarImgId, null, false);
          @endphp
          <div class="media-upload-btn-wrapper">
            <div class="img-wrap" id="sidebar-img-wrap" style="width:120px;height:80px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-bottom:8px;{{ empty($sidebarImg) ? 'display:none' : '' }}">
              @if(!empty($sidebarImg))
              <div class="img-inner-wrap" style="position:relative;width:100%;height:100%">
                <div class="rmv-span" style="position:absolute;top:4px;right:4px;z-index:1;cursor:pointer;background:rgba(0,0,0,.5);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center"><i class="fas fa-times" style="font-size:10px;color:#fff"></i></div>
                <div class="attachment-preview" style="width:100%;height:100%"><div class="thumbnail" style="width:100%;height:100%"><div class="centered" style="width:100%;height:100%">
                  <img src="{{ $sidebarImg['img_url'] }}" style="width:100%;height:100%;object-fit:cover;display:block">
                </div></div></div>
              </div>
              @endif
            </div>
            <input type="hidden" name="register_page_sidebar_image" value="{{ $sidebarImgId ?? '' }}">
            <button type="button" class="btn ghost sm media_upload_form_btn"
              data-btntitle="{{ __('Select Image') }}"
              data-modaltitle="{{ __('Upload Image') }}"
              data-imgid="{{ $sidebarImgId ?? '' }}">
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              {{ !empty($sidebarImg) ? __('Change Image') : __('Upload Image') }}
            </button>
          </div>
        </div>

        @can('register-page-settings-update')
        <div>
          <button type="submit" class="btn primary sm">{{ __('Update') }}</button>
        </div>
        @endcan

      </form>

    </div>
  </div>

</div>

<x-media.markup />

@endsection

@section('script')
<x-media.js />
<script>
(function () {
  [
    { pop: 'pop-toc', lbl: 'lbl-toc', val: 'val-toc' },
    { pop: 'pop-pp',  lbl: 'lbl-pp',  val: 'val-pp'  },
  ].forEach(function (ids) {
    document.querySelectorAll('#' + ids.pop + ' .xsel-opt').forEach(function (opt) {
      opt.addEventListener('click', function () {
        document.getElementById(ids.lbl).textContent = opt.textContent.trim();
        document.getElementById(ids.val).value = opt.dataset.value;
        document.getElementById(ids.pop).classList.remove('open');
      });
    });
  });
}());
</script>
<style>
  #sidebar-img-wrap img, #sidebar-img-wrap video { width:100%;height:100%;object-fit:cover;display:block }
  #sidebar-img-wrap .img-inner-wrap { position:relative;width:100%;height:100% }
  #sidebar-img-wrap .rmv-span { position:absolute;top:4px;right:4px;z-index:1;cursor:pointer;background:rgba(0,0,0,.5);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center }
  #sidebar-img-wrap .rmv-span i { font-size:10px;color:#fff }
  #sidebar-img-wrap .attachment-preview, #sidebar-img-wrap .thumbnail, #sidebar-img-wrap .centered { width:100%;height:100% }
</style>
<script>
(function($){
  var observer = new MutationObserver(function(){
    var wrap = document.getElementById('sidebar-img-wrap');
    if (wrap) wrap.style.display = wrap.children.length ? '' : 'none';
  });
  var wrap = document.getElementById('sidebar-img-wrap');
  if (wrap) observer.observe(wrap, { childList: true });
})(jQuery);
</script>
@endsection