@{
    ViewData["Title"] = "Tambah Kebutuhan Sarpras";
}

<!-- Breadcrumb -->
<div class="breadcrumbs text-sm">
    <ul>
        <li class="text-gray-500"><a>Profil Kelurahan</a></li>
        <li><a>Tambah Kebutuhan Sarpras</a></li>
    </ul>
</div>

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="prose">
        <h3 class="mb-2">Tambah Kebutuhan Sarpras</h3>
    </div>
    <div class="justify-self-end lg:self-center flex flex-wrap gap-3">
        <a href="@Url.Action("Index", "ProfilRw")" class="btn rounded-full shadow-none">
            <span class="icon icon-fill me-2">arrow_back</span>
            Kembali
        </a>
    </div>
</div>

<div class="h-8"></div>

<div class="card bg-white card-border">
    <form action="" method="post">
        <div class="card-body">
            <div id="sarprasFormList" class="space-y-4">
                <div class="sarpras-form-item">
                    <div class="card-title">Sarpras #<span class="sarpras-index">1</span></div>
                    <div class="grid grid-cols-1 md:grid-cols-4 md:gap-4">
                        <!-- Kota/Kabupaten -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Kota/Kabupaten</legend>
                            <select class="select w-full">
                                <option disabled selected>Pilih Kota/Kabupaten</option>
                            </select>
                        </fieldset>
                        <!-- Kecamatan -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Kecamatan</legend>
                            <select class="select w-full">
                                <option disabled selected>Pilih Kecamatan</option>
                            </select>
                        </fieldset>
                        <!-- Kelurahan -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Kelurahan</legend>
                            <select class="select w-full">
                                <option disabled selected>Pilih Kelurahan</option>
                            </select>
                        </fieldset>
                        <!-- RW -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">RW</legend>
                            <select class="select w-full">
                                <option disabled selected>Pilih RW</option>
                                <option>01</option>
                                <option>02</option>
                                <option>03</option>
                            </select>
                        </fieldset>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
                        <!-- Tanggal -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Tanggal</legend>
                            <input type="date" class="input w-full" />
                        </fieldset>
                        <!-- Sarpras -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Sarpras</legend>
                            <input type="text" class="input w-full" placeholder="Masukkan sarpras" />
                        </fieldset>
                        <!-- Unit -->
                        <fieldset class="fieldset">
                            <legend class="fieldset-legend">Unit</legend>
                            <input type="text" class="input w-full" placeholder="Masukkan unit" />
                        </fieldset>
                    </div>
                    <!-- Keterangan -->
                    <fieldset class="fieldset md:col-span-2">
                        <legend class="fieldset-legend">Keterangan</legend>
                        <textarea class="textarea w-full" rows="3" placeholder="opsional"></textarea>
                    </fieldset>
                    <div class="py-3 justify-end flex">
                        <button type="button" class="btn btn-error text-white rounded-full js-remove-sarpras">
                            <span class="icon me-2">delete</span>
                            Hapus
                        </button>
                    </div>
                    <div class="divider"></div>
                </div>
            </div>
            <div class="py-3">
                <button type="button" id="addSarprasBtn" class="btn w-full btn-primary btn-outline rounded-full">
                    <span class="icon me-2">add</span>
                    Tambah Kebutuhan Sarana Prasarana
                </button>
            </div>
            <div class="card-actions justify-end">
                <a href="@Url.Action("Index", "ProfilRw")" class="btn">
                    <span class="icon me-2">cancel</span>
                    Batal
                </a>
                <button type="submit" class="btn btn-primary">
                    <span class="icon me-2">save</span>
                    Simpan
                </button>
            </div>
        </div>
    </form>
</div>

<template id="sarprasTemplate">
    <div class="sarpras-form-item">
        <div class="card-title">Sarpras #<span class="sarpras-index"></span></div>
        <div class="grid grid-cols-1 md:grid-cols-4 md:gap-4">
            <!-- Kota/Kabupaten -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kota/Kabupaten</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih Kota/Kabupaten</option>
                </select>
            </fieldset>
            <!-- Kecamatan -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kecamatan</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih Kecamatan</option>
                </select>
            </fieldset>
            <!-- Kelurahan -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Kelurahan</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih Kelurahan</option>
                </select>
            </fieldset>
            <!-- RW -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">RW</legend>
                <select class="select w-full">
                    <option disabled selected>Pilih RW</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                </select>
            </fieldset>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
            <!-- Tanggal -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Tanggal</legend>
                <input type="date" class="input w-full" />
            </fieldset>
            <!-- Sarpras -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Sarpras</legend>
                <input type="text" class="input w-full" placeholder="Masukkan sarpras" />
            </fieldset>
            <!-- Unit -->
            <fieldset class="fieldset">
                <legend class="fieldset-legend">Unit</legend>
                <input type="text" class="input w-full" placeholder="Masukkan unit" />
            </fieldset>
        </div>
        <!-- Keterangan -->
        <fieldset class="fieldset md:col-span-2">
            <legend class="fieldset-legend">Keterangan</legend>
            <textarea class="textarea w-full" rows="3" placeholder="opsional"></textarea>
        </fieldset>
        <div class="py-3 justify-end flex">
            <button type="button" class="btn btn-error text-white rounded-full js-remove-sarpras">
                <span class="icon me-2">delete</span>
                Hapus
            </button>
        </div>
        <div class="divider"></div>
    </div>
</template>

@section Scripts {
    <script src="/lib/sweetalert2/sweetalert2-11.26.4.js"></script>

    <script>
        (() => {
            const listEl = document.getElementById('sarprasFormList');
            const template = document.getElementById('sarprasTemplate');
            const addButton = document.getElementById('addSarprasBtn');

            if (!listEl || !template || !addButton) {
                return;
            }

            const updateIndexes = () => {
                const items = listEl.querySelectorAll('.sarpras-form-item');
                items.forEach((item, idx) => {
                    const indexLabel = item.querySelector('.sarpras-index');
                    if (indexLabel) {
                        indexLabel.textContent = String(idx + 1);
                    }
                    const removeBtn = item.querySelector('.js-remove-sarpras');
                    if (removeBtn) {
                        removeBtn.disabled = items.length === 1;
                    }
                });
            };

            const addForm = () => {
                const clone = template.content.firstElementChild.cloneNode(true);
                listEl.appendChild(clone);
                updateIndexes();
            };

            addButton.addEventListener('click', (event) => {
                event.preventDefault();
                addForm();
            });

            listEl.addEventListener('click', (event) => {
                const removeBtn = event.target.closest('.js-remove-sarpras');
                if (!removeBtn) {
                    return;
                }
                event.preventDefault();
                if (listEl.children.length === 1) {
                    return;
                }
                const formItem = removeBtn.closest('.sarpras-form-item');
                if (formItem) {
                    formItem.remove();
                    updateIndexes();
                }
            });

            updateIndexes();

            // Success Alert 
            const form = document.querySelector("form");

            form.addEventListener("submit", function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Simpan Kebutuhan Sarpras?',
                    text: "Pastikan semua data sudah benar.",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#22c55e',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Simpan',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {

                        Swal.fire({
                            title: 'Berhasil!',
                            text: 'Kebutuhan Sarpras berhasil disimpan.',
                            icon: 'success',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#22c55e'
                        }).then(() => {
                        window.location.href = '@Url.Action("Index", "ProfilRw")';
                    });
                    }
                });
            });
        })();
    </script>
}