@extends('web.layouts.container')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection

@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('packages.register_new_account')}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('users.new_register')}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="register">
        <div class="container">
            <div class="col-lg-10 col-md-10 m-auto">
                <div class="register-card ">
                    <h5>{{__('users.new_register')}}</h5>
                    <form method="post" action="{{route('userMemberRegister')}}" enctype="multipart/form-data" class="register_form">
                        @csrf()
                        <div class="row pt-5">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.first_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="first_name" class="form-control" placeholder="{{__('users.first_name')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.second_name')}}</label>
                                    <input type="text" name="second_name" class="form-control" placeholder="{{__('users.second_name')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.family_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="family_name" class="form-control" placeholder="{{__('users.family_name')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.title')}}</label>
                                    <input type="text" name="title" class="form-control" placeholder="{{__('users.title')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.birth_date')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="date" name="birth_date" class="form-control" placeholder="{{__('users.birth_date')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.gender')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="gender" class="form-control">
                                        <option value="">{{__('users.gender')}}</option>
                                        <option value="male">{{__('users.male')}}</option>
                                        <option value="female">{{__('users.female')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.nationality')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="nationality_id" class="form-control">
                                        <option value="">{{__('users.nationality')}}</option>
                                        @if($nationalities->count())
                                            @foreach($nationalities as $nationality)
                                                <option value="{{$nationality->id}}">{{$nationality->name}}</option>
                                            @endforeach
                                        @endif

                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.country_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="country_id" class="form-control countries" data-cities=".city_id">
                                        <option value="">{{__('users.country')}}</option>
                                        @if($countries->count())
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.city_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="city_id" class="form-control city_id">
                                        <option value="">{{__('users.city_id')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                <div class="form-group">
                                    <label for="">{{__('users.build_no')}}</label>
                                    <input type="text" name="build_no" class="form-control" placeholder="{{__('users.build_no')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                <div class="form-group">
                                    <label for="">{{__('users.street_zone')}}</label>
                                    <input type="text" name="street_zone" class="form-control" placeholder="{{__('users.street_zone')}}"/>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.class_number')}}</label>
                                    <input type="text" name="class_number" class="form-control" placeholder="{{__('users.class_number')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.degree')}}</label>
                                    <select data-other=".other_degree" name="degree" class="form-control">
                                        <option value="">{{__('users.degree')}}</option>
                                        <option value="diploma">{{__('users.diploma')}}</option>
                                        <option value="bachelor">{{__('users.bachelor')}}</option>
                                        <option value="ma">{{__('users.ma')}}</option>
                                        <option value="phd">{{__('users.phd')}}</option>
                                        <option value="other">{{__('users.other')}}</option>
                                    </select>
                                </div>
                                <div class="form-group d-none other_degree"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="other_degree" class="form-control" placeholder="{{__('users.other_degree')}}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.email')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="email" name="email" class="form-control" placeholder="{{__('users.email')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.email_confirmation')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="email" name="email_confirmation" class="form-control" placeholder="{{__('users.email_confirmation')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.phone')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="tel" name="phone" class="form-control" placeholder="{{__('users.phone')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.graduation_date')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="date" name="graduation_date" class="form-control" placeholder="{{__('users.graduation_date')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.general_speciality')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select data-other=".other_general_speciality" name="general_speciality" class="form-control">
                                        <option value="">{{__('users.general_speciality')}}</option>
                                        <option value="dental_technology">{{__('users.dental_technology')}}</option>
                                        <option value="other">{{__('users.other')}}</option>
                                    </select>
                                </div>
                                <div class="form-group d-none other_general_speciality">  <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="other_general_speciality" class="form-control" placeholder="{{__('users.general_speciality')}}">
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.job_status')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select data-other=".other_job_status" name="job_status" class="form-control">
                                        <option value="">{{__('users.job_status')}}</option>
                                        <option value="public_employee">{{__('users.public_employee')}}</option>
                                        <option value="private_employee">{{__('users.private_employee')}}</option>
                                        <option value="self_employee">{{__('users.self_employee')}}</option>
                                        <option value="unemployed">{{__('users.unemployed')}}</option>
                                        <option value="other">{{__('users.other')}}</option>
                                    </select>
                                </div>
                                <div class="form-group d-none other_job_status"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="other_job_status" class="form-control" placeholder="{{__('users.other_job_status')}}">
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.specialization')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select data-other=".other_specialization" name="specialization" class="form-control">
                                        <option value="">{{__('users.specialization')}}</option>
                                        <option value="fixed_fixtures">{{__('users.fixed_fixtures')}}</option>
                                        <option value="unfixed_fixtures">{{__('users.unfixed_fixtures')}}</option>
                                        <option value="orthodontics">{{__('users.orthodontics')}}</option>
                                        <option value="other">{{__('users.other')}}</option>
                                    </select>
                                </div>
                                <div class="form-group d-none other_specialization"> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="other_specialization" class="form-control" placeholder="{{__('users.other_specialization')}}">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.organization_name')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="organization_name" class="form-control" placeholder="{{__('users.organization_name')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.work_country_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="work_country_id" class="form-control countries" data-cities=".work_city_id">
                                        <option value="">{{__('users.work_country_id')}}</option>
                                        @if($countries->count())
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.work_city_id')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select name="work_city_id" class="form-control work_city_id">
                                        <option value="">{{__('users.work_city_id')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.last_graduation_file')}}</label>
                                    <input type="file" name="attachments" class="form-control"/>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                                <div class="form-group">
                                    <label for="">{{__('users.how_know_us')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <select data-other=".other_how_know_us" name="how_know_us" class="form-control">
                                        <option value="">{{__('users.how_know_us')}}</option>
                                        <option value="friend">{{__('users.through_friend')}}</option>
                                        <option value="google">{{__('users.google')}}</option>
                                        <option value="related_associations">{{__('users.related_associations')}}</option>
                                        <option value="social_media">{{__('users.social_media')}}</option>
                                        <option value="other">{{__('users.other')}}</option>
                                    </select>
                                </div>
                                <div class="form-group d-none other_how_know_us">
                                    <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="text" name="other_how_know_us" class="form-control" placeholder="{{__('users.other_how_know_us')}}">
                                </div>
                            </div>


                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.password')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="password" name="password" class="form-control" placeholder="{{__('users.password')}}"/>
                                    <span class="text-danger">{{__('users.password_regex')}}</span>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="">{{__('users.password_confirmation')}}</label> <i style="font-size: 7px" class="text-danger fa fa-star"></i>
                                    <input type="password" name="password_confirmation" class="form-control" placeholder="{{__('users.password_confirmation')}}"/>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="terms" class="custom-control-input" id="customCheck1" value="1">
                                        <label class="custom-control-label" for="customCheck1">{{__('users.terms')}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="submit-btn  main-butn register_button" type="submit">{{__('users.register')}}</button>
                    </form>
                    <p class="sign">{{__('users.have_account')}}<a href="{{route('user.login')}}">{{__('main.login')}}</a></p>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade terms_modal" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    {{--                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>--}}
                    <h4 class="modal-title">{{__('settings.terms')}}</h4>
                </div>
                <div class="modal-body">
                    <p>{{__('settings.terms')}}</p>
                    <a target="_blank" href="{{asset(settings('terms'))}}">{{__('main.download')}}</a>
                </div>
                {{--            <div class="modal-footer">--}}
                {{--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
                {{--                <button type="button" class="btn btn-primary">Save changes</button>--}}
                {{--            </div>--}}
            </div>
        </div>
    </div>

@endsection


@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.register_button').click(async function (e) {
                e.preventDefault();
                let form = $('.register_form'),
                    data = new FormData(form[0]),
                    url = form.attr('action'),
                    method = form.attr('method');
                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method,
                    contentType: false,
                    processData: false,
                });

                if (response.errors) {
                    toasterError(response.errors);
                }
                if (response.message) {
                    toasterSuccess(response.message);
                    setTimeout(function(){
                        window.location.href = response.url;
                    }, 500)
                }
            });

            $('.countries').change(async function (e) {
                e.preventDefault();
                let data = {country_id: $(this).val()},
                    url = "{{route('getCities')}}",
                    method = 'get',
                    cities = $($(this).data('cities'));
                    if($(this).val() === ''){
                        return false;
                    }
                const response=await ajax({
                    url,
                    data,
                    dataType: 'html',
                    method,
                    // contentType: false,
                    // processData: false,
                });
                if (response) {
                    cities.html(response)
                }
            });

            $('select').change(function () {
                if ($(this).val() === 'other'){
                    $($(this).data('other')).removeClass('d-none');
                } else {
                    $($(this).data('other')).addClass('d-none');
                    $($(this).data('other')).children('input').val('');
                }
            });

            $('input[name="terms"]').click(function () {
                if ($(this).prop('checked') === true){
                    $('.terms_modal').modal()
                }
            })
        })
    </script>
@endsection