<div x-data="{ pkmmodal: $wire.modal_id, isUploading: false, progress: 0 }" class="d-inline-block">
    @empty($advertise->id)
        <button type="button" class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2" data-toggle="modal"
            x-bind:data-target="'#'+pkmmodal">
            <i class="mdi mdi-plus mr-1"></i>
            Add New 
        </button>
    @else
        <a href="#" class="text-primary" data-toggle="modal" x-bind:data-target="'#'+pkmmodal">
            <i class="mdi mdi-pencil font-size-18"></i>
        </a>
    @endempty
    <div wire:ignore.self class="modal fade" x-bind:id="pkmmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" :aria-labelledby="'adervtise-'+pkmmodal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form wire:submit.prevent="submit" class="modal-content custom-validation" novalidate method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" :id="'adervtise-'+pkmmodal">{{ empty($advertise->id)?'Create':'Update' }} Advertise Form</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row flex-column-reverse flex-md-row">
                        <div class="col-md-12 align-self-center">
                            <div class="form-group row mb-4">
                                <label for="name" class="col-sm-2 col-form-label">Name<sup class="text-danger">*</sup></label>
                                <div class="col-sm-10">
                                    <input type="text" wire:model.defer="advertise.name" class="form-control @error('advertise.name') parsley-error @enderror" id="name" placeholder="Enter name..." required>
                                    @error('advertise.name')
                                        <ul class="parsley-errors-list filled" aria-hidden="true">
                                            <li class="parsley-required">{{ $message }}</li>
                                        </ul>
                                    @enderror
                                </div>
                            </div>
      
                            <div class="form-group row mb-4">
                                <label for="url" class="col-sm-2 col-form-label">URL<sup class="text-danger">*</sup></label>
                                <div class="col-sm-10">
                                    <input type="url" wire:model.defer="advertise.url" class="form-control @error('advertise.url') parsley-error @enderror" id="url" placeholder="Enter url..." required>
                                    @error('advertise.url')
                                        <ul class="parsley-errors-list filled" aria-hidden="true">
                                            <li class="parsley-required">{{ $message }}</li>
                                        </ul>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row mb-4">
                                <label for="type" class="col-sm-2 col-form-label">Type<sup class="text-danger">*</sup></label>
                                <div class="col-sm-5">
                                    <select wire:model.debounce.500ms="advertise.type" id="type" class="form-control text-capitalize">
                                        @foreach (config('ads.location') as $key => $type)
                                        <option value="{{ $key }}" @empty($advertise->id) @else {{ $advertise->type == $key ?'selected':'' }}  @endempty>{{ str_replace('-',' ',$type) }}</option>
                                        @endforeach
                                    </select>
                                    @error('advertise.type')
                                        <ul class="parsley-errors-list filled" aria-hidden="true">
                                            <li class="parsley-required">{{ $message }}</li>
                                        </ul>
                                    @enderror
                                </div>
                                <div class="col-sm-5">
                                    <select id="size" class="form-control text-capitalize border-0 font-weight-bold" disabled>
                                        @foreach (config('ads.size') as $key => $size)
                                        <option {{ $key == $type_key?'selected':'' }}>Size : {{ $size }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mb-4">
                              <label for="order" class="col-sm-2 col-form-label">Order<sup class="text-danger">*</sup></label>
                              <div class="col-sm-10">
                                  <input type="number" wire:model.defer="advertise.order" class="form-control @error('advertise.order') parsley-error @enderror" id="order" placeholder="Enter order..." required>
                                  @error('advertise.order')
                                      <ul class="parsley-errors-list filled" aria-hidden="true">
                                          <li class="parsley-required">{{ $message }}</li>
                                      </ul>
                                  @enderror
                              </div>
                            </div>
                        
                            <div class="position-relative"
                                x-on:livewire-upload-start="isUploading = true"
                                x-on:livewire-upload-finish="isUploading = false;progress= 0"
                                x-on:livewire-upload-error="isUploading = false;progress= 0"
                                x-on:livewire-upload-progress="progress = $event.detail.progress"
                            >
                                <label class="d-block text-center">Advertise<sup class="text-danger">*</sup></label>
                                <div class="d-flex m-auto">

                                    <div class="spinner-custom waiting-img" wire:loading wire:target="feature_image">
                                        <div class="spinner-border text-info m-1"></div>
                                    </div>

                                    <div class="spinner-custom waiting-img" wire:loading wire:target="update_image">
                                        <div class="spinner-border text-info m-1"></div>
                                    </div>

                                    @empty ($advertise->id) 
                                        <!-- Create -->
                                        <div class="d-flex m-auto">    
                                            <label for="file" class="text-center">
                                                <img class="img-thumbnail img-clickable mw-50 feature-img @error('feature_image') border-danger @enderror" src="{{ $feature_image?$feature_image->temporaryUrl():asset($no_image) }}" alt="No Image"/>
                                            </label>    
                                            <input type="file" class="d-none" id="file" wire:model.defer="feature_image" accept="image/*">
                                        </div>
                                    @else   
                                    <!-- Edit -->
                                    <div class="d-flex m-auto">    
                                        <label :for="'file_'+pkmmodal" class="text-center">                 
                                            <img class="img-thumbnail img-clickable mw-50 feature-img @error('update_image') border-danger @enderror" src="{{ $update_image?$update_image->temporaryUrl():asset($old_image) }}" alt="No Image"/>   
                                        </label>
                                        <input type="file" class="d-none" :id="'file_'+pkmmodal" wire:model.defer="update_image" accept="image/*">
                                    </div>
                                    @endempty
                                </div>
                                <div class="progress mb-2" x-show="isUploading">
                                    <div class="progress-bar" role="progressbar" :style="`width: ${progress}%;`" x-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100" x-text="progress+'%'">50%</div>
                                </div>
                                @error('feature_image')    
                                <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                                    <li class="parsley-required text-center">{{$message}}</li>
                                </ul>
                                @enderror
                                @error('update_image')    
                                <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                                    <li class="parsley-required text-center">{{$message}}</li>
                                </ul>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <button type="button" class="btn rounded-pill btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn rounded-pill btn-success waves-effect waves-light">
                        <i class="bx bx-check" wire:loading.class="d-none" wire:target="submit"></i> 
                        <i class="bx bx-loader bx-spin" wire:loading wire:target="submit"></i> 
                        {{ isset($advertise->id)?'Update':'Save' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>