@extends('guest')
@section('content')
    <div class="container-fluid bg-white loginnewbg1">
        <div class="row h-100 login-newerp-bg">



        <div class="col-md-6 d-none d-md-block">
            <div class="loginerpnew-designhead">
                <h2>Endless<br />Possibilities!</h2>
                <div class="module-names">
                    <p>Financials | HRMS | Supply Chain | Process | Sales & Distribution | CRM | Add-ons</p>
                </div>
            </div>
             
        </div>

            <div class="col-md-6 newdesignerpscreenmob">
                <div class="row justify-content-center">

                    <div class="col-md-8 newdesignerpscreen">
                        <div class="text-center">
                            <img class="login-logo" src="{{ url('images/AIMS-Logo-3.png') }}" alt="" />

                        </div>
                        @if (session()->has('flash.message'))
                            <div class="alert alert-{!! session()->get('flash.type') !!} alert-dismissible fade show" role="alert">
                                {!! session()->get('flash.message') !!}
                            </div>
                        @endif
                        <ul class="nav nav-pills nav-fill emailloginmob newlogintabcolor ">
                            <li class="nav-item">
                                <a class="nav-link @if(old('type') != 'mobile') active @endif" id="form-email-tabl" data-bs-toggle="pill" onclick="resetInputs();"
                                    href="#form-email" aria-expanded="true"> <i data-feather="user"
                                        class="font-medium-3 me-50"></i>Email</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if(old('type') == 'mobile') active @endif" id="form-mobile-tab" data-bs-toggle="pill" onclick="resetInputs();"
                                    href="#form-mobile" aria-expanded="false"> <i data-feather="lock"
                                        class="font-medium-3 me-50"></i>Mobile</a>
                            </li>
                        </ul>

                        <div class="tab-content login-input-form">

                            <!-- Login with Email & Password -->
                            <div role="tabpanel" class="tab-pane @if(old('type') != 'mobile') active @endif" id="form-email" aria-labelledby="home-tab-fill"
                                aria-expanded="true">
                                <form class="auth-login-form mt-2"  method="POST"
                                    onsubmit="checkTermCondition()">
                                    @csrf
                                    <input type="hidden" name="type" value="email">
                                    <input type="hidden" name="return_url" value="{{$returnUrl}}">
                                    <div class="form-group">
                                        <label class="form-label" for="email">Email</label>
                                        <input class="form-control" id="email" type="email" name="email"
                                            placeholder="john@example.com" value="{{ old('email') }}"
                                            aria-describedby="email" autofocus="" tabindex="1" />

                                        @error('email')
                                            <label class="error" id="login-email-error" for="email">{{ $message }}</label>
                                        @enderror


                                        <div class="custom-error-email"></div>
                                         
                                    </div>

                                    <div class="form-group">
                                        <div class="d-flex justify-content-between">
                                            <label for="password" class="form-label">Password</label>
                                            <a href="javascript:void(0)" onclick="validateAccount()"><small> Forgot
                                                    Password?</small></a>
                                        </div>
                                        <div class="input-group input-group-merge form-password-toggle passwordinputnew">
                                            <input class="form-control form-control-merge" id="password" type="password"
                                                name="password" placeholder="············" aria-describedby="password"
                                                tabindex="2" autofocus />
                                            <div class="input-group-append"><span class="input-group-text cursor-pointer"><i
                                                        data-feather="eye"></i></span></div>
                                        </div>
                                        @if(old('type') != 'mobile')
                                            @error('password')
                                                <label class="error" for="password">{{ $message }} </label>
                                            @enderror
                                        @endif

                                        <div class="form-check form-check-primary mt-1">
                                            <input type="checkbox" class="form-check-input terms-checkbox" id="CarryEmail"
                                                style="width: 16px; height: 16px; margin-top: 3px; background-size: 60%;">
                                            <label class="form-check-label fw-bolder" for="CarryEmail"
                                                style="font-size: 10px;">I hereby agree to the <a
                                                    href="/terms-of-use"
                                                    target="_blank">Terms & Conditions</a> and <a
                                                    href="/privacy-policy"
                                                    target="_blank">Privacy Policy</a></label>
                                        </div>
                                        <label class="text-danger terms-checkbox-validation"
                                            style="font-size: 10px; display:none">Please tick this box if you want to
                                            proceed</label>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-6">
                                            <a class="btn btn-otp-primary w-100" tabindex="4"
                                                onclick="validateEmailorPhone('email')">
                                                <i data-feather='phone' class="mr-1"></i> OTP
                                            </a>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-6">
                                            <button type="submit" class="btn btn-primary w-100" tabindex="4">
                                                Login <i data-feather='chevron-right' class=""></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane @if(old('type') == 'mobile') active @endif" id="form-mobile" role="tabpanel" aria-labelledby="profile-tab-fill"
                                aria-expanded="false">
                                <form class="auth-login-form mt-2" method="POST"
                                    onsubmit="checkTermCondition()">
                                    {{ csrf_field() }}

                                    <input type="hidden" name="type" value="mobile">
                                    <input type="hidden" name="return_url" value="{{$returnUrl}}">

                                    <div class="form-group" id="phone-number">
                                        <label class="form-label" for="phone-number">Phone
                                            Number</label>

                                        <div class="d-flex">
                                            <div class="btn-group dropup dropdown-icon-wrapper">
                                                <select
                                                    class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split pr-1"
                                                    name="dial_code" id="dial_code" style="width:105px">
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country->dial_code }}"
                                                            @if (isset($employee->dial_code)) @if ($employee->dial_code == $country->dial_code || old('dial_code') == $country->dial_code) selected @endif
                                                        @elseif($country->dial_code == '+91') selected @endif>
                                                            {{ $country->code }}({{ $country->dial_code }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="input-group input-group-merge ">
                                                <input type="text" class="form-control numberonly" id="mobile"
                                                    name="mobile" placeholder="1234567890" value="{{ old('mobile') }}"
                                                    onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                                    onkeypress="if(this.value.length==10) return false;" />
                                            </div>

                                        </div>
                                        @error('mobile')
                                            <label class="error" id="login-mobile-error" for="mobile">{{ $message }}</label>
                                        @enderror

                                        <div class="custom-error-mobile"></div>
                                    </div>

                                    <div class="form-group">
                                        <div class="d-flex justify-content-between">
                                            <label for="password" class="form-label">Password</label>
                                            <a href="javascript:void(0)" onclick="validateAccount()"><small> Forgot
                                                    Password?</small></a>
                                        </div>
                                        <div class="input-group input-group-merge form-password-toggle passwordinputnew">
                                            <input class="form-control form-control-merge" id="mobile_password"
                                                type="password" name="password" placeholder="············"
                                                aria-describedby="password" tabindex="2" autofocus />
                                            <div class="input-group-append"><span
                                                    class="input-group-text cursor-pointer"><i
                                                        data-feather="eye"></i></span></div>
                                        </div>

                                        @if(old('type') == 'mobile')                                           
                                            @error('password')
                                                <label class="error" for="password">{{ $message }} </label>
                                            @enderror
                                        @endif

                                        {{-- <div class="form-check form-check-primary mt-1">
                                            <input type="checkbox" class="form-check-input terms-checkbox"
                                                id="CarryMobile"
                                                style="width: 16px; height: 16px; margin-top: 3px; background-size: 60%;">
                                            <label class="form-check-label fw-bolder" for="CarryMobile"
                                                style="font-size: 10px;">I hereby agree to the <a
                                                    href="https://thepresence360.com/en-in/terms-and-condition"
                                                    target="_blank">Terms & Conditions</a> and <a
                                                    href="https://thepresence360.com/en-in/privacy-policy"
                                                    target="_blank">Privacy Policy</a></label>
                                        </div>
                                        <label class="text-danger terms-checkbox-validation"
                                            style="font-size: 10px; display:none">Please tick this box if you want to
                                            proceed</label> --}}
                                    </div>


                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-6">
                                            <a class="btn btn-otp-primary w-100" tabindex="4"
                                                onclick="validateEmailorPhone('mobile')">
                                                <i data-feather='phone' class="mr-1"></i> OTP
                                            </a>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-6">
                                            <button type="submit" class="btn btn-primary w-100" tabindex="4">
                                                Login <i data-feather='chevron-right' class=""></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>

                        <div class="bubbledots"><span></span><span></span></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
@endsection
@push('footer-script')
    <script>
        var deviceDetails;
        var locations;
        
        $(document).ready(function() {

             // Get location using Geolocation API
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    let latitude = position.coords.latitude;
                    let longitude = position.coords.longitude;
                    locations = latitude + ',' + longitude;

                    getDeviceDetails();

                }, function(error) {
                    console.error("Error Code = " + error.code + " - " + error.message);
                    getDeviceDetails();
                });
            } else {
                console.log("Geolocation is not supported by this browser.");
                getDeviceDetails();
            }

            function getDeviceDetails() {

                var data = {
                    'browser': navigator.userAgent,
                    'platform': navigator.platform,
                    'location': locations
                };

                var jsonString = JSON.stringify(data);
                deviceDetails = btoa(jsonString);

                // $.get("https://ipinfo.io/json?token=9461f93ecd62e6", function(resp) {

                //     var data = {
                //         'hostname': resp?.hostname,
                //         'location': resp?.loc,
                //         'ip': resp.ip,
                //         'deviceInfo' : deviceInfo,
                //         'locationInfo' : locations
                //     };

                //     var jsonString = JSON.stringify(data);
                //     deviceDetails = btoa(jsonString);

                // });
            }

            $('form').on('submit', function(e) {
                getDeviceDetails();
                // Get values from meta tags (static tokens, CSRF, etc.)

                // Add custom fields to each form dynamically
                $('<input>').attr({
                    type: 'hidden',
                    name: 'device_details', // Custom field
                    value: deviceDetails
                }).appendTo(this); // 'this' refers to the current form being submitted

                // The form will now submit normally with these fields
            });

            $('.numberonly').keypress(function(e) {
                var charCode = (e.which) ? e.which : event.keyCode
                if (String.fromCharCode(charCode).match(/[^0-9]/g))
                    return false;
            });


            if (localStorage.getItem('is_terms_accepted') == '1') {
                $('.terms-checkbox').prop('checked', true);
            }


            $('.terms-checkbox').change(function() {
                if ($(this).is(':checked')) {
                    $('.terms-checkbox').prop('checked', true);
                    $('.terms-checkbox-validation').hide();
                    localStorage.setItem('is_terms_accepted', '1');
                } else {
                    $('.terms-checkbox').prop('checked', false);
                    localStorage.setItem('is_terms_accepted', '0');
                }
            });
        });

        function checkTermCondition(e) {
            if (!$('.terms-checkbox').is(':checked')) {
                $('.terms-checkbox-validation').show();
                event.preventDefault();

                return false;
            }
            return true;
        }

        function resetInputs() {
            $('#login-email-error').html('');
            $('#login-mobile-error').html('');
            $('#mobile-password-error').html('');
            $('#email-password-error').html('');
        }

        function validateEmailorPhone(type) {
            if (!checkTermCondition()) {
                return;
            }

            $('#loaderDiv').show();
            var emailType = $("#home-tab-fill").hasClass('active');
            var email = $("#email").val();
            var mobile = $('#mobile').val();
            var dialCode = $('#dial_code').val();

            $.ajax({
                url: "/login/otp-request",
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    'type': type,
                    'mobile': mobile,
                    'email': email,
                    'dial_code': dialCode,
                    'device_details': deviceDetails,
                    'isTest': 0
                },
                success: function(data) {
                    $('#loaderDiv').hide();
                    if (data.success == 0) {
                        $('#login-email-error').html('');
                        $('#login-mobile-error').html('');
                        $('.custom-error-' + type).html('<span id="login-error" class="error">' + data.message +
                            '</span>');
                        return false;
                    } else if (data.success == 1) {
                        window.location.href = "/login-otp?key=" + data.crypt;
                    }
                },
                error : function(res) {

                    var data = res.responseJSON;
                    $('#loaderDiv').hide();

                    $('#login-email-error').html('');
                    $('#login-mobile-error').html('');

                    if(data.message) {

                        $('.custom-error-' + type).html('<span id="login-error" class="error">' + data.message +
                            '</span>');
                        return false;
                    }
                }
            });
        }

        function validateAccount() {
            $('#loaderDiv').show();
            var emailType = $("#home-tab-fill").hasClass('active');
            var email = $("#email").val();
            var mobile = $('#mobile').val();
            var dialCode = $('#dial_code').val();
            var type = (emailType) ? "email" : "mobile";
            $.ajax({
                url: "/admin/login/validate-account",
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    'type': type,
                    'phone': mobile,
                    'email': email,
                    'dial_code': dialCode,
                    'isTest': 0
                },
                success: function(data) {
                    console.log(data);
                    $('#loaderDiv').hide();
                    if (data.success == 0) {
                        $('#login-email-error').html('');
                        $('#login-mobile-error').html('');
                        $('.custom-error-' + type).html('<span id="login-error" class="error">' + data.message +
                            '</span>');
                        return false;
                    } else if (data.success == 1) {
                        window.location.href = "/admin/login/forget-password?key=" + data.crypt;
                    }
                }
            });
        }
    </script>
@endpush