@extends('backend.template-admin')
@section('content')
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>

    <div class="max-w-5xl">
        <h4 class="text-base font-semibold mb-5 text-center">Buat Kempen Terbaharu</h4>
        <form action="/admin/kempen/usahawan-sosial/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">
                    <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>
                <textarea name="latar_belakang" id="message" rows="4"
                    class="block resize-none p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-orange-500 focus:border-orange-500 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"></textarea>
                <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>
        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]);
        });
    </script>
@endsection