@php
  /** @var \App\Models\Kegiatan|null $kegiatan */
  $type = old('type', $kegiatan->type ?? 'offline');
  $status = old('status', $kegiatan->status ?? 'draft');
  $visibility = old('visibility', $kegiatan->visibility ?? 'public');
  $priceType = old('price_type', $kegiatan->price_type ?? 'free');
@endphp

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

  {{-- BASIC --}}
  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Title *</label>
    <input name="title" value="{{ old('title', $kegiatan->title ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Contoh: Kegiatan Pertanian Anak Binaan" required>
    @error('title') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Slug (optional)</label>
    <input name="slug" value="{{ old('slug', $kegiatan->slug ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="auto jika kosong">
    @error('slug') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Category</label>
    <input name="category" value="{{ old('category', $kegiatan->category ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Kegiatan / Pertanian / Perikanan">
    @error('category') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Tags</label>
    <input name="tags" value="{{ old('tags', $kegiatan->tags ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Pisahkan dengan koma: kegiatan, pembelajaran, pertanian">
    @error('tags') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Organizer</label>
    <input name="organizer" value="{{ old('organizer', $kegiatan->organizer ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Contoh: LPKA Kelas II Jakarta / Company Name">
    @error('organizer') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Type *</label>
    <select name="type"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300" required>
      <option value="offline" @selected($type==='offline')>offline</option>
      <option value="online" @selected($type==='online')>online</option>
      <option value="hybrid" @selected($type==='hybrid')>hybrid</option>
    </select>
    @error('type') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Status *</label>
    <select name="status"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300" required>
      <option value="draft" @selected($status==='draft')>draft</option>
      <option value="published" @selected($status==='published')>published</option>
      <option value="archived" @selected($status==='archived')>archived</option>
      <option value="cancelled" @selected($status==='cancelled')>cancelled</option>
    </select>
    @error('status') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Visibility</label>
    <select name="visibility"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
      <option value="public" @selected($visibility==='public')>public</option>
      <option value="unlisted" @selected($visibility==='unlisted')>unlisted</option>
      <option value="private" @selected($visibility==='private')>private</option>
    </select>
    @error('visibility') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  {{-- TIME --}}
  <div>
    <label class="text-sm font-medium text-gray-700">activity date</label>
    <input type="datetime-local" name="start_at"
      value="{{ old('start_at', isset($kegiatan->start_at) ? $kegiatan->start_at->format('Y-m-d\TH:i') : '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
    @error('start_at') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>


  @push('scripts')
  <!-- CKEditor styling to match form inputs -->
  <style>
    .ck-editor__editable_inline {
      min-height: 500px;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb; /* gray-200 */
      padding: 0.75rem;
      background: #ffffff;
    }
    .ck-editor__editable_inline:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(244,63,94,0.12); /* rose-300 */
      border-color: #fb7185; /* rose-400 */
    }
    .ck-toolbar {
      border-radius: 0.5rem 0.5rem 0 0;
      border: 1px solid #e5e7eb;
      margin-bottom: 0.25rem;
    }
    /* ensure editor container flows with tailwind form spacing */
    .ck-editor__editable_inline img { max-width: 100%; height: auto; }
  </style>
  <!-- Load CKEditor 5 Classic build from CDN (free). If you prefer self-host, copy files to public/vendor/ckeditor5 and change the src. -->
  <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

      ClassicEditor.create(document.querySelector('#description'), {
        toolbar: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'mediaEmbed', 'imageUpload' ],
        simpleUpload: {
          uploadUrl: '{{ route("kegiatan.uploadImage") }}',
          headers: token ? { 'X-CSRF-TOKEN': token } : {},
        }
      })
      .then(editor => {
        // Increase editable area height
        try {
          editor.ui.view.editable.element.style.minHeight = '500px';
        } catch (e) {
          console.warn('Could not set editor height:', e);
        }
      })
      .catch(error => {
        console.error('CKEditor init error:', error);
      });

      // Conditional Online/Offline
      const typeEl = document.querySelector('[name="type"]');
      const offlineBox = document.getElementById('offlineBox');
      const onlineBox = document.getElementById('onlineBox');

      function toggleType() {
        const v = typeEl?.value;
        offlineBox.classList.toggle('hidden', !(v === 'offline' || v === 'hybrid'));
        onlineBox.classList.toggle('hidden', !(v === 'online' || v === 'hybrid'));
      }
      typeEl?.addEventListener('change', toggleType);
      toggleType();

      // Preview multi images
      const input = document.getElementById('gallery_files');
      const preview = document.getElementById('gallery_preview');

      input?.addEventListener('change', () => {
        preview.innerHTML = '';
        [...input.files].forEach(file => {
          const url = URL.createObjectURL(file);
          const div = document.createElement('div');
          div.className = "rounded-xl overflow-hidden border bg-white";
          div.innerHTML = `
            <img src="${url}" class="w-full h-32 object-cover" />
            <div class="p-2 text-xs text-gray-600 truncate">${file.name}</div>
          `;
          preview.appendChild(div);
        });
      });
    });
  </script>
  @endpush


  <div>
    <label class="text-sm font-medium text-gray-700">Benefits</label>
    <input name="benefits" value="{{ old('benefits', $kegiatan->benefits ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Contoh: Mendapatkan Pengalaman di LPKA">
    @error('benefits') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div class="flex items-center gap-2 mt-6">
    <input type="checkbox" name="certificate_available" value="1"
      class="rounded border-gray-300"
      @checked(old('certificate_available', $kegiatan->certificate_available ?? false))>
    <label class="text-sm text-gray-700">Certificate available</label>
  </div>

  {{-- CONTENT --}}
  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Excerpt</label>
    <input name="excerpt" value="{{ old('excerpt', $kegiatan->excerpt ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Ringkasan singkat (max 500 char)">
    @error('excerpt') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Description (TinyMCE)</label>
    <textarea id="description" name="description" rows="10"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="Detail kegiatan...">{{ old('description', $kegiatan->description ?? '') }}</textarea>
    @error('description') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>


  {{-- MEDIA --}}
  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Cover (Upload)</label>
    <input type="file" name="cover_file" accept="image/*"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
    <div class="text-xs text-gray-500 mt-1">Opsional. Jika upload, lebih aman daripada URL.</div>
    @error('cover_file') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Gallery Photos (Multiple)</label>
    <input id="gallery_files" type="file" name="gallery_files[]" multiple accept="image/*"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
    @error('gallery_files') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
    @error('gallery_files.*') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror

    <div id="gallery_preview" class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-3"></div>

    {{-- Existing gallery preview (edit mode) --}}
    @if(isset($kegiatan) && $kegiatan?->media?->count())
      <div class="mt-4">
        <div class="text-sm font-medium text-gray-700 mb-2">Existing Gallery</div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
          @foreach($kegiatan->media as $m)
            <div class="rounded-xl overflow-hidden border bg-white">
              <img src="{{ $m->url }}" class="w-full h-32 object-cover">
              <div class="p-2 text-xs text-gray-600 flex items-center justify-between gap-2">
                <span class="truncate">{{ $m->caption ?? '—' }}</span>
                <label class="text-xs">
                  <input type="checkbox" name="delete_media_ids[]" value="{{ $m->id }}">
                  delete
                </label>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    @endif
  </div>

  {{-- LINKS --}}
  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Registration URL</label>
    <input name="registration_url" value="{{ old('registration_url', $kegiatan->registration_url ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
      placeholder="https://...">
    @error('registration_url') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div class="lg:col-span-2">
    <label class="text-sm font-medium text-gray-700">Contact Person</label>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-1">
      <input name="contact_name" value="{{ old('contact_name', $kegiatan->contact_name ?? '') }}"
        class="w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
        placeholder="Nama">
      <input name="contact_email" value="{{ old('contact_email', $kegiatan->contact_email ?? '') }}"
        class="w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
        placeholder="Email">
      <input name="contact_phone" value="{{ old('contact_phone', $kegiatan->contact_phone ?? '') }}"
        class="w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300"
        placeholder="WhatsApp / Telp">
    </div>
    @error('contact_name') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
    @error('contact_email') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
    @error('contact_phone') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  {{-- SEO --}}
  <div class="lg:col-span-2">
    <div class="text-sm font-semibold text-gray-800 mt-4">SEO (Optional)</div>
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Meta Title</label>
    <input name="meta_title" value="{{ old('meta_title', $kegiatan->meta_title ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
    @error('meta_title') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

  <div>
    <label class="text-sm font-medium text-gray-700">Meta Description</label>
    <input name="meta_description" value="{{ old('meta_description', $kegiatan->meta_description ?? '') }}"
      class="mt-1 w-full rounded-xl border-gray-200 focus:border-rose-400 focus:ring-rose-300">
    @error('meta_description') <div class="text-sm text-rose-600 mt-1">{{ $message }}</div> @enderror
  </div>

</div>


<!-- Removed TinyMCE fallback scripts. CKEditor is used instead with styling above. -->