@extends('Frontend.partials.layout')
@php
    $user = getUserDetails();
@endphp
@section('styles')
    <link rel="stylesheet" href="{{ asset('/vendor/libs/select2/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('/vendor/css/pages/users.css') }}">

    <style>
        .timezone-select{
            width: 100%;
        }
        
        .timezone-select .select2.select2-container.select2-container--default{
            min-width: 100% !important;
        }

        #addUserForm .error{
            border-color: #d9534f !important;
            color: #d9534f;
        }

        .first-name-container,
        .last-name-container,
        .birthday-container,
        .birth-place-container,
        .company-type-container,
        .company-name-container,
        .establishment-date-container,
        .foundation-place-container,
        .animal-type-container,
        .animal-name-container,
        .animal-birth-date-container,
        .animal-birth-place-container,
        .house-type-container,
        .house-name-container,
        .construction-date-container,
        .house-location-container{
            margin-bottom: 1rem;
        }
    </style>
@endsection

@section('content')

{{-- Main Section --}}
<section class="user custom_user">
    {{-- analysis content header--}}
    <div class="row">
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{ __('action.add_user') }}</h2>
                    <p>{{ brandName() }} {{trans('action.user')}}</p>
                </div>
            </div>
        </div>
    </div>
    {{-- \analysis content header--}}

    {{-- analysis content body --}}
    <form id="addUserForm" action="{{route('users.store')}}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row mt-3">
            <div class="col-md-12">
                {{-- tabs --}}
                <div class="nav-tabs-top">
                    {{-- navs tabs --}}
                    <div class="card">
                        {{-- card header --}}
                        <div class="card-header">
                            <div class="media align-items-center">
                                    <img data-view="true" src="{{ asset('images/avatar.png') }}" alt="" class="d-block ui-w-80 image_viewer" id="upimgtest">
                                    <div class="media-body ml-3">
                                        <label class="form-label d-block mb-2">{{ __('action.profile_picture') }}</label>
                                        <label class="btn btn-outline-primary">
                                            <i class="fas fa-cloud-upload-alt">&nbsp;</i>{{ __('action.addImage') }}
                                            <input class="user-edit-fileinput cropper_image_file" id="upphoto" type="file" value="{{old('photo')}}" name='photo' accept=".jpg,.jpeg,.png" />
                                        </label>
                                    </div>
                                    <input type="hidden" class="image_file_name" name="cropper_image_name" value="">
                            </div>
                            <div class="cropper_show">

                            </div>
                        </div>
                        {{-- card section --}}
                        <div class="card-body">
                            <div class="row">
                                {{-- col-6 --}}
                                <div class="col-md-6 col-sm-12">
                                    {{-- basic information --}}
                                    <div class="box mb-4 slBox" >
                                        <div class="box-header">
                                            <h2>{{ __('action.user_basic_information') }}</h2>
                                        </div>
                                        <div class="box-body">
                                            <div class="box-caption mb-2">{{ __('action.basic_info_for', ['siteName' => env('APP_NAME')]) }}
                                            </div>
                                            <div class="row">

                                                {{-- user type select box --}}
                                                <div class="form-group form-inline col-md-12">
                                                    <label class="form-label lb-100 mb-2 col-md-12 pl-0">{{ trans('action.user_type_title') }}<span class="text-danger" title="This field is required">*</span></label>
                                                    
                                                    <select class="form-control m-0 col-md-12" name="user_type_select" id="user_type_select">
                                                        <option value="1">{{ __('action.user_type_1') }}</option>
                                                        <option value="2">{{ __('action.user_type_2') }}</option>
                                                        <option value="3">{{ __('action.user_type_3') }}</option>
                                                        <option value="4">{{ __('action.user_type_4') }}</option>
                                                        <option value="5">{{ __('action.user_type_5') }}</option>
                                                    </select>

                                                    {{-- <span class="text-danger small" role="alert">
                                                        <strong></strong>
                                                    </span> --}}
                                                </div>

                                                <div class="col-sm-12 row gender-container mx-0 px-0">
                                                    <div class="form-group form-inline col-md-12">
                                                        <div class="col-md-3 pl-0">
                                                            <label class="form-label lb-100 mb-2 pl-0" for="">{{__('action.gender')}}<span class="text-danger" title="This field is required">*</span></label>
                                                        </div>

                                                        <div class="col-md-9 gender-radio-contaienr">
                                                            <div class="col-md-3">
                                                                <input class="form-check-input gender" type="radio" {{!empty(old('gender')) && old('gender')== "1" ? "checked" : ""}} name="gender"  id="exampleRadios1" value="1">{{__('action.male')}}
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input class="form-check-input gender" type="radio"{{!empty(old('gender')) && old('gender')== "2" ? "checked" : ""}} name="gender"  id="exampleRadios2" value="2"> {{__('action.female')}}
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input class="form-check-input gender" type="radio" {{!empty(old('gender')) && old('gender')== "3" ? "checked" : ""}} name="gender"  id="exampleRadios3" value="3"> {{__('action.other')}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if ($errors->has('gender'))
                                                    <span class="text-danger small" role="alert">
                                                        <strong>{{ $errors->first('gender') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>

                                                <div class="form-group form-inline col-md-12" id="ut-input-container">
                                                    {{-- no select user type start --}}
                                                    <div class="col-md-6 pl-0 first-name-container home-default">
                                                        <label class="form-label mb-2 col-md-12 pl-0">{{ __('action.first_name_1') }}<span class="text-danger" title="This field is required">*</span></label>
                                                        <input type="text" value="{{old('first_name')}}" id="first_name" onchange="usernameFunc(this)" class="form-control m-0 col-md-12 user-type-input" autocomplete="off" placeholder="{{ __('action.first_name_1') }}" name="first_name">
                                                        
                                                        <span class="text-danger small" role="alert">
                                                            <strong></strong>
                                                        </span>
                                                    </div>

                                                    <div class="col-md-6 pr-0 last-name-container">
                                                        <label class="form-label mb-2 col-md-12 pl-0">{{ __('action.last_name_1') }}<span class="text-danger" title="This field is required">*</span></label>
                                                        <input type="text" value="{{old('last_name')}}" id="last_name" onchange="usernameFunc(this)" class="form-control m-0 col-md-12 user-type-input" autocomplete="off" placeholder="{{ __('action.last_name_1') }}" name="last_name">
                                                        
                                                        <span class="text-danger small" role="alert">
                                                            <strong></strong>
                                                        </span>
                                                    </div>

                                                    <div class="col-md-6 pl-0 birthday-container">
                                                        <label class="form-label mb-2 col-md-12 pl-0" for="">{{__('action.birthday_1')}}<span class="text-danger" title="This field is required">*</span></label>
                                                        <input type="text" id="datePicker" autocomplete="off" data-user-type="default" class="form-control m-0 datef col-md-12 gebdatum datePicker user-type-input" name="gebdatum" placeholder="dd.mm.yyyy" value="{{old('gebdatum')}}">
                                                        
                                                        <span class="text-danger small" role="alert">
                                                            <strong></strong>
                                                        </span>
                                                    </div>

                                                    <div class="col-md-6 pr-0 birth-place-container">
                                                        <label class="form-label mb-2 col-md-12 pl-0" for="">{{ __('action.place_of_birth_1') }}<span class="text-danger" title="This field is required">*</span></label>
                                                        <input type="text" value="{{old('gebort')}}" class="form-control m-0 user-type-input col-md-12" name="gebort" id="gebort" placeholder="{{ __('action.place_of_birth_1') }}">
                                                        
                                                        <span class="text-danger small" role="alert">
                                                            <strong></strong>
                                                        </span>
                                                    </div>
                                                    {{-- no select user type end --}}
                                                </div>

                                                @if(\Auth::user()->user_type != 1)
                                                    <div class="form-group form-inline col-md-12">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.address_pdf') }}</label>
                                                        <input type="text" value="{{old('address')}}" id="adress-residance" class="form-control m-0 col-md-12" name="address" placeholder="{{ __('action.street_placeholder') }}">
                                                    </div>

                                                    <div class="form-group form-inline col-md-6">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.postcode') }}</label>
                                                        <input type="text" value="{{old('post_code')}}" class="form-control m-0  col-md-12" name="post_code" placeholder="{{ __('action.postcode_placeholder') }}">
                                                    </div>

                                                    <div class="form-group form-inline col-md-6 bf-primary">
                                                        <label class="form-label l-100 mb-2 col-md-12 pl-0" for="">{{__('action.address')}}</label>
                                                        <input type="text" value="{{old('village')}}" class="form-control m-0 col-md-12" name="village" placeholder="{{__('action.address')}}">
                                                    </div>
                                                    <div class="form-group form-inline col-md-6">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.timezone') }}</label>
                                                        <select class="select2-demo form-control m-0 col-md-12" name="timezone" id="selectview">
                                                            <option disabled selected>{{__('action.Select')}}</option>

                                                            @foreach ($timezones as $zone)
                                                                <option value="{{$zone->timezone}}">{{$zone->name}}</option>
                                                            @endforeach
                                                        </select>

                                                    </div>
                                                    <div class="form-group form-inline col-md-6">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.display_name') }}</label>
                                                        <select class="form-control m-0 col-md-12" name="name_sort" id="selectview">
                                                            <option value="0" {{!empty(old('name_sort')) && old('name_sort')== 0 ? "Selected" : ""}}>{{__('action.first_name')}}/{{__('action.last_name')}}({{__('action.sort_default')}})</option>
                                                            <option value="1" {{!empty(old('name_sort')) && old('name_sort')== 1 ? "Selected" : ""}}>{{__('action.last_name')}}/{{__('action.first_name')}}</option>
                                                        </select>
                                                    </div>
                                                    @if (checkCron(getAuthID())==1)
                                                        <div class="form-group form-inline col-md-6">
                                                            <label class="form-label lb-100 mb-2 col-md-12 pl-0 ">{{__('action.mail_send_email')}}</label>
                                                            <input onfocus="this.type='email'" onfocusout="validateAndChangeType(this)" autocomplete="off" class="form-control m-0 col-md-12" placeholder="{{__('action.mail_send_email')}}" name="cron_email">
                                                            @if ($errors->has('cron_email'))
                                                            <span class="text-danger small" role="alert">
                                                                <strong>{{ $errors->first('cron_email') }}</strong>
                                                            </span>
                                                            @endif
                                                        </div>
                                                    @endif

                                                    <div class="form-group form-inline col-md-6">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{__('action.telephone_number')}}</label>
                                                        <input type="text" class="form-control m-0 col-md-12" name="telephone" placeholder="{{__('action.telephone_number')}}" value="{{ old('telephone') }}">
                                                    </div>
                                                    @php
                                                        $groupIDS = getCollectionArrayForStaff(Auth::user()->staffInGorup);
                                                    @endphp
                                                    @if (checkOwn(getAuthID())==1)
                                                        <div class="form-group form-inline col-md-6">
                                                            <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.groups') }}</label>
                                                            <select class="form-control m-0 group-id col-md-12" data-allow-clear="true" name="group_id" >
                                                                <option disabled selected>{{__('action.select_group')}}</option>
                                                                @if(Auth::user()->user_type != 4)
                                                                <option @if(\Auth::user()->managelimitation->max_staff == 0 OR count(\Auth::user()->staffs) >= \Auth::user()->managelimitation->max_staff) disabled @endif value="staff">{{__('action.staff')}}</option>
                                                                @endif
                                                                @foreach ($groups as $group)
                                                                    @continue(!in_array($group->id,$groupIDS) && Auth::user()->user_type == 4)
                                                                    <option @if(Auth::user()->user_type === 4) selected @endif value="{{$group->id}}" {{!empty(old('group_id')) && old('group_id')==$group->id ? "Selected" : ""}}>{{$group->group_name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    @endif
                                                @elseif (checkCron(getAuthID())==1)
                                                    <div class="form-group form-inline col-md-6 email-validation">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0 ">{{__('action.mail_send_email')}}</label>
                                                        <input onfocus="this.type='email'" onfocusout="validateAndChangeType(this)" autocomplete="off" class="form-control m-0 col-md-12" placeholder="{{__('action.mail_send_email')}}" name="cron_email">
                                                        @if ($errors->has('cron_email'))
                                                        <span class="text-danger small" role="alert">
                                                            <strong>{{ $errors->first('cron_email') }}</strong>
                                                        </span>
                                                        @endif
                                                    </div>
                                                    
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- col-6 --}}
                                <div class="col-md-6 col-sm-12">
                                    {{-- user login --}}
                                    <div class="box mb-4 slBox">
                                        <div class="box-header d-inline-flex col-md-12">
                                            <h2>{{ __('action.user_login') }}</h2> 
                                            <button class="ml-auto" onclick="$('#login-creadential').removeClass('hide');$(this).remove();" onfocusout="this.type='text'"><i class="fas fa-plus"></i></button>
                                                                                       
                                        </div>
                                        <div class="box-body hide" id="login-creadential">
                                            <div class="box-caption mb-2">{{ __('action.setting_for_user_login', ['siteName' => env('APP_NAME')]) }}</div>
                                            <div class="row">
                                                <div class="form-group form-inline col-md-12">
                                                    <label class="form-label lb-100 mb-2 col-md-12 pl-0">{{ __('action.email') }}</label>
                                                    <input type="email" autocomplete="off" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }} m-0 col-md-6" placeholder="{{__('action.email_blank_error')}}" onchange="userEmailFunc(this)" name="email">
                                                    <p class="note mt-1 col-md-12 pl-0">{{ __('action.never_share') }}</p>
                                                    @if ($errors->has('email'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('email') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group form-inline col-md-6 ">
                                                    <label class="form-label lb-100 mb-2 col-md-12 pl-0">{{ __('action.user_login_name') }}<span class="text-danger" title="This field is required">*</span></label>
                                                    <input type="text" onchange="usernameFunc(this)" value="{{old('user_name')}}" id="user_name" class="form-control m-0 col-md-12" autocomplete="new-username" placeholder="{{ __('action.user_login_name') }}" name="user_name">
                                                    @if ($errors->has('user_name'))
                                                        <span class="text-danger small" role="alert">
                                                            <strong>{{ $errors->first('user_name') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>

                                                <div class="form-group form-inline col-md-6  col-sm-12 pr-0 password-form-group password-container">
                                                    <label class="form-label lb-100 mb-2 col-md-12 pl-0">{{ __('action.password') }}<span class="text-danger" title="This field is required">*</span></label>
                                                    <div class="pass-input-container">
                                                        <input type="text" name="password" autocomplete="new-password" id="passwordField" value="{{ empty(old('password')) ? $password : old('password') }}" class="password-field form-control" placeholder="{{  __('action.password') }}">
                                                    </div>
                                                    <div class="input-group-append m-0">
                                                      <span class="input-group-text eye-icon-btn">
                                                        <i class="fa fa-eye-slash toggle-icon"></i>
                                                      </span>
                                                    </div>
                                                    @if ($errors->has('password'))
                                                        <span class="text-danger small" role="alert">
                                                            <strong>{{ $errors->first('password') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>

                                    {{-- user setting --}}
                                    <div class="box mb-4 slBox">
                                        <div class="box-header">
                                            <h2>{{__('action.user_settings')}}</h2>
                                        </div>
                                        <div class="box-body">
                                            <div class="box-caption mb-2">{{__('action.setting_for_view')}}</div>
                                            <div class="row">
                                                <div class="form-group form-inline col-md-6">
                                                    <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{__('action.language')}}</label>
                                                    <select class="form-control m-0 col-md-12" name="language_id" id="languageSelect">
                                                        @foreach ($languages as $language)
                                                        <option value="{{$language->id}}" {{!empty(old('language_id')) && old('language_id')==$language->id ? "Selected" : ""}} @if($user->language_id == $language->id) {{ 'selected' }} @endif>{{$language->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @if(\Auth::user()->user_type != 1)
                                                    <div class="form-group form-inline col-md-6">
                                                        <label class="form-label lb-100 mb-2 col-md-12 pl-0" for="">{{ __('action.select_filter') }}</label>
                                                        <select class="form-control m-0 col-md-12" name="filter_type" id="selectview">
                                                            <option value="1" {{!empty(old('filter_type')) && old('filter_type')== "1" ? "Selected" : ""}}>A-Z</option>
                                                            <option value="2" {{!empty(old('filter_type')) && old('filter_type')== "2" ? "Selected" : ""}}>Z-A</option>
                                                            <option value="3" {{empty(old('filter_type')) ? "Selected" : ""}} {{!empty(old('filter_type')) && old('filter_type')== "3" ? "Selected" : ""}}>1-100</option>
                                                            <option value="4" {{!empty(old('filter_type')) && old('filter_type')== "4" ? "Selected" : ""}}>100-1</option>
                                                            <option value="5" {{!empty(old('filter_type')) && old('filter_type')== "5" ? "Selected" : ""}}>Show All</option>
                                                        </select>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="row">
                                                @if(\Auth::user()->user_type != 1)
                                                    <div class="form-group form-inline col-md-12">
                                                        <label class="form-label l-100-px " for="">{{ __('action.dashboard_options') }}</label>
                                                        <label class="custom-control custom-checkbox" style="width: auto;">
                                                            <input type="checkbox" class="custom-control-input square" name="dashboard_view" id="selectview" checked>
                                                            <span class="custom-control-label">{{__('action.show_per_default')}}</span>
                                                        </label>
                                                    </div>
                                                    <div class="form-group form-inline col-md-12">
                                                        <label class="form-label l-100-px " for="">{{__('action.Sound')}}</label>
                                                        <label class="custom-control custom-checkbox" style="width: auto;">
                                                            <input type="checkbox" class="custom-control-input square" name="sound" checked>
                                                            <span class="custom-control-label">{{__('action.play_audio')}}</span>
                                                        </label>
                                                    </div>

                                                    <div class="form-group form-inline col-md-12">
                                                        <label class="form-label l-100-px " for="">{{__('action.pattern_switch')}}</label>
                                                        <label class="custom-control custom-checkbox" style="width: auto;">
                                                        <input type="checkbox" class="custom-control-input square" name="pattern_switch">
                                                            <span class="custom-control-label">{{__('action.switch_button')}}</span>
                                                        </label>
                                                    </div>

                                                    <div class="form-group form-inline col-md-12">
                                                        <label class="form-label l-100-px " for="">{{ __('action.pattern_analysis') }}</label>
                                                        <label class="custom-control custom-checkbox" style="width: auto;">
                                                            <input type="checkbox" class="custom-control-input square" name="ran_ana">
                                                            <span class="custom-control-label">{{__('action.show_per_default_random')}}</span>
                                                        </label>
                                                    </div>
                                                    @if (checkTherapist(getAuthID())==2)
                                                        <div class="form-group form-inline col-md-12">
                                                            <label class="form-label l-100-px " for="">{{ __('action.cover_pdf') }}</label>
                                                            <label class="custom-control custom-checkbox" style="width: auto;">
                                                                <input type="checkbox" class="custom-control-input square" name="view_pdf">
                                                                <span class="custom-control-label"> {{ __('action.cover_pdf') }}</span>
                                                                {{-- <input type="file" class="form-control m-0" name="cover_pdf" accept=".pdf, .PDF"> --}}
                                                            </label>
                                                        </div>
                                                    @endif
                                                @endif

                                                <div class="form-group form-inline col-md-12">
                                                    <label class="form-label l-100-px mb-2 pl-0" for="">{{__('action.terms_of_use')}}<span class="text-danger" style="font: bold" title="This field is required">*</span></label>
                                                    <label class="custom-control custom-checkbox" href="javascript:void(0);" >
                                                        <input type="checkbox" id="termsCondition" onclick="termsConditionText()" class="custom-control-input" name="terms" /><span class="custom-control-label"> {{__('action.gdpr_checkbox')}} </span></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- save & cancel button --}}
                                <div class="col-md-12 col-sm-12">
                                    <div class="text-right pb-2">
                                        <div class="col button-demo pull-right">
                                            <button class="btn btn-primary  ladda-button" id="savebtn" data-style="expand-right" title="{{__('action.accept_terms_condition')}}" disabled>
                                                <span class="ladda-label">{{__('action.save')}} </span><span class="ladda-spinner"></span>
                                                <div class="ladda-progress" style="width: 121px;"></div>
                                            </button>
                                            <a href="{{route('users.users')}}"><button type="button" class="btn btn-default">{{ __('action.cancel') }}</button></a>
                                        </div>
                                        {{-- <button type="submit" id="savebtn" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="{{__('action.accept_terms_condition')}}" disabled>{{ __('action.save') }}</button>&nbsp; --}}

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- navs tabs /--}}
                </div>
                {{-- \tabs --}}
            </div>
        </div>
    </form>
    {{-- /analysis content body --}}
</section>
{{-- /Main Section --}}

@endsection


@section('scripts')
    <!-- Dependencies -->
    <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('/js/pages_users_edit.js') }}"></script>
    <script src="{{ asset('/vendor/js/jquery-ui.js') }}"></script>
    <script src="{!! asset('/js/dateformat.js') !!}"></script>

    <script>
        // Select2
        $(function() {
            $('.select2-demo').each(function() {
                $(this)
                .wrap('<div class="position-relative timezone-select" id="timezone-select-wrapper"></div>')
                .select2({
                    dropdownParent: $(this).parent()
                });
            })
        });

        function togglePasswordField() {
            var passwordField = document.getElementById("passwordField");
            var toggleIcon = document.getElementById("toggleIcon");

            if (passwordField.type === "password") {
                passwordField.type = "text";
                toggleIcon.classList.remove("fa-eye-slash");
                toggleIcon.classList.add("fa-eye");
            } else {
                passwordField.type = "password";
                toggleIcon.classList.remove("fa-eye");
                toggleIcon.classList.add("fa-eye-slash");
            }
        }

        // user type
        $(document).ready(function(){
            $('[name="email"]').val('')
            $('[name="user_name"]').val('')
            
            $("#user_type_select").change(function () {
                // load user type inputs
                $.ajax({
                    type : 'GET',
                    url : "{{ route('users.check-user-type') }}",
                    success : function(data){
                        $("#ut-input-container").empty();
                        $("#ut-input-container").append(data);
                    },
                    data : {
                        selectedType: $(this).val(),
                        firstName: "{{old('first_name')}}",
                        lastName: "{{old('last_name')}}",
                        birthday: "{{old('gebdatum')}}",
                        placeOfBirth: "{{old('gebort')}}",
                    }
                });
            });

            // load user type inputs
            $.ajax({
                type : 'GET',
                url : "{{ route('users.check-user-type') }}",
                success : function(data){
                    $("#ut-input-container").empty();
                    $("#ut-input-container").append(data);
                },
                data : {
                    selectedType: $("#user_type_select option:selected").val(),
                    firstName: "{{old('first_name')}}",
                    lastName: "{{old('last_name')}}",
                    birthday: "{{old('gebdatum')}}",
                    placeOfBirth: "{{old('gebort')}}",
                }
            });

            // toggle password field
            $(".eye-icon-btn").click(function () {
                const targetedToggleIcon = $(this).children('.toggle-icon');
                const targetedPassField = $(this).parent().prev('.pass-input-container').children('.password-field');
                togglePasswordField(targetedToggleIcon, targetedPassField);
            });

            function togglePasswordField(toggleIcon, passField) {
                if (passField.attr("type") === "password") {
                    passField.attr("type", "text");
                    toggleIcon.removeClass("fa-eye-slash");
                    toggleIcon.addClass("fa-eye");
                } else {
                    passField.attr("type", "password");
                    toggleIcon.removeClass("fa-eye");
                    toggleIcon.addClass("fa-eye-slash");
                }
            }
        });
    </script>
    {{-- @include('JSBlade.BJsblade') --}}


    <style>
        .email-validation {
            position: relative;
        }

        .email-validation .email-validation-sign {
            position: absolute;
            right: -2px;
            font-size: 13px;
            margin-top: 27px;
        }
        button#savebtn.disable-wrong-email {
            pointer-events: none;
            opacity: .5;
        }
        .email-validation.ulev .small.email-validation-sign {
            right: calc(50% - 15px);
            top: 9px;
        }
    </style>

    <script>
        function validateAndChangeType(input) {
        // Get the input value
        $('.email-validation-sign').remove();
        $('button#savebtn').removeClass('disable-wrong-email');
        var email = input.value;
        
        // Check if the input is blank
        if (email.trim() === '') {
            return; // exit the function if the input is blank
        }
        
        // Check if '@' and '.' exist in the email
        if (email.includes('@') && email.includes('.')) {
            // Valid email
            input.type = 'text';
            $('.email-validation').append(
            `<span class="text-success small email-validation-sign" role="alert">
                <i class="fa fa-check"></i>
            </span>`
            );
        } else {
            // Invalid email, change type back to text
            input.type = 'text';
        
            $('.email-validation').append(
            `<span class="text-danger small email-validation-sign" role="alert">
                <i class="fa fa-times"></i>
            </span>`
            );

            $('button#savebtn').addClass('disable-wrong-email');
            

        }
        }
        </script>

@endsection