@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-12">
                        <div class="form-content">
                            <h1 class="text-black">@lang('register.register_header')</h1>
                            <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" action="{{route('company-register-request')}}">
                                @csrf
                                <input type="text" name="uname" value="{{$uname}}" id="uname" required title="@lang('landing_page.please_fill_field')" placeholder="@lang('register.name')" disabled>
                                <input type="email" name="email" value="{{urldecode($email)}}" id="email" placeholder="@lang('register.email')" title="@lang('landing_page.please_fill_field')" disabled>
                                <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"
                                            disabled>
                                            @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>
                                    <input type="number" name="mobile" id="mobile" value="{{$mobile}}" title="@lang('landing_page.please_fill_field')" placeholder="0501234567" disabled>
                                </div>
                            </form>
                            <hr class="no-text-divider w-50">
                            <p class="recaptcha-notice">@lang('register.verify_otp')</p>
                            <form method="post" id="verify_form" action="{{route('company-register-request')}}" class="signup-login-form">
                                @csrf
                                <div class="form-group col-xs-12">
                                    <div class="otp-container">
                                        @if(app()->getLocale() == 'en')
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num1" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num2" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num3" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num4" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                        @else
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num4" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num3" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num2" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                            <input type="text" title="{{__('landing_page.please_fill_field')}}" required id="verify_num1" class="otp-input" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}|[\u0660-\u0669]{1}">
                                        @endif
                                        <label style="display: none" type="text" class="form-control"></label>
                                    </div>
                                </div>
                                <br><br>
                                <a href="javascript:void(0)" id="resend_code" style="color:#000;text-decoration:underline;text-align:center;display:block">
                                    <i class="fa fa-repeat" aria-hidden="true"></i> {{__('sms_verification.resend code')}}
                                </a>
                                <p class="recaptcha-notice">@lang('register.register_captcha_notice')</p>
                                <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_content" id="utm_content" value="{{request()->get('utm_content')}}"/>
                                <input type="hidden" name="user_first_url" id="user_first_url" value="{{request()->get('user_first_url') ?? 'N/A'}}"/>
                                <button class="submit-form" type="submit">@lang('register.register_start_now')</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('extra-scripts')
<script>
    gtag('event', 'web_app_register_verification_screen');
    console.log('web_app_register_verification_screen event');
