@extends('layout.wrapper_login')

@section('contents')
    <form id="login_form">
        <div class="container">
            <div class="row" style="position: relative; z-index: 5;">
                <div class="col-lg-12" style="position: relative; z-index: 5;">
                    <div class="section-heading">
                        <h1 class="text-center">Login User</h1>
                    </div>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Email :</label>
                        <input type="text" name="email" id="email" autocomplete="off"
                               placeholder="Masukan Email" autocomplete="on" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Password :</label>
                        <!-- <input type="password" placeholder="Password" name="password" pattern="[^ @]*@[^ @]*" placeholder="Masukan Password" required=""> -->
                        <input type="password" placeholder="Password" name="password"
                               placeholder="Masukan Password" required="">
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <button type="submit" id="btn_login" class="main-gradient-button">
                            <!--begin::Indicator label-->
                            <span id="indicator-label">Login</span>
                            <!--end::Indicator label-->
                            <!--begin::Indicator progress-->
                            <span id="indicator-progress" class="d-none">Please wait...
                                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                            </span>
                            <!--end::Indicator progress-->
                        </button>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
    <a href="{{ route('forgot-password') }}">Lupa Password</a>
@endsection
@section('scripts')
    <script>
        $('#login_form').on('submit', (event) => {
            event.preventDefault()
            btnLoader($('#btn_login'))
            axios.post('{{ url('/auth') }}', $(event.currentTarget).serialize()).then(response => {
                if (response.data.success === true) {
                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false
                    })
                    location.reload()
                } else {
                    btnLoader($('#btn_login'))
                    Swal.fire({
                        icon: 'warning',
                        title: response.data.message
                    })
                }
            }).catch(error => {
                btnLoader($('#btn_login'))
                Swal.fire({
                    icon: 'error',
                    title: 'System Error'
                })
            })
        })
    </script>
@endsection