<div class="livewire-component-wrapper">
	<!-- Add Modal -->
          <div wire:ignore.self class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <form class="needs-validation" novalidate>
				@csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="editModalLabel1">Add Revenue Location</h5>
                  <button type="button" class="btn-close rmv_modal_backdrop" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
				  
                    <div class="col-md-12 mb-3">
                      <label for="addRevenueLocation" class="form-label">Revenue Location Name</label>
                      <input type="text" name="LocationName" wire:model="LocationName" class="form-control LocationName" placeholder="Revenue Location Name" value="{{ old('LocationName')}}" required>
					  @error('LocationName') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Revenue location name is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="addSubCounty" class="form-label">SubCounty</label>
					  <select class="form-select SubCountyID" name="SubCountyID" wire:model.live="SubCountyID">
						<option value="" selected hidden>Select SubCounty</option>
						@foreach ($subcounties as $item)
						<option value="{{ $item->SubCountyID }}">{{ $item->SubCountyName }}</option>
						@endforeach
					  </select>
					  @error('SubCountyID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">SubCounty is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addWard" class="form-label">Ward</label>
                      <select class="form-select WardID" name="WardID"  wire:model="WardID" required>
					  <option value="" hidden>Select Ward</option>
					  @if($this->SubCountyID)
					  @if(count($wards) > 0)
						@foreach ($wards as $item)
						<option value="{{ $item->WardID }}" wire:key="item-{{ $item->WardID }}">{{ $item->WardName }}</option>
						@endforeach
						@endif
						@endif
					  </select>
					  @error('WardID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Ward is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="addZone" class="form-label">Zone</label>
					  <select class="form-select" name="ZoneID" wire:model="ZoneID">
						<option value="" selected hidden>Select Zone</option>
						@foreach ($zones as $item)
						<option value="{{ $item->ZoneID }}">{{ $item->ZoneName }}</option>
						@endforeach
					  </select>
					  @error('ZoneID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Zone is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="addLocationType" class="form-label">Location Type</label>
					  <select class="form-select" name="LocationType" wire:model="LocationType">
						<option value="" selected hidden>Select Location Type</option>
						<option value="Town">Town</option>
						<option value="Market">Market</option>
						<option value="Other">Other</option>
					  </select>
					  @error('LocationType') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Location type is required</div>
                    </div>
			
                  </div>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" wire:click="saveRevenueLocation">Save</button>
                  <button type="button" class="btn btn-outline-kco rmv_modal_backdrop" data-bs-dismiss="modal">Close</button>
                </div>
			  </form>
              </div>
            </div>
          </div>

		<!-- edit Modal -->
          <div wire:ignore.self class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <form class="needs-validation" novalidate>
				@csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="editModalLabel1">Edit Revenue Location</h5>
                  <button type="button" class="btn-close rmv_modal_backdrop" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
			
                    <div class="col-md-12 mb-3">
                      <label for="editRevenueLocation" class="form-label">Revenue Location Name</label>
                      <input type="text" name="LocationName" wire:model="LocationName" class="form-control" required>
					  @error('LocationName') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Revenue location name is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="editSubCounty" class="form-label">SubCounty</label>
                      <select class="form-select" name="SubCountyID" wire:model.live="SubCountyID">
						@if(!$this->SubCountyID)
						<option value=null hidden>Select SubCounty</option>
						@endif
						@foreach ($subcounties as $item)
						<option value="{{ $item->SubCountyID }}">{{ $item->SubCountyName }}</option>
						@endforeach
					  </select>
					  @error('SubCountyID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">SubCounty is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="editWard" class="form-label">Ward</label>
                      <select class="form-select WardID" name="WardID"  wire:model="WardID">
					  
					    @if($this->getwards==0)
						  @if(count($wards) > 0)
								@foreach ($wards as $item)
								<option value="{{ $item->WardID }}" wire:key="item-{{ $item->WardID }}" @if($item->WardID==$this->WardID) {{ 'selected=selected' }} @endif>{{ $item->WardName }}</option>
								@endforeach
							@endif
						@endif
						
						@if($this->getwards==1)
							<option value=null hidden selected>Select Ward</option>
						@foreach ($wards as $item)
							<option value="{{ $item->WardID }}" wire:key="item-{{ $item->WardID }}">{{ $item->WardName }}</option>
							@endforeach
						@endif
						
					  </select>
					  @error('WardID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Ward is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="editZone" class="form-label">Zone</label>
					  <select class="form-select" name="ZoneID" wire:model="ZoneID">
						<option value=null hidden>Select Zone</option>
						@foreach ($zones as $item)
						<option value="{{ $item->ZoneID }}">{{ $item->ZoneName }}</option>
						@endforeach
					  </select>
					  @error('ZoneID') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Zone is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="editLocationType" class="form-label">Location Type</label>
					  <select class="form-select" name="LocationType" wire:model="LocationType">
						<option value=null hidden>Select Location Type</option>
						<option value="Town">Town</option>
						<option value="Market">Market</option>
						<option value="Other">Other</option>
					  </select>
					  @error('LocationType') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Location type is required</div>
                    </div>
					
                  </div>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" wire:click="updateRevenueLocation">Update</button>
                  <button type="button" class="btn btn-outline-kco rmv_modal_backdrop" data-bs-dismiss="modal">Close</button>
                </div>
			  </form>
              </div>
            </div>
          </div>
		  
</div>