<script>
    import api from "$lib/axios";
    import { goto } from "$app/navigation";
    import { onMount } from "svelte";

    export let modal;
    export let handleGetDiseases;

    let form;
    let isLoadingOnSubmit = false;
    let alert = {
        success: true,
        message: "",
    };

    const handleSubmit = async (e) => {
        try {
            isLoadingOnSubmit = true;

            const fd = new FormData(form);
            const response = await api.post("/diseases", Object.fromEntries(fd));

            alert.success = true;
            alert.message = "";

            handleGetDiseases();
            setTimeout(() => modal.hide(), 500);
        } catch (err) {
            alert.success = false;
            alert.message = err.message;
        } finally {
            isLoadingOnSubmit = false;
        }
    };

    onMount(() => {
        const bm = document.querySelector("#create-diseases-modal");
        bm.addEventListener("hide.bs.modal", () => {
            setTimeout(() => {
                alert.message = "";
                form.reset();
            }, 500);
        });
    });
</script>

<div
    id="create-diseases-modal"
    class="modal fade"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered">
        <form action="" method="post" class="modal-content" bind:this={form} on:submit|preventDefault={handleSubmit}>
            <div class="modal-header">
                <h5 class="modal-title">Tambah Penyakit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {#if alert.message}
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <div class="alert-icon">
                            <i class="ti ti-exclamation-circle"></i>
                        </div>
                        {alert.message}
                        <a href={"#"} class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                {/if}
                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label class="form-label required" for="input-name">Nama penyakit</label>
                            <input
                                type="text"
                                name="name"
                                id="input-name"
                                class="form-control"
                                placeholder="contoh: Demam Berdarah"
                                required
                            />
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label class="form-label" for="input-severity">Tingkatan</label>
                            <select name="severity" id="input-severity" class="form-select" required>
                                <option value="mild">Ringan</option>
                                <option value="moderate">Sedang</option>
                                <option value="severe">Berat</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label required" for="input-description">Deskripsi</label>
                    <textarea
                        name="description"
                        id="input-description"
                        class="form-control"
                        style="resize: none;"
                        rows="4"
                        placeholder="Informasi singkat terkait penyakit ini."
                        required
                    ></textarea>
                </div>
                <div class="mb-2">
                    <label class="form-label" for="input-treatment">Rekomendasi Penanganan</label>
                    <textarea
                        name="treatment"
                        id="input-treatment"
                        class="form-control"
                        style="resize: none;"
                        rows="4"
                        placeholder="Rekomendasi penanganan terkait penyakit ini."
                    ></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary" disabled={isLoadingOnSubmit}>
                    {#if isLoadingOnSubmit}
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    {:else}
                        Simpan
                    {/if}
                </button>
            </div>
        </form>
    </div>
</div>
