<div class="livewire-component-wrapper">
	@php
	use App\Models\SubCounty;
	$subcounties= SubCounty::orderBy('SubCountyName')->get();
	@endphp
	<!-- 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 Ward</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="addWard" class="form-label">Ward Name</label>
                      <input type="text" name="WardName" wire:model="WardName" class="form-control" placeholder="Ward Name" value="{{ old('WardName')}}" required>
					  @error('WardName') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Ward name is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
					  <label for="addSubCounty" class="form-label">SubCounty</label>
					  <select class="form-select" name="SubCountyID" wire:model="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>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" wire:click="saveWard">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 Ward</h5>
                  <button type="button" class="btn-close" 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="addWard" class="form-label">Ward Name</label>
                      <input type="text" name="WardName" wire:model="WardName" class="form-control" required>
					  @error('WardName') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Ward name is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addSubCounty" class="form-label">SubCounty</label>
                      <select class="form-select" name="SubCountyID" wire:model="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>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" wire:click="updateWard">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>