@extends('admin.layout')

@section('title', 'Tambah Karya Santri')
@section('page-title', 'Tambah Karya Santri')

@section('content')
<div class="bg-white p-4 md:p-6 rounded-2xl shadow-lg">
    <!-- Breadcrumb Navigation -->
    <div class="mb-6">
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('admin.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                        <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
                        </svg>
                        Dashboard
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                        </svg>
                        <a href="{{ route('admin.ruang-santri.index') }}" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">Karya Santri</a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                        </svg>
                        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Tambah Karya</span>
                    </div>
                </li>
            </ol>
        </nav>
    </div>

    <!-- Error Messages -->
    @if ($errors->any())
    <div class="mb-6 bg-red-50 border border-red-200 text-red-800 rounded-xl p-4 shadow-sm">
        <div class="flex items-center mb-2">
            <svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <h3 class="font-semibold">Terdapat kesalahan dalam pengisian form</h3>
        </div>
        <ul class="mt-2 ml-7 list-disc text-sm">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Success Preview -->
    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-xl p-4 md:p-5">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h3 class="font-bold text-gray-800 text-lg">Buat Karya Baru</h3>
                <p class="text-gray-600 text-sm">Isi form berikut untuk menambahkan karya santri baru ke dalam sistem</p>
            </div>
            <div class="flex items-center gap-2">
                <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
                    Form Tambah Data
                </span>
                <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
                    Semua Bidang Bertanda * Wajib Diisi
                </span>
            </div>
        </div>
    </div>

    <!-- Main Form -->
    <form action="{{ route('admin.ruang-santri.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        
        <!-- Informasi Utama Karya -->
        <div class="bg-gradient-to-br from-gray-50 to-white p-4 md:p-6 rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center mb-5">
                <div class="p-2 bg-blue-100 rounded-lg mr-3">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                </div>
                <h3 class="text-lg md:text-xl font-bold text-gray-800">Informasi Utama Karya</h3>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <!-- Judul Karya -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Judul Karya <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="text" 
                               name="judul" 
                               value="{{ old('judul') }}"
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition pl-11"
                               required
                               placeholder="Masukkan judul karya santri">
                        <div class="absolute left-3 top-3 text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Penulis (Santri) -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Nama Penulis <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="text" 
                               name="penulis" 
                               value="{{ old('penulis') }}"
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition pl-11"
                               required
                               placeholder="Nama santri penulis karya">
                        <div class="absolute left-3 top-3 text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Tanggal -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Tanggal Publikasi <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="date" 
                               name="tanggal" 
                               value="{{ old('tanggal', date('Y-m-d')) }}"
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition pl-11 bg-white"
                               required>
                        <div class="absolute left-3 top-3 text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Kategori -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Kategori Karya <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <select name="kategori_id" 
                                class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition appearance-none bg-white"
                                required>
                            <option value="">-- Pilih Kategori Karya --</option>
                            @foreach($kategori as $kat)
                            <option value="{{ $kat->id }}" {{ old('kategori_id') == $kat->id ? 'selected' : '' }}>
                                {{ $kat->nama_kategori }}
                            </option>
                            @endforeach
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bagian 1: Konten Utama -->
        <div class="bg-gradient-to-br from-white to-green-50 p-4 md:p-6 rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center mb-5">
                <div class="p-2 bg-green-100 rounded-lg mr-3">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-lg md:text-xl font-bold text-gray-800">Media Utama & Isi Karya <span class="text-sm font-normal text-gray-600">(Wajib)</span></h3>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-5">
                <!-- Gambar 1 -->
                <div class="lg:col-span-1">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Gambar Utama <span class="text-xs font-normal text-gray-500">(Rekomendasi: 800x600px)</span>
                    </label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-blue-400 transition" id="dropzone-gambar1">
                        <input type="file" 
                               name="gambar1" 
                               id="gambar1"
                               class="hidden"
                               onchange="previewImage(this, 'previewGambar1')">
                        <label for="gambar1" class="cursor-pointer block text-center">
                            <svg class="w-10 h-10 text-gray-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <span class="block text-sm text-gray-600 font-medium">Upload Gambar Utama</span>
                            <p class="text-xs text-gray-500 mt-1">Klik atau drag & drop file di sini</p>
                            <p class="text-xs text-gray-500">Format: JPG, PNG, GIF (Maks: 2MB)</p>
                        </label>
                    </div>
                    <div id="previewGambar1" class="hidden mt-3">
                        <p class="text-sm text-gray-600 mb-2">Preview Gambar Utama:</p>
                        <div class="relative">
                            <img class="w-full h-48 object-cover rounded-lg border shadow">
                            <button type="button" onclick="removeImage('gambar1', 'previewGambar1')" 
                                    class="absolute top-2 right-2 bg-red-500 text-white p-1.5 rounded-full hover:bg-red-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-2 space-y-5">
                    <!-- Keterangan Gambar 1 -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Keterangan Gambar
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   name="ket1" 
                                   value="{{ old('ket1') }}" 
                                   class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition pl-11"
                                   placeholder="Masukkan keterangan untuk gambar utama">
                            <div class="absolute left-3 top-3 text-gray-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- Isi 1 -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Isi Karya (Teks Konten Utama) <span class="text-red-500">*</span>
                        </label>
                        <div class="border border-gray-300 rounded-lg overflow-hidden">
                            <textarea name="isi1" 
                                      class="tinymce w-full border-0 focus:outline-none focus:ring-0 h-64"
                                      required
                                      placeholder="Tulis konten utama karya santri di sini...">
                                {{ old('isi1') }}
                            </textarea>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Gunakan editor untuk memformat teks dengan baik</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bagian 2: Konten Tambahan -->
        <div class="bg-gradient-to-br from-white to-purple-50 p-4 md:p-6 rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center mb-5">
                <div class="p-2 bg-purple-100 rounded-lg mr-3">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                </div>
                <h3 class="text-lg md:text-xl font-bold text-gray-800">Konten Tambahan <span class="text-sm font-normal text-gray-600">(Opsional)</span></h3>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-5">
                <!-- Gambar 2 -->
                <div class="lg:col-span-1">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Gambar Tambahan <span class="text-xs font-normal text-gray-500">(Opsional)</span>
                    </label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-blue-400 transition" id="dropzone-gambar2">
                        <input type="file" 
                               name="gambar2" 
                               id="gambar2"
                               class="hidden"
                               onchange="previewImage(this, 'previewGambar2')">
                        <label for="gambar2" class="cursor-pointer block text-center">
                            <svg class="w-10 h-10 text-gray-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <span class="block text-sm text-gray-600 font-medium">Upload Gambar Tambahan</span>
                            <p class="text-xs text-gray-500 mt-1">Klik atau drag & drop file di sini</p>
                            <p class="text-xs text-gray-500">Format: JPG, PNG, GIF (Maks: 2MB)</p>
                        </label>
                    </div>
                    <div id="previewGambar2" class="hidden mt-3">
                        <p class="text-sm text-gray-600 mb-2">Preview Gambar Tambahan:</p>
                        <div class="relative">
                            <img class="w-full h-48 object-cover rounded-lg border shadow">
                            <button type="button" onclick="removeImage('gambar2', 'previewGambar2')" 
                                    class="absolute top-2 right-2 bg-red-500 text-white p-1.5 rounded-full hover:bg-red-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-2 space-y-5">
                    <!-- Keterangan Gambar 2 -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Keterangan Gambar 2
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   name="ket2" 
                                   value="{{ old('ket2') }}" 
                                   class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition pl-11"
                                   placeholder="Masukkan keterangan untuk gambar tambahan">
                            <div class="absolute left-3 top-3 text-gray-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- Isi 2 -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Isi Tambahan
                        </label>
                        <div class="border border-gray-300 rounded-lg overflow-hidden">
                            <textarea name="isi2" 
                                      class="tinymce w-full border-0 focus:outline-none focus:ring-0 h-40"
                                      placeholder="Tulis konten tambahan jika diperlukan...">
                                {{ old('isi2') }}
                            </textarea>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">Konten ini bersifat opsional</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="bg-gradient-to-r from-gray-50 to-white p-4 md:p-6 rounded-xl border border-gray-200 shadow-sm">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center text-sm text-gray-600">
                    <svg class="w-5 h-5 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <p>Pastikan semua informasi bertanda <span class="text-red-500">*</span> telah diisi dengan benar</p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('admin.ruang-santri.index') }}" 
                       class="px-5 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        Batal
                    </a>
                    <button type="submit" 
                            class="px-5 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg shadow hover:from-blue-600 hover:to-blue-700 transition font-semibold flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                        </svg>
                        Simpan Karya Santri
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- JavaScript for Image Upload and Preview -->
<script>
// Image preview function
function previewImage(input, previewId) {
    const preview = document.getElementById(previewId);
    const previewImg = preview.querySelector('img');
    
    if (input.files && input.files[0]) {
        // Validate file size (max 2MB)
        if (input.files[0].size > 2 * 1024 * 1024) {
            alert('Ukuran file terlalu besar! Maksimal 2MB.');
            input.value = '';
            preview.classList.add('hidden');
            return;
        }
        
        // Validate file type
        const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (!validTypes.includes(input.files[0].type)) {
            alert('Format file tidak didukung! Gunakan JPG, PNG, atau GIF.');
            input.value = '';
            preview.classList.add('hidden');
            return;
        }
        
        const reader = new FileReader();
        
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.classList.remove('hidden');
        }
        
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.classList.add('hidden');
        previewImg.src = '';
    }
}

