@extends('selva.layout')

@section('title', 'Edit Page')

@section('content')
  <div class="p-6 py-8">
    <div
      data-edit='@json($edit)'
      x-data="pageForm({
          formType: 'edit',
          editData: JSON.parse($el.dataset.edit)
      })"
    >
      <form @submit.prevent="submitForm">
        <!-- Header Form -->
        <div class="sticky top-0 mb-5 flex items-center justify-between rounded-lg bg-surface p-5 shadow-sm"
             :class="{ 'dark': darkMode }">
          <h4 class="text-xl font-semibold text-primary" :class="{ 'dark': darkMode }">Edit Page</h4>

          <div class="flex gap-4">
            <button
              class="btn-back"
              type="button"
              @click="resetForm"
            >
              <i class="fas fa-redo mr-2 text-sm"></i>
              Reset
            </button>
            <button
              class="btn-save"
              type="submit"
              :disabled="isLoading"
              :class="{ 'opacity-50 cursor-not-allowed': isLoading }"
            >
              <i
                class="fas fa-spinner animate-spin text-xs"
                x-show="isLoading"
              ></i>
              <i
                class="fas fa-save text-xs"
                x-show="!isLoading"
              ></i>
              <span
                class="ml-2"
                x-text="isLoading ? 'Menyimpan...' : 'Simpan'"
              ></span>
            </button>
          </div>
        </div>

        <!-- Grid Layout -->
        <div class="grid grid-cols-12 gap-5">
          <!-- Main Content -->
          <div class="col-span-12 md:col-span-8">
            <div class="space-y-4 rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <!-- Judul -->
              <div>
                <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Judul <span class="text-red-500">*</span></label>
                <input
                  class="w-full rounded-lg border bg-input px-3 py-2 text-sm text-input focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                  :class="{ 'dark': darkMode }"
                  type="text"
                  x-model="inputData.title"
                  placeholder="Masukkan judul"
                >
                <template x-if="errors.title">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.title[0]"
                  ></p>
                </template>
              </div>

              <!-- Slug -->
              <div>
                <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Slug <span class="text-red-500">*</span></label>
                <input
                  class="w-full rounded-lg border bg-input px-3 py-2 text-sm text-input focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                  :class="{ 'dark': darkMode }"
                  type="text"
                  x-model="inputData.slug"
                  placeholder="Slug otomatis dari judul"
                >
                <template x-if="errors.slug">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.slug[0]"
                  ></p>
                </template>
              </div>

              <!-- Deskripsi Lengkap (TinyMCE) -->
              <div x-data="descriptionTinymce({ eventName: 'description-changed', defaultValue: `{{ $edit->description }}` })">
                <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Deskripsi</label>
                <textarea x-ref="textarea"></textarea>
              </div>
            </div>
          </div>

          <!-- Sidebar -->
          <div class="col-span-12 space-y-5 md:col-span-4">
            <!-- Upload Thumbnail -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <div>
                <label
                  class="mb-2 block text-sm font-medium text-secondary"
                  :class="{ 'dark': darkMode }"
                  for="image"
                >
                  Upload Gambar
                </label>
                <div
                  class="mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed border-upload px-6 pb-6 pt-5 transition-colors duration-200"
                  :class="[
                    { 'dark': darkMode },
                    { 'border-indigo-500 bg-indigo-50': isDragging }
                  ]"
                  @click="$refs.imageInput.click()"
                  @dragover.prevent="isDragging = true"
                  @dragleave.prevent="isDragging = false"
                  @drop.prevent="isDragging = false;
                        if ($event.dataTransfer.files.length) {
                            handleFileUpload({ target: { files: $event.dataTransfer.files } });
                        }"
                >
                  <!-- Jika belum ada file -->
                  <template x-if="!previewImage">
                    <div class="text-center">
                      <i class="fas fa-cloud-upload-alt mx-auto text-3xl icon-muted" :class="{ 'dark': darkMode }"></i>
                      <p
                        class="mt-2 text-sm text-muted"
                        :class="{ 'dark': darkMode }"
                        x-text="isDragging ? 'Lepaskan gambar di sini...' : 'Klik atau drag & drop untuk upload gambar'"
                      ></p>
                      <p class="text-xs text-gray-500">PNG, JPG, JPEG up to 10MB</p>
                    </div>
                  </template>

                  <!-- Jika ada file -->
                  <template x-if="previewImage">
                    <div class="relative flex w-full flex-col items-center">
                      <!-- Tombol X -->
                      <button
                        class="absolute -right-4 -top-4 flex size-5 items-center justify-center rounded-full bg-red-500 text-white shadow hover:bg-red-600"
                        type="button"
                        @click.stop="removeFile"
                      >
                        <i class="fa-regular fa-close text-xs"></i>
                      </button>

                      <!-- Preview Gambar -->
                      <img
                        class="max-h-48 rounded-lg border border-default object-contain"
                        :class="{ 'dark': darkMode }"
                        alt="Preview"
                        :src="previewImage"
                      >
                      <p
                        class="mt-2 text-sm text-secondary"
                        :class="{ 'dark': darkMode }"
                        x-text="inputData.image_name"
                      ></p>
                    </div>
                  </template>

                  <!-- Hidden File Input -->
                  <input
                    class="sr-only"
                    id="image"
                    type="file"
                    accept="image/*"
                    x-ref="imageInput"
                    @change="handleFileUpload($event)"
                  >
                </div>
                <template x-if="errors.image">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.image[0]"
                  ></p>
                </template>
              </div>
            </div>

            <!-- Visibility -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Visibility <span class="text-red-500">*</span></label>
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="radio"
                  value="draft"
                  x-model="inputData.visibility"
                > Draft
              </label>
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="radio"
                  value="public"
                  x-model="inputData.visibility"
                > Public
              </label>
            </div>

            <!-- SEO Keyword -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">SEO Keyword</label>
              <textarea
                class="w-full rounded-lg border bg-input px-3 py-2 text-sm text-input focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                :class="{ 'dark': darkMode }"
                x-model="inputData.seo_keyword"
                rows="2"
              ></textarea>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('style')
  @vite(['resources/js/selva/page/import.js'])
@endpush