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

@section('admin_styles')
<x-media.css />
@endsection

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

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('404 Page') }}</h1>
      <p class="page-sub">{{ __('Customize the content shown on your 404 error page') }}</p>
    </div>
  </div>

  @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 style="max-width:600px">
    <div class="card" style="padding:20px;display:flex;flex-direction:column;gap:16px">

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

        <div>
          <label class="field-label">{{ __('Title') }}</label>
          <input type="text" name="error_404_page_title" class="input wide"
            value="{{ get_static_option('error_404_page_title') }}">
        </div>

        <div>
          <label class="field-label">{{ __('Sub Title') }}</label>
          <input type="text" name="error_404_page_subtitle" class="input wide"
            value="{{ get_static_option('error_404_page_subtitle') }}">
        </div>

        <div>
          <label class="field-label">{{ __('Button Text') }}</label>
          <input type="text" name="error_404_page_button_text" class="input wide"
            value="{{ get_static_option('error_404_page_button_text') }}">
        </div>

        <div>
          <label class="field-label">{{ __('Paragraph') }}</label>
          <textarea name="error_404_page_paragraph" class="input wide" rows="4" style="height:auto;resize:vertical">{{ get_static_option('error_404_page_paragraph') }}</textarea>
        </div>

        <div>
          <label class="field-label" style="margin-bottom:8px">{{ __('Error Image') }}</label>
          @php
            $err_img_id  = get_static_option('error_image');
            $err_img_src = $err_img_id ? get_attachment_image_by_id($err_img_id, null, false) : null;
          @endphp
          <div style="display:flex;align-items:center;gap:12px">
            @if(!empty($err_img_src))
            <img id="error-img-preview" src="{{ $err_img_src['img_url'] }}"
              style="width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--border)">
            @else
            <div id="error-img-preview" style="width:80px;height:80px;border-radius:8px;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center">
              <svg style="width:24px;height:24px;color:var(--text-3)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            </div>
            @endif
            <div style="display:flex;flex-direction:column;gap:6px">
              <input type="hidden" name="error_image" id="error-image-input" value="{{ $err_img_id }}">
              <button type="button" class="btn ghost sm media_upload_form_btn"
                data-btntitle="{{ __('Select Image') }}"
                data-modaltitle="{{ __('Upload Image') }}"
                data-bs-toggle="modal"
                data-bs-target="#media_upload_modal">
                {{ !empty($err_img_src) ? __('Change Image') : __('Upload Image') }}
              </button>
              <span style="font-size:11px;color:var(--text-3)">{{ __('Recommended: 172×290px') }}</span>
            </div>
          </div>
        </div>

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

      </form>
    </div>
  </div>

  <x-media.markup />
</div>
@endsection

@section('script')
<x-media.js />
<script>
(function () {
  var $input   = $('#error-image-input');
  var $preview = $('#error-img-preview');
  var $btn     = $('.media_upload_form_btn');

  $(document).on('click', '.media_upload_form_btn', function () {
    window._activeMediaTarget = { input: $input, preview: $preview, btn: $btn };
  });

  $(document).on('mediaSelected', function (e, data) {
    if (!window._activeMediaTarget) return;
    window._activeMediaTarget.input.val(data.id || data.url);
    if ($preview.is('img')) {
      $preview.attr('src', data.url);
    } else {
      var $img = $('<img>').attr({ src: data.url, id: 'error-img-preview' })
        .css({ width:'80px', height:'80px', objectFit:'cover', borderRadius:'8px', border:'1px solid var(--border)' });
      $preview.replaceWith($img);
    }
    window._activeMediaTarget.btn.text('{{ __("Change Image") }}');
    window._activeMediaTarget = null;
  });
}());
</script>
@endsection