@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\BrandClass;
    $logged_in_user = Auth::user();
@endphp


<style>
       .min_height {
       min-height: 600px;
       height: 600px;
       }
       .main_category_div {
       min-height: 500px;
       height: 500px;
       overflow-y: auto;
       }

      .category_img{
        height: 40px;
    width: 40px;
    margin-top: 2px;
    margin-left: 2px;
      }
      .category_name{
        color: #008AC6;
        font-size: 16px;
        font-weight: 500;
        line-height: 14.52px;
      }
      .cat_img{
         height: 100px;
         border: 3px solid #e5e5e5;
         border-radius: 14px;
      }
      .search_grand_record{
        display:flex;
      }
   /* Initially hide all records */
/* .search_grand_record {
  display: none;
}

/* Show records with class "show-record" */
.search_grand_record.show-record {
  display: flex;
}

/* Hide records with class "hide-record" */
.search_grand_record.hide-record {
  display: none; 
}

.search_category{
    display:flex;
}

.search_child_category{
  display:flex;
}
.cat_img::before {
  content: attr(data-feather); 
}

#show_cover_image, #show_thumbnail_image{
  background-position:center !important;
  background-size:cover !important;
    background-repeat: no-repeat;
}
   </style>

            <!-- Page Inner Start -->
            <!--================================-->
            <div class="page-inner">
               <!--================================-->
               <!-- Breadcrumb Start -->
               <!--================================-->
               <div class="pageheader pd-t-25 pd-b-35">
                  <div class="d-flex justify-content-between">
                     <div class="clearfix">
                        <div class="pd-t-5 pd-b-5">
                           <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Product Categories') }}</h1>
                        </div>
                        <div class="breadcrumb pd-0 mg-0">
                           <a class="breadcrumb-item" href="{{url('/')}}/admin"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
                           <span class="breadcrumb-item active">Product Categories</span>
                        </div>
                     </div>
                  </div>
               </div>
               <!--/ Breadcrumb End -->
<!--================================-->
<div class="col-md-12 col-lg-12 px-0">
<div class="row">
   <!-- Main Category -->
   <div class="col-lg-6 col-xl-5">
      <div class="border">
         <div class="category-block min_height">
            <div class="p-2 border-bottom ">
               <h4>Main Category</h4>
            </div>
            <div class="border-bottom">
               <input type="text" class="form-control border-0"  id="searchcategoryInput"  placeholder="Search...">
            </div>
            <div class="search-category-message" style="display: none; color: #979797; text-align: center; margin-top: 2px;">
            No matching records found
            </div>
            <div class="main_category_div">
            <div id="category_list">
              
            </div>
            </div>
         </div>
         @if (Session::has('permissions') && in_array('Product Category Add', Session::get('permissions')))
         <button  type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#category_Model">Add</button>
         @endif
      </div>
   </div>
   <!-- End Main Category -->
   <!-- Child Category -->
   <div class="col-md-4 d-none">
      <div class="border">
         <div class="category-block min_height">
            <div class="p-2 border-bottom ">
               <h4>Child Category</h4>
            </div>
            <div class="border-bottom">
               <input type="text" class="form-control border-0"  id="searchildInput"  placeholder="Search...">
            </div>
            <div class="search-message" style="display: none; color: #979797; text-align: center; margin-top: 2px;">
            No matching records found
            </div>
            <div class="main_category_div">
            <div id="child_category_list">
          
            </div>
    </div>
         </div>
         @if (Session::has('permissions') && in_array('Product Category Add', Session::get('permissions')))
         <button  type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#Chil_category_model">Add</button>
         @endif
      </div>
   </div>
   <!--End Child Category -->
   <!-- Grand Child Category -->
   <div class="col-md-4 d-none">
      <div class="border">
         <div class="category-block min_height">
            <div class="p-2 border-bottom ">
               <h4>Sub Child Category</h4>
            </div>
            <div class="border-bottom">
               <input type="text" class="form-control border-0" id="searchgrandInput"  placeholder="Search..." >
            </div>
            <div class="search-grand-message" style="display: none; color: #979797; text-align: center; margin-top: 2px;">
            No matching records found
            </div>
            <div id = "grandchild_category_list">
          
            </div>
         </div>
         @if (Session::has('permissions') && in_array('Product Category Add', Session::get('permissions')))
         <button  type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#grand_category_model">Add</button>
         @endif
      </div>
      <!-- End Grand Child Category -->
   </div>
</div>
</div>
<!--================================-->
<!-- Button trigger modal -->


