<script src="{{ asset('frontend/js/vendor/jquery-1.12.0.min.js') }}"></script>
<script>
    $(function () {
        init_bsMultiselect();

        $("select[name=country_id]").change(function () {
        @this.getStatesByCountryId($(this).val());
            // $("select[name=state_id]").multiselect("rebuild")
        });
    });
</script>
<div x-data="{ formShow: @entangle('showForm') }">
    <div class="d-flex">
        <h2 class="h5 text-uppercase mb-4">{{__("Addresses")}}</h2>
        <div class="ml-auto">
            <button type="button" @click="formShow = true" class="btn btn-dark rounded shadow">
                {{__("Add new address")}}
            </button>
        </div>
    </div>

    <form wire:submit.prevent="{{ $editMode ? 'updateAddress' : 'storeAddress' }}" x-show="formShow" @click.away="formShow = false">
        @if ($editMode)
            <input type="hidden" wire:model="address_id">
        @endif
        <div class="row">
            <div class="col-lg-8 form-group">
                {!! BootForm::text('title',__("Adress Title"), $title,
                       ["wire:model" => "title","placeholder" => __("Enter your address title") ])
                      !!}

            </div>
            <div class="col-lg-4 form-group">
                <label class="text-small text-uppercase">&nbsp;</label>
                <div class="form-check">
                    <input class="form-check-input" style="margin-left: -2.8rem;" id="default" wire:model="default" type="checkbox">
                    <label class="form-check-label" for="default">Default address?</label>
                </div>
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="first_name">First name</label>
                <input class="form-control " wire:model="first_name" type="text" placeholder="Enter your first name">
                @error('first_name')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="last_name">Last name</label>
                <input class="form-control " wire:model="last_name" type="text" placeholder="Enter your last name">
                @error('last_name')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="email">Email address</label>
                <input class="form-control " wire:model="email" type="email" placeholder="e.g. jason@example.com">
                @error('email')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="phone">Phone number</label>
                <input class="form-control " wire:model="phone" type="tel" placeholder="e.g. 674154215">
                @error('phone')<span class="text-danger">{{ $message }}</span>@enderror
            </div>

            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="address">address</label>
                <input class="form-control " wire:model="address" type="text" placeholder="Enter your first name">
                @error('address')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="address2">address2</label>
                <input class="form-control " wire:model="address2" type="text" placeholder="Enter your last name">
                @error('address2')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-4 form-group">
                {!! BootForm::select('country_id',__("Country"),
                       $country_id,$countries->pluck('name',"id"),
                       ['data-plugin-multiselecst',"wire:model" => "country_id","wire:change" => "getStatesByCountryId($country_id)" ,"class" => "text-uppercase"])
                      !!}
            </div>
            <div class="col-lg-4 form-group">
                {!! BootForm::select('state_id',__("State"),
                      $state_id,!blank($states)  ? $states->pluck('name',"id") : [],
                      ['data-plugin-multiselectss',"wire:model" => "state_id","wire:change" => "getStatesByCountryId($country_id)" , "class" => "text-uppercase"])
                     !!}
            </div>
            <div class="col-lg-4 form-group">
                {!! BootForm::select('city_id',__("City"),
                     $city_id,!blank($cities)  ? $cities->pluck('name',"id") : [],
                     ['data-plugin-multiselectss',"wire:model" => "city_id","wire:change" => "getStatesByCountryId($country_id)" , "class" => "text-uppercase"])
                    !!}
            </div>

            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="zip_code">ZIP Code</label>
                <input class="form-control " wire:model="zip_code" type="text" placeholder="Enter your first name">
                @error('zip_code')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="po_box">P.O.Box</label>
                <input class="form-control " wire:model="po_box" type="text" placeholder="Enter your last name">
                @error('po_box')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-12 form-group">
                <button class="btn btn-dark" type="submit">
                    {{ $editMode ? 'Update address' : 'Add address' }}
                </button>
            </div>
        </div>
    </form>

    <div class="my-4">
        <div class="table-responsive">
            <table class="table table-content ">
                <thead>
                <tr>
                    <th>{{__("Title")}}</th>
                    <th>{{__("Location")}}</th>
                    <th width="10%"></th>
                </tr>
                </thead>
                <tbody>
                @forelse($addresses as $address)
                    <tr>
                        <td>
                            {{ $address->title }}
                            <p class="text-gray-400">{{ $address->default }}</p>
                        </td>
                        <td>
                            {{ $address->address }}<br>
                            {{ $address->address2 }}<br>
                            <small>{{ $address->country->name . '-' . $address->state->name . '-' . $address->city->name}}</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" wire:click.prevent="editAddress('{{ $address->id }}')" class="btn btn-success">
                                    <i class="fa fa-edit fa-sm"></i>
                                </button>
                                <button type="button"
                                        x-on:click.prevent="return confirm('Are you sure?') ? @this.deleteAddress('{{ $address->id }}') : false"
                                        class="btn btn-danger">
                                    <i class="fa fa-trash fa-sm"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>



