@extends($layoutPrefix . 'Layout.master')
@inject('hookServices','App\Blueprint\Services\hookServices')
@section('title',$title)
@section('content')
    @inject('htmlHelper', 'App\Blueprint\Services\HtmlServices')
    @php
        $htmlHelper->wrapperClass = 'form-group';
        $htmlHelper->labelClass = 'control-label col-md-3 col-sm-4';
        $htmlHelper->fieldClass = 'col-md-4 col-sm-5';
        $customFieldOptions = [
            'defaultValueMethod' => 'post',
            'text' => [
                'class' => 'form-control',
            ]
        ]
    @endphp
        <!-- BEGIN PAGE HEADER-->
    <!-- END PAGE HEADER-->
    <div class="row registrationWrapper">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="postRegistrationBox">
                <span class="fa fa-check check"></span>
                <h3>{{_t('register.you_are_registered')}} !!!</h3>
                <div class="registeredInfo">
                    {{_t('register.after_reg_text')}}
                </div>
                @if($registrationPackage == 'on')
                    <div class="registeredFooter">
                        <button type="button" class="btn btn-outline primaryButton registrationReceipt ladda-button"
                                data-spinner-color="#000" data-style="contract">
                            <i class="fa fa-sticky-note"></i>{{_t('register.receipt')}}
                        </button>
                        @endif
                        @if(getScope() == 'shared')
                            {{--                            {{dd(getScope())}}--}}
                            <a href="{{ route('user.login') }}">
                                <button class="btn btn-outline green" type="button">
                                    {{_t('register.login_to_your_account')}}
                                </button>
                            </a>
                        @endif
                    </div>
                    <div class="invoiceHolder" data-invoice=""></div>
            </div>
            @if($registrationAllowed)
                <div class="portlet light bordered" id="registrationForm">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class=" icon-layers font-green"></i>
                            <span class="caption-subject font-green bold uppercase"> {{_t('register.registration_wizard')}}
                                <span class="step-title"> {{_t('register.step_1_4')}} </span>
                    </span>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form action="{{route('admin.register')}}" class="form-horizontal registrationForm"
                              id="registrationForm">
                            <div class="form-wizard">
                                <div class="form-body">
                                    <ul class="nav nav-pills nav-justified steps">
                                        <li>
                                            <a href="#tab1" data-toggle="tab" class="step">
                                                <span class="number"> 1 </span>
                                                <span class="desc">
                                    <i class="fa fa-check"></i> {{ _t('register.sponsorinfo') }} </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tab2" data-toggle="tab" class="step">
                                                <span class="number"> 2 </span>
                                                <span class="desc">
                                        <i class="fa fa-check"></i> {{ _t('register.personal_details') }} </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tab3" data-toggle="tab" class="step">
                                                <span class="number"> 3 </span>
                                                <span class="desc">
                                    <i class="fa fa-check"></i> {{ _t('register.profile_setup') }} </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tab4" data-toggle="tab" class="step active">
                                                <span class="number"> 4 </span>
                                                <span class="desc">
                                    <i class="fa fa-check"></i>{{ _t('register.confirm_and_payment') }} </span>
                                            </a>
                                        </li>
                                    </ul>
                                    <div id="bar" class="progress progress-striped" role="progressbar">
                                        <div class="progress-bar progress-bar-success"></div>
                                    </div>
                                    <div class="tab-content">
                                        <div class="alert alert-danger display-none">
                                            <button class="close"
                                                    data-dismiss="alert"></button> {{ _t('register.formerrorscheck') }}
                                        </div>
                                        <div class="alert alert-success display-none">
                                            <button class="close" data-dismiss="alert"></button>
                                            {{_t('register.from_validation_success')}}!
                                        </div>

                                        <!-- Sponsor info tab start-->
                                        <div class="tab-pane" id="tab1">
                                            <h3 class="block">{{ _t('register.sponsordetails') }}</h3>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4 ">{{ _t('register.sponsor') }}
                                                    <span class="required" aria-required="true"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text"
                                                           @if($sponsorReadOnly == 'yes' && $sponsor) readonly
                                                           @endif value="{{ ($setDefaultSponsor == 'yes' && $sponsor) ?  $sponsor : null  }}"
                                                           data-action="verifySponsorMemberId"
                                                           class="form-control ajaxValidate" name="sponsor"
                                                           placeholder="{{ _t('register.enter_sponsor') }}">
                                                    <div class="sp-txt"></div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="placement_status" id="placement"
                                                   value="{{ $placement }}">
                                            <div @if(!$placement) style="display: none" @endif>
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-3 col-sm-4">{{ _t('register.placement') }}
                                                        <span class="required" aria-required="true"> * </span>
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" value="{{ $placement }}"
                                                               class="form-control ajaxValidatePlacement"
                                                               name="placement"
                                                               id="placement"
                                                               data-action="verifyPlacementMemberId">
                                                    </div>
                                                </div>
                                            </div>
                                            {!! defineFilter('registerFormPlacementInfo', '<div style="display: none">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-4">'. _t('register.position') .'
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" value="'. $position .'"
                                                               class="form-control" name="position">
                                                    </div>
                                                </div>
                                            </div>', 'root', $position) !!}
                                            @if(getConfig('registration','package_for_registration') == 'on')
                                                <h3 class="block">{{ _t('register.packagedetails') }}</h3>
                                                <div class="form-group pckageSelect pricing-content-2" style="margin: 0px;">
                                                    <div class="viewSwitcher">
                                                <span class="grid active">
                                                    <i class="fa fa-th"></i>
                                                </span>
                                                        <span class="list">
                                                    <i class="fa fa-list"></i>
                                                </span>
                                                    </div>
                                                    <div class="packageLoader col-md-12" style="padding: 0px;"></div>
                                                </div>
                                            @endif
                                        </div>
                                        <!-- Sponsor info tab end-->
                                        <!-- Personal info tab start-->
                                        <div class="tab-pane" id="tab2">
                                            <h3 class="block">{{ _t('register.accountdetails') }}</h3>
                                            @if(getConfig('registration','username_type') == 'static')
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-3 col-sm-4">{{ _t('register.username') }}
                                                        <span class="required"> * </span>
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" class="form-control ajaxValidate"
                                                               data-action="verifyUsername" name="username"
                                                               placeholder="{{ _t('register.enter_username') }}"/>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="row showSignUpPassBlock" style="margin: 0px;">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-3 col-sm-4">{{ _t('register.password') }}
                                                        <span class="required"> * </span>
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="password" class="form-control securePassword"
                                                               name="password"
                                                               id="submit_form_password"
                                                               placeholder="{{ _t('register.enter_password') }}"/>
                                                        <i class="fa fa-eye showPass-icon" id="togglePassword"></i>
                                                        <div id="securePassword-validation" style="display:none;  "></div>
                                                    </div>
                                                </div>
                                            </div>
                                             <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.confirm_password') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="password" class="form-control" id="confirmPassword"
                                                           name="confirm_password"
                                                           placeholder="{{ _t('register.enter_password_again') }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.email') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control ajaxValidate"
                                                           data-action="verifyEmail" name="email"
                                                           placeholder="{{ _t('register.enter_email') }}"/>
                                                </div>
                                            </div>

                                            {!! $htmlHelper->renderFieldGroup('account_details', 'registration_form', $customFieldOptions, true) !!}
                                        </div>
                                        <!-- Personal info tab end-->
                                        <!-- Profile info tab start-->
                                        <div class="tab-pane" id="tab3">
                                            <h3 class="block">{{ _t('register.provide_profile_details') }}</h3>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.first_name') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" name="firstname"
                                                           placeholder="{{ _t('register.enter_firstname') }}"
                                                           onkeypress="return /[0-9a-zA-Z ]/i.test(event.key)"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.last_name') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" name="lastname"
                                                           placeholder="{{ _t('register.enter_lastname') }}"
                                                           onkeypress="return /[0-9a-zA-Z ]/i.test(event.key)"/>
                                                </div>
                                            </div>
                                            {{--                                        <div class="form-group">--}}
                                            {{--                                            <label class="control-label col-md-3 col-sm-4">{{ _t('register.dob') }}--}}
                                            {{--                                                <span class="required"> * </span>--}}
                                            {{--                                            </label>--}}
                                            {{--                                            <div class="col-md-4 col-sm-5">--}}
                                            {{--                                                <div class="input-group input-medium date date-picker"--}}
                                            {{--                                                     data-date="10/11/2012" data-date-format="yyyy-mm-dd"--}}
                                            {{--                                                     data-date-end-date="-1d">--}}
                                            {{--                                                    <input type="text" class="form-control datePicker"--}}
                                            {{--                                                           name="dob">--}}
                                            {{--                                                    <span class="input-group-btn" style="vertical-align: top;">--}}
                                            {{--                                                <button class="btn default" type="button">--}}
                                            {{--                                                    <i class="fa fa-calendar"></i>--}}
                                            {{--                                                </button>--}}
                                            {{--                                            </span>--}}
                                            {{--                                                </div>--}}
                                            {{--                                            </div>--}}
                                            {{--                                        </div>--}}


                                            <div class="form-group dobBlock">
                                                <label class="control-label col-md-3 col-sm-4">{{ _t('register.dob') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <div class="row dob-bx">
                                                        <div class="col-md-4 col-sm-4 flex-reverse">
                                                            <select class="form-control select2" name="year" id="year">
                                                                <option value="" disabled
                                                                        selected>{{ _t('register.year') }}</option>
                                                                @for($year = date("Y"); $year >= 1924; $year--)
                                                                    <option value="{{ $year }}">{{ $year }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                        <div class="col-md-5 col-sm-5 flex-reverse">
                                                            <select class="form-control select2" name="month"
                                                                    id="month">
                                                                <option value="" disabled
                                                                        selected>{{ _t('register.month') }}</option>
                                                                @for($month = 1; $month <= 12; $month++)
                                                                    <option
                                                                        value="{{ $month }}">{{ date("F", mktime(0, 0, 0, $month, 1)) }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3 col-sm-3 flex-reverse">
                                                            <select class="form-control select2" name="day" id="day">
                                                                <option value="" disabled
                                                                        selected>{{ _t('register.day') }}</option>
                                                                @for($day = 1; $day <= 31; $day++)
                                                                    <option value="{{ $day }}">{{ $day }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.gender') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <div class="row radio-list">
                                                        <label class="col-md-6" style="margin-bottom: 5px;">
                                                            <input class="icheck" type="radio" name="gender"
                                                                   value="male"
                                                                   data-title="Male"
                                                                   checked="checked"/> {{ _t('register.male') }}
                                                        </label>
                                                        <label class="col-md-6" style="margin-bottom: 5px;">
                                                            <input class="icheck" type="radio" name="gender"
                                                                   value="female"
                                                                   data-title="Female"/> {{ _t('register.female') }}
                                                        </label>
                                                        <label class="col-md-6" style="margin-bottom: 5px;">
                                                            <input class="icheck" type="radio" name="gender"
                                                                   value="other"
                                                                   data-title="Other"/> {{ _t('register.other') }}
                                                        </label>
                                                        <label class="col-md-6" style="margin-bottom: 5px;">
                                                            <input class="icheck" type="radio" name="gender"
                                                                   value="prefer_not_to_say"
                                                                   data-title="PreferNotToSay"/> {{ _t('register.prefer_not') }}
                                                        </label>
                                                    </div>
                                                    <div id="form_gender_error"></div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.address') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" name="address"
                                                           placeholder="{{ _t('register.enter_address') }}"
                                                           onkeypress="return /[0-9a-zA-Z ]/i.test(event.key)"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.country') }}
                                                    <span class="required"> * </span>
                                                </label>

                                                <div class="col-md-4 col-sm-5">
                                                    <select name="country_id" id="country_list" class="form-control">
                                                        @foreach($countries as $country)
                                                            <option value="{{ $country['id'] }}"
                                                                    @if($defaultCountry && ($country['code'] == $defaultCountry) ) selected @endif>{{ $country['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div id="form_country_error"></div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.state') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <select name="state_id" id="state_list" class="form-control">

                                                    </select>
                                                    <div id="form_state_error"></div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-4">{{ _t('register.city') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" name="city"
                                                           placeholder="{{ _t('register.enter_city') }}"
                                                           onkeypress="return /[0-9a-zA-Z ]/i.test(event.key)"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-4">{{ _t('register.pin') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" name="pin"
                                                           placeholder="{{ _t('register.enter_pin') }}" type="number"
                                                           onkeypress="return /[0-9a-zA-Z]/i.test(event.key)"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('register.phone_number') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <div class="flex">
                                                        {{--                                                    <input type="text" class="form-control phn-small" id="phone_code"--}}
                                                        {{--                                                           name="phone_code"--}}
                                                        {{--                                                           readonly/>--}}
                                                        <input type="text" class="form-control phn-big" name="phone"
                                                               id="phone"
                                                               placeholder="{{ _t('register.enter_phone') }}"/>
                                                    </div>
                                                </div>
                                            </div>
                                            {!!  defineFilter('additionalFormField','','registration') !!}
                                            {!! $htmlHelper->renderFieldGroup('profile_setup', 'registration_form', $customFieldOptions, true) !!}
                                        </div>
                                        <!-- Profile info tab end-->
                                        <!-- Billing tab end-->
                                        <div class="tab-pane" id="tab4">
                                            <div class="row paymentInstruction">
                                                @if($registrationPackage == 'on')
                                                    <button type="button" class="btn grey orderSummaryButton">
                                                        <i class="fa fa-table"></i>{{_t('register.order_summary')}}
                                                    </button>
                                                @endif
                                                <button class="btn green order-review" type="button" data-toggle="modal"
                                                        href="#user_summary"><i class="fa fa-pencil-square-o"
                                                                                aria-hidden="true"></i> {{_t('register.review')}}
                                                </button>
                                            </div>
                                            @if($registrationPackage == 'on')
                                                <div class="orderSummary"></div>
                                            @endif
                                            <div class="paymentGatewaysWrapper"></div>
                                            <div id="user_summary" class="modal fade modal-scroll" tabindex="-1"
                                                 data-replace="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-hidden="true"></button>
                                                            <h4 class="modal-title">{{ _t('register.review_profile') }}</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.sponsor') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="sponsor"></p>
                                                                </div>
                                                            </div>
                                                            @if(getConfig('username','type') != 'dynamic')
                                                                <div class="form-group">
                                                                    <label
                                                                        class="control-label col-md-4 col-sm-5">{{ _t('register.username') }}
                                                                        :</label>
                                                                    <div class="col-md-5 col-sm-6">
                                                                        <p class="form-control-static"
                                                                           data-display="username"></p>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.email') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="email"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.first_name') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="firstname"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.last_name') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="lastname"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.gender') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="gender"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.phone_number') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="phone"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.address') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="address"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.city') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="city"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.country') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="country_id"></p>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label col-md-4 col-sm-5">{{ _t('register.state') }}
                                                                    :</label>
                                                                <div class="col-md-5 col-sm-6">
                                                                    <p class="form-control-static"
                                                                       data-display="state_id"></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" data-dismiss="modal"
                                                                    class="btn white btn-outline">{{_t('register.close')}}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-offset-3 col-md-9">
                                            <a href="javascript:" class="btn default button-previous">
                                                <i class="fa fa-angle-left"></i> {{ _t('register.back') }} </a>
                                            <a href="javascript:"
                                               class="btn btn-outline green button-next"> {{ _t('register.continue') }}
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="context" value="registration">
                        </form>
                        <!-- </form> -->
                    </div>
                </div>
            @else
                @include('Auth.Partials.registrationSuspended')
            @endif
        </div>
    </div>
    @if(getConfig('registration','registration_allowed'))
        @component('Components.Registration.cart', ['cartTotal' => $cartTotal]) @endcomponent
    @endif
    <style>
        body {
            /*background: #364150 !important;*/
            /*background: #000000 !important;*/
        }

        .flex-reverse {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }

        .row.showSignUpPassBlock .form-group {
            margin: 0px -15px 15px -15px;
            position: relative;
        }

        .row.showSignUpPassBlock .form-group i.showPass-icon {
            position: absolute;
            top: 10px;
            right: 22px;
            font-size: 14px;
        }

        .row.showSignUpPassBlock .form-group .input-icon {
            margin-bottom: 10px;
        }

        .row.showSignUpPassBlock .form-group .input-icon i.showPass-icon {
            position: absolute;
            top: 0px;
            right: 5px !important;
            font-size: 14px;
            left: auto !important;
        }

        /* For checked radio button - yellow */
        body.darkModeTheme .icheckbox_minimal-grey.checked,
        body.darkModeTheme .iradio_minimal-grey.checked {
            background-color: #e9b337 !important;
            border-color: #e9b337 !important;
            border-radius: 50% !important;
        }

        /* For hover state */
        body.darkModeTheme .icheckbox_minimal-grey.hover,
        body.darkModeTheme .iradio_minimal-grey.hover {
            border-color: #e9b337 !important;
        }

        /* Radio circle inside (checked dot) */
        body.darkModeTheme .iradio_minimal-grey.checked:before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        margin: 4px auto;
        border-radius: 50% !important;
        /* background: yellow !important; */
        }
    </style>
    <script type="text/javascript">
        "use strict";

        $(function () {
            securePasswordIndicator();
            if ('{{ $doneAlready }}' && '{{ $orderId }}')
                postRegistration({result: {orderId: Number('{{ $orderId }}')}});

            if ('{!! $placement !!}')
                window.placementValidate = true;

            $('select').select2({
                width: '100%'
            });

            var passwordInput = document.getElementById('submit_form_password');
            var togglePassword = document.getElementById('togglePassword');

            togglePassword.addEventListener('click', function () {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.classList.toggle('fa-eye-slash');
                this.classList.toggle('fa-eye');
            });
        });


    </script>
@endsection