<!--Category Modal start-->
<div class="modal fade"  id="category_Model" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Category</h5>
                <button type="button" id="close_reset_form" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="add_category" enctype="multipart/form-data">
                @csrf
                <div id="success_message"></div>
               <div id="saveform_errList" role="alert"></div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Category Title</label>
                        <input type="text" id="c_title"  name="title" required class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Category Sku</label>
                        <input type="text" id="c_sku" name="sku" required class="form-control">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label for="category_thumbnail">Thumbnail Image:</label>
                                    <input type='file' id="category_thumbnail" class="form-control image-preview" name="thumbnail_image" required accept="image/png,image/jpeg" data-preview="preview_thumbnail_image">
                                    <div class="mt-2 cat_img" id="preview_thumbnail_image">
                              
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label for="category_cover">Cover Image:</label>
                                        <input class="form-control image-preview" type='file' name="cover_image" id="category_cover" required accept="image/png,image/jpeg" data-preview="preview_cover_image">
                                        <div class="mt-2 cat_img" id="preview_cover_image">
                                        
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" id="close_reset_form" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="add_category_btn" class="btn btn-primary">Add Category</button>
            </div>
            </form>

           
        </div>
    </div>
</div>

<div class="modal fade"  id="edit_category_Model" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Category</h5>
                <button type="button" id="close_reset_form" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="edit_category" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="category_id" id="category_id">
                <div id="update_success_message"></div>
               <div id="saveform_errList" role="alert"></div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Category Title</label>
                        <input type="text" id="category_title" name="title" required class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Category Sku</label>
                        <input type="text" id="category_sku" name="sku" required class="form-control">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label for="edit_category_thumbnail">Thumbnail Image:</label>
                                    <input class="form-control image-preview" type='file' name="thumbnail_image" id="edit_category_thumbnail" accept="image/png,image/jpeg" data-preview="edit_thumbnail_image">
                                        <div class="mt-2 cat_img" id="edit_thumbnail_image">
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label for="edit_category_cover">Cover Image:</label>
                                    <input class="form-control image-preview" type='file' name="cover_image" id="edit_category_cover"  accept="image/png,image/jpeg" data-preview="edit_cover_image">
                                    <div class="mt-2 cat_img" id="edit_cover_image">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="edit_category_btn" class="btn btn-primary">Update Category</button>
            </div>
            </form>

           
        </div>
    </div>
</div>

<div class="modal fade" id="show_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Category Detail</h5>
                <button type="button" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    <div class="form-group d-flex">
                        <label class="font-weight-bold">Child Category:</label    >
                            <label class="pl-2" id="main_category_title"></label>
                    </div>
                    <div class="form-group d-flex">
                            <label class="font-weight-bold">Sku:</label>
                            <span class="pl-2" id="main_category_sku"></span>
                    </div>
                    <div class="row">
                    <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label>Thumbnail Image:</label>
                                    <div class="mt-2 cat_img" id="show_thumbnail_image">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="file-upload">
                                <div class="">
                                    <label>Cover Image:</label>
                                    <div class="mt-2 cat_img" id="show_cover_image">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

<!--Category Modal End-->

<!--Child Category Modal start-->

<div class="modal fade" id="Chil_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Child Category</h5>
                <button type="button" id="child_close_reset_form"  class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="child_add_category">
                @csrf
                <div id="child_success_message"></div>
                <div id="child_sku_category"></div>
                <div class="modal-body">
                <div class="form-group">
                        <label>Category</label>
                        <select class="form-control" required id="main_parent_category" name="main_parent_category">
                        <option selected>Select Category</option>
                        @foreach($categories as $categorie)
                        <option value="{{$categorie->id}}">{{$categorie->title}}</option>
                        @endforeach
                        </select>
                    </div>
                  
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Title</label>
                                <input type="text" id="child_title"  name="child_title" required class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Sku</label>
                                <input type="text" id="child_sku" name="child_sku" required class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" id="child_close_reset_form" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="child_add_category_btn" class="btn btn-primary">Add Category</button>
            </div>
            </form>

           
        </div>
    </div>
</div>
<div class="modal fade" id="edit_Chil_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Child Category</h5>
                <button type="button" id="child_close_reset_form"  class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="edit_child_add_category">
                @csrf
                <input type="hidden" name="child_category_id" id="child_category_id">
                <div id="childcategory_success_message"></div>
                <div id="child_sku_category"></div>
                <div class="modal-body">
                    <div class="form-group">
                            <label>Category</label>
                            <select class="form-control"  id="main_parent_category_id" name="main_parent_category">
                            <option selected>Select Category</option>
                            @foreach($categories as $categorie)
                            <option value="{{$categorie->id}}">{{$categorie->title}}</option>
                            @endforeach
                            </select>
                        </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Title</label>
                                <input type="text" id="child_category_title"  name="child_title" required class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Sku</label>
                                <input type="text" id="child_category_sku" name="child_sku" required class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" id="" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="add_child_category" class="btn btn-primary">Add Category</button>
            </div>
            </form>

           
        </div>
    </div>
</div>
<div class="modal fade" id="show_Child_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Child Category Detail</h5>
                <button type="button" id="grandchild_close_reset_form" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    <div class="form-group d-flex">
                        <label class="font-weight-bold">Child Category:</label    >
                            <label class="pl-2" id="childcategory_title"></label>
                    </div>
                    <div class="form-group d-flex">
                            <label class="font-weight-bold">Sku:</label>
                            <span class="pl-2" id="childcategory_sku"></span>
                    </div>
                    <div class="form-group d-flex">
                            <label class="font-weight-bold">Parent Category:</label>
                            <span class="pl-2" id="parentcategory_title"></span>
                    </div>
                </div>
        </div>
    </div>
