<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login | {{$business_name->name }}</title>

    <!-- Bootstrap --><link href="{{ asset('assets/') }}/bootstrap-rtl-master/dist/css/bootstrap-rtl.min.css" rel="stylesheet">

    <link href="{{ asset('assets/css/waves.min.css') }}" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/nanoscroller.css') }}">
    <!--        <link rel="stylesheet" href="css/nanoscroller.css">-->
    <link href="{{ asset('assets/css/login-style.css') }}" type="text/css" rel="stylesheet">
    <link href="{{ asset('assets/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .form-control {
            border: 1px solid #3a3870;
        }

    </style>
</head>

<body class="account" style="background-color: #eee;">
<div class="container">
    <div class="row">
        <div class="account-col text-center border-white p-3 bg-white">
            <img src="{{ asset('assets/images/logo.png') }}" alt="logo" width="120">
            <h3 style="font-size: 30px;" class="text-gold">Login</h3>
            <h3 class="text-gold">Enter Email & password</h3>
            <div class="text-center" id="error_message"></div>

            <form class="m-t" id="login_form" role="form">
            @csrf
                <div class="form-group">
                    <input type="text" name="email" class="form-control" placeholder="Email" autofocus>
                    <span class="text-danger error" id="email_error"></span>
                </div>
                <div class="form-group">
                    <input type="password" name="password" class="form-control" placeholder="password">
                    <span class="text-danger error" id="password_error"></span>
                </div>

                <button type="submit" id="submit_btn" class="btn btn-info  btn-block " >Login</button>

                <h2>{{$business_name->name }}</h2>
                <p>&copy; {{ date('Y') }} All Right Reserved</p>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/pace.min.js') }}"></script>
<script>
    function clear_fields() {
        $("#login_form")[0].reset();
        $('.error').text('');
    }

    $("#login_form").on('submit', function (e) {
        e.preventDefault();
        var data = $(this).serializeArray();
        $.ajax({
            url: "{{ route('login_submit') }}",
            type: "POST",
            data: data,
            beforeSend: function () {
                $("#error_message").html('');
                $(".error").text('');
                $("#submit_btn").text('Processing....');
                $("#submit_btn").prop('disabled', true);
            },
            success: function (data) {
                $("#submit_btn").text('Login');
                $("#submit_btn").prop('disabled', false);
                clear_fields()
                if (data.success) {
                    window.location.href = "{{ route('dashboard') }}";
                } else {
                    $("#error_message").html('<div class="alert alert-danger">' + data.message +
                        '</div>');
                }
            },
            error: function (error) {
                $("#error_message").html('');
                $("#submit_btn").text('Login');
                $("#submit_btn").prop('disabled', false);
                if ('errors' in error.responseJSON) {
                    $(".error").text('');
                    $.each(error.responseJSON.errors, (index, value) => {
                        $("#" + index + "_error").text(value[0]);
                    });
                }
            }

        });
    });
</script>
</body>

</html>
