<div class="fv-row mb-7" wire:ignore>
 <!--begin::Label-->
 <label class="required fw-semibold fs-6 mb-2">Category</label>
 <!--end::Label-->
 <!--begin::Input-->
 <select name="category_id" aria-label="Select a Category" data-control="select2" wire:model.defer="category_id"
 class="form-select form-select-solid fw-bold category_id">
 <option value="">Select a Category...</option>
 @foreach($this->categories as $category)
 <option value="{{$category->id}}">{{$category->name}}</option>
 @endforeach
 </select>

 <!--end::Input-->

 </div>
 <div class="fv-row mb-7" wire:ignore>
 <!--begin::Label-->
 <label class="required fw-semibold fs-6 mb-2">Sub-Category</label>
 <!--end::Label-->
 <!--begin::Input-->
 <select name="child_category_id" aria-label="Select a Sub-Category" data-control="select2" wire:model.defer="child_category_id"
 class="form-select form-select-solid fw-bold child_category_id">
 <option value="">Select a Sub-Category...</option>
 @foreach($sub_categories as $sub)
 <option value="{{$sub->id}}">{{$sub->name}}</option>
 @endforeach
 </select>

 <!--end::Input-->

 </div>
@push("scripts")
 <script>
 $(document).ready(function () {

 var $selectElementCategory = $(".category_id");

 $selectElementCategory.on("change", function (e) {

 var data_category = $selectElementCategory.val();

 @this.set("category_id", data_category);
 });

 var $selectElement = $(".child_category_id");

 $selectElement.on("change", function (e) {

 var data = $selectElement.val();

 @this.set("child_category_id", data);
 });
 })

 </script>


@endpush

 public function updatedCategoryId()
 {
 $this->sub_categories = Category::whereParentId($this->category_id)->get();
 }