@extends('selva.layout')

@section('title', 'Website')

@section('content')
  <div
    class="min-h-screen pb-[50px]"
    data-edit='@json($edit)'
    x-data="websiteForm({ editData: JSON.parse($el.dataset.edit) })"
    @set-image.window="setImage($event.detail.inputName, $event.detail.file)"
    @un-set-image.window="unsetImage($event.detail.inputName)"
  >
    <div class="p-6">
      <div
        class="bg-surface border-default overflow-hidden rounded-2xl shadow-sm"
        :class="{ 'dark': darkMode }"
      >
        <div
          class="bg-surface border-default border-b p-8"
          :class="{ 'dark': darkMode }"
        >
          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
            <div class="min-w-0 flex-1">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-900 text-white">
                    <i class="fa-regular fa-globe text-lg"></i>
                  </div>
                </div>
                <div class="ml-4">
                  <h1
                    class="text-primary text-lg font-bold"
                    :class="{ 'dark': darkMode }"
                  >Kelola Website</h1>
                  <p
                    class="text-md text-secondary mt-1 text-base"
                    :class="{ 'dark': darkMode }"
                  >Atur informasi website dan optimasi SEO
                    dengan mudah</p>
                </div>
              </div>
            </div>

            <div class="mt-6 flex flex-col justify-end gap-4 sm:flex-row lg:mt-0">
              <button
                class="btn-light backdrop-blur-sm transition-all duration-300"
                :class="darkMode ? 'bg-gray-700/80 hover:bg-gray-600/90' : 'bg-white/80 hover:bg-white/90'"
                @click="resetForm"
              >
                Reset Form
              </button>
              <button
                class="btn bg-gradient-to-r shadow-lg transition-all duration-300 hover:shadow-xl"
                :class="darkMode ? 'from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800' : 'from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700'"
                @click="submitForm"
              >
                <i class="fa-regular fa-save mr-2"></i>
                Simpan Semua Perubahan
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="px-6">
      <div class="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:gap-8">

        <div
          class="bg-card group overflow-hidden rounded-3xl shadow-xl shadow-blue-500/5 backdrop-blur-sm transition-all duration-500 hover:shadow-blue-500/10 lg:col-span-8"
          :class="{ 'dark': darkMode }"
        >
          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-blue-900/20 to-purple-900/20' : 'border-gray-100/80 bg-gradient-to-r from-blue-50/80 to-purple-50/80'"
          >
            <h2
              class="text-primary flex items-center text-lg font-bold"
              :class="{ 'dark': darkMode }"
            >
              <div class="mr-3 h-6 w-2 rounded-full bg-gradient-to-b from-blue-500 to-purple-600 shadow-lg transition-all duration-300 group-hover:shadow-blue-500/30">
              </div>
              Informasi Website
            </h2>
            <p
              class="text-secondary mt-1 text-sm"
              :class="{ 'dark': darkMode }"
            >Atur informasi dasar website Anda</p>
          </div>

          <div class="space-y-6 p-6">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div class="space-y-2">
                <label
                  class="text-secondary block text-sm font-semibold"
                  :class="{ 'dark': darkMode }"
                >Nama Perusahaan</label>
                <input
                  class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                  type="text"
                  :class="{ 'dark': darkMode }"
                  x-model="inputData.company_name"
                  placeholder="Masukkan nama perusahaan"
                >
                <template x-if="errors.company_name">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.company_name[0]"
                  ></p>
                </template>
              </div>
              <div class="space-y-2">
                <label
                  class="text-secondary block text-sm font-semibold"
                  :class="{ 'dark': darkMode }"
                >Nama Domain</label>
                <input
                  class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                  type="text"
                  :class="{ 'dark': darkMode }"
                  x-model="inputData.domain_name"
                  placeholder="www.example.com"
                >
                <template x-if="errors.domain_name">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.domain_name[0]"
                  ></p>
                </template>
              </div>
            </div>

            <div class="space-y-2">
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Judul Website</label>
              <input
                class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                type="text"
                :class="{ 'dark': darkMode }"
                x-model="inputData.title"
                placeholder="Masukkan judul website"
              >
              <template x-if="errors.title">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.title[0]"
                ></p>
              </template>
            </div>
          </div>


          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-indigo-900/20 to-blue-900/20' : 'border-gray-100/80 bg-gradient-to-r from-indigo-50/80 to-blue-50/80'"
          >
            <h2
              class="text-primary flex items-center text-lg font-bold"
              :class="{ 'dark': darkMode }"
            >
              <div class="mr-3 h-6 w-3 rounded-full bg-gradient-to-b from-indigo-500 to-blue-500 shadow-lg transition-all duration-300 group-hover:shadow-indigo-500/30">
              </div>
              Search Engine Optimization
            </h2>
            <p
              class="text-secondary mt-1 text-sm"
              :class="{ 'dark': darkMode }"
            >Optimasi untuk mesin pencari</p>
          </div>

          <div class="space-y-4 p-6">
            <div class="space-y-2">
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Meta Deskripsi</label>
              <textarea
                class="bg-input text-input w-full resize-none rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
                :class="{ 'dark': darkMode }"
                rows="3"
                x-model="inputData.description"
                placeholder="Deskripsi singkat tentang website..."
              ></textarea>
              <template x-if="errors.description">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.description[0]"
                ></p>
              </template>
              <p class="text-xs text-gray-500">Maksimal 160 karakter untuk hasil optimal</p>
            </div>

            <div
              class="space-y-2"
              x-data="tagInput({ key: 'Keywords', eventName: 'keywords-changed', preselectedTags: @js($edit->keyword ? explode(',', $edit->keyword) : null) })"
            >
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Meta Keywords</label>
              <div class="relative">
                <input
                  id="keywords"
                  x-ref="input"
                  :class="{ 'border-red-500 ring-red-500': errors.keywords }"
                >
                </input>
              </div>
              <template x-if="errors.keywords">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.keywords[0]"
                ></p>
              </template>
              <div class="flex items-center space-x-2 text-xs text-gray-500">
                <div class="flex items-center space-x-1">
                  <span
                    class="inline-flex items-center rounded-md bg-gradient-to-r from-blue-50 to-indigo-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-blue-200/50"
                  >
                    <i class="fa-regular fa-lightbulb mr-1 text-blue-500"></i>
                    Note
                  </span>
                </div>
                <span>Tekan</span>
                <kbd
                  class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 font-mono text-xs font-medium text-gray-900 shadow-sm ring-1 ring-gray-300">Enter</kbd>
                <span>atau</span>
                <kbd class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 font-mono text-xs font-medium text-gray-900 shadow-sm ring-1 ring-gray-300">,</kbd>
                <span>setelah memasukan tag</span>
              </div>
            </div>
          </div>
        </div>

        <div
          class="bg-card group overflow-hidden rounded-3xl shadow-xl shadow-amber-500/5 backdrop-blur-sm transition-all duration-500 hover:shadow-amber-500/10 lg:col-span-4"
          :class="{ 'dark': darkMode }"
        >
          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-amber-900/20 to-yellow-900/20' : 'border-gray-100/80 bg-gradient-to-r from-amber-50/80 to-yellow-50/80'"
          >
            <h2
              class="text-primary flex items-center text-lg font-bold"
              :class="{ 'dark': darkMode }"
            >
              <div class="mr-3 h-6 w-3 rounded-full bg-gradient-to-b from-amber-500 to-yellow-600 shadow-lg transition-all duration-300 group-hover:shadow-amber-500/30">
              </div>
              Logo & Branding
            </h2>
            <p
              class="text-secondary mt-1 text-sm"
              :class="{ 'dark': darkMode }"
            >Upload logo website</p>
          </div>

          <div class="space-y-6 p-6">

            <div
              class="space-y-3"
              x-data="imageUpload({ inputName: 'logo_light', selectedImage: '{{ $edit->logo_light }}' })"
            >
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Logo Light</label>
              <div
                class="border-upload mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed px-6 pb-6 pt-5 transition-colors duration-200"
                :class="[{ 'dark': darkMode }, isDragging ? 'border-indigo-500 bg-indigo-50' : '']"
                @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 } });
                        }"
                :class="{ 'border-indigo-500 bg-indigo-50': isDragging }"
              >
                <!-- Jika belum ada file -->
                <template x-if="!previewImage">
                  <div class="text-center">
                    <i class="fas fa-cloud-upload-alt mx-auto text-3xl text-gray-400"></i>
                    <p
                      class="mt-2 text-sm text-gray-600"
                      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-gray-200 object-contain"
                      alt="Preview"
                      :src="previewImage"
                    >
                    <p
                      class="mt-2 text-sm text-gray-700"
                      x-text="imageName"
                    ></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.logo_light">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.logo_light[0]"
                ></p>
              </template>
            </div>

            <div
              class="space-y-3"
              x-data="imageUpload({ inputName: 'logo_dark', selectedImage: '{{ $edit->logo_dark }}' })"
            >
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Logo Dark</label>
              <div
                class="border-upload mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed px-6 pb-6 pt-5 transition-colors duration-200"
                :class="[{ 'dark': darkMode }, isDragging ? 'border-indigo-500 bg-indigo-50' : '']"
                @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 } });
                        }"
                :class="{ 'border-indigo-500 bg-indigo-50': isDragging }"
              >
                <!-- Jika belum ada file -->
                <template x-if="!previewImage">
                  <div class="text-center">
                    <i class="fas fa-cloud-upload-alt mx-auto text-3xl text-gray-400"></i>
                    <p
                      class="mt-2 text-sm text-gray-600"
                      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-gray-200 object-contain"
                      alt="Preview"
                      :src="previewImage"
                    >
                    <p
                      class="mt-2 text-sm text-gray-700"
                      x-text="imageName"
                    ></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.logo_dark">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.logo_dark[0]"
                ></p>
              </template>
            </div>

            <div
              class="space-y-3"
              x-data="imageUpload({ inputName: 'favicon', selectedImage: '{{ $edit->favicon }}' })"
            >
              <label
                class="text-secondary block text-sm font-semibold"
                :class="{ 'dark': darkMode }"
              >Favicon</label>
              <div
                class="border-upload mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed px-6 pb-6 pt-5 transition-colors duration-200"
                :class="[{ 'dark': darkMode }, isDragging ? 'border-indigo-500 bg-indigo-50' : '']"
                @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 } });
                        }"
                :class="{ 'border-indigo-500 bg-indigo-50': isDragging }"
              >
                <!-- Jika belum ada file -->
                <template x-if="!previewImage">
                  <div class="text-center">
                    <i class="fas fa-cloud-upload-alt mx-auto text-3xl text-gray-400"></i>
                    <p
                      class="mt-2 text-sm text-gray-600"
                      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-gray-200 object-contain"
                      alt="Preview"
                      :src="previewImage"
                    >
                    <p
                      class="mt-2 text-sm text-gray-700"
                      x-text="imageName"
                    ></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.favicon">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.favicon[0]"
                ></p>
              </template>
            </div>
          </div>
        </div>

        {{-- Info alamat --}}
        <div
          class="bg-card group overflow-hidden rounded-3xl shadow-xl shadow-green-500/5 backdrop-blur-sm transition-all duration-500 hover:shadow-green-500/10 lg:col-span-4"
          data-edit='@json($editAddress)'
          :class="{ 'dark': darkMode }"
          x-data="websiteAddressForm({ editData: JSON.parse($el.dataset.edit) })"
          @save-address.window="handleSubmit"
        >
          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-green-900/20 to-teal-900/20' : 'border-gray-100/80 bg-gradient-to-r from-green-50/80 to-teal-50/80'"
          >
            <div class="flex items-center justify-between">
              <div>
                <h2
                  class="text-primary flex items-center text-xl font-bold"
                  :class="{ 'dark': darkMode }"
                >
                  <div class="mr-3 h-6 w-3 rounded-full bg-gradient-to-b from-green-500 to-teal-500 shadow-lg transition-all duration-300 group-hover:shadow-green-500/30">
                  </div>
                  Informasi Alamat
                </h2>
                <p
                  class="text-secondary mt-1 text-sm"
                  :class="{ 'dark': darkMode }"
                >Lokasi dan kontak perusahaan</p>
              </div>
              <button
                class="btn-light rounded-lg px-3 py-1 text-xs font-medium"
                type="button"
                :class="{ 'dark': darkMode }"
                @click="toggleAll"
                x-text="isAllOpen ? 'Collapse All' : 'Expand All'"
              ></button>
            </div>
          </div>

          <template
            x-for="(item, index) in inputData.data"
            :key="index"
          >
            <div
              class="overflow-hidden"
              :data-address-index="index"
            >
              <!-- Header -->
              <div
                class="flex cursor-pointer items-center justify-between px-4 py-3"
                :class="darkMode ? 'bg-gradient-to-r from-green-900/20 to-teal-900/20' : 'bg-gradient-to-r from-green-50/80 to-teal-50/80'"
              >
                <h3
                  class="text-secondary font-semibold"
                  :class="{ 'dark': darkMode }"
                >
                  <span class="text-sm">Alamat</span>
                  <span
                    class="ml-1 text-green-600"
                    x-text="index + 1"
                  ></span>
                  <span
                    class="text-muted ml-2"
                    :class="{ 'dark': darkMode }"
                    x-text="item.name || 'Belum diisi'"
                  ></span>
                </h3>
                <div class="flex gap-5">
                  <i
                    class="far fa-times text-red-700"
                    @click="remove(index)"
                  ></i>
                  <i
                    class="far fa-chevron-down transform transition-transform duration-300"
                    @click="item.open = !item.open"
                    :class="{ 'rotate-180': item.open }"
                  >
                  </i>
                </div>
              </div>

              <!-- Content -->
              <div
                x-show="item.open"
                x-collapse
              >
                <div class="space-y-6 p-6">
                  <div class="space-y-3">
                    <label
                      class="text-secondary block text-sm font-semibold"
                      :class="{ 'dark': darkMode }"
                    >Judul</label>
                    <input
                      class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                      type="text"
                      :class="{ 'dark': darkMode }"
                      x-model="item.name"
                      placeholder="Masukkan judul alamat"
                    >
                  </div>

                  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="space-y-3">
                      <label
                        class="text-secondary block text-sm font-semibold"
                        :class="{ 'dark': darkMode }"
                      >Alamat Lengkap</label>
                      <textarea
                        class="bg-input text-input w-full resize-none rounded-xl px-4 py-4 transition-all duration-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/10"
                        :class="{ 'dark': darkMode }"
                        rows="3"
                        x-model="item.address"
                        placeholder="Masukkan alamat..."
                      ></textarea>
                    </div>

                    <div class="space-y-3">
                      <label
                        class="text-secondary block text-sm font-semibold"
                        :class="{ 'dark': darkMode }"
                      >Google Maps</label>
                      <textarea
                        class="bg-input text-input w-full resize-none rounded-xl px-4 py-4 font-mono text-sm transition-all duration-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/10"
                        :class="{ 'dark': darkMode }"
                        x-model="item.embed_map"
                        rows="3"
                        placeholder="<iframe src=..."
                      ></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <div class="p-6">
            <button
              class="w-full items-center rounded-lg py-2 text-sm font-medium transition-all duration-300 hover:shadow-lg"
              :class="darkMode ? 'bg-gradient-to-r from-green-700/70 to-teal-700/70 text-green-200 hover:from-green-600/80 hover:to-teal-600/80' :
                  'bg-gradient-to-r from-green-100 to-teal-100 text-green-700 hover:from-green-200 hover:to-teal-200'"
              @click="add"
            >
              <i class="fa-regular fa-plus mr-2"></i>
              Tambah Alamat
            </button>
          </div>
        </div>


        {{-- Info kontak --}}
        <div
          class="bg-card group overflow-hidden rounded-3xl shadow-xl shadow-indigo-500/5 backdrop-blur-sm transition-all duration-500 hover:shadow-indigo-500/10 lg:col-span-4"
          data-edit='@json($editContact)'
          :class="{ 'dark': darkMode }"
          x-data="websiteContactForm({ editData: JSON.parse($el.dataset.edit) })"
          @save-contact.window="handleSubmit"
        >
          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-green-900/20 to-teal-900/20' : 'border-gray-100/80 bg-gradient-to-r from-green-50/80 to-teal-50/80'"
          >
            <div class="flex items-center justify-between">
              <div>
                <h2
                  class="text-primary flex items-center text-xl font-bold"
                  :class="{ 'dark': darkMode }"
                >
                  <div class="mr-3 h-6 w-3 rounded-full bg-gradient-to-b from-green-500 to-teal-500 shadow-lg transition-all duration-300 group-hover:shadow-green-500/30">
                  </div>
                  Informasi Kontak
                </h2>
                <p
                  class="text-secondary mt-1 text-sm"
                  :class="{ 'dark': darkMode }"
                >Kelola berbagai kontak perusahaan</p>
              </div>
              <button
                class="btn-light rounded-lg px-3 py-1 text-xs font-medium"
                type="button"
                :class="{ 'dark': darkMode }"
                @click="toggleAll"
                x-text="isAllOpen ? 'Collapse All' : 'Expand All'"
              ></button>
            </div>
          </div>

          <template
            x-for="(item, index) in inputData.data"
            :key="index"
          >
            <div
              class="overflow-hidden"
              :data-contact-index="index"
            >
              <!-- Header -->
              <div
                class="flex cursor-pointer items-center justify-between px-4 py-3"
                :class="darkMode ? 'bg-gradient-to-r from-green-900/20 to-teal-900/20' : 'bg-gradient-to-r from-green-50/80 to-teal-50/80'"
              >
                <h3
                  class="text-secondary font-semibold"
                  :class="{ 'dark': darkMode }"
                >
                  <span class="text-sm">Kontak</span>
                  <span
                    class="ml-1 text-green-600"
                    x-text="index + 1"
                  ></span>
                  <span
                    class="text-muted ml-2"
                    :class="{ 'dark': darkMode }"
                    x-text="item.contact || 'Belum diisi'"
                  ></span>
                </h3>
                <div class="flex gap-5">
                  <i
                    class="far fa-times text-red-700"
                    @click="remove(index)"
                  ></i>
                  <i
                    class="far fa-chevron-down transform transition-transform duration-300"
                    @click="item.open = !item.open"
                    :class="{ 'rotate-180': item.open }"
                  >
                  </i>
                </div>
              </div>

              <!-- Content -->
              <div
                x-show="item.open"
                x-collapse
              >
                <div class="space-y-6 p-6">
                  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="space-y-3">
                      <label
                        class="text-secondary block text-sm font-semibold"
                        :class="{ 'dark': darkMode }"
                      >Kontak</label>
                      <select
                        class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                        type="text"
                        :class="{ 'dark': darkMode }"
                        x-model="item.contact"
                        placeholder="Pilih jenis kontak"
                      >
                        <template x-for="(opt, i) in ['fax','phone','email','whatsapp','call center']">
                          <option
                            :value="opt"
                            x-text="opt"
                          ></option>
                        </template>
                      </select>
                    </div>
                    <div class="space-y-3">
                      <label
                        class="text-secondary block text-sm font-semibold"
                        :class="{ 'dark': darkMode }"
                      >Nilai</label>
                      <input
                        class="bg-input text-input w-full rounded-lg px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
                        type="text"
                        :class="{ 'dark': darkMode }"
                        x-model="item.value"
                        placeholder="Masukkan informasi kontak..."
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <div class="p-6">
            <button
              class="w-full items-center rounded-lg py-2 text-sm font-medium transition-all duration-300 hover:shadow-lg"
              :class="darkMode ? 'bg-gradient-to-r from-indigo-600/70 to-blue-600/70 text-indigo-200 hover:from-indigo-500/80 hover:to-blue-500/80' :
                  'bg-gradient-to-r from-indigo-100 to-blue-100 text-indigo-700 hover:from-indigo-200 hover:to-blue-200'"
              @click="add"
            >
              <i class="fa-regular fa-plus mr-2"></i>
              Tambah Kontak
            </button>
          </div>
        </div>


        {{-- Info Sosmed --}}
        <div
          class="bg-card group overflow-hidden rounded-3xl shadow-xl shadow-pink-500/5 backdrop-blur-sm transition-all duration-500 hover:shadow-pink-500/10 lg:col-span-4"
          data-edit='@json($editSocialMedia)'
          :class="{ 'dark': darkMode }"
          x-data="websiteSocialMediaForm({ editData: JSON.parse($el.dataset.edit) })"
          @save-social-media.window="handleSubmit"
        >
          <div
            class="border-b p-6"
            :class="darkMode ? 'border-gray-700/80 bg-gradient-to-r from-pink-900/20 to-orange-900/20' : 'border-gray-100/80 bg-gradient-to-r from-pink-50/80 to-orange-50/80'"
          >
            <div class="flex items-center justify-between">
              <div>
                <h2
                  class="text-primary flex items-center text-lg font-bold"
                  :class="{ 'dark': darkMode }"
                >
                  <div class="mr-3 h-6 w-2 rounded-full bg-gradient-to-b from-pink-500 to-orange-500 shadow-lg transition-all duration-300 group-hover:shadow-pink-500/30">
                  </div>
                  Social Media Accounts
                </h2>
                <p
                  class="text-secondary mt-1 text-sm"
                  :class="{ 'dark': darkMode }"
                >Kelola akun media sosial perusahaan</p>
              </div>
              <button
                class="btn-light rounded-lg px-3 py-1 text-xs font-medium"
                type="button"
                :class="{ 'dark': darkMode }"
                @click="toggleAll"
                x-text="isAllOpen ? 'Collapse All' : 'Expand All'"
              ></button>
            </div>
          </div>

          <template
            x-for="(item, index) in inputData.data"
            :key="index"
          >
            <div
              class="overflow-hidden px-6 pt-6"
              :data-contact-index="index"
            >
              <div
                class="group/social border-default flex items-center space-x-3 rounded-lg border bg-gradient-to-br p-4 transition-all duration-500 hover:border-blue-300 hover:shadow-lg hover:shadow-blue-500/10"
                :class="{ 'dark': darkMode }"
              >
                <div class="flex-shrink-0">
                  <div
                    class="flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg transition-all duration-300 group-hover/social:shadow-blue-500/30"
                  >
                    <i
                      class="fab text-lg text-white"
                      :class="`fa-${item.platform}`"
                    ></i>
                  </div>
                </div>
                <div class="flex-1 space-y-2">
                  <input
                    class="bg-input text-input w-full rounded-md px-2 py-1 text-xs font-medium"
                    type="text"
                    :class="{ 'dark': darkMode }"
                    x-model="item.platform"
                    placeholder="Platform (contoh: instagram, facebook)"
                  >
                  <input
                    class="bg-input text-input w-full rounded-md px-2 py-1 text-xs transition-all duration-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500/20"
                    type="url"
                    :class="{ 'dark': darkMode }"
                    placeholder="https://example.com/..."
                    x-model="item.url"
                  >
                </div>
                <button
                  class="p-1 text-red-400 transition-colors hover:text-red-600"
                  @click="remove(index)"
                >
                  <i class="fa-regular fa-trash text-xs"></i>
                </button>
              </div>
            </div>
          </template>

          <div class="p-6">
            <button
              class="w-full items-center rounded-lg py-2 text-sm font-medium transition-all duration-300 hover:shadow-lg"
              :class="darkMode ? 'bg-gradient-to-r from-pink-600/70 to-orange-600/70 text-pink-200 hover:from-pink-500/80 hover:to-orange-500/80' :
                  'bg-gradient-to-r from-pink-100 to-orange-100 text-pink-700 hover:from-pink-200 hover:to-orange-200'"
              @click="add"
            >
              <i class="fa-regular fa-plus mr-2"></i>
              Tambah Akun Sosmed
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>
@endsection

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