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

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

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

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Maintenance Page') }}</h1>
      <p class="page-sub">{{ __('Customize the content shown during site maintenance') }}</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.maintenance') }}" 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="maintain_page_title" class="input wide"
            value="{{ get_static_option('maintain_page_title') }}">
        </div>

        <div>
          <label class="field-label" style="margin-bottom:8px">{{ __('Maintenance Image') }}</label>
          @php
            $maint_img_id  = get_static_option('maintain_page_logo');
            $maint_img_src = $maint_img_id ? get_attachment_image_by_id($maint_img_id, null, false) : null;
          @endphp
          <div style="display:flex;align-items:center;gap:12px">
            @if(!empty($maint_img_src))
            <img id="maint-img-preview" src="{{ $maint_img_src['img_url'] }}"
              style="width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--border)">
            @else
            <div id="maint-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="maintain_page_logo" id="maint-image-input" value="{{ $maint_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($maint_img_src) ? __('Change Image') : __('Upload Image') }}
              </button>
              <span style="font-size:11px;color:var(--text-3)">{{ __('Recommended: 540×345px') }}</span>
            </div>
          </div>
        </div>

        @can('update-maintenance-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   = $('#maint-image-input');
  var $preview = $('#maint-img-preview');
  var $btn     = $('.media_upload_form_btn');

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