@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const emailKantorDiv = document.getElementById('detail_email_kantor');

            function addDeleteListeners() {
                document.querySelectorAll(".delete-button").forEach(button => {
                    button.addEventListener("click", function() {
                        this.closest(
                                ".flex.flex-col.lg\\:flex-row.gap-2.items-baseline.lg\\:items-center.w-full"
                            )
                            .remove();
                    });
                });
            }

            function DeleteEditListeners() {
                document.querySelectorAll(".delete-button-edit").forEach(button => {
                    button.addEventListener("click", function() {
                        this.closest(
                                ".flex.flex-col.lg\\:flex-row.gap-2.items-baseline.lg\\:items-center.w-full"
                            )
                            .remove();
                    });
                });
            }

            DeleteEditListeners();

            document.getElementById("tambah_email_kantor").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
                newDiv.innerHTML = `
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_email_kantor[email_kantor][]" value="">
                        </div>
                        <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                    `;
                emailKantorDiv.appendChild(newDiv);

                addDeleteListeners();
            });

            const namaPimpinanDiv = document.getElementById('detail_nama_pimpinan');

            document.getElementById("tambah_nama_pimpinan").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
                newDiv.innerHTML = `
                <label class="form-label max-w-56">
                            Nama Pimpinan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nama_pimpinan[nama_pimpinan][]" value="">
                        </div>
                        <label class="form-label max-w-56">
                            Nomor HP Pimpinan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nomor_hp_pimpinan[nomor_hp_pimpinan][]" value="">
                        </div>
                        <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                    `;
                namaPimpinanDiv.appendChild(newDiv);

                addDeleteListeners();
            });

            const namaPicReviewerDiv = document.getElementById('detail_nama_pic_reviewer');

            document.getElementById("tambah_nama_pic_reviewer").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
                newDiv.innerHTML = `
                        <label class="form-label max-w-56">
                            Nama PIC Reviewer
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nama_pic_reviewer[nama_pic_reviewer][]" value="">
                        </div>
                        <label class="form-label max-w-56">
                            Nomor HP PIC Reviewer
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nomor_hp_pic_reviewer[nomor_hp_pic_reviewer][]" value="">
                        </div>
                        <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                    `;
                namaPicReviewerDiv.appendChild(newDiv);

                addDeleteListeners();
            })

            const namaPicAdminDiv = document.getElementById('detail_nama_pic_admin');

            document.getElementById("tambah_nama_pic_admin").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
                newDiv.innerHTML = `
                <label class="form-label max-w-56">
                            Nama PIC Admin
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nama_pic_admin[nama_pic_admin][]" value="">
                        </div>
                        <label class="form-label max-w-56">
                            Nomor HP PIC Admin
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nomor_hp_pic_admin[nomor_hp_pic_admin][]" value="">
                        </div>
                        <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                    `;
                namaPicAdminDiv.appendChild(newDiv);

                addDeleteListeners();
            })

            const namaPicMarketingDiv = document.getElementById('detail_nama_pic_marketing');

            document.getElementById("tambah_nama_pic_marketing").addEventListener("click", function() {
                const newDiv = document.createElement("div");
                newDiv.className = "flex flex-col lg:flex-row gap-2 items-baseline lg:items-center w-full";
                newDiv.innerHTML = `
                <label class="form-label max-w-56">
                            Nama PIC Marketing
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nama_pic_marketing[nama_pic_marketing][]" value="">
                        </div>
                        <label class="form-label max-w-56">
                            Nomor HP PIC Marketing
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input" type="text" name="detail_nomor_hp_pic_marketing[nomor_hp_pic_marketing][]" value="">
                        </div>
                        <button type="button" class="btn btn-danger btn-xs delete-button">Hapus</button>
                    `;
                namaPicMarketingDiv.appendChild(newDiv);

                addDeleteListeners();
            })
        });
    </script>
@endpush
