@extends('layout.master2')

@section('content')
    <div class="container">

        <meta name="csrf-token" content="{!! csrf_token() !!}">

        <div class="text-center">
            <img src="{{ asset('assets/images/blue_logo.png') }}" height="70px" class="mt-3">
        </div>

        @if (session('block'))
            <div class="alert alert-danger">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                {{ session('block') }}
            </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="login-box1 mt-3">
                    <ul class="nav nav-tabs login-tab" id="myTab" role="tablist">
                        <li class="nav-item login-item" role="presentation">
                            <a data-id="2" class="nav-link active login-link" id="email-tab" data-toggle="tab"
                                href="#email" role="tab" aria-controls="email" aria-selected="true">Email</a>
                        </li>
                        <li class="nav-item login-item" role="presentation">
                            <a data-id="2" class="nav-link login-link" id="social-tab" data-toggle="tab" href="#social"
                                role="tab" aria-controls="social" aria-selected="false">Social Media</a>
                        </li>
                        <li data-id="3" class="nav-item login-item" role="presentation">
                            <a class="nav-link login-link" id="phone-tab" data-toggle="tab" href="#phone" role="tab"
                                aria-controls="phone" aria-selected="false">Phone No.</a>
                        </li>
                    </ul>
                    <div class="tab-content logintab-content" id="myTabContent">

                        <div class="tab-pane fade show active" id="email" role="tabpanel" aria-labelledby="email-tab">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <form id="loginPage" method="post" autocomplete="off">
                                        @csrf
                                        <div class="form-group login-box-label">
                                            <label class="control-label" for="email">Email Id</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        <img src="{{ asset('assets/images/Group.png') }}" height="16px"
                                                            alt="">
                                                    </div>
                                                </div>
                                                <input type="text" class="form-control" name="email"
                                                    placeholder="Email" value="{{ old('email') }}" id="emailId">
                                            </div>
                                            <div class="help-block" style="display: none; color: red;" id="emailErrorDiv">
                                                <span id="loginEmail"> Email is required </span>
                                            </div>
                                        </div>

                                        <div class="form-group login-box-label mt-4">
                                            <label class="control-label" for="password">Password</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">

                                                    <div class="input-group-text">
                                                        <!-- <img src="{{ asset('assets/images/login-passward.svg') }}" height="22px" alt=""> -->
                                                        <i class="fa fa-eye f-20 d-none" aria-hidden="true" id="open_eye_id"
                                                            onclick="passwordShowHide(this)"></i>
                                                        <i class="fa fa-eye-slash f-20" aria-hidden="true" id="close_eye_id"
                                                            onclick="passwordShowHide(this)"></i>
                                                    </div>

                                                </div>
                                                <input type="password" class="form-control" name="password"
                                                    placeholder="Password" id="emailPassword">

                                            </div>

                                             <div style="font-size: 12px; color: black; font-weight: bold;">
                                                <span> The password should be eight characters long(alpha numeric) & have a special character & capital letter </span>
                                            </div>

                                           <div class="help-block" style="display: none; color: red;"
                                                id="passwordErrorDiv">
                                                <span id="loginPassword"> Password is required </span>
                                            </div>
                                        </div>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="login-text">
                                        <p class="pt-0">Login with your social media account</p>
                                    </div>
                                </div>
                                <div class="col-md-7 col-9 mb-3">
                                    <a class="facebook-btn btn btn-info btn-block" href="{{ url('/login/facebook') }}">
                                        <span class="button-icon"><i class="fa fa-facebook social"
                                                aria-hidden="true"></i></span>
                                        <span class="button-text">Login with facebook</span>
                                    </a>

                                    <a class="google-btn btn btn-info btn-block mt-4" href="{{ url('/login/google') }}">
                                        <span class="button-icon"><i class="fa fa-google" aria-hidden="true"></i></span>
                                        <span class="button-text">Login with Google</span>
                                    </a>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="phone" role="tabpanel" aria-labelledby="phone-tab">

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="form-group login-box-label">
                                        <label class="control-label" for="mobile">Mobile No</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    <img src="images/mobile.svg" height="21px" alt="">
                                                </div>
                                            </div>
                                            <input type="text" name="mobile_number" class="form-control"
                                                aria-label="Text input with checkbox" value=""
                                                placeholder="Please enter mobile number" id="mobile_number">
                                        </div>
                                        <div id="mobile_number_error" style="display: none; color: red;">
                                            <span id="errors_of_mobile_number"> Mobile Number is required & must be a
                                                number</span>
                                        </div>
                                        <label class="control-label generate-otp mt-1" for="otp"><a href="#"
                                                id="generateOtp">Generate OTP</a></label>
                                    </div>

                                    <div class="form-group login-box-label mt-4">
                                        <label class="control-label" for="otp">Enter OTP</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    <img src="images/eye.svg" height="21px" alt="">
                                                </div>
                                            </div>
                                            <input type="text" name="mobile_otp" class="form-control"
                                                aria-label="Text input with radio button" placeholder="Please enter otp"
                                                id="mobileOtp">
                                        </div>
                                        <div id="otp_is_required" style="display: none; color: red;">
                                            <span id="errors_of_mobile_number"> Mobile Otp is required</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6  col-6">
                                <div class="login-group">
                                    <a class="float-left" href="{{ url('/privacy-policy') }}" target="_blank">Privacy
                                        Policy</a>
                                </div>
                            </div>
                            <div class="col-md-6  col-6">
                                <div class="login-group">
                                    <a class="float-right" href="{{ url('/forgot-password') }}" class="float-left">Forgot
                                        Password?</a>
                                </div>
                            </div>
                        </div>

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

        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="row justify-content-center">
                    <div class="col-md-4 col-9">
                        <div class="login-btn text-center">
                            <button type="submit" class="btn btn-warning" id="userLoginButton">Login</button>
                            <a href="{{ url('/sign-up') }}" class="btn btn-dark signupbtn">Sign up</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        </form>

    </div>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const Toast = swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        $(document).ready(function() {
            let activeTabs = 'emailLogin';
            //Email Login
            $("#email-tab").on('click', function(e) {
                activeTabs = 'emailLogin';
                $("#loginPage")[0].reset();
                return activeTabs;
            });

            //Social Login
            $("#social-tab").on('click', function(e) {
                activeTabs = 'socialLogin';
                $("#loginPage")[0].reset();
                return activeTabs;
            });

            //Otp Login
            $("#phone-tab").on('click', function(e) {
                activeTabs = 'otpLogin';
                $("#loginPage")[0].reset();
                return activeTabs;

            });

            //Login Function
            $("#loginPage").on('submit', function(e) {
                e.preventDefault();
                let emailId = $('#emailId').val() ? $('#emailId').val() : '';
                let password = $('#emailPassword').val() ? $('#emailPassword').val() : '';
                let mobileNumber = $('#mobile_number').val() ? $('#mobile_number').val() : '';
                let mobileOtp = $('#mobileOtp').val() ? $('#mobileOtp').val() : '';

                if (activeTabs == 'emailLogin') {
                    if ((emailId == '') && (password == '')) {
                        $("#emailErrorDiv").show();
                        $("#passwordErrorDiv").show();
                        return;
                    } else if (emailId == '') {
                        $("#emailErrorDiv").show();
                        return;
                    } else if (password == '') {
                        $("#passwordErrorDiv").show();
                        return;
                    } else {
                        $("#emailErrorDiv").hide();
                        $("#passwordErrorDiv").hide();

                    }
                } else if (activeTabs == 'otpLogin') {
                    if ((mobileNumber == '') && (mobileOtp == '')) {
                        $("#mobile_number_error").show();
                        $("#otp_is_required").show();
                        return;
                    } else if (mobileNumber == '') {
                        $("#mobile_number_error").show();
                        return;
                    } else {
                        $("#mobile_number_error").hide();
                        $("#otp_is_required").hide();
                    }
                }

                //console.log(activeTabs);
                var form = $(this);

                $.ajax({
                    method: 'POST',
                    url: "{{ url('dologin') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        console.log('data', data);

                        if (data.success == true) {
                            $('#userLoginButton').attr("disabled", true);
                            Toast.fire({
                                icon: 'success',
                                title: 'Signed in successfully'
                            }).then(() => {
                                window.location.href = '{{ url('/home') }}';
                            });



                        }

                        if (data.success == false) {

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

                            Toast.fire({
                                icon: 'warning',
                                title: 'Enter valid user name and password.'
                            }).then(() => {
                                //window.location.href='{{ url('/home') }}'
                            });
                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        $.each(errors.errors, function(index, value) {

                            if (index == 'email') {

                                $("#emailErrorDiv").show();
                                $("#loginEmail").html(value[0].toString());

                            }

                            if (index == 'password') {

                                $("#passwordErrorDiv").show();
                                $("#loginPassword").html(value[0].toString());

                            }


                        });

                    }
                });
            });

            jQuery('#generateOtp').on('click', function() {

                $("#mobile_number_error").hide();
                //$("#passwordErrorDiv").hide();

                let mobileNumber = $('#mobile_number').val();

                if (mobileNumber) {

                    jQuery.ajax({
                        url: "{{ route('generate-otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            mobile_number: mobileNumber
                        },
                        success: function(data) {

                            if (data.success == false) {
                                $("#mobile_number_error").show();
                                $("#errors_of_mobile_number").html(data.message.toString());
                            } else if (data.success == true) {

                                Toast.fire({
                                    icon: 'success',
                                    title: 'OTP generated successfully'
                                }).then(() => {
                                    //window.location.href = '{{ url('/home') }}';
                                });
                                $("#mobile_number_error").hide();

                            } else {
                                $("#mobile_number_error").hide();
                            }
                        }
                    });

                } else {
                    $("#mobile_number_error").show();
                    $("#errors_of_mobile_number").html('Mobile number is required');
                }

                //}
            });

        });

        // $(document).on('input', '#emailId, #mobile_number', function() {
        //     $.ajax({
        //         url: "{{ url('api/check-user-terms') }}",
        //         type: 'GET',
        //         cache: true,
        //         data: {
        //             'text': $(this).val() ? $(this).val() : '',
        //         },
        //         success: function(response) {
        //             if (response.data) {
        //                 $('#terms_and_conditions').prop("checked", true);
        //             } else {
        //                 $('#terms_and_conditions').prop("checked", false);

        //             }
        //         },
        //     });
        // });

        function passwordShowHide(e) {

            if (e.getAttribute('id') == 'close_eye_id') {
                $('#close_eye_id').addClass('d-none');
                $('#open_eye_id').removeClass('d-none');
                $('#emailPassword').prop("type", "text");
            } else {
                $('#close_eye_id').removeClass('d-none');
                $('#open_eye_id').addClass('d-none');
                $('#emailPassword').prop("type", "password");
            }

        }
    </script>
@endsection