@extends('selva.layout')

@section('title', 'Tambah Halaman')

@section('content')
  <div class="p-6 py-8">
    <div x-data="pageForm({ formType: 'create' })">
      <form @submit.prevent="submitForm">
        <!-- Header Form -->
        <div
          class="sticky top-0 mb-5 flex items-center justify-between rounded-lg p-5 shadow-sm"
          :class="darkMode ? 'bg-gray-800' : 'bg-white'"
        >
          <h4
            class="text-xl font-semibold"
            :class="darkMode ? 'text-gray-100' : 'text-gray-800'"
          >Tambah Halaman</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 p-5 shadow-sm"
              :class="darkMode ? 'bg-gray-800' : 'bg-white'"
            >
              <!-- Judul -->
              <div>
                <label
                  class="mb-2 block text-sm font-medium"
                  :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                >Judul <span class="text-red-500">*</span></label>
                <input
                  class="w-full rounded-lg border px-3 py-2 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                  type="text"
                  :class="darkMode ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'"
                  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"
                  :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                >Slug <span class="text-red-500">*</span></label>
                <input
                  class="w-full rounded-lg border px-3 py-2 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                  type="text"
                  :class="darkMode ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'"
                  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' })">
                <label
                  class="mb-2 block text-sm font-medium"
                  :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                >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 p-5 shadow-sm"
              :class="darkMode ? 'bg-gray-800' : 'bg-white'"
            >
              <div>
                <label
                  class="mb-2 block text-sm font-medium"
                  for="image"
                  :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                >
                  Upload Gambar
                </label>
                <div
                  class="mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed px-6 pb-6 pt-5 transition-colors duration-200"
                  :class="isDragging ? 'border-indigo-500 bg-indigo-50' : (darkMode ? 'border-gray-600 hover:border-indigo-400' : 'border-gray-300 hover:border-indigo-400')"
                  @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"
                        :class="darkMode ? 'text-gray-500' : 'text-gray-400'"
                      ></i>
                      <p
                        class="mt-2 text-sm"
                        :class="darkMode ? 'text-gray-400' : 'text-gray-600'"
                        x-text="isDragging ? 'Lepaskan gambar di sini...' : 'Klik atau drag & drop untuk upload gambar'"
                      ></p>
                      <p
                        class="text-xs"
                        :class="darkMode ? 'text-gray-500' : '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 object-contain"
                        alt="Preview"
                        :class="darkMode ? 'border-gray-600' : 'border-gray-200'"
                        :src="previewImage"
                      >
                      <p
                        class="mt-2 text-sm"
                        :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                        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 p-5 shadow-sm"
              :class="darkMode ? 'bg-gray-800' : 'bg-white'"
            >
              <label
                class="mb-2 block text-sm font-medium"
                :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
              >Visibility <span class="text-red-500">*</span></label>
              <label
                class="flex items-center gap-2"
                :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
              >
                <input
                  type="radio"
                  value="draft"
                  x-model="inputData.visibility"
                > Draft
              </label>
              <label
                class="flex items-center gap-2"
                :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
              >
                <input
                  type="radio"
                  value="public"
                  x-model="inputData.visibility"
                > Public
              </label>
            </div>

            <!-- SEO Keyword -->
            <div
              class="rounded-lg p-5 shadow-sm"
              :class="darkMode ? 'bg-gray-800' : 'bg-white'"
            >
              <label
                class="mb-2 block text-sm font-medium"
                :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
              >SEO Keyword</label>
              <textarea
                class="w-full rounded-lg border px-3 py-2 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
                :class="darkMode ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'"
                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