// Remove image function
function removeImage(inputId, previewId) {
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);
    
    input.value = '';
    preview.classList.add('hidden');
}

// Drag and drop functionality
document.addEventListener('DOMContentLoaded', function() {
    ['dropzone-gambar1', 'dropzone-gambar2'].forEach(id => {
        const dropzone = document.getElementById(id);
        if (!dropzone) return;
        
        const input = dropzone.querySelector('input[type="file"]');
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropzone.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropzone.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropzone.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropzone.classList.add('border-blue-500', 'bg-blue-50');
        }
        
        function unhighlight() {
            dropzone.classList.remove('border-blue-500', 'bg-blue-50');
        }
        
        dropzone.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                input.files = files;
                const previewId = 'preview' + id.split('-')[1].charAt(0).toUpperCase() + id.split('-')[1].slice(1);
                previewImage(input, previewId);
            }
        }
    });
});

// Initialize TinyMCE
document.addEventListener('DOMContentLoaded', function() {
    if (typeof tinymce !== 'undefined') {
        tinymce.init({
            selector: 'textarea.tinymce',
            height: 300,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    }
});
</script>

<!-- Custom CSS -->
<style>
/* Custom scrollbar */
select {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

select::-webkit-scrollbar {
    width: 8px;
}

select::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

select::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* Smooth transitions */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Required field styling */
input:required, textarea:required, select:required {
    border-left-color: #ef4444;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-cols-1 {
        grid-template-columns: 1fr;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}
</style>
@endsection