@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
@endpush

@section('content')
    @php
        $registerMethod = getGeneralSettings('register_method') ?? 'mobile';
    @endphp

    <div class="container">
        <div class="row login-container">
            <div class="col-12 col-md-6 pl-0">
                <img src="{{ getPageBackgroundSettings('register') }}" class="img-cover" alt="Login">
            </div>
            <div class="col-12 col-md-6">
                <div class="login-card">
                    <h1 class="font-20 font-weight-bold">{{ trans('auth.signup') }}</h1>

                    <form method="post" action="/register" class="mt-35">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">

                        <div class="form-group">
                            <label class="input-label" for="full_name">{{ trans('auth.full_name') }}:</label>
                            <input name="full_name" type="text" value="{{ old('full_name') }}" class="form-control @error('full_name') is-invalid @enderror">
                            @error('full_name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        @if($registerMethod == 'mobile')
                            <div class="row">
                                {{-- <div class="col-5">
                                    <div class="form-group">
                                        <label class="input-label" for="mobile">{{ trans('auth.country') }}:</label>
                                        <select name="country_code" class="form-control select2">
                                            @foreach(getCountriesMobileCode() as $country => $code)
                                                <option value="{{ $code }}" @if($code == old('country_code')) selected @endif>{{ $country }}</option>
                                            @endforeach
                                        </select>

                                        @error('mobile')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div> --}}

                                <div class="col-12">
                                    <div class="form-group">
                                        <label class="input-label" for="mobile">{{ trans('auth.'.$registerMethod) }}:</label>
                                        <input name="mobile" maxlength="11" type="text" class="form-control @error('mobile') is-invalid @enderror"
                                               value="{{ old('mobile') }}" id="mobile" aria-describedby="mobileHelp">
                                        @error('mobile')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="form-group">
                                <label class="input-label" for="email">{{ trans('auth.'.$registerMethod) }}:</label>
                                <input name="email" type="text" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email') }}" id="email" aria-describedby="emailHelp">

                                @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        @endif

                        <div class="form-group">
                            <label class="input-label" for="cities">{{ trans('auth.cities') }}:</label>
                            <select name="city_id" class="form-control select2 @error('city_id') is-invalid @enderror">
                                <option disabled selected>{{ trans('admin/main.select') }}</option>
                                @foreach( \App\Models\Region::where('type','city')->get(['id', 'title']) as $city)
                                    <option value="{{ $city->id }}">{{ $city->title }}</option>
                                @endforeach
                            </select>

                            @error('city_id')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="input-label" for="groups">{{ trans('auth.groups') }}:</label>
                            <select name="group_id" class="form-control select2 @error('group_id') is-invalid @enderror">
                                <option disabled selected>{{ trans('admin/main.select') }}</option>
                                @foreach( \App\Models\Group::where('status', 'active')->get(['id','name']) as $group)
                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                @endforeach
                            </select>

                            @error('group_id')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <div class="custom-control custom-checkbox pt-2 pb-3">
                                    <input type="checkbox" name="organ_type"  onclick="onlineChanged()" value="online" checked class="custom-control-input" id="online">
                                    <label class="custom-control-label font-14" for="online">{{ trans('auth.online') }}
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="custom-control custom-checkbox pt-2">
                                    <input type="checkbox" onclick="centerChanged()" name="organ_type" value="center" class="custom-control-input" id="organization">
                                    <label class="custom-control-label font-14" for="organization">{{ trans('auth.organization') }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group d-none" id="organizations">
                            <label class="input-label" for="organization">{{ trans('admin/main.organizations') }}:</label>
                            <select name="organ_id" class="form-control select2 @error('organ_id') is-invalid @enderror">
                                <option disabled selected>{{ trans('admin/main.select') }}</option>
                                @foreach( \App\User::where('role_id', 3)->get(['id','full_name'])->except([2]) as $organization)
                                    <option value="{{ $organization->id }}">{{ $organization->full_name }}</option>
                                @endforeach
                            </select>

                        </div>
                        @error('organ_id')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                        <div class="form-group">
                            <label class="input-label" for="password">{{ trans('auth.new_password') }}:</label>
                            <div class="input-icon">
                            <input name="password" type="password"
                                   class="form-control passwords @error('password') is-invalid @enderror" id="password"
                                   aria-describedby="passwordHelp">
                                   <span toggle="#loginPassword" class="fa fa-fw fa-eye field-icon toggle-password passwords"></span>
                            </div>
                            @error('password')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="form-group ">
                            <label class="input-label" for="confirm_password">{{ trans('auth.retype_password') }}:</label>
                            <div class="input-icon">
                            <input name="password_confirmation" type="password"
                                   class="form-control @error('password_confirmation') is-invalid @enderror" id="confirm_password"
                                   aria-describedby="confirmPasswordHelp">

                                   <span toggle="#loginPassword" class="fa fa-fw fa-eye field-icon toggle-password conferm"></span>

                            </div>
                            @error('password_confirmation')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        @if(getFeaturesSettings('timezone_in_register'))
                            @php
                                $selectedTimezone = getGeneralSettings('default_time_zone');
                            @endphp

                            <div class="form-group">
                                <label class="input-label">{{ trans('update.timezone') }}</label>
                                <select name="timezone" class="form-control select2" data-allow-clear="false">
                                    <option value="" {{ empty($user->timezone) ? 'selected' : '' }} disabled>{{ trans('public.select') }}</option>
                                    @foreach(getListOfTimezones() as $timezone)
                                        <option value="{{ $timezone }}" @if($selectedTimezone == $timezone) selected @endif>{{ $timezone }}</option>
                                    @endforeach
                                </select>
                                @error('timezone')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        @endif

                        @if(!empty($referralSettings) and $referralSettings['status'])
                            <div class="form-group ">
                                <label class="input-label" for="referral_code">{{ trans('financial.referral_code') }}:</label>
                                <input name="referral_code" type="text"
                                       class="form-control @error('referral_code') is-invalid @enderror" id="referral_code"
                                       value="{{ !empty($referralCode) ? $referralCode : old('referral_code') }}"
                                       aria-describedby="confirmPasswordHelp">
                                @error('referral_code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        @endif


                        {{-- <div class="custom-control custom-checkbox">
                            <input type="checkbox" name="term" value="1" {{ (!empty(old('term')) and old('term') == '1') ? 'checked' : '' }} class="custom-control-input @error('term') is-invalid @enderror" id="term">
                            <label class="custom-control-label font-14" for="term">{{ trans('auth.i_agree_with') }}
                                <a href="pages/terms" target="_blank" class="text-secondary font-weight-bold font-14">{{ trans('auth.terms_and_rules') }}</a>
                            </label>

                            @error('term')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        @error('term')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                        --}}
                         <button type="submit"
                                class="btn btn-primary btn-block mt-20">{{ trans('auth.signup') }}</button> 
                    </form>

                    <div class="text-center mt-20">
                        <span class="text-secondary">
                            {{ trans('auth.already_have_an_account') }}
                            <a href="/login" class="text-secondary font-weight-bold">{{ trans('auth.login') }}</a>
                        </span>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    

    <script>
        function centerChanged()
        {
            let organization = $('#organization');
            let organizations = $('#organizations');
            let online = $('#online');
            if(organization.is(":checked")){
                organizations.removeClass('d-none');
                organizations.show();
                online.prop('checked',false);
            }else{
                organizations.hide();
                online.prop('checked',true);
            }
        }
        function onlineChanged()
        {
            let organization = $('#organization');
            let organizations = $('#organizations');
            let online = $('#online');
            if(online.is(":checked")){
                organizations.addClass('d-none');
                organization.prop('checked',false);
            }else{
                organization.prop('checked',true);
                organizations.show();
                organizations.removeClass('d-none');

            }
        }
        $(".toggle-password.passwords").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if ($('.passwords').attr("type") == "password") {
    $('.passwords').attr("type", "text");
} else {
    $('.passwords').attr("type", "password");
}
});

$(".toggle-password.conferm").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if ($('#confirm_password').attr("type") == "password") {
    $('#confirm_password').attr("type", "text");
} else {
    $('#confirm_password').attr("type", "password");
}
});
    </script>
@endpush