@extends('register.master')
@section('content')
    <div class="signup-login-page-background">
        <div class="signup-login-card-container">
            <div class="container-fluid no-gutters">
                <div class="row no-gutters">
                    <div class="col-lg-4 hidden-on-mobile">
                        <div class="form-image-background form-image-background-image-{{ app()->getLocale() ?? 'ar' }}">
                            <img class="logo" src="{{ asset('register/icons/logo.png') }}" alt="VoM Logo">
                            <h2>@lang('register.register_side_text')</h2>
                            <br>
                            <img class="application-screenshot-{{ app()->getLocale() ?? 'ar' }}"
                                src="{{ asset('register/icons/sign_up_laptop.png') }}" alt="Application Screen shot">
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="form-content">
                            <h1>@lang('register.register_header')</h1>
                            <p class="hidden-on-desktop-no-mobile text-center text-muted">@lang('register.register_side_text')</p>
                            <a class="change-language-button-{{ app()->getLocale() ?? 'ar' }}"
                                href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale() === 'en' ? 'ar' : 'en') }}">{{ LaravelLocalization::getCurrentLocale() === 'en' ? 'عربي' : 'English' }}</a>
                            <form class="signup-login-form" method="post" id="register_form"
                                action="{{ route('company-register-request') }}">
                                @csrf
                                <input type="text" name="uname" id="uname" value="{{ old('uname') }}"
                                    placeholder="@lang('register.name')" title="@lang('landing_page.please_fill_field')" required>
                                <span class="invalid-feedback" role="alert">
                                    <p id="uname_error_message" class="errors hidden"></p>
                                </span>
                                <input type="email" name="email" id="email" value="{{ old('email') }}"
                                    placeholder="@lang('register.email')" title="@lang('landing_page.please_fill_field')" required>
                                <span class="invalid-feedback" role="alert">
                                    <p id="email_error_message" class="errors hidden"></p>
                                </span>
                                <div class="phone-number-group">
                                    <div class="country-selector-container">
                                        @php
                                            $countriesStr = file_get_contents(
                                                storage_path('app/public/Countries.json'),
                                            );
                                            $countries = json_decode($countriesStr, true);
                                            // Statically remove Iran & Malta
                                            unset($countries[5], $countries[11]);
                                        @endphp
                                        <select @if (LaravelLocalization::getCurrentLocale() === 'ar') dir="rtl" @endif name="country_code"
                                            id="country_code"
                                            class="js-example-basic-single selectpicker form-control form-element"
                                            @isset($disabled) disabled @endisset>
                                            @foreach ($countries as $country)
                                                <option data-countryCode="{{ $country['Alpha2Code'] }}"
                                                    value="{{ $country['Alpha2Code'] }}"
                                                    data-thumbnail="{{ asset('assets/images/countries/' . strtolower($country['Alpha3Code']) . '.svg') }}"
                                                    {{ old('country_code', $country_code ?? '') == $country['Alpha2Code'] ? 'selected' : '' }}>
                                                    +{{ $country['DialCode'] }}
                                                    {{ $country['name_' . app()->getLocale()] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <input type="text" name="mobile" id="mobile" style="width: 100%;"
                                            value="{{ old('mobile') }}" placeholder="0501234567" title="@lang('landing_page.please_fill_field')"
                                            required>
                                        <span class="invalid-feedback" role="alert">
                                            <p id="mobile_error_message" class="errors hidden"></p>
                                        </span>
                                    </div>
                                </div>
                                <p class="recaptcha-notice">@lang('register.register_captcha_notice')</p>
                                <input type="hidden" name="is_student" id="is_student"
                                    value="{{ request()->get('is_student') }}" />
                                <input type="hidden" name="utm_medium" id="utm_medium"
                                    value="{{ request()->get('utm_medium') }}" />
                                <input type="hidden" name="utm_source" id="utm_source"
                                    value="{{ request()->get('utm_source') }}" />
                                <input type="hidden" name="utm_campaign" id="utm_campaign"
                                    value="{{ request()->get('utm_campaign') }}" />
                                <input type="hidden" name="utm_term" id="utm_term"
                                    value="{{ request()->get('utm_term') }}" />
                                <input type="hidden" name="utm_term" id="utm_content"
                                    value="{{ request()->get('utm_content') }}" />
                                <input type="hidden" name="user_first_url" id="user_first_url"
                                    value="{{ request()->cookie('user_first_url') ?? 'N/A' }}" />
                                <button class="submit-form" disabled id="register_RQXHCKBTGD_btn" name="submit"
                                    type="submit">@lang('register.register_start_now')</button>
                                <p class="recaptcha-notice">@lang('register.register_current_user') <a
                                        href="{{ route('company-login-show') }}">@lang('register.register_login')</a></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('extra-scripts')
    <script>
        gtag('event', 'web_app_register');
        console.log('web_app_register event');
        // One-shot Path B confirm for archived-email hard-stop (never sticky across emails/sessions).
        let confirmStartFresh = false;
        $(document).ready(function() {
            const unameInput = document.getElementById('uname');
            const unameErrorMessage = document.getElementById('uname_error_message');
            const submitButton = document.getElementById('register_RQXHCKBTGD_btn');

            const regex = /^[\p{L}\d\s_-]+$/u;
            const errorMessage = unameErrorMessage.dataset.errorMessage || 'Invalid name format.';

            // Function to sanitize input by removing HTML tags
            function sanitizeInput(value) {
                return value.replace(/<\/?[^>]+(>|$)/g, '');
            }

            function validateInput() {
                let currentValue = unameInput.value;
                currentValue = sanitizeInput(currentValue);

                if (currentValue.length === 0) {
                    unameErrorMessage.classList.add('hidden');
                    submitButton.disabled = false;
                    return;
                }

                if (!regex.test(currentValue)) {
                    unameErrorMessage.textContent = errorMessage;
                    unameErrorMessage.classList.remove('hidden');
                    submitButton.disabled = true;
                } else {
                    unameErrorMessage.classList.add('hidden');
                    submitButton.disabled = false;
                }
            }

            unameInput.addEventListener('input', function() {
                let sanitizedValue = unameInput.value.replace(/[^a-zA-Z\d\u0600-\u06FF\s_-]/gu, ''); // Allow letters, numbers, spaces, underscores, and dashes only
                sanitizedValue = sanitizeInput(sanitizedValue); // Further sanitize input

                if (sanitizedValue !== unameInput.value) {
                    unameErrorMessage.textContent = errorMessage;
                    unameErrorMessage.classList.remove('hidden');
                }

                unameInput.value = sanitizedValue;
                validateInput();
            });

            validateInput(); // Initial validation check

            //end of validation for uname
            //when user start to write email //check its validation
            $('#email').on('change paste keyup', function(event) {
                confirmStartFresh = false;
                $('#email_error_message').text("");
                $('#email_error_message').addClass('hidden');
                var $email = this.value;
                //if user click backspace(8) or delete(46)//check again
                if (event.keyCode = 8 || 46) {
                    checkEmailValidationToMakeSubmitEnable($email, '#register_RQXHCKBTGD_btn');
                }
                checkEmailValidationToMakeSubmitEnable($email, '#register_RQXHCKBTGD_btn');
            })
            if ($('#country_code').val() == 'SA') {
                $('#mobile').attr('placeholder', '0501234567');
            }
            $("#country_code").change(function() {
                $('#mobile').attr('placeholder', '');
                if ($(this).val() == 'SA') {
                    $('#mobile').attr('placeholder', '0501234567');
                }
            });
            //client side email validation on keyup
            function checkEmailValidationToMakeSubmitEnable($email, $element) {
                var emailReg =
                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if (emailReg.test($email) && $email) {
                    $($element).prop("disabled", false);
                } else {
                    $('#email_error_message').text(
                        '{{ __('validation.email', ['attribute' => __('validation.attributes.email')]) }}');
                    $('#email_error_message').removeClass('hidden');
                    $($element).prop("disabled", true);
                }
            }
            // Attach a submit handler to the form
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept-Language': '{{ app()->getLocale() }}',
                }
            });
            grecaptcha.ready(function() {
                $("#register_form").submit(function(event) {
                    // Show a change button status to loading
                    $(this).find('button[type="submit"]').attr('disabled', true).html(
                        '<i class="fa fa-spinner fa-spin"></i>');
                    event.preventDefault();
                    const oneShotConfirmStartFresh = confirmStartFresh;
                    confirmStartFresh = false;
                    grecaptcha.execute(
                        `{{ config('googlerecaptcha.google_recaptcha_site_key') }}`, {
                            action: 'submit'
                        }).
                    then(function(token) {
                        $('input').removeClass('is-invalid');
                        $('.errors').addClass('hidden');
                        var url = new URLSearchParams(window.location.search);
                        var register_package = url.get("package");
                        $.ajax({
                            type: "POST",
                            url: "{{ route('company-register-request') }}",
                            dataType: "json",
                            data: {
                                email: $('#email').val(),
                                mobile: $('#mobile').val(),
                                country_code: $('#country_code').val(),
                                token: token,
                                package: register_package ?? 0,
                                uname: $('#uname').val(),
                                is_student: $('#is_student').val(),
                                user_first_url: $('#user_first_url').val(),
                                utm_campaign: $('#utm_campaign').val(),
                                utm_term: $('#utm_term').val(),
                                utm_content: $('#utm_content').val(),
                                utm_source: $('#utm_source').val(),
                                confirm_start_fresh: oneShotConfirmStartFresh ? 1 : 0,
                            },
                            success: function(response) {
                                $('#register_form').find(
                                    'button[type="submit"]').attr(
                                    'disabled', false).html(
                                    "{{ __('register.register_start_now') }}"
                                );
                                var data = response['data'];
                                data['utm_medium'] = $('#utm_medium').val();
                                data['utm_campaign'] = $('#utm_campaign').val();
                                data['user_first_url'] = $('#user_first_url')
                                    .val();
                                data['utm_content'] = $('#utm_content').val();
                                data['utm_source'] = $('#utm_source').val();
                                data['utm_term'] = $('#utm_term').val();

                                displaySuccessAlert(data);
                            },
                            error: function(xhr, status, error) {
                                $('#register_form').find(
                                    'button[type="submit"]').attr(
                                    'disabled', false).html(
                                    "{{ __('register.register_start_now') }}"
                                );
                                let err = xhr.responseJSON || null;
                                if (!err && xhr.responseText) {
                                    try {
                                        err = JSON.parse(xhr.responseText);
                                    } catch (e) {
                                        err = null;
                                    }
                                }
                                if (err && err.data && err.data.archived_email) {
                                    displayArchivedChooser(err.data);
                                    return;
                                }
                                if (err && err.status === 422) {
                                    displayErrorMsg(xhr);
                                } else if (err && err.errors) {
                                    const first = Array.isArray(err.errors)
                                        ? err.errors[0]
                                        : (err.errors.email ? err.errors.email[0] : Object.values(err.errors)[0]?.[0]);
                                    displayErrorAlert(first || "{{ __('archival.register_hard_stop_title') }}");
                                } else {
                                    displayErrorAlert("{{ __('archival.register_hard_stop_title') }}");
                                }
                            },
                        });
                    });
                });

            });
        });

        function displayErrorMsg(xhr) {
            $.each(xhr.responseJSON.errors, function(key, value) {
                let feedback = '';
                if (key === 'token') {
                    displayErrorAlert(value[0])
                    $('.swal-overlay').css('height', '100vh');
                    $('.swal-footer').css('text-align', 'center');
                } else {
                    $('#' + key).addClass('is-invalid');
                    $('#' + key + '_error_message').text(value[0]);
                    $('#' + key + '_error_message').removeClass('hidden');
                }
            });
        }

        function displaySuccessAlert(data) {
            swal({
                title: '{{ __('sms_verification.Thanks for registering in VOM') }}',
                text: data['message'],
                icon: "success",
                button: '{{ __('landing_page.Ok') }}',
                allowOutsideClick: false,
                closeOnClickOutside: false
            }).then((ok) => {
                if (ok) {
                    if (isStudent) {
                        window.location = '{{ route('verify-company-register-show') }}' + '?is_student=' + '1' +
                            '&email=' + data['email'] +
                            '&mobile=' + data['mobile'] + '&country_code=' + data['country_code'] + '&package=' +
                            data['package'] + '&uname=' + data['uname'] + '&utm_medium=' + data['utm_medium'] +
                            '&utm_source=' + data['utm_source'] + '&utm_campaign=' + data['utm_campaign'] +
                            '&utm_term=' + data['utm_term'] + '&user_first_url=' + data['user_first_url'] +
                            '&utm_content=' + data['utm_content']
                    } else {
                        window.location = '{{ route('verify-company-register-show') }}' + '?email=' + data[
                                'email'] +
                            '&mobile=' + data['mobile'] + '&country_code=' + data['country_code'] + '&package=' +
                            data['package'] + '&uname=' + data['uname'] + '&utm_medium=' + data['utm_medium'] +
                            '&utm_source=' + data['utm_source'] + '&utm_campaign=' + data['utm_campaign'] +
                            '&utm_term=' + data['utm_term'] + '&user_first_url=' + data['user_first_url'] +
                            '&utm_content=' + data['utm_content']
                    }

                }
            });
            $('.swal-overlay').css('height', '100vh');
            $('.swal-footer').css('text-align', 'center');
            $('.swal-button--confirm').attr('id', 'confirm_register_RQXHCKBTGD_btn')
        }

        function displayErrorAlert(message) {
            swal({
                title: message,
                icon: "warning",
                button: '{{ __('landing_page.Ok') }}',
            });
            $('.swal-overlay').css('height', '100vh');
            $('.swal-footer').css('text-align', 'center');
        }

        function displayArchivedChooser(data) {
            const buttons = {};
            if (data.show_path_a !== false) {
                buttons.pathA = {
                    text: "{{ __('archival.register_path_a_cta') }}",
                    value: 'path_a',
                    className: 'swal-button--path-a',
                };
            }
            buttons.pathB = {
                text: "{{ __('archival.register_path_b_cta') }}",
                value: 'path_b',
                className: 'swal-button--confirm',
            };

            swal({
                title: data.message || "{{ __('archival.register_hard_stop_title') }}",
                text: "{{ __('archival.register_hard_stop_body') }}",
                icon: "warning",
                buttons: buttons,
                closeOnClickOutside: false,
            }).then((choice) => {
                if (choice === 'path_a' && data.whatsapp_url) {
                    window.open(data.whatsapp_url, '_blank');
                } else if (choice === 'path_b') {
                    // One-shot confirm only for this resubmit; re-choose next time.
                    confirmStartFresh = true;
                    $('#register_form').trigger('submit');
                }
            });
            $('.swal-overlay').css('height', '100vh');
            $('.swal-footer').css('text-align', 'center');
        }
    </script>
@endsection