@extends('auth.layouts.master')

@section("title")
Login
@endsection

@section("content")
<div class="section-authentication-signin d-flex align-items-center justify-content-center my-5 my-lg-0">
    <div class="container-fluid">
        <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3">
            <div class="col mx-auto">
                <div class="mb-4 text-center">
                    <img src="{{asset('assets/images/licon.png')}}" width="160" alt="" style="height: 100px;width: 100px" />
                    <!-- <h4 class="text-success fw-bold font-monospace">Allens Empresa</h4> -->
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class=" p-2 rounded">
                            <div class="text-center">
                                <h3 class="">Sign in</h3>
                                </p>
                            </div>
                            <div class="d-grid">
                                <div class="form-body">
                                    <form class="row g-3" id="login_form">
                                        @csrf
                                        <div class="col-12">
                                            <label for="inputEmailAddress" class="form-label">Email Address</label>
                                            <input type="email" name="email" required class="form-control" id="inputEmailAddress"
                                                placeholder="Email Address">
                                        </div>
                                        <div class="col-12">
                                            <label for="inputChoosePassword" class="form-label">Enter
                                                Password</label>
                                            <div class="input-group" id="show_hide_password">
                                                <input type="password" required  name="password" class="form-control border-end-0"
                                                    id="inputChoosePassword" value="12345678"
                                                    placeholder="Enter Password"> <a href="javascript:;"
                                                    class="input-group-text bg-transparent"><i
                                                        class='bx bx-hide'></i></a>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 text-end "> <a class="text-allens"
                                                href="/forgot-password">Forgot Password
                                                ?</a>
                                        </div>
                                        <div class="col-12">
                                            <div class="d-grid">
                                                <button type="submit" id="btnSubmit" class="btn button-allens">
                                                    <i class="bx bxs-lock-open bx-open"></i>
                                                    <i class="bx bx-loader-circle bx-spin fa-pulse" style="display: none"></i>
                                                    Sign in
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>

</div>
@include('layouts.script')
<script type="text/javascript">
    $("#login_form").on('submit', (function (e) {
        e.preventDefault();
        $.ajax({
            url: "/api/login",
            type: "post",
            data: new FormData(this),
            dataType: "JSON",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function () {
                $("#btnSubmit").attr('disabled', true);
                $(".fa-pulse").css('display', 'inline-block');
                $(".bx-open").css('display', 'none');
            },
            complete: function () {
                $("#btnSubmit").attr('disabled', false);
                $(".fa-pulse").css('display', 'none');
                $(".bx-open").css('display', 'inline-block');
            },
            success: function (response) {
                console.log(response)
                if (response["status"] == "fail") {
                    toastr.error('Failed',response["msg"])
                } else if (response["status"] == "success") {
                    toastr.success('Success',response["msg"])
                    $("#login_form")[0].reset();
                    window.location.href = "{{'dashboard'}}";
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }));

    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }
</script>
@endsection
@section('script')

@endsection