@extends('register.master')
@section('content')
    <style>
        .d-none {
            display: none;
        }

        .invalid-feedback {
            display: block !important;
        }
        /* The following styles only affects the industry dropdown menu as it's the only select2 instance on the page */
        .select2-selection.select2-selection--single {
            padding: 6px 34px;
            width: 100%;
            border-radius: 4px;
            background-color: #fff;
            border: none;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            height: 45px !important;
        }
        .select2-choice{
            color: #727272 !important;
        }
        .select2-selection__arrow {
            display: none;
        }
    </style>
    <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_welcome')</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" id="register_form"
                                action="{{ route('tenants.guest.store') }}">
                                @csrf
                                @error('token')
                                    <div class="input-icons">
                                        <span class="invalid-feedback text text-danger" role="alert">
                                            {{ __('register.registration already done') }}
                                        </span>
                                    </div>
                                @enderror
                                <input type="hidden" name="token" id="token" value="{{ $token }}" />
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <input type="text" name="name" id="company_name" value="{{ old('name') }}"
                                        placeholder="@lang('register.company name')" required>
                                    <img src="{{ asset('register/icons/office.png') }}" alt="">
                                </div>
                                @error('name')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        {{ $message }}
                                    </span>
                                @enderror
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <input type="text" name="subdomain" id="subdomain" placeholder="@lang('register.identifier')" required maxlength="20">
                                    <span class="invalid-feedback text text-danger" id="max-length" role="alert"></span>
                                    <img src="{{ asset('register/icons/identity-card.png') }}" alt="">
                                    <span
                                        class="@if (app()->getLocale() == 'en') tooltip-icon @else tooltip-icon-rtl @endif">
                                        <i title="{{ __('sms_verification.identifier_tooltip') }}"
                                            class="fa fa-question-circle"></i>
                                    </span>
                                </div>
                                @error('subdomain')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        {{ $message }}
                                    </span>
                                @enderror
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <input type="password" name="password" id="password" placeholder="@lang('register.password')" required>
                                    <img src="{{ asset('register/icons/key.png') }}" alt="">
                                    <span class="toggle-password-visibility @if (app()->getLocale() == 'en') tooltip-icon @else tooltip-icon-rtl @endif">
                                        <i class="fa fa-eye-slash"></i>
                                    </span>
                                </div>
                                @error('password')
                                    <span class="invalid-feedback text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <input type="password" name="password_confirmation" id="password-confirmation" placeholder="@lang('register.confirm password')" required>
                                    <img src="{{ asset('register/icons/key.png') }}" alt="">
                                    <span
                                        class="toggle-password-visibility @if (app()->getLocale() == 'en') tooltip-icon @else tooltip-icon-rtl @endif">
                                        <i class="fa fa-eye-slash"></i>
                                    </span>
                                </div>
                                @error('password_confirmation')
                                    <span class="invalid-feedback text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <select name="vom_source" id="vom_source">
                                        <option value="">@lang('Where did you hear about VoM?')</option>
                                        @forelse($data['vom_sources'] as $key => $source)
                                            <option value="{{ $key }}">{{ $source }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                    <img src="{{ asset('register/icons/idea.png') }}" alt="">
                                    @error('vom_source')
                                        <span class="invalid-feedback text-danger" role="alert">
                                            <p>{{ $message }}</p>
                                        </span>
                                    @enderror
                                </div>
                                <div class="input-icon-group-{{ app()->getLocale() ?? 'ar' }}">
                                    <select class="select2-tag" name="industry">
                                        <option value="">@lang('register.industry')</option>
                                        @foreach ($data['industries'] as $key => $industry)
                                            <option value="{{ $key }}">{{ $industry }}</option>
                                        @endforeach
                                    </select>
                                    <img src="{{ asset('register/icons/comment.png') }}" alt="">
                                    @error('industry')
                                        <span class="invalid-feedback text-danger" role="alert">
                                            <p>{{ $message }}</p>
                                        </span>
                                    @enderror
                                </div>
                                <br />
                                <select name="university_name" class="student-feild">
                                    <option value="">@lang('register.university_name')</option>
                                    @foreach ($data['universities'] as $key => $university)
                                        <option value="{{ $key }}">{{ $university }}</option>
                                    @endforeach
                                    <option value="other">@lang('register.university_name_other')</option>
                                </select>
                                <input type="text" class="d-none student-feild" name="university_name_other"
                                    id="university_name_other" placeholder="@lang('register.enter_university_name')">
                                @error('university_name')
                                    <span class="invalid-feedback text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                                <select name="graduation_year" class="student-feild">
                                    <option value="">@lang('register.graduation_year')</option>
                                    @for ($i = 2024; $i <= date('Y') + 6; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                                @error('graduation_year')
                                    <span class="invalid-feedback text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                @enderror
                                <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') }}" />
                                {{-- Default values to avoid the validation errors and ensure we don't mess with the system --}}
                                <input type="hidden" name="employees_range" value="1 to 10">
                                <input type="hidden" name="timezone" value="Asia/Riyadh">
                                <input type="hidden" name="country_code" value="SA">
                                <input type="hidden" class="student-feild" name="is_student" value="1"
                                    id="is-student">
                                <input type="hidden" name="rajhi_payment" value="0">
                                <button class="submit-form" type="submit">@lang('register.finish')</button>
                            </form>
                            <p class="recaptcha-notice">@lang('register.register_captcha_notice')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('extra-scripts')
    <script>
        gtag('event', 'web_app_register_company_data');
        console.log('web_app_register_company_data event');
    </script>
    <script defer>
        if (!isStudent)
            $('.student-feild').remove();
        $('select[name="university_name"]').on('change', function() {
            if ($(this).val() == 'other') {
                $('input[name="university_name_other"]').val('').removeClass('d-none');
            } else {
                $('input[name="university_name_other"]').val('').addClass('d-none');
            }
        });
        let url = new URLSearchParams(window.location.search);
        let rajhi_payment = url.get("rajhi_payment");
        if (rajhi_payment == 1) {
            $("input[name='rajhi_payment']").val(rajhi_payment);
            $("#vom_source option[value=Rajhi]").prop('selected', true);
            $('#vom_source').prop('disabled', true);
            $("<input type='hidden' value='Rajhi' />")
                .attr("name", "vom_source")
                .appendTo("#register_form");
        }
        // Toggle password visibility
        $('.toggle-password-visibility').click(function(e) {
            $(this).parent().find('input').attr('type', function(index, attr) {
                return attr == 'password' ? 'text' : 'password';
            });
        });

        $(document).ready(function() {
            $("#company_name").on("change paste keyup", function() {
                if ($(this).val() && !isArabic($(this).val())) {
                    var subdomainWithoutSpecialChar = ($(this).val()).replace(/[^A-Z0-9]/ig, "");
                    $('#subdomain').val(subdomainWithoutSpecialChar.toLowerCase())
                }
                if (!$(this).val()) {
                    $('#subdomain').val("");
                }
            });
            $("#subdomain").keyup(function() {
                if ($("#subdomain").val().length > 19) {

                    $('#max-length').show();
                    @if (App::isLocale('en'))
                        $('#max-length').text('The length of a subdomain should not exceed 19 characters!');
                    @else
                        $('#max-length').text('يجب ألا يتجاوز معرف الشركة 19 حرفاً');
                    @endif
                } else {
                    $('#max-length').hide();
                    $('#max-length').text('');
                }
            });
        });

        function isArabic(text) {
            var pattern = /[\u0600-\u06FF\u0750-\u077F]/;
            result = pattern.test(text);
            return result;
        }
    </script>
@endsection