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

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

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

            const fd = new FormData(form);
            const response = await api.post("/account/login", Object.fromEntries(fd));
            const { meta, data } = response.data;

            form.reset();
            cookie.set("session", `Bearer ${meta.token}`);

            goto(`/${data.role}`);
        } catch (err) {
            alert.success = false;
            alert.message = err.message;
        } finally {
            isLoadingOnSubmit = false;
        }
    };
</script>

<div class="row g-0 flex-fill">
    <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block position-relative">
        <div
            class="bg-cover h-100 min-vh-100"
            style="background-image: url(https://images.unsplash.com/photo-1585421514738-01798e348b17?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size: cover;"
        ></div>
    </div>
    <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
        <div class="container container-tight my-5 px-lg-5">
            <div class="text-center mb-4">
                <div class="navbar-brand navbar-brand-autodark" aria-label="Brand Logo">
                    <img src="/img/logo.png" alt="logo" class="navbar-brand-image" style="height: 5rem;" />
                </div>
            </div>
            <h2 class="h3 text-center mb-3">Masuk ke akun Anda</h2>
            {#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}
            <form
                action=""
                method="POST"
                autocomplete="off"
                novalidate
                bind:this={form}
                on:submit|preventDefault={handleSubmit}
            >
                <div class="mb-3">
                    <label for="username" class="form-label">Nama Pengguna</label>
                    <input
                        type="username"
                        name="username"
                        id="input-username"
                        class={clsx("form-control", alert.message && (alert.success ? "is-valid" : "is-invalid"))}
                        placeholder=""
                        required
                        autocomplete="off"
                    />
                </div>
                <div class="mb-2">
                    <label for="password" class="form-label">
                        Kata Sandi
                        <span class="form-label-description">
                            <a href={"#"} tabindex="-1">Lupa kata sandi</a>
                        </span>
                    </label>
                    <input
                        type="password"
                        name="password"
                        id="input-password"
                        class={clsx("form-control", alert.message && (alert.success ? "is-valid" : "is-invalid"))}
                        placeholder=""
                        required
                        autocomplete="off"
                    />
                </div>
                <div class="mb-2">
                    <label class="form-check">
                        <input type="checkbox" class="form-check-input" tabindex="-1" />
                        <span class="form-check-label">Ingat saya di perangkat ini</span>
                    </label>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100" disabled={isLoadingOnSubmit}>
                        {#if isLoadingOnSubmit}
                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                            <span class="visually-hidden" role="status">Loading...</span>
                        {:else}
                            <span>Masuk</span>
                        {/if}
                    </button>
                </div>
            </form>
            <div class="text-center text-secondary mt-3">
                Belum punya akun? <a href="/register" tabindex="-1">Daftar</a>
            </div>
        </div>
    </div>
</div>
