@extends('web.layouts.container')

@section('content')
    <section class="register-pg steps_page">
        <div class="container">
            <div class="inner">
                <div class="steps_head">
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                1
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.address_details')}} </h6>
                        </div>
                    </div>
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                2
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.order_details')}} </h6>
                        </div>
                    </div>
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                3
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.payment')}} </h6>
                        </div>
                    </div>
                </div>
                <div class="steps_body bg-light p-5">
                    <div class="row justify-content-center">
                        <div class="col-lg-12">
                            <div class="form-wrapper">
                                <form method="post" action="{{route('product.visitorRegister')}}" class="register_form">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <input name="first_name" type="text" class="form-control" autocomplete="off" autofocus required value="{{$user['first_name'] ?? null}}"/>
                                                <label class="floating-label">{{__('members.first_name')}}</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <input name="third_name" type="text" class="form-control" autocomplete="off" autofocus required value="{{$user['third_name'] ?? null}}"/>
                                                <label class="floating-label">{{__('members.third_name')}}</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <input name="email" type="email" class="form-control" autocomplete="off" autofocus required value="{{$user['email'] ?? null}}"/>
                                                <label class="floating-label">{{__('members.email')}}</label>
                                            </div>
                                        </div>
                                        <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 {{($user['country_code'] ?? null) == $country->code ? 'selected' : ''}} 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">
                                                <div class="ui-widget">
                                                    <select name="city" class="form-control" id="combobox">
                                                        @if($user['city'] ?? null)
                                                            <option value="{{$user['city']}}">{{$user['city']}}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mob_key">
                                                <div class="form-control">
                                                    <img class="country_flag" src="{{ $user['country_flag'] ?? asset('assets/web/images/flags/globe.svg') }}" alt="">
                                                    <stronge class="call_code">{{$user['call_code'] ?? null}}</stronge>
                                                    <input name="call_code" type="hidden" required value="{{$user['call_code'] ?? null}}" />
                                                </div>
                                                <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 value="{{$user['phone'] ?? null}}"/>
                                                <label class="floating-label">{{__('members.phone')}}</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input name="district" class="form-control" autocomplete="off" autofocus required value="{{$user['district'] ?? null}}"/>
                                                <label class="floating-label">{{__('members.district')}}</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input name="address" class="form-control" autocomplete="off" autofocus required value="{{$user['address'] ?? null}}"/>
                                                <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>
                                    </div>
                                    <button class="submit-btn register_button"> {{__('products.continue')}} </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

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

    <script src="{{ asset('assets/web/js/users.register.js') }}"></script>

    <script>

        $('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) {
                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>`);
                }

                $('.custom-combobox-input').val($('select[name="city"] option:selected').val());
            }

        });

        $(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)
            }
        });
    </script>
@endsection