@extends('auth.layout')
@section('title')
Login
@endsection

@section('login_content')
    <div class="form-wrap form-wrap-reg">
        <div class="row justify-content-between">
            <div class="col-xxl-4 col-xl-4 col-lg-4 order-2-mob">
                <img src="{{ asset('assets/new-figma-data/images/login.png') }}" alt="login">
            </div>
            <div class="col-xxl-6 col-xl-7 col-lg-7 my-auto">
                <form id="signin_form">
                    <h2>Welcome Back</h2>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="emailadd" class="form-label">Email</label>
                                <input type="email" class="form-control" name="email" id="emailadd" aria-describedby="emailHelp" placeholder="john@john.com">
                            </div>
                        </div>
                        <div class="col-lg-6">

                            <label for="password" class="form-label">Password</label>
                            <div class="input-group mb-3" id="show_hide_password">
                                <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                <input type="password" class="form-control" id="password" name="password" style="margin-bottom:0px;text-transform:none;" placeholder="Password" value="">
                                <span class="input-group-text">
                                    <a href="">
                                        <i class="fa fa-eye-slash" id="togglePassword" style="cursor: pointer"></i>
                                    </a>
                                 </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 text-end">
                        <p><a class="text-muted input_width" href="{{route('forgotpassword')}}" style="text-decoration: none;"><b>Forgot?</b></a></p>
                    </div>
                    <div class="row last-form-row">
                        <div class="col-xxl-6 col-xl-7 col-lg-7 col-7 my-auto">
                            <div class="mb-3 already-acc">
                                <p class="mb-0">Don't have an account?
                                    <a href="{{ route('register')}}" style="text-decoration:none;"><b>SIGNUP</b></a>
                                </p>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-5 col-lg-5 col-5 text-end">
                            <button type="submit" id="login_button" class="btn btn-prim"><i class="fa fa-spinner fa-spin fa-pulse"
                                style="display:none;"></i> Sign In</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('login_script')
    <script>
        $(document).ready(function(){
            $("#show_hide_password a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_password input').attr("type") == "text")
                {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#togglePassword').addClass( "fa-eye-slash" );
                    $('#togglePassword').removeClass( "fa-eye" );
                }
                else if($('#show_hide_password input').attr("type") == "password")
                {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#togglePassword').removeClass( "fa-eye-slash" );
                    $('#togglePassword').addClass( "fa-eye" );
                }
            });


            $("#signin_form").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: "/api/login",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#login_button").attr('disabled', true);

                        $(".fa-pulse").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#login_button").attr('disabled', false);

                        $(".fa-pulse").css('display', 'none');

                    },

                    success: function(response) {
                        if (response["status"] == "fail")
                        {
                            toastr.error('Failed', response["msg"])
                        }
                        else if (response["status"] == "success")
                        {
                            toastr.success('Success', response["msg"])
                            window.location.href = response.dashboard;
                        }
                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));
        });
    </script>
@endsection