@extends('layouts.loginTemplate')

@section('content')

    <form class="form w-100" novalidate="novalidate" id="frm-login" method="post" action="{{ url('authenticate') }}">

        <input type="hidden" name="_method" value="POST">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">

        <!--begin::Heading-->
        <div class="text-center mb-11">
            <!--begin::Title-->
            <h1 class="text-dark fw-bolder mb-3">
                <img src="{{ url('assets/media/logos/footer-logo.png') }}" alt="" />
            </h1>
            <!--end::Title-->
        </div>
        <!--begin::Heading-->


        <!--begin::Input group=-->
        <div class="fv-row mb-8">
            <!--begin::Email-->
            <input type="email" placeholder="Email" name="email" autocomplete="off"
                class="form-control bg-transparent" />
            <!--end::Email-->
        </div>

        <!--end::Input group=-->
        <div class="fv-row mb-3">
            <!--begin::Password-->
            <input id="input-password" type="password" placeholder="Password" name="password" autocomplete="off"
                class="form-control bg-transparent" />
            <!--end::Password-->
        </div>

        <!--end::Input group=-->
        <!--begin::Wrapper-->
        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
            <div></div>
            <!--begin::Link-->
            {{-- <a href="{{ url('forgot-password') }}" class="link-primary">Forgot
                Password ?</a> --}}
            <!--end::Link-->
        </div>
        <!--end::Wrapper-->

        <!--begin::Submit button-->
        <div class="d-grid mb-10">
            <button type="button" id="btn-login" class="btn btn-primary">
                <!--begin::Indicator label-->
                <span class="indicator-label">Sign In</span>
                <!--end::Indicator label-->
                <!--begin::Indicator progress-->
                <span class="indicator-progress">Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                <!--end::Indicator progress-->
            </button>
        </div>
        <!--end::Submit button-->

    </form>

@stop

@section('script')

    <script type="text/javascript">
        $(function() {

            $(document).on("click", "#btn-login", function(e) {

                // handle bomb click
                e.preventDefault();

                alertLoading("Loading")

                formSubmit()
            })

            var inputPassword = document.getElementById("input-password");

            // Execute a function when the user presses a key on the keyboard
            inputPassword.addEventListener("keypress", function(event) {
                // If the user presses the "Enter" key on the keyboard
                if (event.key === "Enter") {
                    // Cancel the default action, if needed
                    event.preventDefault();
                    alertLoading("Loading")
                    // Trigger the button element with a click
                    document.getElementById("btn-login").click();
                }
            });


        });

        function formSubmit() {
            // form data
            const form = $('#frm-login')[0];
            const formData = new FormData(form);

            // set up ajax
            initAjaxSetupToken();

            const ajaxProp = {
                url: "{{ url('authenticate') }}",
                dataType: 'json',
                method: 'post',
                data: formData,
                processData: false,
                contentType: false,
            };

            $.ajax(ajaxProp).done(function(res) {
                if (isAjaxStatusSuccess(res.status)) {
                    window.location.href = '{{ url('dashboard') }}';
                    hideLoading();
                } else {
                    alertFail('Notice', res.message ?? "Login unsuccessfully");
                    hideLoading();
                }
            }).fail(function(xhr, status, error) {
                logAjaxError(xhr, status, error);
                alertFail('Notice', error.message ?? "Login unsuccessfully");
                hideLoading();
            });
        }
    </script>

@endsection