@extends('selva.layout')

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

@section('content')
  <div class="p-6 py-8">
    <div x-data="blogForm({ formType: 'create' })">
      <form @submit.prevent="submitForm">
        <!-- Header Form -->
        <div class="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 }">Buat 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' })">
                <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' })">
                <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=""
                    :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()">
                  <label
                    class="mb-1 block text-sm font-medium text-secondary"
                    :class="{ 'dark': darkMode }"
                    for="published_at"
                  >
                    Tanggal Lahir <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' })">
                <label
                  class="mb-1 block text-sm font-medium text-secondary"
                  :class="{ 'dark': darkMode }"
                  for="tags"
                >
                  Tag
                </label>
                <div class="relative">
                  <input
                    id="tags"
                    x-ref="input"
                    :class="{ 'border-red-500 ring-red-500': errors.tags }"
                  >
                  </input>
                </div>
                <template x-if="errors.tags">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.tags[0]"
                  ></p>
                </template>
              </div>
            </div>

            <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 }"
                >
                  File Manager
                </label>
                <div class="relative">
                   <button
                     class="w-full rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white transition-colors duration-200 focus:outline-none"
                     :class="{ 'focus:ring-offset-gray-800': darkMode }"
                     type="button"
                     @click="
                       console.log('Button clicked!');
                       window.dispatchEvent(new CustomEvent('open-file-manager'));
                       console.log('Event dispatched!');
                     "
                   >
                    <i class="fa-regular fa-folder-image mr-2"></i>
                    Buka Direktori Gambar
                  </button>

                  <div
                    id="selected-files"
                    x-show="selectedFilesList && selectedFilesList.length > 0"
                    x-data="{ selectedFilesList: [] }"
                    @files-selected.window="selectedFilesList = $event.detail"
                    class="mt-4"
                  >
                    <p class="text-sm font-medium text-secondary mb-3" :class="{ 'dark': darkMode }">
                      Selected Files:
                    </p>
                    <template x-for="file in selectedFilesList" :key="file.id">
                      <div class="flex items-center gap-3 mb-2 p-3 rounded-lg border border-default bg-input transition-colors hover:bg-default">
                        <template x-if="file.thumbnail">
                          <img :src="file.thumbnail" :alt="file.name" class="w-10 h-10 rounded-md object-cover">
                        </template>
                        <template x-if="!file.thumbnail">
                          <div class="flex items-center justify-center w-10 h-10 rounded-md bg-default">
                            <i :class="file.icon + ' ' + file.color" class="text-lg"></i>
                          </div>
                        </template>
                        <div class="flex-1 min-w-0">
                          <span class="text-sm font-medium text-primary truncate block" :class="{ 'dark': darkMode }" x-text="file.name"></span>
                          <span class="text-xs text-muted" :class="{ 'dark': darkMode }" x-text="file.size"></span>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </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"
                > 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"
                > 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"
                > 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>

  @include('selva.file-manager.modal')
@endsection

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