@extends('layouts.backend')
@section('content')
    <div class="row">
        <div class="col-md-6 mx-auto grid-margin stretch-card">
            <div class="card">
                <div class="card-body bg-black">
                    <h4 class="card-title text-center">MYNDCARE</h4>
                    <p class="card-description"> Login </p>
                    <form class="forms-sample admin-login" action={{route('site.login')}} type="post">
                        @csrf
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" required>
                        </div>
                        <button type="submit" class="btn btn-primary me-2">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
<script>
    $(document).on('submit','.admin-login',function(e){
        e.preventDefault();
        $("#overlay").fadeIn(600);
        let self = $(this);
        let formData = self.serialize();
        console.log(formData);
        $.ajax({
            url: self.attr('action'),
            data: formData,
            type: 'post',
            dataType: "json",
            beforeSend: function (msg) {
                // setting before ajax
                self.find('button[type="submit"]').text("Wait..");
                self.find('button[type="submit"]').prop("disabled", true);
            },
            success: function (response) {
                if (response.status == "success") {
                    swal('Success!', response.message, response.status);
                    setTimeout(() => {
                        location.href=response.redirect_route
                    }, 800);
                }
                else if (response.status == "validation_error") {
                    $(document).find('.error').remove();
                    $.each(response.error, function (key, val) {
                        var error_html = '<span class="error">' + val[0] + '</span>';
                        $(document).find('.admin-login input[name="' + key + '"]').after(error_html);
                        $(document).find('.admin-login input[name="' + key + '"]').addClass('invalid-value-input');
                    });
                    $('html, body').animate({
                        scrollTop: $(document).find('span.error:first').offset().top - 120
                    }, 500);
                    setTimeout(() => {
                        $("#overlay").fadeOut(800);
                    }, 1000);
                }
                else {
                    swal('Error!', response.message, response.status);
                    setTimeout(() => {
                        $("#overlay").fadeOut(800);
                    }, 1000);
                }
                self.find('button[type="submit"]').text("Submit");
                self.find('button[type="submit"]').prop("disabled", false);
            }
        })
    })
    //on focus creating login input
    $(document).on("focus", ".admin-login input", function () {
        $(this).next().remove('span.error');
    });
    //on changing creating login input
    $(document).on("change", ".admin-login input", function () {
        $(this).next().remove('span.error');
    });
</script>
@endpush