<div class="delivery-content-mid-left profile-content-inner-bottom-second" >
    <div class="delivery-content-title">
        <h3 class="delivery-content-title-text">{{__('shop::app.checkout.onepage.shipping-address')}}</h3>
    </div>
    <form data-vv-scope="address-form" >
        <div v-if="! this.new_billing_address" class="delivery-content-mid-left-blocks">
            <label  class="content-block option option-checked" v-for='(addresses, index) in this.allAddress'>
                <div class="content-block-title-wrapper">
                    <span class="content-block-wrapper-text">№ <span class="address-nr">@{{ index + 1 }}</span> @{{ addresses.first_name }} @{{ addresses.last_name }}</span>
                    <div class="option-checkbox-wrapper">
                        <input type="radio" class="option-checkbox option-checkbox-checked"
                               v-validate="'required'"
                               id="billing[address_id]"
                               name="billing[address_id]"
                               :value="addresses.id"
                               v-model="address.billing.address_id"
                               data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;">
                    </div>
                </div>
                <div class="content-block-main-wrapper">
                    <p class="content-block-main-wrapper-text"> @{{ addresses.address1 }}, @{{ addresses.city }}, @{{ addresses.state }}, @{{ addresses.phone }}</p>

                </div>
            </label>
            <button type="button" class="content-link" v-show="current_step==1" v-if="!this.new_billing_address" @click = newBillingAddress()>
                <div class="content-link-wrapper">
                    <div class="content-link-img">
                        <img src="{{bagisto_asset('icons/add.svg')}}" alt="add">
                    </div>
                    <span class="content-link-wrapper">{{ __('shop::app.checkout.onepage.new-address') }}</span>
                </div>
            </button>
        </div>
        <div v-if="this.new_billing_address"
             class="profile-content-inner-mid-block-wrapper profile-content-inner-mid-block-wrapper-hidden shown">
            <div class="profile-content-block" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
                <label for="billing[first_name]" class="required">
                    {{ __('shop::app.checkout.onepage.first-name') }}
                </label>

                <input type="text" v-validate="'required'" class="control" id="billing[first_name]" name="billing[first_name]"
                       v-model="address.billing.first_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.first-name') }}&quot;"/>

                <span class="control-error" v-if="errors.has('address-form.billing[first_name]')">
                @{{ errors.first('address-form.billing[first_name]') }}
            </span>
            </div>
            <div class="profile-content-block" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
                <label for="billing[last_name]" class="required">
                    {{ __('shop::app.checkout.onepage.last-name') }}
                </label>

                <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]"
                       v-model="address.billing.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>

                <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
                @{{ errors.first('address-form.billing[last_name]') }}
            </span>
            </div>
            <div class="profile-content-block" :class="[errors.has('address-form.billing[address1][]') ? 'has-error' : '']">
                <label for="billing_address_0" class="required">
                    {{ __('shop::app.checkout.onepage.address1') }}
                </label>

                <input type="text" v-validate="'required'" class="control" id="billing_address_0" name="billing[address1][]"
                       v-model="address.billing.address1[0]" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.address1') }}&quot;"/>

                <span class="control-error" v-if="errors.has('address-form.billing[address1][]')">@{{ errors.first('address-form.billing[address1][]') }}</span>
            </div>

            @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
                <div class="profile-content-block">
                    @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
                        <input type="text" class="control" name="billing[address1][{{ $i }}]" id="billing_address_{{ $i }}" v-model="address.billing.address1[{{$i}}]">
                    @endfor
                </div>
            @endif
            <div class="profile-content-block" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
                <label for="billing[state]" class="{{ core()->isStateRequired() ? 'required' : '' }}">
                    {{ __('shop::app.checkout.onepage.state') }}
                </label>

                <input
                    class="control"
                    id="billing[state]"
                    name="billing[state]"
                    type="text"
                    v-model="address.billing.state"
                    v-validate="'{{ core()->isStateRequired() ? 'required' : '' }}'"
                    data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"
                    v-if="! haveStates('billing')"/>

                <select
                    class="control"
                    id="billing[state]"
                    name="billing[state]"
                    v-model="address.billing.state"
                    v-validate=""
                    data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"
                    v-if="haveStates('billing')">
                    <option value="">{{ __('shop::app.checkout.onepage.select-state') }}</option>

                    <option v-for="(state, index) in countryStates['TM']" :value="state.code" v-text="state.default_name"></option>
                </select>

                <span
                    class="control-error"
                    v-text="errors.first('address-form.billing[state]')"
                    v-if="errors.has('address-form.billing[state]')">
            </span>
            </div>
            <div class="profile-content-block" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
                <label for="billing[city]" class="required">
                    {{ __('shop::app.checkout.onepage.city') }}
                </label>

                <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]"
                       v-model="address.billing.city" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.city') }}&quot;"/>

                <span class="control-error" v-if="errors.has('address-form.billing[city]')">
                @{{ errors.first('address-form.billing[city]') }}
            </span>
            </div>

            <div class="profile-content-block" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
                <label for="billing[phone]" class="required">
                    {{ __('shop::app.checkout.onepage.phone') }}
                </label>

                <input type="text" v-validate="'required|numeric'"
                       class="control" id="billing[phone]" name="billing[phone]"
                       placeholder="99369696969"
                       v-model="address.billing.phone" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.phone') }}&quot;"/>

                <span class="control-error" v-if="errors.has('address-form.billing[phone]')">
                @{{ errors.first('address-form.billing[phone]') }}
            </span>
            </div>

            @auth('customer')
                <div class="control-group">
                    <input type="checkbox" id="billing[save_as_address]" name="billing[save_as_address]" v-model="address.billing.save_as_address"/>
                    <label class="checkbox-view" for="billing[save_as_address]">{{ __('shop::app.checkout.onepage.save_as_address') }}</label>
                </div>

                @if(count(auth('customer')->user()->addresses))
                    <button type="button" class="btn btn-lg btn-primary" @click = backToSavedBillingAddress()>
                        {{ __('shop::app.checkout.onepage.back') }}
                    </button>
                @endif
            @endauth
            <button type="button" v-show="current_step == 1"
                    class="save-button checkout-button saveable" @click="validateForm('address-form')" :disabled="disable_button" id="checkout-address-continue-button">
                {{ __('shop::app.checkout.onepage.continue') }}
            </button>
        </div>

    </form>
    <div class="control-group" :class="[errors.has('address-form.billing[address_id]') ? 'has-error' : '']">
                <span class="control-error" v-if="errors.has('address-form.billing[address_id]')">
                    @{{ errors.first('address-form.billing[address_id]') }}
                </span>
    </div>

</div>
