{{-- @dump($locations) --}}
@push('scripts')
    <script type="text/x-template" id="location-template">
        <div class="col-md-12">

            <div :class="`control-group ${errors.has('country') ? 'has-error' : ''}`"
                @if(core()->getConfigData($locations['country']['fields']['0']['key']) == 0 && core()->getConfigData($locations['country']['fields']['0']['key']) !== null)
                    style="display:none"
                @endif>
                <label for="country"
                @if(core()->getConfigData($locations['country']['fields']['1']['key']))
                class="mandatory"
                @endif>
                    {{ __('shop::app.checkout.onepage.country') }}
                </label>

                <select type="text" id="country" name="country" v-validate="'required'"
                    class="control styled-select" v-model="country"
                    @if(core()->getConfigData($locations['country']['fields']['1']['key']))
                    required="true"
                    @endif
                    data-vv-as="{{ __('shop::app.checkout.onepage.country') }}">
                    <option></option>
                    @foreach (core()->countries(true) as $country)
                        @if ($country->code == core()->countries(true)[0]->code)
                            <option value="{{ $country->code }}"
                                {{ $country->code === config('app.default_country') ? 'selected' : '' }}
                                {{ count(core()->countries(true)) == 1 ? 'disabled' : '' }} >

                                @if (core()->getCurrentLocale()->direction == 'ltr')
                                    {{ $country->name }}
                                @else
                                    {{ $country->translations[0]->name }}
                                @endif
                            </option>
                        @endif
                    @endforeach
                </select>

                <div class="select-icon-container">
                    <i class="select-icon rango-arrow-down"></i>
                </div>

                <span class="control-error" v-if="errors.has('country')"
                    v-text="errors.first('country')"></span>
            </div>

            <div :class="`control-group ${errors.has('state') ? 'has-error' : ''}`"
                @if(core()->getConfigData($locations['city']['fields']['0']['key']) == 0 && core()->getConfigData($locations['city']['fields']['0']['key']) !== null)
                    style="display:none"
                @endif>
                <label for="state"
                    @if(core()->getConfigData($locations['city']['fields']['1']['key']))
                    class="mandatory"
                    @endif>
                    {{ __('shop::app.checkout.onepage.city') }}
                </label>

                <select type="text" id="state" name="state" v-validate="'required'"
                    class="control styled-select" v-model="state"
                    @if(core()->getConfigData($locations['city']['fields']['1']['key']))
                    required="true"
                    @endif
                    data-vv-as="{{ __('shop::app.checkout.onepage.city') }}">

                    <option value="">{{ __('shop::app.customer.account.address.create.select-city') }}</option>

                    <option v-for='(state, index) in countryStates[country]' :data-name="state.default_name" :value="state.id">
                        @if (core()->getCurrentLocale()->direction == 'ltr')
                            @{{ state.default_name }}
                        @else
                            @{{ state.translations[0].default_name }}
                        @endif
                    </option>
                </select>

                <span class="control-error" v-if="errors.has('state')"
                    v-text="errors.first('city')"></span>
            </div>

            <div :class="`control-group  ${errors.has('city') ? 'has-error' : ''}`"
                @if(core()->getConfigData($locations['district']['fields']['0']['key']) == 0 && core()->getConfigData($locations['district']['fields']['0']['key']) !== null)
                    style="display:none"
                @endif>
                <label for="city"
                    @if(core()->getConfigData($locations['district']['fields']['1']['key']))
                    class="mandatory"
                    @endif>
                    {{ __('shop::app.checkout.onepage.state') }}
                </label>

                <select type="text" id="city" name="city" v-validate="'required'"
                    class="control styled-select" v-model="city"
                    @change="checkShippingRates"
                    @if(core()->getConfigData($locations['district']['fields']['1']['key']))
                    required="true"
                    @endif
                    data-vv-as="{{ __('shop::app.checkout.onepage.city') }}">

                    <option value="">{{ __('shop::app.customer.account.address.create.select-state') }}</option>

                    <option v-for='(city, index) in stateCities[state]' :data-name="city.default_name" :value="city.id">
                        @if (core()->getCurrentLocale()->direction == 'ltr')
                            @{{ city.default_name }}
                        @else
                            @{{ city.translations[0].default_name }}
                        @endif
                    </option>
                </select>

                <span class="control-error" v-if="errors.has('city')"
                    v-text="errors.first('city')"></span>
            </div>
        </div>
    </script>

    <script type="text/javascript">
        (() => {
            Vue.component('location', {
                template: '#location-template',

                data: function () {
                    return {
                        countries: [],
                        countryHaveStates: false,
                        country: "{{ core()->countries(true)[0]->code }}",
                        city: '',
                        state: '',
                        countryStates: @json(core()->groupedStatesByCountries('checkBranch')),
                        stateCities: @json(core()->groupedCitiesByStatesId('checkBranch')),
                    }
                },

                created: function () {
                    var _this = this;
                    setTimeout(() => {
                        $("#state").change(function(){
                            _this.state = $(this).val();
                        });
                        $("#city").change(function(){
                            _this.city = $(this).val();
                            _this.checkShippingRates();
                        });
                    }, 1000);

                    // when there is only one City selected then update the distric select options accordingly for billing address
                    if(this.countryStates[this.country].length == 1 && this.countryStates[this.country].length > 0){
                        this.state = this.countryStates[this.country][0].id;
                    }

                    // auto select country and  city and distric from IP address information
                    this.getGuestLocation(function (result) {

                        $("#state option").each(function()
                        {
                            const stateName = ($(this).data('name') || "").toString().toLowerCase().replace(/[-\s]/g, '');
                            const resultState = result.region.toLowerCase().replace(/[-\s]/g, '');

                            if (stateName === resultState) {
                                $(this).attr('selected','selected');
                                _this.state = $(this).val();
                                $("#state").val($(this).val()).change();
                                setCookie('locationState',$(this).val(),30);

                                setTimeout(() => {
                                    $("#city option").each(function()
                                    {
                                        const cityName = ($(this).data('name') || "").toString().toLowerCase().replace(/[-\s]/g, '');
                                        const resultCity = result.city.toLowerCase().replace(/[-\s]/g, '');

                                        if (cityName === resultCity) {
                                            $(this).attr('selected','selected');
                                            _this.city = $(this).val();
                                            $("#city").val($(this).val()).change();
                                            setCookie('locationCity',$(this).val(),30);
                                            return;
                                        }
                                    });
                                }, 0);
                                return;
                            }
                        });
                    });
                },

                methods: {
                    // check flate rate based on district
                    checkShippingRates:function () {
                        var _this = this;
                        this.$http.post("{{ route('shop.checkout.check-shipping-rates') }}", {'district_id': this.city})
                        .then(response => {
                            if(response.data.shippingMethods.flatrate && response.data.shippingMethods.flatrate.rates[0]){
                                var newRate = parseFloat(response.data.shippingMethods.flatrate.rates[0].price);
                                $('#flatrate_flatrate-price').text('{{ core()->getBaseCurrencyCode() }} ' + newRate);
                                $('#flatrate_flatrate-price').attr('data-rate', newRate).change();
                                setTimeout(() => {
                                    $('input#flatrate_flatrate').first().prop('checked', true).change();
                                }, 100);
                            }
                            return;
                        })
                        .catch(error => {
                            this.handleErrorResponse(error.response, 'check-shipping-rates')
                        });
                    },
                    // Get IP address information
                    getGuestLocation: function (callback) {
                        $.get("https://ipinfo.io", function (response) {
                            const result = response;
                            callback(result);
                        }, "jsonp");
                    }
                },
            });
        })();
    </script>
@endpush