@extends('web.layouts.container')

@section('content')

    <section class="register-pg">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-wrapper">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="country">{{__('products.country')}}</label>
                                    <select name="country" id="country" class="form-control">
                                        <option value="">{{__('products.country')}}</option>
                                        @if(count($countries))
                                            @foreach($countries as $country)
                                                <option {{$user->country_code == $country->code ? 'selected' : ''}} value="{{$country->code}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <!--                                <div class="form-group col-md-6">-->
                            <!--                                    <label for="city">{{__('products.city')}}</label>-->
                                <!--                                    <select name="city" id="city" class="form-control">-->
                            <!--{{--                                        <option value="">{{__('products.city')}}</option>--}}-->
                            <!--                                        <option value="{{$user->city}}">{{$user->city}}</option>-->
                                <!--                                    </select>-->
                                <!--                                </div>-->
                                <div class="form-group col-md-6">
                                    <label for="city">{{__('products.city')}}</label>
                                    <div class="ui-widget">
                                        <select name="city" class="form-control" id="combobox">
                                            <option value="{{$user->city}}">{{$user->city}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="district">{{__('products.district')}}</label>
                                    <input type="text" name="district" id="district" class="form-control" value="{{$district}}">
                                </div>
                                <div class="form-group col-md-9">
                                    <label for="address">{{__('products.please_type_address')}}</label>
                                    <input type="text" name="address" id="address" class="form-control" value="{{$address}}">
                                </div>
                                <div class="form-group col-md-12">
                                    <p class="text-danger mt-4">
                                        {{__('products.address_hint')}}
                                        <b><span class="counter">49</span> <span>{{__('products.characters')}}</span></b>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <a href="#" class="submit-btn check_address_button">{{__('main.complete_pay')}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection

@section('inner_js')

    <script>
        let checkAddressAndCompletePayRoute = "{{route('product.checkAddressAndCompletePay')}}";
        let fetchCitiesRoute = "{{route('aramex.fetchCities')}}";
        let selectCityTitle = "{{__('products.select_city')}}",
            cityTitle = "{{__('products.city')}}",
            userCity = "{{$user->city}}";
    </script>
    <script>

        $(document).ready(function () {
            $('.custom-combobox-input').val(userCity);
            getCities();
        });

        $('.check_address_button').click(async function (e) {
            e.preventDefault();

            $(this).attr('disabled', true);
            let data = {
                    country: $('select[name="country"]').val(),
                    city: $('select[name="city"]').val(),
                    address: $('input[name="address"]').val(),
                    district:$('input[name="district"]').val()
                },
                url = checkAddressAndCompletePayRoute,
                method = 'post';

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

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.url) {
                window.location.href = response.url
            }

        });

        $('select[name="country"]').change(function () {
            $('.custom-combobox-input').val('');
            getCities();
        });

        async function getCities(){
            let country = $('select[name="country"]'),
                city = $('select[name="city"]'),
                data = {country_code: country.val()},
                url = fetchCitiesRoute,
                method = 'get';

            city.html('');

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

            if(country.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) {
                for(let myCity of response.cities){
                    city.append(`<option  value="${myCity}">${myCity}</option>`);
                }

                $('select[name="city"] option').each(function () {
                    // if($(this).val() === userCity){
                    //     $(this).attr('selected', 'selected');
                    //     // $('.custom-combobox-input').val(userCity);
                    // } else {
                    //     $('.custom-combobox-input').val($('select[name="city"] option:first-child').val());
                    // }
                });

                $('.custom-combobox-input').val($('select[name="city"] option:first-child').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)
            }
        });


        $('input[name="address"], input[name="district"]').on('keydown paste change', function (event) {
            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, 50);
                $('input[name="address"]').val(address);
                $('input[name="district"]').val('');
                counter.html(0)
            }

        });


    </script>
@endsection