@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="register-pg">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-wrapper">
                            <form method="post" action="{{route('user.doRegister')}}" class="register_form">
                                <div class="heading text-center mb-5">
                                    <h4 class="h4">{{__('main.sign_up_new_account')}}</h4>
                                    <p class="another-register">{{__('main.have_account')}} <a href="{{route('user.login')}}">{{__('main.sign_in')}}</a></p>
                                    <img src="{{asset('assets/web/images/icon.svg')}}" alt="" class="logo">
                                </div>
                                <div class="form-group">
                                    <input name="first_name" type="text" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.first_name')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="second_name" type="text" class="form-control" autocomplete="off" autofocus  />
                                    <label class="floating-label">{{__('members.second_name')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="third_name" type="text" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.third_name')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="birth_date" class="datepicker form-control" data-date-format="yyyy-mm-dd" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.birth_date')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="email" type="email" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.email')}}</label>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="country_code" class="form-control" autocomplete="off" autofocus required>
                                                <option value="">{{__('members.country_code')}}</option>
                                                @if(count($countries))
                                                    @foreach($countries as $country)
                                                        <option data-call-code="{{$country->call_code}}" value="{{$country->code}}">{{$country->name}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <label class="floating-label"> {{__('members.country_code')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
{{--                                        <div class="form-group">--}}
{{--                                            <select name="city" class="form-control" autocomplete="off" autofocus required></select>--}}
{{--                                            <label class="floating-label city_label"> {{__('members.city')}} </label>--}}
{{--                                        </div>--}}
                                        <div class="form-group">
                                            <div class="ui-widget">
                                                <select name="city" class="form-control" id="combobox"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="district" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.district')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="address" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.address')}}</label>
                                    <span class="text-danger register_hint">{{__('members.register_hint')}}<span class="counter">49</span> {{__('members.character')}}</span>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group mob_key">
                                            <div class="form-control">
                                                <img class="country_flag" src="{{ asset('assets/web/images/flags/globe.svg') }}" alt="">
                                                <stronge class="call_code"></stronge>
                                                <input name="call_code" type="hidden" required />
                                            </div>
                                            <label class="floating-label">{{__('members.call_code')}}</label>
                                        </div>
                                        <!--<div class="form-group">-->
                                        <!--    <input name="call_code" type="tel" class="form-control" autocomplete="off" autofocus required />-->
                                        <!--    <label class="floating-label">{{__('members.call_code')}}</label>-->
                                        <!--</div>-->
                                    </div>
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <input name="phone" type="tel" class="form-control" autocomplete="off" autofocus required />
                                            <label class="floating-label">{{__('members.phone')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="password" type="password" class="form-control" id="password" autocomplete="off" autofocus required />
                                    <label class="floating-label"> {{__('members.password')}} </label>
                                    <span style="cursor:pointer;" class="togglePassword"><i class="far fa-eye" id="togglePassword"></i></span>
                                </div>
                                <div class="form-group">
                                    <input name="password_confirmation" type="password" class="form-control password_confirmation" autocomplete="off" autofocus required />
                                    <label class="floating-label"> {{__('members.retype_password')}} </label>
                                </div>


                                <button class="submit-btn register_button">{{__('main.sign_up')}}</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{asset('assets/web/images/register.svg')}}" alt="" class="register-img center-vr">
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/web/js/users.register.js') }}"></script>
    <script>
        let getStateRoute = "{{route('user.getState')}}";
        let fetchCitiesRoute = "{{route('aramex.fetchCities')}}";
        let cityTitle = "{{__('members.select_city')}}";
        let cityLabelTitle = "{{__('members.city')}}",
            guestRegister = false;
    </script>
    <script>

        $(document).on('focus', '.custom-combobox-input', function () {
            $(this).val('');

        });
        $(document).on('blur', '.custom-combobox-input', function () {
            if($(this).val() !== cityTitle){
                $(this).val($('select[name="city"] option:selected').val())
            } else {
                $(this).val(cityTitle)
            }
        });


        $('input[name="address"], input[name="district"]').on('keyup paste change', function () {
            let maxLength = 49,
                address = $('input[name="address"]'),
                district = $('input[name="district"]'),
                counter = $('.counter'),
                typedTextLength = parseInt(address.val().length)+parseInt(district.val().length);

            counter.html(parseInt(maxLength-typedTextLength));

            maxLength = maxLength-typedTextLength;

            if(maxLength < 0){
                address = address.val().substring(0, 49);
                $('input[name="address"]').val(address);
                $('input[name="district"]').val('');
                counter.html(0)
            }
            if(maxLength === 0){
                $('.register_hint').addClass('d-none');
            }
            if(maxLength > 0) {
                $('.register_hint').removeClass('d-none');
            }

        });

        $('select[name="country_code"]').change(async function (e) {
            e.preventDefault();

            let data = {country_code: $(this).val()},
                url = fetchCitiesRoute,
                method = 'get';

            let cityLabel = $('.city_label');
            let city = $('select[name="city"]'),
                callCode =  $('input[name="call_code"]');
            city.html(cityLabelTitle);
            cityLabel.html(cityLabelTitle);
            callCode.val('');

            $('.custom-combobox-input').val('');

            if($(this).val() === ''){
                return false;
            }

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }

            if (response.cities) {
                $('.custom-combobox-input').val(cityTitle);
                let countyCallCode = $('select[name="country_code"] option:selected').data('call-code');
                callCode.val(countyCallCode);
                $('.call_code').html(countyCallCode);
                $('.country_flag').attr('src', response.country_flag);
                cityLabel.html(`<option value="">${cityTitle}</option>`);
                for(let myCity of response.cities){
                    city.append(`<option value="${myCity}">${myCity}</option>`);
                }
            }

        });

        $('input[name="birth_date"]').change(function () {
            $('.datepicker-container').addClass('datepicker-hide')
        }).click(function () {
            $('.datepicker-container').removeClass('datepicker-hide')
        })

        // $('select[name="country_code"]').change(async function (e) {
        //     let data = {country_code: $(this).val()},
        //         url = getStateRoute,
        //         method = 'get';
        //
        //     const response=await ajax({
        //         url,
        //         data,
        //         dataType: 'json',
        //         method
        //     });
        //
        //     if (response.states){
        //         let states = $('select[name="state_id"]');
        //         states.html('');
        //         for(let i = 0; i < response.states.length; i++){
        //             states.append(`<option value="`+response.states[i].id+`">`+response.states[i].name+`</option>`)
        //         }
        //     }
        // });


    </script>
@endsection