</script>
    <script defer>
        $(document).ready(function () {
            var body = $('body');
            body.on('keyup', '.otp-input', goToNextInput);
            body.on('keydown', '.otp-input', onKeyDown);
            $('#verify_num1').focus();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept-Language': '{{app()->getLocale()}}',
                }
            });
            grecaptcha.ready(function () {
                $("#resend_code").click(function (event) {

                    event.preventDefault();
                    var url = new URLSearchParams(window.location.search);
                    var register_package = url.get("package");
                    var is_student       = url.get('is_student')
                    var rajhi_payment = url.get("rajhi_payment");

                    grecaptcha.execute(`{{ config('googlerecaptcha.google_recaptcha_site_key') }}`, {action: 'submit'}).then(function (token) {
                        $.ajax({
                            type: "POST",
                            url: "{{route('company-register-request')}}",
                            dataType: "json",
                            data: {
                                dont_send_whatsapp: true,
                                email: $('#email').val(),
                                mobile: $('#mobile').val(),
                                country_code: $('#country_code').val(),
                                token: token,
                                package: register_package?? 0,
                                student: is_student ?? 0,
                                rajhi_payment: rajhi_payment ?? 0,
                                uname: $('#uname').val(),
                                utm_medium: $('#utm_medium').val(),
                                utm_source: $('#utm_source').val(),
                                utm_campaign: $('#utm_campaign').val(),
                                utm_term: $('#utm_term').val()
                            },
                            success: function (response) {
                                var data = response['data'];
                                swal({
                                    text: data['message'],
                                    icon: "success",
                                    button: '{{__("landing_page.Ok")}}',
                                }).then((ok) => {
                                    if (ok) {
                                        $('.otp-input').val("");
                                        $('#verify_num1').focus();
                                    }
                                });
                                $('.swal-overlay').css('height', '100vh');
                                $('.swal-footer').css('text-align', 'center');
                            },
                            error: function (xhr, status, error) {
                                $('#overlay').css('display', 'none');
                                let err = eval("(" + xhr.responseText + ")");
                                if (err.status === 422) {
                                    displayErrorMsg(xhr);
                                }else{
                                    swal({
                                        title: err.errors[0],
                                        icon: "warning",
                                        button: '{{__("landing_page.Ok")}}',
                                    });
                                    $('.swal-overlay').css('height', '100vh');
                                    $('.swal-footer').css('text-align', 'center');
                                }
                            }
                        });
                    });
                });
            });

            grecaptcha.ready(function () {
                $("#verify_form").submit(function (event) {
                    event.preventDefault();
                    var url = new URLSearchParams(window.location.search);
                    var register_package = url.get("package");
                    var is_student       = url.get('is_student')
                    var rajhi_payment = url.get("rajhi_payment");

                    grecaptcha.execute(`{{ config('googlerecaptcha.google_recaptcha_site_key') }}`, {action: 'submit'}).then(function (token) {

                        $.ajax({
                            type: "POST",
                            url: "{{route('verify-company-register')}}",
                            dataType: "json",
                            data: {
                                code: $('#verify_num1').val() + $('#verify_num2').val() + $('#verify_num3').val() + $('#verify_num4').val(),
                                email: $('#email').val(),
                                mobile: $('#mobile').val(),
                                country_code: $('#country_code').val(),
                                token: token,
                                student: is_student ?? 0,
                                package: register_package?? 0,
                                rajhi_payment:rajhi_payment ?? 0,
                                uname: $('#uname').val(),
                                utm_medium: $('#utm_medium').val(),
                                utm_source: $('#utm_source').val(),
                                utm_campaign: $('#utm_campaign').val(),
                                utm_term: $('#utm_term').val(),
                                utm_content: $('#utm_content').val(),
                                user_first_url: $('#user_first_url').val(),
                            },
                            success: function (response) {
                                var data = response['data'];
                                window.location.href = data['url'];
                            },
                            error: function (xhr, status, error) {
                                $('#overlay').css('display', 'none');

                                let err = eval("(" + xhr.responseText + ")");
                                if (err.status === 422) {
                                    displayErrorMsg(xhr);
                                }else{
                                    swal({
                                        title: err.errors[0],
                                        icon: "warning",
                                        button: '{{__("landing_page.Ok")}}',
                                    });
                                    $('.swal-overlay').css('height', '100vh');
                                    $('.swal-footer').css('text-align', 'center');
                                }
                            },
                        });
                    });
                });
            });
        });

        function checkSecond(sec) {
            if (sec < 10 && sec >= 0) {sec = "0" + sec} // add zero in front of numbers < 10
            if (sec < 0) {sec = "59"}
            return sec;
        }

        function displayErrorMsg(xhr) {
            let feedback = '';
            $.each( xhr.responseJSON.errors, function( key, value) {
                feedback = value[0];
                return false; // breaks
            });
            swal({
                title: feedback,
                icon: "warning",
                button: '{{__("landing_page.Ok")}}',
            });
            $('.swal-overlay').css('height', '100vh');
            $('.swal-footer').css('text-align', 'center');
        }

        function goToNextInput(e) {
            var body = $('body');
            var key = e.which,
                t = $(e.target),
                sib = @if(app()->getLocale() == 'en') t.next('input.otp-input'); @else t.prev('input.otp-input') @endif

            if (key != 9 && ((key < 48 || (key > 57 && key < 96) || key > 105))) {
                e.preventDefault();
                return false;
            }

            if (key === 9) {
                return true;
            }

            if (!sib || !sib.length) {
                sib = body.find('input').eq(0);
            }
            sib.select().focus();
        }

        function onKeyDown(e) {
            var key = e.which;

            if (key === 9 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105) || key === 8) {
                return true;
            }

            e.preventDefault();
            return false;
        }

    </script>
@endsection