</div>
<!--Child Category Modal End-->

<!-- GrandChild Category Modal start-->
<div class="modal fade" id="grand_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Sub Child Category</h5>
                <button type="button" id="child_close_reset_form"  class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="grand_child_add_category">
                @csrf
                <div id="grandc_success_message"></div>
                <!-- <div id="grand_sku_category"></div> -->
                <div id="grand_sku_category"></div>
                <div class="modal-body">
                <div class="form-group">
                        <label>Category</label>
                        <select class="form-control" required id="mid_parent_category" name="mid_parent_category">
                        <option selected>Select Category</option>
                        @foreach($childcategories as $childcategorie)
                        <option value="{{$childcategorie->id}}">{{$childcategorie->child_title}}</option>
                        @endforeach
                        </select>
                    </div>
                  
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Title</label>
                                <input type="text" id="grand_title"  name="grand_title" required class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Sku</label>
                                <input type="text" id="grand_sku" name="grand_sku" required class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" id="grandchild_close_reset_form" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="grandchild_add_category_btn" class="btn btn-primary">Add Category</button>
            </div>
            </form>

           
        </div>
    </div>
</div>

<div class="modal fade" id="edit_grandChil_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Sub Child Category</h5>
                <button type="button" id="grandchild_close_reset_form" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="edit_grandchild_category">
                @csrf
                <input type="hidden"  id="grandchild_category_id">
                <div id="grandchild_success_message"></div>
                <div id="child_sku_category"></div>
                <div class="modal-body">
                    <div class="form-group">
                            <label>Category</label>
                            <select class="form-control"  id="mid_parent_category_title" name="mid_parent_category">
                            <option selected>Select Category</option>
                            @foreach($childcategories as $childcategorie)
                            <option value="{{$childcategorie->id}}">{{$childcategorie->child_title}}</option>
                            @endforeach
                            </select>
                        </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Title</label>
                                <input type="text" id="edit_grandchild_title"  name="grand_title" required class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category Sku</label>
                                <input type="text" id="edit_grandchild_sku" name="grand_sku" required class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" id="" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="grandchild_edit_category_btn" class="btn btn-primary">Add Category</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="show_grandChil_category_model"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sub Child Category Detail</h5>
                <button type="button" id="grandchild_close_reset_form" class="close"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
                <div class="modal-body">
                    <div class="form-group d-flex">
                        <label class="font-weight-bold">Sub Child Category:</label    >
                            <label class="pl-2" id="sub_titlegrand"></label>
                    </div>
                    <div class="form-group d-flex">
                            <label class="font-weight-bold">Sku:</label>
                            <span class="pl-2" id="sub_sku"></span>
                    </div>
                    <div class="form-group d-flex">
                            <label class="font-weight-bold">Child Category:</label>
                            <span class="pl-2" id="parent_child_title"></span>
                    </div>
                </div>
        </div>
    </div>
</div>
<!--GrandChild Category Modal End-->
</div>
@include('Admin.Includes.footer')

<script>

// Function to handle search for grandchild categories
function searchGrandchildCategories() {
  var searchTerm = $('#searchgrandInput').val().toLowerCase();
  var matchingRecords = 0;
  
  $('.search_grand_record').each(function() {
    var grandChildTitle = $(this).find('.grand_child_title').text().toLowerCase();
    var grandChildSKU = $(this).find('.grand_child_sku').text().toLowerCase();
    var childCategoryTitle = $(this).find('.child_category_title').text().toLowerCase();

    if (
      searchTerm === '' ||
      grandChildTitle.includes(searchTerm) ||
      grandChildSKU.includes(searchTerm) ||
      childCategoryTitle.includes(searchTerm)
    ) {
      $(this).addClass('show-record').removeClass('hide-record');
      matchingRecords++;
    } else {
      $(this).addClass('hide-record').removeClass('show-record');
    }
  });

  // Show/hide the "No matching records found" message based on the search results
  if (matchingRecords === 0 && searchTerm !== '') {
    $('.search-grand-message').show();
  } else {
    $('.search-grand-message').hide();
  }
}

// Add an event listener to the search input field
$(document).on('input', '#searchgrandInput', searchGrandchildCategories);



//category seaerch
function searchCategories() {
  console.log('Search function triggered.');
  var searchTerm = $('#searchcategoryInput').val().toLowerCase();
  var matchingCategoryRecords = 0;
  $('.search_category').each(function() {
    var grandCategoryName = $(this).find('.category_name').text().toLowerCase();
    var categorySKU = $(this).find('.category_sku').text().toLowerCase();

    if (searchTerm === '' || grandCategoryName.includes(searchTerm) || categorySKU.includes(searchTerm)) {
      $(this).css('display', 'flex');
      matchingCategoryRecords++;
    } else {
      $(this).css('display', 'none');
    }
  });

  if (matchingCategoryRecords === 0 && searchTerm !== '') {
    $('.search-category-message').show();
  } else {
    $('.search-category-message').hide();
  }
}

