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

@section('admin_styles')
<x-media.css />
<style>
.field-label {
    display: block;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
}
</style>
@endsection

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Login Page Settings') }}</h1>
      <p class="page-sub">{{ __('Customize the login 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.login') }}" method="POST" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:16px">
        @csrf

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

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

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

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

        {{-- Social Login toggle --}}
        <div class="setting-row" style="border:1px solid var(--border);border-radius:10px;margin:0">
          <div class="info">
            <div class="ttl">{{ __('Social Login Master Switch') }}</div>
            <div class="desc">{{ __('Disable to prevent all social logins.') }}</div>
          </div>
          <div class="switch {{ !empty(get_static_option('login_page_social_login_enable_disable')) ? 'on' : '' }}" id="social-login-toggle"></div>
          <input type="hidden" name="login_page_social_login_enable_disable" id="social-login-input" value="{{ !empty(get_static_option('login_page_social_login_enable_disable')) ? 'on' : '' }}">
        </div>

        {{-- Google Login toggle --}}
        <div class="setting-row" style="border:1px solid var(--border);border-radius:10px;margin:0">
          <div class="info">
            <div class="ttl">{{ __('Google Login') }}</div>
            <div class="desc">{{ __('Enable/Disable Google Login Button') }}</div>
          </div>
          <div class="switch {{ !empty(get_static_option('login_page_google_login_enable_disable')) ? 'on' : '' }}"></div>
          <input type="hidden" name="login_page_google_login_enable_disable" value="{{ !empty(get_static_option('login_page_google_login_enable_disable')) ? 'on' : '' }}">
        </div>

        {{-- Facebook Login toggle --}}
        <div class="setting-row" style="border:1px solid var(--border);border-radius:10px;margin:0">
          <div class="info">
            <div class="ttl">{{ __('Facebook Login') }}</div>
            <div class="desc">{{ __('Enable/Disable Facebook Login Button') }}</div>
          </div>
          <div class="switch {{ !empty(get_static_option('login_page_facebook_login_enable_disable')) ? 'on' : '' }}"></div>
          <input type="hidden" name="login_page_facebook_login_enable_disable" value="{{ !empty(get_static_option('login_page_facebook_login_enable_disable')) ? 'on' : '' }}">
        </div>

        {{-- Sidebar Image --}}
        <div>
          <label class="field-label">{{ __('Sidebar Image') }}</label>
          <small style="display:block;font-size:11px;color:var(--text-3);margin-bottom:8px">{{ __('Recommended size: 660x908') }}</small>
          @php
            $sidebarImgId = get_static_option('login_page_sidebar_image');
            $sidebarImg = get_attachment_image_by_id($sidebarImgId, null, false);
          @endphp
          @if(!empty($sidebarImg))
          <div style="margin-bottom:8px;width:120px;height:80px;border-radius:8px;overflow:hidden;border:1px solid var(--border)">
            <img src="{{ $sidebarImg['img_url'] }}" style="width:100%;height:100%;object-fit:cover;display:block">
          </div>
          @endif
          <input type="hidden" name="login_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>

        @can('login-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 () {
  var toggles = document.querySelectorAll('.switch');
  toggles.forEach(function(toggle) {
      toggle.addEventListener('click', function () {
          this.classList.toggle('on');
          this.nextElementSibling.value = this.classList.contains('on') ? 'on' : '';
      });
  });
}());
</script>
@endsection