@extends('layout.guest.app')
@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 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/thepresence.svg') }}" alt="The Presence 360" />
                        </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 active" id="home-tab-fill" data-bs-toggle="pill" onclick="resetInputs();"
                                    href="#home-fill" 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" id="profile-tab-fill" data-bs-toggle="pill" onclick="resetInputs();"
                                    href="#profile-fill" 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 active" id="home-fill" aria-labelledby="home-tab-fill"
                                aria-expanded="true">
                                <form class="auth-login-form mt-2" action="{{ '/admin/login' }}" method="POST"
                                    onsubmit="checkTermCondition(event)">
                                    {{ csrf_field() }}

                                    <input type="hidden" name="return_url" value="" class="return_url">
                                    <div class="form-group">
                                        <label class="form-label" for="email">Email</label>
                                        <input class="form-control form-group-new" id="email" type="email"
                                            name="email" placeholder="john@example.com" value="{{ old('email') }}"
                                            aria-describedby="email" autofocus="" tabindex="1" />
                                        {!! $errors->first('email', '<label class="error" id="login-email-error" for="email">:message</span>') !!}
                                        <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-group-new 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>
                                        {!! $errors->first('password', '<label class="error" id="email-password-error" for="password">:message</label>') !!}

                                        <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="https://thepresence360.com/in/terms-and-condition"
                                                    target="_blank">Terms & Conditions</a> and <a
                                                    href="https://thepresence360.com/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()">
                                                <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" id="profile-fill" role="tabpanel" aria-labelledby="profile-tab-fill"
                                aria-expanded="false">
                                <form class="auth-login-form mt-2" action="{{ 'admin/login/phone' }}" method="POST"
                                    onsubmit="checkTermCondition(event)">
                                    {{ csrf_field() }}

                                    <input type="hidden" name="return_url" value="" class="phone_return_url">
                                    <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 form-group-new"
                                                    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>
                                        {!! $errors->first('mobile', '<label class="error" id="login-mobile-error" for="mobile">:message</label>') !!}
                                        <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-group-new form-control-merge"
                                                id="mobile_password" type="password" name="mobile_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>
                                        {!! $errors->first(
                                            'mobile_password',
                                            '<label class="error" id="mobile-password-error" for="mobile_password">:message</label>',
                                        ) !!}

                                        <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/in/terms-and-condition"
                                                    target="_blank">Terms & Conditions</a> and <a
                                                    href="https://thepresence360.com/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()">
                                                <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() {

            var mobile = @json(request()->input('mobile', ''));
            if (mobile.length > 0) {
                document.querySelector('#profile-tab-fill').click();
                document.querySelector('#mobile').value = mobile;
                document.querySelector('#CarryMobile').checked = true;
                validateEmailorPhone();
            }

            var tab = @json(request()->input('tab', ''));
            if (tab == 'mobile') {
                $('.emailloginmob a[href="#profile-fill"]').tab('show');
            }

            // 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);

                var savedCountryCode = getCookie('countryCode');

                if (savedCountryCode) {
                    $('#dial_code option').each(function() {
                        if ($(this).text().trim().startsWith(savedCountryCode + '(')) {
                            $(this).prop('selected', true);
                            return false;
                        }
                    });
                } else {
                    // fallback: make IP lookup if cookie isn't set
                    $.get("https://api.ipinfo.io/lite/me?token=9461f93ecd62e6", function(resp) {
                        var data = {
                            'ip': resp.ip,
                            'asn' : resp?.asn,
                            'countryCode': resp?.country_code,
                            'country': resp?.country,
                        };

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

                        if (data.countryCode) {

                            document.cookie = "countryCode=" + data.countryCode + "; path=/; max-age=" + 7 * 24 * 60 * 60;

                            $('#dial_code option').each(function() {
                                if ($(this).text().trim().startsWith(data.countryCode + '(')) {
                                    $(this).prop('selected', true);
                                    return false;
                                }
                            });
                        }
                    });
                }

            }

            function getCookie(name) {
                var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
                if (match) return match[2];
                return null;
            }

            $('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);
            }


            @if ($errors->has('mobile'))
                $('.emailloginmob a[href="#profile-fill"]').tab('show');
            @endif
            @if ($errors->has('mobile_password'))
                $('.emailloginmob a[href="#profile-fill"]').tab('show');
            @endif

            $('.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) {
            const urlParams = new URLSearchParams(window.location.search);
            const returnUrl = urlParams.get('return_url');

            if (returnUrl) {
                document.querySelector('.return_url').value = returnUrl;
                document.querySelector('.phone_return_url').value = returnUrl;
            }

            if (!$('.terms-checkbox').is(':checked')) {
                $('.terms-checkbox-validation').show();
                e.preventDefault();
                return false;
            }

            return true;
        }

        function resetInputs() {
            $('#email').val('');
            $('#password').val('');
            $('#mobile').val('');
            $('#mobile_password').val('');

            $('#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();
            var type = (emailType) ? "email" : "mobile";
            $.ajax({
                url: "/admin/login/otp",
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    'type': type,
                    'phone': 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 + '{!! isset(request()->return_url) ? '&return_url=' . request()->return_url : '' !!}';
                    } else if (data.success == 2) {
                        window.location.href = data.redirect_url;
                    }
                }
            });
        }

        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