@extends('admin.layouts.auth')
@section('page-title', 'تسجيل الدخول')

@section('content')

    <main class="main-content  mt-0">
        <div class="page-header align-items-end min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
            <span class="mask bg-gradient-dark opacity-6"></span>
            <div class="container my-auto">
                <div class="row">
                    <div class="col-lg-4 col-md-8 col-12 mx-auto">
                        <div class="card z-index-0 fadeIn3 fadeInBottom bg-dark">
                            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                                <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 ps-1">
                                    <h4 class="text-white font-weight-bolder text-center mt-2 mb-0">تسجيل الدخول</h4>
                                    <div class="row mt-3"></div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="text-center">
                                    <img src="{{asset('general/img/logo.png')}}" class="img-fluid" style="width: 150px;" />
                                </div>

                                <form role="form" id="login_admin_form" class="text-end">
                                    <div class="input-group input-group-outline my-1">
                                        <label class="form-label">اسم المستخدم</label>
                                        <input id="email" name="email" type="text" class="form-control text-white">
                                    </div>
                                    <div class="input-group input-group-outline mb-3">
                                        <label class="form-label">كلمة المرور</label>
                                        <input id="password" name="password" type="password" class="form-control text-white">
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2 text-lg">
                                            <span id="button_submit_text">دخول</span>

                                            <div class="spinner" style="display: none;">
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                            </div>
                                        </button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>



{{--                <!--     toast start     -->--}}
{{--                <div class="position-fixed top-0 start-0 p-lg-3" style="z-index: 11">--}}
{{--                    <div class="toast fade hide p-2 mt-2 bg-white " role="alert" aria-live="assertive" id="dangerToast" aria-atomic="true">--}}
{{--                        <div class="toast-header border-0">--}}
{{--                            <i class="material-icons text-danger ms-2"> campaign</i>--}}
{{--                            <span class="ms-auto text-gradient text-danger font-weight-bold text-lg">خطأ   </span>--}}
{{--                            --}}{{-- <small class="text-body">11 mins ago</small> --}}
{{--                            <i class="fas fa-times text-md me-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>--}}
{{--                        </div>--}}
{{--                        <hr class="horizontal dark m-0">--}}
{{--                        <div class="toast-body text-lg">--}}
{{--                            البيانات المدخلة غير صحيحة--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <!--     toast end     -->--}}

            </div>


        </div>




    </main>

@endsection

@section('scripts')
    <script>
        $('#login_admin_form').on('submit', function(e) {
            e.preventDefault();

            // var myToastEl = document.getElementById('dangerToast');
            // var myToast = bootstrap.Toast.getInstance(myToastEl);

            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 1000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            $("#button_submit_text").hide();
            $(".spinner").show();

            var uploadData = new FormData(this);

            $.ajax({
                type: "POST",
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                url: '{{route("dashboard.authenticate")}}',
                data: uploadData,
                contentType: false,
                processData: false,
                statusCode: {
                    422: function() {
                        // Only if your server returns a 422 status code can it come in this block. :-)
                        // myToast.show();
                    },
                    403: function() {
                        // Only if your server returns a 422 status code can it come in this block. :-)
                    }
                },
                success:function(data){
                    console.log("success");
                    console.log(data);
                    $("#button_submit_text").show();
                    $(".spinner").hide();
                    Toast.fire({
                        icon: "success",
                        title: "تم تسجيل الدخول بنجاح"
                    });
                    window.location = '{{route("dashboard.index")}}';
                },
                error:function(error){
                    console.log("error");
                    console.log(error);
                    $("#button_submit_text").show();
                    $(".spinner").hide();
                    // myToast.show();
                    Toast.fire({
                        icon: "error",
                        title: "البيانات المدخلة غير صحيحة"
                    });
                }
            });
        });
    </script>
@endsection