$(document).on('input', '#searchcategoryInput', searchCategories);


//seaech child
function searchchildCategories() {
  console.log('Search function triggered.');
  var searchTerm = $('#searchildInput').val().toLowerCase();
  var matchingRecords = 0;

  $('.search_child_category').each(function() {
    var mainCategoryTitle = $(this).find('.main_category_title').text().toLowerCase();
    var childCategorySKU = $(this).find('.child_category_sku').text().toLowerCase();
    var childCategoryName = $(this).find('.child_category_name').text().toLowerCase();

    if (
      searchTerm === '' ||
      mainCategoryTitle.includes(searchTerm) ||
      childCategorySKU.includes(searchTerm) ||
      childCategoryName.includes(searchTerm)
    ) {
      $(this).css('display', 'flex');
      matchingRecords++;
    } else {
      $(this).css('display', 'none');
    }
  });

  // Show/hide the "No matching records found" message based on the search results
  if (matchingRecords === 0 && searchTerm !== '') {
    $('.search-message').show();
  } else {
    $('.search-message').hide();
  }
}

$(document).on('input', '#searchildInput', searchchildCategories);



// Create the generic function to handle input fields
function updateSKU(inputId) {
  var title = $('#' + inputId).val();
  var sku = title.replace(/\s+/g, '-').toLowerCase();
  // Find the corresponding SKU input element using the naming convention
  var skuId = inputId.replace('title', 'sku');
  $('#' + skuId).val(sku);
}
// Set up event listeners for all sets of input fields
$('#c_title, #category_title, #child_title, #child_category_title, #grand_title, #edit_grandchild_title').on('input', function() {
  updateSKU(this.id);
});



function handleImagePreview(inputElement, previewElement) {
  inputElement.addEventListener('change', function(event) {
    var selectedFile = event.target.files[0];
    if (selectedFile) {
      var reader = new FileReader();
      reader.onload = function(event) {
        var imageUrl = event.target.result;
        previewElement.style.backgroundImage = `url('${imageUrl}')`;
        previewElement.style.backgroundSize = 'cover';
      }
      reader.readAsDataURL(selectedFile);
    } else {
      previewElement.style.backgroundImage = 'none';
    }
  });
}
// Get all file input elements with class "image-preview"
var fileInputs = document.querySelectorAll('.image-preview');
// Loop through each file input element and attach the handleImagePreview function
fileInputs.forEach(function(fileInput) {
  var previewId = fileInput.dataset.preview; // Get the ID of the preview div
  var previewElement = document.getElementById(previewId); // Get the corresponding preview div
  handleImagePreview(fileInput, previewElement);
});

