@extends('backend.template-admin')
@section('content')
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
    @php
        $enId = $misi->id;
    @endphp
    <div class="max-w-5xl">
        <h4 class="text-base font-semibold mb-5 text-center">Edit Kempen Terbaharu</h4>
        <form action="/admin/kempen/misi-sumbangan/edit/update/{{ $enId }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="flex gap-4 flex-wrap sm:flex-nowrap">
                <div class="grid w-full">
                    <div x-data="{ isDragging: false }" @dragover.prevent="isDragging = true"
                        @dragleave.prevent="isDragging = false"
                        @drop.prevent="isDragging = false; previewCoverImage(event.dataTransfer.files[0])"
                        class="flex items-center justify-center w-full" :class="{ 'border-blue-500 border-4': isDragging }">
                        <label for="dropzone-file"
                            class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6 overflow-hidden">
                                <img id="cover-preview" class="w-full h-full object-cover rounded-lg" src="#"
                                    alt="Cover Preview">
                                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click
                                        to upload</span> or drag and drop</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)
                                </p>
                            </div>
                            <input name="cover" id="dropzone-file" type="file" class="hidden" />
                        </label>
                    </div>
                    <input type="text" value="{{ $misi->cover }}" class="border-0 m-2" name="cover" readonly>
                    <h4 class="mt-2 text-xs font-semibold">*Upload Cover Kempen</h4>
                    <hr class="mb-3 mt-3 border-2 rounded-full">
                    <div class="mb-3">
                        <label for="judul" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Pengumpul
                            Dana</label>
                        <select name="pengumpul_dana_id" id="penerima"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                            @foreach ($pendana as $item)
                                <option value="{{ $item->id }}"@if (isset($selectedPendana) && $item->id == $selectedPendana) selected @endif>
                                    {{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <hr class="mb-3 mt-3 border-2 rounded-full">
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Video
                            Kempen <span class="text-sm text-gray-500">(Opsional)</span></label>
                        <input
                            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                            id="file_input" name="video" type="url" value="{{ $misi->video }}"
                            placeholder="Masukkan URL video (opsional)">
                        <p class="mt-1 text-xs text-gray-500">Field ini boleh dikosongkan jika tidak ada video.</p>
                    </div>
                    <hr class="mb-3 mt-3 border-2 rounded-full">

                    <!-- Existing Images Section -->
                    <div class="mb-3">
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Gambar Kempen Saat Ini
                        </label>
                        @if($misi->images->count() > 0)
                            <div class="grid grid-cols-3 gap-2 mb-3">
                                @foreach($misi->images as $image)
                                    <div class="relative">
                                        <img src="{{ asset($image->image_path) }}" alt="Kempen Image" class="w-full h-24 object-cover rounded-lg border-2 border-gray-300">
                                        <div class="absolute top-1 right-1">
                                            <input type="checkbox" name="delete_images[]" value="{{ $image->id }}" class="w-4 h-4 text-red-600 bg-gray-100 border-gray-300 rounded focus:ring-red-500">
                                        </div>
                                        <p class="text-xs text-center mt-1 text-gray-500">Centang untuk hapus</p>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-sm text-gray-500">Belum ada gambar tambahan</p>
                        @endif
                    </div>

                    <!-- Multiple Images Upload Section -->
                    <div class="mb-3">
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Tambah Gambar Baru (Multiple Images)
                        </label>
                        <input
                            type="file"
                            name="images[]"
                            id="multiple-images"
                            multiple
                            accept="image/*"
                            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                        >
                        <p class="mt-1 text-xs text-gray-500">Pilih satu atau lebih gambar untuk ditambahkan</p>

                        <!-- Image Preview Container -->
                        <div id="images-preview" class="mt-3 grid grid-cols-3 gap-2"></div>
                    </div>
                    <hr class="mb-3 mt-3 border-2 rounded-full">
                </div>
                <div class="w-full gird">
                    <div class="mb-5">
                        <label for="judul" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Judul
                            Kempen</label>
                        <input value="{{ $misi->judul }}" name="judul" type="text" id="judul"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                    </div>
                    <div class="mb-5">
                        <label for="penerima"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Penerima</label>
                        <select name="penerima_id" id="penerima"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                            @foreach ($penerima as $item)
                                <option value="{{ $item->id }}" @if (isset($selectedPenerima) && $item->id == $selectedPenerima) selected @endif>
                                    {{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-5">
                        <label for="judul"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
                        <select name="category_id" id="Category"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                            {{-- <option selected>Pilih Category Derma</option> --}}
                            @foreach ($category as $item)
                                <option value="{{ $item->id }}" @if (isset($selectedCategory) && $item->id == $selectedCategory) selected @endif>
                                    {{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-5">
                        <label for="target_derma"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Target
                            Derma</label>
                        <input value="{{ $misi->target_derma }}" name="target_derma" type="number" id="target_derma"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                    </div>
                    <div class="mb-5">
                        <label for="target_derma"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kempen
                            Mulai</label>
                        <input value="{{ $misi->tanggal_dimulai }}" name="tanggal_dimulai" type="date" id="target_derma"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                    </div>
                    <div class="mb-5">
                        <label for="target_derma"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kempen
                            Berakhir</label>
                        <input value="{{ $misi->tanggal_berakhir }}" name="tanggal_berakhir" type="date"
                            id="target_derma"
                            class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
                    </div>
                </div>
            </div>
            <div class="grid">
                <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Latar
                    Belakang</label>
                <div id="editor" style="height: 200px;">{!! $misi->latar_belakang !!}</div>
                <input type="hidden" name="latar_belakang" id="latar_belakang_input">
                <div class="mt-5">
                    <button type="submit"
                        class="bg-orange-400 border-0 transition text-white  px-4 py-2 rounded-lg shadow-sm text-sm hover:bg-orange-300">Tambah
                        Kempen
                        Baru</button>
                    <button
                        class="bg-gray-400 border-0 transition text-white  px-4 py-2 rounded-lg shadow-sm text-sm hover:bg-gray-300">
                        Cancel</button>
                </div>
            </div>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

    <script>
        function previewCoverImage(file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('cover-preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        // Attach the previewCoverImage function to the change event of the cover image input
        document.getElementById('dropzone-file').addEventListener('change', function() {
            previewCoverImage(this.files[0]);
        });

        // Handle multiple images preview
        document.getElementById('multiple-images').addEventListener('change', function(e) {
            const previewContainer = document.getElementById('images-preview');
            previewContainer.innerHTML = '';

            const files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(event) {
                    const imgWrapper = document.createElement('div');
                    imgWrapper.className = 'relative';

                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.className = 'w-full h-24 object-cover rounded-lg border-2 border-gray-300';

                    imgWrapper.appendChild(img);
                    previewContainer.appendChild(imgWrapper);
                };

                reader.readAsDataURL(file);
            }
        });
        const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{
                'header': 1
            }, {
                'header': 2
            }],
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }],
            [{
                'script': 'sub'
            }, {
                'script': 'super'
            }],
            [{
                'indent': '-1'
            }, {
                'indent': '+1'
            }],
            [{
                'direction': 'rtl'
            }],
            [{
                'size': ['small', false, 'large', 'huge']
            }],
            [{
                'header': [1, 2, 3, 4, 5, 6, false]
            }],
            [{
                'color': []
            }, {
                'background': []
            }],
            [{
                'font': []
            }],
            [{
                'align': []
            }],
            ['clean']
        ];

        // Inisialisasi Quill
        const quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

        // Saat form submit, update hidden input
        const form = document.querySelector('form');
        form.onsubmit = function() {
            document.getElementById('latar_belakang_input').value = quill.root.innerHTML;
        };
    </script>
@endsection