@extends('backend.template-admin')
@section('content')
    <section class="max-w-4xl">
        <form action="/admin/another-menu/pengumpul-dana/insert" enctype="multipart/form-data" method="POST">
            @csrf
            <div class="grid grid-cols-4 grid-rows-4 gap-4">
                <div class="col-span-2 h-60 row-span-3">
                    <label for="dropzone-file"
                        class="flex flex-col items-center justify-center w-full overflow-hidden rounded-lg h-full border-2 border-gray-300  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-10 pb-6 ">
                            <img id="cover-preview" class="w-full h-full object-cover" src="#" alt="MUAT NAIK PROFIL">
                        </div>
                        <input id="dropzone-file" type="file" class="hidden" name="photo" />

                    </label>

                </div>

                <div class="col-span-2 h-16 col-start-3">
                    <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama</label>
                    <input name="name" type="text" id="name" placeholder="Masukkan nama anda"
                        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">
                </div>
                <div class="col-span-2 col-start-3 row-start-2">
                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">E-mel</label>
                    <input name="email" type="email" id="email" placeholder="Masukkan alamat e-mel anda"
                        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">
                </div>
                <div class="col-span-2 col-start-3 row-start-3">
                    <label for="telefon" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nombor
                        Telefon</label>
                    <input name="telefon" type="number" id="telefon" placeholder="Masukkan nombor telefon anda"
                        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">
                </div>
                <div class="col-span-2 row-start-4">
                    <label for="alamat"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Alamat</label>
                    <textarea name="alamat" id="alamat" rows="1" placeholder="Masukkan alamat anda"
                        class="block 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>
                <div class="col-span-2 col-start-3 row-start-4">
                    <label for="entitas"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Entitas</label>
                    <select name="entitas" id="entitas"
                        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 value="organization">Organisasi</option>
                        <option value="company">Syarikat</option>
                    </select>
                </div>
            </div>
            <button
                class="bg-orange-400 hover:bg-orange-500 hover:scale-105 hover:-rotate-1 transition px-7 py-1 rounded-md mt-3 text-white">Kirim</button>
        </form>
    </section>

    <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