@extends('selva.layout')

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

@section('content')
  <div class="p-6 py-8">
    <div
      data-edit='@json($edit)'
      x-data="blogForm({
          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 Blog</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 Singkat -->
              <div>
                <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Deskripsi Singkat</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 }"
                  rows="3"
                  x-model="inputData.short_description"
                ></textarea>
              </div>

              <!-- Deskripsi Lengkap (TinyMCE) -->
              <div x-data="longDescriptionTinymce({ eventName: 'long-description-changed', defaultValue: `{{ $edit->long_description }}` })">
                <label class="mb-2 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Deskripsi Lengkap</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>

            <!-- Kategori -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <div x-data="categorySelect({ key: 'Kategori', {{ $edit->category_id ? "selectedValue: {$edit->category_id}" : 'selectedValue: null' }} })">
                <label
                  class="mb-1 block text-sm font-medium text-secondary"
                  :class="{ 'dark': darkMode }"
                  for="category_id"
                >
                  Kategori <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="category_id"
                    x-ref="select"
                    x-model="inputData.category_id"
                    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 },
                      { 'border-red-500 ring-red-500': errors.category_id }
                    ]"
                  >
                  </select>
                </div>
                <template x-if="errors.category_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.category_id[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>

            <!-- Publish Time -->
            <div
              class="space-y-2 rounded-lg bg-surface p-5 shadow-sm"
              :class="{ 'dark': darkMode }"
              x-show="isPublic"
              x-transition
            >
              <label class="block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Jadwal Publish</label>
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="radio"
                  value="immediate"
                  x-model="inputData.publish"
                > Sekarang
              </label>
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="radio"
                  value="scheduled"
                  x-model="inputData.publish"
                > Terjadwal
              </label>
              <div x-show="isScheduled">
                <div x-data="publishedAtPicker({ defaultValue: '{{ $edit->published_at }}' })">
                  <label
                    class="mb-1 block text-sm font-medium text-secondary"
                    :class="{ 'dark': darkMode }"
                    for="published_at"
                  >
                    Tanggal Publish <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-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    :class="[
                      { 'dark': darkMode },
                      { 'border-red-500 ring-red-500': errors.published_at }
                    ]"
                    id="published_at"
                    type="text"
                    x-ref="input"
                    x-model="inputData.published_at"
                    readonly
                  >
                  <template x-if="errors.published_at">
                    <p
                      class="mt-1 text-sm text-red-600"
                      x-text="errors.published_at[0]"
                    ></p>
                  </template>
                </div>
              </div>
            </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>

            <!-- Tags -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <div x-data="tagInput({ key: 'Tag', eventName: 'tags-changed', preselectedTags: @js($edit->tags->pluck('slug')) })">
                <label
                  class="mb-1 block text-sm font-medium text-secondary"
                  :class="{ 'dark': darkMode }"
                  for="tags"
                >
                  Tag
                </label>

                <!-- Tags Display -->
                <div class="mb-2 flex flex-wrap gap-2" x-show="tags.length > 0">
                  <template x-for="(tag, index) in tags" :key="index">
                    <span
                      class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium border transition-colors"
                      :class="darkMode ?
                        'bg-indigo-900/50 text-indigo-200 border-indigo-700' :
                        'bg-indigo-100 text-indigo-800 border-indigo-200'"
                    >
                      <span x-text="tag"></span>
                      <button
                        type="button"
                        class="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-indigo-600 hover:text-white"
                        @click="removeTag(index)"
                      >
                        <i class="fas fa-times text-xs"></i>
                      </button>
                    </span>
                  </template>
                </div>

                <div class="relative">
                  <input
                    id="tags"
                    x-ref="input"
                    type="text"
                    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 },
                      { 'border-red-500 ring-red-500': errors.tags }
                    ]"
                    placeholder="Ketik tag dan tekan Enter..."
                    x-model="inputValue"
                  >

                  <!-- Suggestions Dropdown -->
                  <div
                    x-show="showSuggestions && filteredSuggestions.length > 0"
                    x-transition
                    class="absolute top-full left-0 right-0 z-10 mt-1 max-h-48 overflow-auto rounded-lg border shadow-lg bg-surface"
                    :class="{ 'dark': darkMode }"
                  >
                    <template x-for="suggestion in filteredSuggestions" :key="suggestion">
                      <button
                        type="button"
                        class="block w-full px-3 py-2 text-left text-sm hover:bg-gray-100 first:rounded-t-lg last:rounded-b-lg text-secondary"
                        :class="darkMode ? 'hover:bg-gray-700 dark' : 'hover:bg-gray-100'"
                        @click="addTag(suggestion)"
                        x-text="suggestion"
                      ></button>
                    </template>
                  </div>
                </div>
                <template x-if="errors.tags">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.tags[0]"
                  ></p>
                </template>
              </div>
            </div>

            <!-- Pin -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="checkbox"
                  x-model="inputData.pinned"
                  :checked="inputData.pinned"
                > Pin blog di atas
              </label>
            </div>

            <!-- Allow Comment -->
            <div class="rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="checkbox"
                  x-model="inputData.allow_comment"
                  :checked="inputData.allow_comment"
                > Izinkan Komentar
              </label>
            </div>

            <!-- Password Protect -->
            <div class="space-y-2 rounded-lg bg-surface p-5 shadow-sm" :class="{ 'dark': darkMode }">
              <label class="flex items-center gap-2 text-secondary" :class="{ 'dark': darkMode }">
                <input
                  type="checkbox"
                  x-model="inputData.password_protected"
                  :checked="inputData.password_protected"
                > Kunci Blog dengan Password
              </label>
              <template x-if="inputData.password_protected">
                <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"
                  placeholder="Masukkan password"
                  x-model="inputData.password"
                >
              </template>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

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