@extends('site.layouts.app')
@section('title', 'Customer Login')
<style>
    .form {
        width: 250px
    }

    .main-password {
        position: relative;
    }

    .icon-view {
        position: absolute;
        right: 12px;
        top: 15px;
    }


    /*Footer start*/
    .codepen_profile {
        position: fixed;
        right: 20px;
        bottom: 20px;
    }

    .codepen_profile a {
        background: rgb(245 122 32 / 53%);
        padding: 15px;
        border-radius: 50%;
        box-shadow: hsl(0deg 0% 80%) 0 5px 16px;
        height: 60px;
        width: 60px;
        display: inline-block;
    }

    /*Footer End*/
</style>
@section('content')
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>Login</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active">Login</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="login_register_wrap section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-6 col-md-10">
                        <div class="login_wrap">
                            <div class="padding_eight_all bg-white">
                                <div class="heading_s1">
                                    <h3>Login</h3>
                                </div>

                                <form method="post" action="{{ route('customer_login') }}">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <label for=""> Email</label>
                                        <input type="text" required="" class="form-control" name="email"
                                            placeholder="Your Email">
                                    </div>


                                    <div class="form-group">
                                        <label for=""> Password</label>
                                        <div class="main-password">
                                            <input type="password" class="form-control input-password" name="password" aria-label="password">
                                            <a href="JavaScript:void(0);" class="icon-view">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="login_footer form-group mb-3">
                                        <div class="chek-form">
                                            <div class="custome-checkbox">
                                                <input class="form-check-input" type="checkbox" name="remember"
                                                    id="exampleCheckbox1" value="1">
                                                <label class="form-check-label" for="exampleCheckbox1"><span>Remember
                                                        me</span></label>
                                            </div>
                                        </div>
                                        <a href="#">Forgot password?</a>
                                    </div>
                                    <div class="form-group mb-3">
                                        <button type="submit" class="btn btn-fill-out btn-block btn_save"
                                            name="login">Log in</button>
                                    </div>
                                </form>
                                {{-- <div class="different_login">
                                    <span> or</span>
                                </div> --}}
                                {{-- <ul class="btn-login list_none text-center">
                                    <li><a href="#" class="btn btn-facebook"><i
                                                class="ion-social-facebook"></i>Facebook</a></li>
                                    <li><a href="#" class="btn btn-google"><i
                                                class="ion-social-googleplus"></i>Google</a></li>
                                </ul> --}}
                                <div class="form-note text-center">Don't Have an Account? <a
                                        href="{{ route('customer.register') }}">Sign up now</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $("form").submit(function(e) {
            e.preventDefault();
            var data = new FormData(this);
            var url = $(this).attr("action");
            $.ajax({
                type: "post",
                url: url,
                data: data,
                processData: false,
                contentType: false,
                dataType: 'json',
                beforeSend: function() {
                    $(".btn_save").html(
                        `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
                    ).attr('disabled', true);
                },
                complete: function() {
                    $(".btn_save").html("Login").attr('disabled', false);
                }
            }).done(function(response) {
                console.log(response.redirect);
                if (response.status == true) {
                    toastr.options = {
                        "closeButton": true,
                        "progressBar": true
                    }
                    toastr.success(response.message);
                    setTimeout(() => {
                        window.location.href = response.redirect
                    }, 3000);
                }

                if (response.status == false) {
                    $.each(response.errors, function(key, val) {
                        toastr.options = {
                            "closeButton": true,
                            "progressBar": true
                        }
                        toastr.error(val);

                    });
                }
            }).fail(function(response) {

                console.log(response.responseJSON.message)
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.error(response.responseJSON.message);
            });
        });

        $(document).ready(function() {
            $('.main-password').find('.input-password').each(function(index, input) {
                var $input = $(input);
                $input.parent().find('.icon-view').click(function() {
                    var change = "";
                    if ($(this).find('i').hasClass('fa-eye')) {
                        $(this).find('i').removeClass('fa-eye')
                        $(this).find('i').addClass('fa-eye-slash')
                        change = "text";
                    } else {
                        $(this).find('i').removeClass('fa-eye-slash')
                        $(this).find('i').addClass('fa-eye')
                        change = "password";
                    }
                    var rep = $("<input type='" + change + "' />")
                        .attr('id', $input.attr('id'))
                        .attr('name', $input.attr('name'))
                        .attr('class', $input.attr('class'))
                        .val($input.val())
                        .insertBefore($input);
                    $input.remove();
                    $input = rep;
                }).insertAfter($input);
            });
        });
    </script>


@endsection