@extends('layout')
@section('title')
    <title>{{ __('translate.Sign Up') }}</title>
@endsection

@section('body-content')

<main>

    <!-- Login part start  -->
    <section class="login common-class">
        <div class="container">


            <div class="row justify-content-center">
                <div class="col-lg-11">
                    <div class="row login-bg">
                        <div class=" col-xxl-6  col-xl-12 col-lg-12">
                            <div class="login-head">
                                <h3>{{ __('translate.Sign Up') }}</h3>

                                <span>{{ render_website_shortcodes(__('translate.Welcome to Aadfirst')) }}</span>
                            </div>

                            <form method="POST" action="{{ route('register') }}" id="login_form">
                                @csrf

                                <div class="login-form-item">
                                    <div class="login-form-inner">
                                        <label for="" class="form-label">{{ __('translate.Name') }}
                                            <span>*</span> </label>
                                        <input type="text" class="form-control" id=""
                                            placeholder="{{ __('translate.Name') }}" name="name" value="{{ old('name') }}">
                                    </div>
                                </div>

                                <div class="login-form-item three">
                                    <div class="login-form-inner phone-verify-inner">
                                        <label for="register_email" class="form-label">{{ __('translate.Email address') }}
                                            <span>*</span> </label>
                                        <input type="email" class="form-control" id="register_email"
                                            placeholder="{{ __('translate.Email address') }}" name="email" value="{{ old('email') }}" autocomplete="email">
                                        <div class="icon phone-verify-icon" id="register_email_icon" style="display: none;" aria-hidden="true">
                                            <span></span>
                                        </div>
                                        <p class="phone-verify-message" id="register_email_message" style="display: none;"></p>
                                    </div>
                                    @error('email')
                                        <p class="register-consent-error">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="login-form-item two">
                                    <div class="login-form-inner phone-verify-inner">
                                        <label for="input_password" class="form-label">{{ __('translate.Password') }}
                                            <span>*</span> </label>
                                        <input type="password" class="form-control" id="input_password"
                                            placeholder="........" name="password" autocomplete="new-password">

                                        <div class="icon" id="password-field">
                                            <span>
                                                <i class="fa-regular fa-eye-slash"></i>
                                            </span>
                                        </div>

                                        <div class="password-strength-panel is-collapsed" id="register_password_strength">
                                            <div class="password-strength-bars">
                                                <span></span><span></span><span></span><span></span>
                                            </div>
                                            <p class="password-strength-label" id="register_password_strength_label"></p>
                                            <ul class="password-requirements" id="register_password_requirements"></ul>
                                        </div>
                                    </div>
                                    @error('password')
                                        <p class="register-consent-error">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="login-form-item two">
                                    <div class="login-form-inner phone-verify-inner">
                                        <label for="input_password_confirm" class="form-label">{{ __('translate.Confirm Password') }}
                                            <span>*</span> </label>
                                        <input type="password" class="form-control" id="input_password_confirm"
                                            placeholder="........" name="password_confirmation" autocomplete="new-password">

                                        <div class="icon" id="password-field-confirm">
                                            <span>
                                                <i class="fa-regular fa-eye-slash"></i>
                                            </span>
                                        </div>

                                        <div class="icon phone-verify-icon" id="register_password_match_icon" style="display: none;" aria-hidden="true">
                                            <span></span>
                                        </div>
                                        <p class="phone-verify-message" id="register_password_match_message" style="display: none;"></p>
                                    </div>
                                </div>

                                <div class="login-form-item two">
                                    <div class="login-form-inner phone-verify-inner">
                                        <label for="register_phone" class="form-label">{{ __('translate.Phone Number') }}
                                            <span>*</span> </label>
                                        <input type="text" class="form-control" id="register_phone"
                                            placeholder="{{ __('translate.Phone Number') }}" name="phone" value="{{ old('phone') }}"
                                            maxlength="12" inputmode="tel" autocomplete="tel">
                                        @if($phone_verify_active ?? false)
                                            <div class="icon phone-verify-icon" id="register_phone_icon" style="display: none;" aria-hidden="true">
                                                <span></span>
                                            </div>
                                            <p class="phone-verify-message" id="register_phone_message" style="display: none;"></p>
                                        @endif
                                    </div>
                                    @error('phone')
                                        <p class="register-consent-error">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="login-form-item two">
                                    <div class="login-form-inner">
                                        <label for="register_county_id" class="form-label">{{ __('translate.County') }}
                                            <span>*</span> </label>
                                        <select class="form-select" name="county_id" id="register_county_id">
                                            <option value="">{{ __('translate.Select County') }}</option>
                                            @foreach ($counties as $county)
                                                <option value="{{ $county->id }}" {{ (string) old('county_id') === (string) $county->id ? 'selected' : '' }}>{{ $county->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="login-form-item two">
                                    <div class="login-form-inner">
                                        <label for="register_city_id" class="form-label">{{ __('translate.City') }}
                                            <span>*</span> </label>
                                        <select class="form-select" name="city_id" id="register_city_id">
                                            <option value="">{{ __('translate.Select City') }}</option>
                                            @foreach ($cities as $city)
                                                <option value="{{ $city->id }}" {{ (string) old('city_id') === (string) $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="login-form-item two {{ $show_district ? '' : 'd-none' }}" id="register_city_district_wrapper">
                                    <div class="login-form-inner">
                                        <label for="register_city_district_id" class="form-label" id="register_city_district_label">
                                            {{ $district_label }}
                                            <span class="register-district-required">*</span>
                                        </label>
                                        <select class="form-select" name="city_district_id" id="register_city_district_id">
                                            <option value="">{{ __('translate.Select') }}</option>
                                            @foreach ($districts as $district)
                                                <option value="{{ $district->id }}" {{ (string) old('city_district_id') === (string) $district->id ? 'selected' : '' }}>{{ $district->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                @if(captcha_enabled())
                                    <div class="login-form-item two">
                                        <div class="login-form-inner">
                                            @include('partials.captcha-widget')
                                        </div>
                                    </div>
                                @endif

                                <div class="register-consents">
                                    <div class="register-consent-item form-check">
                                        <input type="checkbox" class="form-check-input" name="accept_terms" id="accept_terms" value="1" {{ old('accept_terms') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="accept_terms">
                                            {{ __('translate.I accept the') }}
                                            <a href="{{ route('terms-conditions') }}" target="_blank" rel="noopener">{{ __('translate.Terms & Conditions') }}</a>
                                            {{ __('translate.and') }}
                                            <a href="{{ route('privacy-policy') }}" target="_blank" rel="noopener">{{ __('translate.Privacy Policy') }}</a>
                                            <span class="register-consent-required">*</span>
                                        </label>
                                    </div>
                                    @error('accept_terms')
                                        <p class="register-consent-error">{{ $message }}</p>
                                    @enderror
                                    <div class="register-consent-item form-check">
                                        <input type="checkbox" class="form-check-input" name="newsletter" id="newsletter" value="1" {{ old('newsletter') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="newsletter">{{ __('translate.Subscribe to newsletter') }}</label>
                                    </div>
                                </div>

                                <div class="login-form-item two">
                                    <a class="main-btn register-submit-btn is-disabled" href="javascript:;" id="login_btn" aria-disabled="true">
                                        <div class="btn_m">
                                            <div class="btn_c">
                                                <div class="btn_t1">{{ __('translate.Sign Up') }}</div>
                                                <div class="btn_t2">{{ __('translate.Sign Up') }}</div>
                                            </div>
                                        </div>
                                    </a>

                                </div>


                            </form>

                            <div class="create-accoun-text">
                                <p>{{ __('translate.Already have an account ?') }}<span><a href="{{ route('login') }}"> {{ __('translate.Sign In Here') }}</a></span>
                                </p>
                            </div>


                        </div>

                        <div class="col-lg-6">
                            <div class="login-img">
                                <img src="{{ custom_asset($setting->login_page_bg, '525x708') }}" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>





        </div>
    </section>
    <!--Login part end  -->




</main>

@endsection


@push('js_section')

@include('partials.captcha-scripts')

<script>

    let is_password = true;
    let is_password_confirm = true;

    (function($) {
        "use strict"
        $(document).ready(function () {

            function updateRegisterBtn() {
                const accepted = $("#accept_terms").is(":checked");
                const phoneRequired = @json($phone_verify_active ?? false);
                const phoneStatus = typeof window.getPhoneVerificationStatus === "function"
                    ? window.getPhoneVerificationStatus()
                    : true;
                const emailStatus = typeof window.getEmailVerificationStatus === "function"
                    ? window.getEmailVerificationStatus()
                    : null;
                const emailValue = String($("#register_email").val() || "").trim();
                const emailLooksValid = typeof window.isRegisterEmailLikelyValid === "function"
                    ? window.isRegisterEmailLikelyValid(emailValue)
                    : /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i.test(emailValue);
                const phoneOk = !phoneRequired || phoneStatus === true;
                const emailOk = !emailLooksValid || emailStatus === true;
                const passwordStatus = typeof window.getPasswordPolicyStatus === "function"
                    ? window.getPasswordPolicyStatus()
                    : { strengthOk: true, matchOk: true };
                const passwordOk = passwordStatus.strengthOk === true && passwordStatus.matchOk === true;
                const $btn = $("#login_btn");

                if (accepted && phoneOk && emailOk && passwordOk) {
                    $btn.removeClass("is-disabled").attr("aria-disabled", "false");
                } else {
                    $btn.addClass("is-disabled").attr("aria-disabled", "true");
                }
            }

            $("#accept_terms").on("change", updateRegisterBtn);
            $("#register_email").on("input blur", updateRegisterBtn);
            $(document).on("phoneVerification:change", updateRegisterBtn);
            $(document).on("emailVerification:change", updateRegisterBtn);
            $(document).on("passwordPolicy:change", updateRegisterBtn);
            updateRegisterBtn();

            $("#login_btn").on("click", function(){
                if ($(this).hasClass("is-disabled")) {
                    return;
                }
                if (typeof window.submitFormWithCaptcha === 'function') {
                    window.submitFormWithCaptcha('login_form');
                } else {
                    $("#login_form").submit();
                }
            })

            $("#password-field").on("click",function(e){
                is_password = !is_password;
                if(is_password){
                    $("#input_password").attr('type', 'password');

                    $("#password-field").html(`<span>
                                        <i class='fa-regular fa-eye-slash' aria-hidden='true' ></i>
                                    </span>`)

                }else{
                    $("#input_password").attr('type', 'text');
                    $("#password-field").html(`<span>
                                        <i class='fa-regular fa-eye' aria-hidden='true' ></i>
                                    </span>`)
                }
            })

            function resetRegisterDistrictField() {
                $("#register_city_district_wrapper").addClass("d-none");
                $("#register_city_district_id").html('<option value="">{{ __("translate.Select") }}</option>');
            }

            function loadRegisterDistricts(cityId, selectedDistrictId) {
                resetRegisterDistrictField();

                if (!cityId) {
                    return;
                }

                $.ajax({
                    type: "get",
                    url: "{{ url('districts-by-city') }}/" + cityId,
                    success: function(response) {
                        if (!response || !response.required) {
                            return;
                        }

                        $("#register_city_district_label").html(
                            (response.label || "{{ __('translate.Sector or Commune') }}") + ' <span class="register-district-required">*</span>'
                        );
                        $("#register_city_district_id").html(response.html);
                        $("#register_city_district_wrapper").removeClass("d-none");

                        if (selectedDistrictId) {
                            $("#register_city_district_id").val(String(selectedDistrictId));
                        }
                    }
                });
            }

            $("#register_county_id").on("change", function() {
                let county_id = $(this).val();
                let empty_html = `<option value="">{{ __('translate.Select City') }}</option>`;
                $("#register_city_id").html(empty_html);
                resetRegisterDistrictField();

                if (county_id) {
                    $.ajax({
                        type: "get",
                        url: "{{ url('cities-by-county') }}/" + county_id,
                        success: function(response) {
                            $("#register_city_id").html(response);
                        }
                    });
                }
            });

            $("#register_city_id").on("change", function() {
                loadRegisterDistricts($(this).val(), null);
            });

            let initialRegisterCity = $("#register_city_id").val();
            let initialRegisterDistrict = "{{ old('city_district_id', '') }}";
            if (initialRegisterCity) {
                loadRegisterDistricts(initialRegisterCity, initialRegisterDistrict || null);
            }

            $("#password-field-confirm").on("click",function(e){
                is_password_confirm = !is_password_confirm;
                if(is_password_confirm){
                    $("#input_password_confirm").attr('type', 'password');

                    $("#password-field-confirm").html(`<span>
                                        <i class='fa-regular fa-eye-slash' aria-hidden='true' ></i>
                                    </span>`)

                }else{
                    $("#input_password_confirm").attr('type', 'text');
                    $("#password-field-confirm").html(`<span>
                                        <i class='fa-regular fa-eye' aria-hidden='true' ></i>
                                    </span>`)
                }
            })

        });
    })(jQuery);
</script>

@include('partials.phone-verification-script', [
    'phone_verify_active' => $phone_verify_active ?? false,
    'phone_input_selector' => '#register_phone',
    'phone_icon_selector' => '#register_phone_icon',
    'phone_message_selector' => '#register_phone_message',
    'county_selector' => '#register_county_id',
    'verify_on_load' => (bool) old('phone'),
])

@include('partials.email-verification-script', [
    'email_verify_active' => $email_verify_active ?? false,
    'email_input_selector' => '#register_email',
    'email_icon_selector' => '#register_email_icon',
    'email_message_selector' => '#register_email_message',
    'verify_on_load' => (bool) old('email'),
])

@include('partials.password-policy-script')
@endpush