$(document).ready(function() {



$(document).on('click', '#grandchild_close_reset_form', function() {
$('#grand_child_add_category')[0].reset();
});


    $('#grand_child_add_category').on('submit', function(event) {
      event.preventDefault();
      var form = $(this);
      var formData = new FormData(form[0]);
      $('#grandchild_add_category_btn').text('Adding...');

      $.ajax({
        type: 'POST',
        url: '/store_grandchild_category',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          // Handle the success response here
          if (response.status === 'success') {
            $('#grandc_success_message').html('<div class="alert alert-success">Category added successfully.</div>');
            $('#grand_sku_category').html(''); 
            getgrandchildCategory();
            $('#grandchild_add_category_btn').text('Add Category');
             window.location = window.location;
          }
        },
        error: function(xhr, status, error) {
  var responseObj = JSON.parse(xhr.responseText);
  if (responseObj.errors && responseObj.errors.grand_sku) { 
    // Modify the error message to remove the field name ("grand_sku")
    var errorMessage = responseObj.errors.grand_sku[0].replace('The grand sku', 'SKU');
    $('#grand_sku_category').html('<div class="alert alert-danger">' + errorMessage + '</div>');
    $('#grandchild_add_category_btn').text('Add Category');
  } else {
    $('#grand_sku_category').html('');
  }
}
      });
    });


// Fetch all grandchild categories
getgrandchildCategory();
    function append_grandChild_Category(grand_category) {
  var grand_categoryDiv = `
    <div class="border search_grand_record rounded m-2 p-1">
      <div class="flex-grow-1 m-2">
        <div class="category_name grand_child_title" style="color:#008AC6">${grand_category.grand_title}</div>
        <span class="border-bottom grand_child_sku" style="color:#979797">SKU: ${grand_category.grand_sku}</span>
        <div class="category_name child_category_title" style="color:#008AC6">Child Category: ${grand_category.child_title}</div>
      </div>
      <div class="d-flex m-auto">
        <span><i data-feather="eye" class="showgrandchilddetail" data-toggle="modal" data-target="#show_grandChil_category_model"  style="cursor: pointer;"  data-id="${grand_category.id}"></i></span>
       @if (Session::has('permissions') && in_array('Product Category Delete', Session::get('permissions')))
        <span><i data-feather="trash-2" class="deletegrandchildcategory" style="color:red; cursor: pointer;"  data-id="${grand_category.id}"></i></span>
       @endif
        @if (Session::has('permissions') && in_array('Product Category Edit', Session::get('permissions')))
        <span><i data-feather="edit" class="editgrandchildcategory" data-toggle="modal" data-target="#edit_grandChil_category_model" style="color:#979797; cursor: pointer;"  data-id="${grand_category.id}"></i></span>
      @endif
      </div>
    </div>`;
  $('#grandchild_category_list').append(grand_categoryDiv);
}

function getgrandchildCategory() {
  $.ajax({
    url: "/get_grandchild_category",
    method: "get",
    success: function(res) {
      console.log(res);
      if (res.status == 'success') {
        var categories = res.data;
        $('#grandchild_category_list').empty(); 
        
        if (categories.length === 0) {
          $('#grandchild_category_list').append('<div  style="color:#979797;text-align: center; margin-top:2px" >Category Not Found</div>');
        } else {
          // Append categories if available
          categories.forEach(function(grand_category) {
            append_grandChild_Category(grand_category);
          });

          // After appending the data, reinitialize Feather icons to apply click events
          feather.replace();
        }
      } else {
        console.error('Failed to fetch categories.');
      }
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
}


//delet grandchild category
$(document).on('click', '.deletegrandchildcategory', function (e) {
  e.preventDefault();
  let id = $(this).attr('data-id');
  // Show a simple JavaScript alert to confirm deletion
  if (confirm("Are you sure you want to delete this category?")) {
    $.ajax({
      url: '/delete_grandchild_catgory',
      method: 'post',
      data: {
        id: id,
        _token: '{{ csrf_token() }}'
      },
      success: function (res) {
        // alert("Category has been deleted.");
        location.reload();
        getgrandchildCategory();
      }
    });
  }
});

//edit grandchild Category data
$(document).on('click', '.editgrandchildcategory', function (e) {
    e.preventDefault();
    let id = $(this).attr('data-id');
    $.ajax({
        url: '/edit_grandchild_category',
        method: 'get',
        data: {
            id: id,
            _token: '{{ csrf_token() }}'
        },
        success: function (res) {
            console.log('Response:', res);

            if (res.length > 0) {
    const data = res[0];
    $('#edit_grandchild_title').val(data.grand_title);
    $('#edit_grandchild_sku').val(data.grand_sku);
    $('#grandchild_category_id').val(data.id);
    var categorySelect = $('#mid_parent_category_title');
    var selectedCategoryId = data.mid_parent_category; // Update the key to match the correct value in the response
    categorySelect.val(selectedCategoryId).prop('selected', true);
} else {
    console.error('No data found in the response.');
}
        },
        
        error: function (xhr, status, error) {
            console.error('Error:', error);
        }
    });
});


//update grandchild category
$('#edit_grandchild_category').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form[0]);
    $('#grandchild_edit_category_btn').text('Updating...');
    var childgrand_categoryId = $('#grandchild_category_id').val(); // Assuming you have an input field with id="category_id" to store the category ID

    $.ajax({
        type: 'POST', 
        url: '/update_grandchild_category/' + childgrand_categoryId, 
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.status === 'success') {
                $('#grandchild_success_message').html('<div class="alert alert-success">Sub Child Category updated successfully.</div>');
                $('#grandchild_sku_category').html('');
                getgrandchildCategory();
                $('#grandchild_edit_category_btn').text('Update Category');
                window.location = window.location;
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            var responseObj = JSON.parse(xhr.responseText);
            if (responseObj.errors && responseObj.errors.child_sku) {
                var errorMessage = responseObj.errors.child_sku[0].replace('The child sku', 'SKU');
                $('#child_sku_category').html('<div class="alert alert-danger">' + errorMessage + '</div>');
            } else {
                $('#child_sku_category').html('');
            }
        }
    });
});

