@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" />

    <div class="max-w-5xl">
        <h4 class="text-base font-semibold mb-5 text-center">Buat Kempen Terbaharu</h4>
        <form action="/admin/kempen/misi-sumbangan/store/proccess" method="POST" enctype="multipart/form-data">
            @csrf
            <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-orange-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>
                    <h4 class="mt-2 text-xs font-semibold">*Upload Cover Kempen</h4>
                    <hr class="mb-3 mt-3 border-2 rounded-full">

                    <!-- Multiple Images Upload Section -->
                    <div class="mb-3">
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Upload Gambar Tambahan (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 kempen ini</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 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">
                            <option selected>Pilih Pengumpul Dana Derma</option>
                            @foreach ($pendana as $item)
                                <option value="{{ $item->id }}">{{ $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" 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">
                    <div>
                        <label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Status</label>
                        <select name="status" id="status"
                            class="bg-gray-50 border 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 Status</option>
                            <option value="terbaharu">Terbaharu</option>
                            <option value="sedang_berlangsung">Sedang Berlangsung</option>
                            <option value="tamat">Tamat</option>
                        </select>
                    </div>
                </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 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">
                            <option>Pilih Penerima Derma</option>
                            @foreach ($penerima as $item)
                                <option value="{{ $item->id }}">{{ $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 }}">{{ $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 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 name="tanggal_mulai" 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 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>
                    <hr class="mb-3 mt-3 border-2 rounded-full">
                </div>
            </div>
            <div class="grid mt-4">
                <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;"></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'], // toggled buttons
            ['blockquote', 'code-block'],

            [{
                'header': 1
            }, {
                'header': 2
            }], // custom button values
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }],
            [{
                'script': 'sub'
            }, {
                'script': 'super'
            }], // superscript/subscript
            [{
                'indent': '-1'
            }, {
                'indent': '+1'
            }], // outdent/indent
            [{
                'direction': 'rtl'
            }], // text direction

            [{
                'size': ['small', false, 'large', 'huge']
            }], // custom dropdown
            [{
                'header': [1, 2, 3, 4, 5, 6, false]
            }],

            [{
                'color': []
            }, {
                'background': []
            }], // dropdown with defaults
            [{
                'font': []
            }],
            [{
                'align': []
            }],

            ['clean'] // remove formatting button
        ];

        const quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });
        const form = document.querySelector('form');

        // Saat form disubmit
        form.onsubmit = function() {
            const html = quill.root.innerHTML;
            document.getElementById('latar_belakang_input').value = html;
        };
    </script>
@endsection