<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">
                <label class="text-small text-uppercase" for="title">Address title</label>
                <input class="form-control form-control-sm" wire:model="title" type="text" placeholder="Enter the address title">
                @error('title')<span class="text-danger">{{ $message }}</span>@enderror
            </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-12 form-group">
                <label class="text-small text-uppercase" for="contact_full_name">{{__("Contact Full Name")}}</label>
                <input class="form-control form-control-sm " wire:model="contact_full_name" type="text"
                       placeholder="Enter contact fullname" value="{{$contact_full_name}}">
                @error('contact_full_name')<span class="text-danger">{{ $message }}</span>@enderror
            </div>

            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="contact_email">{{__("Contact Email address")}}</label>
                <input class="form-control form-control-sm " wire:model="contact_email" type="email" placeholder="e.g. jason@example.com">
                @error('contact_email')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="contact_phone">{{__("Contact Phone number")}}</label>
                <input class="form-control form-control-sm " wire:model="contact_phone" type="tel" placeholder="e.g. 683523318">
                @error('contact_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 form-control-sm " wire:model="address" type="text" placeholder="{{__("e.g. Ndokoti (tradex)")}}">
                @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 form-control-sm " wire:model="address2" type="text" placeholder="{{__("e.g. Ndokoti (tradex)")}}">
                @error('address2')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="country_id">{{__('Country')}}</label>
                <select class="form-control form-control-sm" wire:model="country_id" data-plugin-multiselects>
                    <option value="">Select Country</option>
                        @forelse($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @empty
                    @endforelse
                </select>
                @error('country_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="state_id">State</label>
                <select class="form-control form-control-sm select2s" wire:model="state_id">
                    <option value="">Select State</option>
                    @forelse($states as $state)
                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                    @empty
                    @endforelse
                </select>
                @error('state_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="city_id">City</label>
                <select class="form-control form-control-sm select2s" wire:model="city_id">
                    <option value="">Select City</option>
                    @forelse($cities as $city)
                        <option value="{{ $city->id }}">{{ $city->name }}</option>
                    @empty
                    @endforelse
                </select>
                @error('city_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>

            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="quarter_id">Quarter</label>
                <select class="form-control form-control-sm select2s" wire:model="quarter_id">
                    <option value="">Select Quarter</option>
                    @forelse($quarters as $quarter)
                        <option value="{{ $quarter->id }}">{{ $quarter->name }}</option>
                    @empty
                    @endforelse
                </select>
                @error('quarter_id')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-lg-6 form-group">
                <label class="text-small text-uppercase" for="zip_code">ZIP Code</label>
                <input class="form-control form-control-sm " wire:model="zip_code" type="text" placeholder="{{__('Enter the Zip code')}}">
                @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 form-control-sm " wire:model="po_box" type="text" placeholder="{{__('Enter the P.O.Box')}}">
                @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>