//show grandchild Category data
$(document).on('click', '.showgrandchilddetail', function (e) {
  e.preventDefault();
  let id = $(this).attr('data-id');
  $.ajax({
    url: '/show_grandchild_detail',
    method: 'get',
    data: {
      id: id,
      _token: '{{ csrf_token() }}'
    },
    success: function(res) {
      console.log(res);
      if (res.length > 0) {
    const data = res[0]; // Access the first object in the array
    $('#sub_titlegrand').text(data.grand_title);
    $('#sub_sku').text(data.grand_sku);
    $('#parent_child_title').text(data.child_title);
  } else {
    console.error('No data found in the response.');
  }
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
});

////////////////////////////////child Category////////////////////////////////////////

$(document).on('click', '#child_close_reset_form', function() {
$('#child_add_category')[0].reset();
});


$('#child_add_category').on('submit', function(event) {
      event.preventDefault();
      var form = $(this);
      var formData = new FormData(form[0]);
      $('#child_add_category_btn').text('Adding...');

      $.ajax({
        type: 'POST',
        url: '/store_child_category',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          // Handle the success response here
          if (response.status === 'success') {
            $('#child_success_message').html('<div class="alert alert-success">Category added successfully.</div>');
            $('#child_sku_category').html(''); // Clear any previous SKU error message
            getchildCategory();
            // Update button text to "Complete" after successful addition
            $('#child_add_category_btn').text('Add Category');
             window.location = window.location;
          }
        },
        error: function(xhr, status, error) {
          // Handle the error response here if needed
          console.log(xhr.responseText);

          // Display the SKU error message if it exists in the response
          var responseObj = JSON.parse(xhr.responseText);
          if (responseObj.errors && responseObj.errors.child_sku) {
            // Modify the error message to remove the field name ("child_sku")
            var errorMessage = responseObj.errors.child_sku[0].replace('The sku', 'SKU');
            $('#child_sku_category').html('<div class="alert alert-danger">' + errorMessage + '</div>');
          } else {
            $('#child_sku_category').html(''); // Clear the error message if not SKU error
          }

        }
      });
    });

// Fetch all child categories
getchildCategory();
    function append_Child_Category(Child_category) {
  var Child_categoryDiv = `
    <div class="border search_child_category rounded m-2 p-1">
      <div class="flex-grow-1 m-2">
        <div class="category_name child_category_name" style="color:#008AC6">${Child_category.child_title}</div>
        <span class="border-bottom child_category_sku" style="color:#979797">SKU: ${Child_category.child_sku}</span>
        <div class="category_name main_category_title" style="color:#008AC6">Parent Category: ${Child_category.title}</div>
      </div>
      <div class="d-flex m-auto">
        <span><i data-feather="eye" class="showchilddetail"  style="cursor: pointer;" data-toggle="modal" data-target="#show_Child_category_model"  data-id="${Child_category.id}"></i></span>
        @if (Session::has('permissions') && in_array('Product Category Delete', Session::get('permissions')))
        <span><i data-feather="trash-2" class="deletechildcategory" style="color:red; cursor: pointer;"  data-id="${Child_category.id}"></i></span>
         @endif
         @if (Session::has('permissions') && in_array('Product Category Edit', Session::get('permissions')))
        <span><i data-feather="edit" class="editchildcategory" data-toggle="modal" data-target="#edit_Chil_category_model" style="color:#979797; cursor: pointer;"  data-id="${Child_category.id}"></i></span>
     @endif
      </div>
    </div>`;
  $('#child_category_list').append(Child_categoryDiv);
}


function getchildCategory() {
  $.ajax({
    url: "/get_child_category",
    method: "get",
    success: function(res) {
      // console.log(res);
      if (res.status == 'success') {
        var categories = res.data;
        $('#child_category_list').empty(); // Clear the existing data before appending new data
        
        if (categories.length === 0) {
          // No categories found, display "Category Not Found" message
          $('#child_category_list').append('<div  style="color:#979797;text-align: center; margin-top:2px" >Category Not Found</div>');
        } else {
          // Append categories if available
          categories.forEach(function(Child_category) {
            append_Child_Category(Child_category);
          });

          // After appending the data, reinitialize Feather icons to apply click events
          feather.replace();
        }
      } else {
        console.error('Failed to fetch categories.');
      }
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
}

//edit child Category data
$(document).on('click', '.editchildcategory', function (e) {
    e.preventDefault();
    let id = $(this).attr('data-id');
    $.ajax({
        url: '/edit_child_category',
        method: 'get',
        data: {
            id: id,
            _token: '{{ csrf_token() }}'
        },
        success: function (res) {
    console.log('Response:', res);

    if (res.length > 0) {
        const data = res[0];
        $('#child_category_title').val(data.child_title);
        $('#child_category_sku').val(data.child_sku);
        $('#child_category_id').val(data.id);
        var categorySelect = $('#main_parent_category_id');
        var selectedCategoryId = data.main_parent_category; // Update the key to match the correct value in the response
        categorySelect.val(selectedCategoryId).prop('selected', true);
    } else {
        console.error('No data found in the response.');
    }
},
        error: function (xhr, status, error) {
            console.error('Error:', error);
        }
    });
});

//update child category
$('#edit_child_add_category').on('submit', function(event) {
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form[0]);
    $('#add_child_category').text('Updating...');

    var child_categoryId = $('#child_category_id').val();

    $.ajax({
        type: 'POST',
        url: '/update_child_category/' + child_categoryId,
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.status === 'success') {
                $('#childcategory_success_message').html('<div class="alert alert-success">Child Category updated successfully.</div>');
                $('#child_sku_category').html(''); 
                getchildCategory();
                $('#add_child_category').text('Update Category');
                window.location = window.location;
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            var responseObj = JSON.parse(xhr.responseText);
            if (responseObj.errors && responseObj.errors.child_sku) {
                var errorMessage = responseObj.errors.child_sku[0].replace('The child sku', 'SKU');
                $('#child_sku_category').html('<div class="alert alert-danger">' + errorMessage + '</div>');
            } else {
                $('#child_sku_category').html(''); // Clear the error message if not SKU error
            }
        }
    });
});
//delet child category
$(document).on('click', '.deletechildcategory', function (e) {
  e.preventDefault();
  let id = $(this).attr('data-id');
  
  // Show a simple JavaScript alert to confirm deletion
  if (confirm("Are you sure you want to delete this category?")) {
    $.ajax({
      url: '/delete_child_catgory',
      method: 'post',
      data: {
        id: id,
        _token: '{{ csrf_token() }}'
      },
      success: function (res) {
        // alert("Category has been deleted.");
        location.reload();
        getchildCategory();
      }
    });
  }
});

//show child Category data
$(document).on('click', '.showchilddetail', function (e) {
  e.preventDefault(); 
  let id = $(this).attr('data-id');
  // console.log(emp_id);
  $.ajax({
    url:'/show_child_detail',
    method: 'get', // Corrected from 'methos' to 'method'
    data: {
      id: id,
      _token: '{{ csrf_token() }}'
    },
    success: function(res) {
      console.log(res);
    if (res.length > 0) {
    const data = res[0]; // Access the first object in the array
    $('#childcategory_title').text(data.child_title);
    $('#childcategory_sku').text(data.child_sku);
    $('#parentcategory_title').text(data.title);
  } else {
    console.error('No data found in the response.');
  }
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
});

////////////////////////////// Category /////////////////////////////

$(document).on('click', '#close_reset_form', function() {
$('#add_category')[0].reset();
$('#preview_cover_image').css('backgroundImage', 'none');
$('#preview_thumbnail_image').css('backgroundImage', 'none');
});

  //add new category
  $('#add_category').submit(function (e) {
  e.preventDefault();

  const fd = new FormData(this);
  $('#add_category_btn').text('Adding...');
  $.ajax({
    url: '/store',
    method: "POST",
    data: fd,
    cache: false,
    processData: false,
    contentType: false,
    success: function (res) {
      if (res.errors && res.errors.sku) {
        // Show Bootstrap error alert for SKU already taken
        $('#saveform_errList').html("");
        $('#saveform_errList').addClass('alert alert-danger');
        $('#saveform_errList').text(res.errors.sku[0]).show();
        // Hide the alert after 3 seconds (3000 milliseconds)
        
      } else {
        // Show Bootstrap success alert
        $('#success_message').addClass('alert alert-success');
        $('#success_message').text('Category Added Successfully').show();
        getallCategory();
        // Reset the form after success
        $('#add_category')[0].reset();
        $('#preview_cover_image').css('backgroundImage', 'none');
        $('#preview_thumbnail_image').css('backgroundImage', 'none');
        window.location = window.location;

      }
      $('#add_category_btn').text('Add Category');
    },
    error: function (xhr) {
      // Handle the case when the server responds with an error status (e.g., 422)
      if (xhr.status === 422) {
        var errors = xhr.responseJSON.errors;
        if (errors && errors.sku) {
          // Show Bootstrap error alert for SKU already taken
          $('#saveform_errList').html("");
          $('#saveform_errList').addClass('alert alert-danger');
          $('#saveform_errList').text(errors.sku[0]).show();
         
        }
      }
      $('#add_category_btn').text('Add Category');
    }
  });
});

    // Fetch all categories
    getallCategory();
    var baseUrl = "{{ url('/') }}";
    function appendCategory(category) {
    var thumbnailImage = category.thumbnail_image; 
    var categoryDiv = '<div class="border search_category  rounded m-2 p-1">' +
                      '<div class="border rounded-circle category_img" style="background:url(' + baseUrl + '/' + thumbnailImage + ');background-size:cover;background-position:center"></div>' +
                      '<div class="flex-grow-1 ml-1 mt-auto">' +
                      '<div class="category_name" search_category_title style="color:#008AC6">' + category.title + '</div>' +
                      '<span style="color:#979797" class="category_sku">SKU: ' + category.sku + '</span>' +
                      '</div>' +
                      '<div class="d-flex m-auto">' +
                      '<span><i data-feather="eye" class="showdetail" data-toggle="modal" data-target="#show_category_model" style="cursor: pointer;" data-id="' + category.id + '"></i></span>' +
                       @if (Session::has('permissions') && in_array('Product Category Delete', Session::get('permissions')))
                      '<span><i data-feather="trash-2"  class="deletetIcon" style="color:red; cursor: pointer;" data-id="' + category.id + '"></i></span>' +
                       @endif
                        @if (Session::has('permissions') && in_array('Product Category Edit', Session::get('permissions')))
                      '<span><i data-feather="edit" class="editIcon" data-toggle="modal" data-target="#edit_category_Model" style="color:#979797; cursor: pointer;" data-id="' + category.id + '"></i></span>' +
                      @endif
                      '</div></div>';
    $('#category_list').append(categoryDiv);
}
// function appendCategory(category) {
//     var thumbnailImage = category.thumbnail_image;
//     var categoryDiv = '<div class="border search_category  rounded m-2 p-1">' +
//         '<div class="border rounded-circle category_img" style="background:url(' + baseUrl + '/' + thumbnailImage + ');background-size:cover;background-position:center"></div>' +
//         '<div class="flex-grow-1 ml-1 mt-auto">' +
//         '<div class="category_name" search_category_title style="color:#008AC6">' + category.title + '</div>' +
//         '<span style="color:#979797" class="category_sku">SKU: ' + category.sku + '</span>' +
//         '</div>' +
//         '<div class="d-flex m-auto">' +
//         '<span><i data-feather="eye" class="showdetail" data-toggle="modal" data-target="#show_category_model" style="cursor: pointer;" data-id="' + category.id + '"></i></span>' +
//       @if (Session::has('permissions') && in_array('Product Category Delete', Session::get('permissions')))
//         '<span><i data-feather="trash-2"  class="deletetIcon" style="color:red; cursor: pointer;" data-id="' + category.id + '"></i></span>' +
//       @endif
//         @if (Session::has('permissions') && in_array('Product Category Edit', Session::get('permissions')))
//         '<span><i data-feather="edit" class="editIcon" data-toggle="modal" data-target="#edit_category_Model" style="color:#979797; cursor: pointer;" data-id="' + category.id + '"></i></span>' +
//         @endif
//         '</div></div>';
//     $('#category_list').append(categoryDiv);
// }



function getallCategory() {
  $.ajax({
    url: "/fetch-all",
    method: "get",
    success: function(res) {
      // console.log(res);
      if (res.status == 'success') {
        var categories = res.data;
        $('#category_list').empty(); // Clear the existing data before appending new data
        if (categories.length === 0) {
          // No categories found, display "Category Not Found" message
          $('#category_list').append('<div  style="color:#979797;text-align: center; margin-top:2px" >Category Not Found</div>');
        } else {
          // Append categories if available
          categories.forEach(function(category) {
            appendCategory(category);
          });

          // After appending the data, reinitialize Feather icons to apply click events
          feather.replace();
        }
      } else {
        console.error('Failed to fetch categories.');
      }
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
}

//edit Category data
$(document).on('click', '.editIcon', function (e) {
  e.preventDefault(); 
  let id = $(this).attr('data-id');
  // console.log(emp_id);
  $.ajax({
    url:'/edit_category',
    method: 'get', // Corrected from 'methos' to 'method'
    data: {
      id: id,
      _token: '{{ csrf_token() }}'
    },
    success: function(res) {
      console.log(res);
      $('#category_title').val(res.title);
      $('#category_sku').val(res.sku);
      var baseUrl = "{{ url('/') }}";
       $('#edit_thumbnail_image').css({ backgroundImage: 'url(' + baseUrl + '/' + res.thumbnail_image + ')', backgroundSize: 'cover'});
      $('#edit_cover_image').css({ backgroundImage: 'url(' + baseUrl + '/' + res.cover_image + ')', backgroundSize: 'cover'});
      $('#category_id').val(res.id);
      // $('#avatar').html(`<img src="/storage/images/${res.avatar}" width="100" class="img-fluid img-thumbnail">`);
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
});

//update category data
$('#edit_category').submit(function (e) {
  e.preventDefault();
  const categoryId = $('#category_id').val();
  const fd = new FormData(this);
  $('#edit_category_btn').text('Updating...'); // Update button text before the AJAX request
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });
  $.ajax({
    url: '/update_category/' + categoryId,
    method: 'post',
    data: fd,
    cache: false,
    processData: false,
    contentType: false,
    success: function (res) {
      if (res.status === 'success') {
        $('#update_success_message').addClass('alert alert-success');
        $('#update_success_message').text(res.message).show();
        getallCategory();
        window.location = window.location;
      } else {
        $('#saveform_errList').html("");
        $('#saveform_errList').addClass('alert alert-danger');
        $('#saveform_errList').text(res.message).show();
      }
      $('#edit_category_btn').text('Update Category');
    },
    error: function (xhr, status, error) {

      // $('#edit_category_btn').text('Update Category');
    }
  });
});

//delet category
$(document).on('click', '.deletetIcon', function (e) {
  e.preventDefault();
  let id = $(this).attr('data-id');
  
  // Show a simple JavaScript alert to confirm deletion
  if (confirm("Are you sure you want to delete this category?")) {
    $.ajax({
      url: '/delete_category',
      method: 'post',
      data: {
        id: id,
        _token: '{{ csrf_token() }}'
      },
      success: function (res) {
        // alert("Category has been deleted.");
         location.reload();
        getallCategory();
      }
    });
  }
});



//show Category data
$(document).on('click', '.showdetail', function (e) {
  e.preventDefault(); 
  let id = $(this).attr('data-id');
  // console.log(emp_id);
  $.ajax({
    url:'/show_category_detail',
    method: 'get', // Corrected from 'methos' to 'method'
    data: {
      id: id,
      _token: '{{ csrf_token() }}'
    },
    success: function(res) {
      console.log(res);
      $('#main_category_title').html(res.title);
      $('#main_category_sku').html(res.sku);
      var baseUrl = "{{ url('/') }}";
       $('#show_thumbnail_image').css({ backgroundImage: 'url(' + baseUrl + '/' + res.thumbnail_image + ')', backgroundSize: 'cover'});
      $('#show_cover_image').css({ backgroundImage: 'url(' + baseUrl + '/' + res.cover_image + ')', backgroundSize: 'cover'});

    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
});

});











       


</script>