<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Categories</title>

  <!-- Bootstrap core CSS -->
  <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Kufam:wght@400;500;600;700;800;900&display=swap"
    rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="../public/css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="icon" href="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="script" />

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <?php
          
          include ('../sidebar_admin.php'); 
      ?>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <!--Navbar-->

        <?php
        include ('../navbar_admin.php');
        ?>


        <!--End of Navbar-->

      <div class="container">
        <div class="row mt-4  catmaincard">

          <!--first box category start-->
          <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 mt-4">
            <div class="card categories_card_styling">

              <div class="card-body">

                <h5 class="card-title cat-title">Categories</h5>

                <div id="catgory_cards">

                  <?php
                 
                  $query = "SELECT * FROM Categories  ORDER BY position+0 ASC";
                  $result = queryRunner($query);
                  $i = 0;
                  while ($row = rowRetriever($result)) {
                    
                    ?>

                  <div
                    class="card  <?php if($row['enable']== 0){echo "cat-card";  } else { echo "disable_outline"; }?>  ui-state-default "
                    id="firstcard-<?php echo $row['id']; ?>"
                    onclick="retrieveSpecificCategoriesData(<?php echo $row['id']; ?>)">
                    <div class="card-body cat-card-body">
                      <div class="cat-txt-div" style="display: flex;">
                        <input type="hidden" id="category-status-<?php echo $row['id']; ?>" name="category-status"
                          value="<?php echo $row['enable']; ?>">
                        <input type="hidden" id="main_ctg_<?php echo $i; ?>" name="main_ctg_<?php echo $i; ?>"
                          value="<?php echo $row['id']; ?>">
                        <div class="drag">
                          <i class="fa fa-ellipsis-v fa-ellip" aria-hidden="true"></i>
                        </div>
                        <div class="cat-img">
                          <img src="<?php echo $category_images . $row['image'] ?>"
                            id="first-img-<?php echo $row['id']; ?>" class="cat-img-w" alt="" />
                        </div>
                        <div class="my-auto cat-txt" style="margin-left: 11px">
                          <h5 id="elect-head-<?php echo $row['id']; ?>"><?php echo $row['name']; ?></h5>
                        </div>
                      </div>
                      <div class="btn_width">
                        <button data-toggle="modal" data-target="" data-ctgid="<?php echo $row['id']; ?>" id="editmodal"
                          type="button" class="btn btn-outline-white2 btn-rounded btn-sm">
                          <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>
                        </button>
                        <button type="button" onclick="deleteCategory(<?php echo $row['id']; ?>)"
                          class="btn btn-outline-white2 btn-rounded btn-sm">
                          <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                        </button>
                      </div>
                    </div>
                  </div>

                  <?php
                    $i++;
                  }
                 
                 ?>

                  <input type="hidden" id="item-count" name="item-count" value="<?php echo $i ?>">

                </div>

                <div class="card text-center cat-card-btn">
                  <div class="card-body text-center">
                    <div class="plus-cat-img great-modal" data-toggle="modal" data-itemcount="<?php echo $i; ?>"
                      data-target="#exampleModalCenter">
                      <img src="../public/image/plus (1).png" style="width: 13px; height: 13px;" alt="" />
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </div>
          <!--first box category end-->

          <!-- second box subcatogy start -->
          <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 cat-sub-box mt-4">
            <div class="card categories_card_styling">

              <div class="card-body">
                <h5 class="card-title cat-title">Sub Categories</h5>
                <div id="second-box" class="columns"></div>


                <!-- <div class="card cat-card cat-card-sub-catagory">
                              <div class="card-body">
                                <div
                                  class=""
                                  style="display: flex; justify-content: space-between;"
                                >
                                  <div class="my-auto cat-txt2">
                                    <h5>Electrnics</h5>
                                  </div>
                                  <div>
                                    <div class="btn_width">
                                      <button
                                        type="button"
                                        class="btn btn-outline-white2 btn-rounded btn-sm"
                                      >
                                        <i
                                          class="fas fa-pencil-alt fa-pencil-alt2 mt-0"
                                        ></i>
                                      </button>
                                      <button
                                        type="button"
                                        class="btn btn-outline-white2 btn-rounded btn-sm"
                                      >
                                        <i
                                          class="far fa-trash-alt fa-trash-alt2 mt-0"
                                        ></i>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div> -->

                <!-- <div class="cat-hidebtn3" style="display: none;">
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>
                              </button>
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                              </button>
                            </div> -->

                <!-- <div class="card cat-card cat-card-sub-catagory">
                              <div class="card-body cat-card-body">
                                <div class="btn_width">
                                  <div class="my-auto cat-txt2">
                                    <h5>Electrnics</h5>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="cat-hidebtn4" style="display: none;">
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>
                              </button>
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                              </button>
                            </div> -->

                <div class="card text-center cat-card-btn">
                  <div class="card-body text-center">
                    <div class="plus-cat-img subcategory-add-modal" data-toggle="modal" data-id="0"
                      data-target="#subcategory-modal">
                      <img src="../public/image/plus (1).png" style="width: 13px; height: 13px;" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- second box subcatogy end -->

          <!-- third child box start -->
          <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 cat-child-box mt-4">
            <div class="card categories_card_styling">
              <div class="card-body">
                <h5 class="card-title cat-title">Child Catagories</h5>
                <div id="child-box"> </div>
                <!-- <div class="card cat-card">
                              <div class="card-body cat-card-body">
                                <div class="cat-txt-div" style="display: flex;">
                                  <div class="drag">
                                    <i
                                      class="fa fa-ellipsis-v fa-ellip"
                                      aria-hidden="true"
                                    ></i>
                                  </div>
                                  <div class="cat-img">
                                    <img src="img/sff.jpg" class="cat-img-w" alt="" />
                                  </div>
                                  <div class="my-auto cat-txt">
                                    <h5>Electrnics</h5>
                                  </div>
                                </div>
                                <div class="cat-btn">
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>
                              </button>
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                              </button>
                            </div>
                              </div>
                            </div> -->

                <!-- <div class="card cat-card">
                              <div class="card-body cat-card-body">
                                <div class="cat-txt-div" style="display: flex;">
                                  <div class="drag">
                                    <i
                                      class="fa fa-ellipsis-v fa-ellip"
                                      aria-hidden="true"
                                    ></i>
                                  </div>
                                  <div class="cat-img">
                                    <img src="img/sff.jpg" class="cat-img-w" alt="" />
                                  </div>
                                  <div class="my-auto cat-txt">
                                    <h5>Electrnics</h5>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="cat-hidebtn2" style="display: none;">
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>
                              </button>
                              <button
                                type="button"
                                class="btn btn-outline-white2 btn-rounded btn-sm"
                              >
                                <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                              </button>
                            </div> -->
                <div class="card text-center cat-card-btn">
                  <div class="card-body text-center">
                    <div class="plus-cat-img childcategory-add-modal" data-id="0" onclick="childmodalimg()"
                      data-toggle="modal" data-target="#childbox-modal">
                      <img src="../public/image/plus (1).png" style="width: 13px; height: 13px;" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- third child box end -->

        </div>
      </div>
      <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->
  </div>


  <!-- Modal -->
  <form id="modal-form" class="admin_cat_modal" action="">
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header mh">
            <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close"
              onclick="colsemodel()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <input type="hidden" id="item-count">
          <div class="modal-body mb">
            <div>
              <div class="cat-folder-img">
                <i class="fa fa-folder" aria-hidden="true"></i>
              </div>
            </div>
            <label for="cat-name-upload" class="customer-add-input-label txt-regular upload-input-label">Category
              Name</label>

            <input type="text" id="cat-name-upload" name="cat-name-upload" placeholder="Category Name" value=""
              class="customer-add-input catgory_name w-100" />
            <div>
              <div>
                <div class="upload-text-heading">
                  <h5 class="coupon-code-main-heading txt-regular">
                    Upload your attachments
                  </h5>
                </div>
                <div>
                  <p class="upload-main-paragraph txt-label2">
                    Drag and drop your files here
                  </p>
                </div>
              </div>
              <div class="card text-center uload-card">
                <div class="file-upload">
                  <div class="image-upload-wrap">
                    <input class="file-upload-input" type="file" onchange="readURL(this);" accept="image/*" />
                    <div class="drag-text">
                      <div class="card-body upload-card-body">
                        <div class="upload-img">
                          <img src="../public/image/upload.png" alt="" />
                        </div>
                        <div class="upload-image-format">
                          <p>
                            .PDF .JPG .PNG .DOC
                          </p>
                        </div>
                        <div class="upload-detail">
                          <h4>You can also upload files by</h4>
                          <div class="upload-clicking">
                            <a href="#" class="">Clicking here</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="file-upload-content">
                    <img class="file-upload-image" src="#" alt="your image" />
                    <div class="image-title-wrap">
                      <button type="button" onclick="removeUpload()" class="btn remove-image">
                        Remove
                        <span class="image-title" style="display: none;">Uploaded Image</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer mf">
            <button type="button" onclick="addCatgoryModal()" class="btn btn-primary">
              <img src="../public/image/tick (1).png" alt="" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <!-- Modal End -->

  <!-- Modal Edit  -->
  <div class="modal fade admin_cat_modal" id="modaledit" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header mh">
          <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mb">
          <div>
            <div class="cat-folder-img">
              <i class="fa fa-folder" aria-hidden="true"></i>
            </div>
          </div>
          <input type="hidden" id="category-id" name="category-id">
          <label for="cat-edit-upload" class="customer-add-input-label txt-regular upload-input-label">Category
            Name</label>

          <input type="text" id="cat-edit-upload" name="cat-edit-upload" placeholder="Category Name" value=""
            class="customer-add-input w-100" />
          <div>
            <div>
              <div class="upload-text-heading">
                <h5 class="coupon-code-main-heading txt-regular">
                  Upload your attachments
                </h5>
              </div>
              <div>
                <p class="upload-main-paragraph txt-label2">
                  Drag and drop your files here
                </p>
              </div>
            </div>
            <div class="card text-center uload-card">
              <div class="file-upload">
                <div class="image-upload-wrap">
                  <input class="file-upload-input" type="file" onchange="readURL(this);" id="cat-edit-picture"
                    name="cat-edit-picture" accept="image/*" />
                  <div class="drag-text">
                    <div class="card-body upload-card-body">
                      <div class="upload-img">
                        <img src="../public/image/upload.png" alt="" />
                      </div>
                      <div class="upload-image-format">
                        <p>
                          .PDF .JPG .PNG .DOC
                        </p>
                      </div>
                      <div class="upload-detail">
                        <h4>You can also upload files by</h4>
                        <div class="upload-clicking">
                          <a href="#" class="">Clicking here</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="file-upload-content">
                  <img class="file-upload-image" src="#" alt="your image" />
                  <div class="image-title-wrap">
                    <button type="button" onclick="removeUpload()" class="btn remove-image">
                      Remove
                      <span class="image-title" style="display: none;">Uploaded Image</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cat_edit_switch">

            <div>
              <label class="switch">
                <input type="checkbox" id="catgory-edit-status">
                <span class="slider round"></span>
              </label>
            </div>
            <h1 class="ml-2">Enable/Disable</h1>


          </div>
        </div>
        <div class="modal-footer mf">
          <button type="button" onclick="updateCategoryData()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Edit End -->

  <!-- subcatgory Modal start -->
  <div class="modal fade admin_cat_modal" id="subcategory-modal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header mh">
          <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mb">
          <div>
            <div class="cat-folder-img">
              <i class="fa fa-folder" aria-hidden="true"></i>
            </div>
          </div>
          <label for="subcatagory-add" class="customer-add-input-label txt-regular upload-input-label">SubCategory
            Name</label>

          <input type="text" id="subcatagory-add" name="subcatagory-add" placeholder="Woman Clothes" value=""
            class="customer-add-input w-100" />

        </div>
        <div class="modal-footer mf">
          <button type="button" onclick="addSubcategory()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- subcatgory Modal End -->

  <!-- subcategory edit modal start  -->
  <div class="modal fade admin_cat_modal" id="subcategory-edit-modal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header mh">
          <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mb">
          <div>
            <div class="cat-folder-img">
              <i class="fa fa-folder" aria-hidden="true"></i>
            </div>
          </div>
          <input type="hidden" id="subcategory-id" name="subcategory-id" value="">
          <label for="subcatagory-edit-add" class="customer-add-input-label txt-regular upload-input-label">SubCategory
            Name</label>

          <input type="text" id="subcatagory-edit-add" name="subcatagory-edit-add" placeholder="Woman Clothes" value=""
            class="customer-add-input w-100" />
          <div class="cat_edit_switch">
            <div>
              <label class="switch">
                <input type="checkbox" id="subcatgory-edit-status">
                <span class="slider round"></span>
              </label>
            </div>
            <h1 class="ml-2">Enable/Disable</h1>
          </div>
        </div>

        <div class="modal-footer mf">
          <button type="button" onclick="updateSubCategoryData()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- subcategory edit modal End  -->

  <!-- childbox modal start -->
  <form id="modal-form" class="admin_cat_modal" action="">
    <div class="modal fade" id="childbox-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header mh">
            <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close"
              onclick="colsemodel()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body mb">
            <div>
              <div class="cat-folder-img">
                <i class="fa fa-folder" aria-hidden="true"></i>
              </div>
            </div>
            <label for="child-name" class="customer-add-input-label txt-regular upload-input-label">Category
              Name</label>

            <input type="text" id="child-name" name="child-name" placeholder="Woman Clothes" value=""
              class="customer-add-input w-100" />
            <div>
              <div>
                <div class="upload-text-heading">
                  <h5 class="coupon-code-main-heading txt-regular">
                    Upload your attachments
                  </h5>
                </div>
                <div>
                  <p class="upload-main-paragraph txt-label2">
                    Drag and drop your files here
                  </p>
                </div>
              </div>
              <div class="card text-center uload-card">
                <div class="file-upload">
                  <div class="image-upload-wrap">
                    <input class="file-upload-input" type="file" onchange="readURL(this);" accept="image/*" />
                    <div class="drag-text">
                      <div class="card-body upload-card-body">
                        <div class="upload-img">
                          <img src="../public/image/upload.png" alt="" />
                        </div>
                        <div class="upload-image-format">
                          <p>
                            .PDF .JPG .PNG .DOC
                          </p>
                        </div>
                        <div class="upload-detail">
                          <h4>You can also upload files by</h4>
                          <div class="upload-clicking">
                            <a href="#" class="">Clicking here</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="file-upload-content">
                    <img class="file-upload-image" src="#" alt="your image" />
                    <div class="image-title-wrap">
                      <button type="button" onclick="removeUpload()" class="btn remove-image">
                        Remove
                        <span class="image-title" style="display: none;">Uploaded Image</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer mf">
            <button type="button" onclick="addChildcategory()" class="btn btn-primary">
              <img src="../public/image/tick (1).png" alt="" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <!-- childbox modal End -->

  <!-- childbox edit modal start -->
  <div class="modal fade admin_cat_modal" id="childboxeditmodal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header mh">
          <button type="button" class="close closmodel" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mb">
          <div>
            <div class="cat-folder-img">
              <i class="fa fa-folder" aria-hidden="true"></i>
            </div>
          </div>
          <input type="hidden" name="subedit_id" id="subedit_id" value=''>
          <label for="child-edit" class="customer-add-input-label txt-regular upload-input-label">Category
            Name</label>

          <input type="text" id="child-edit" name="child-edit" placeholder="Woman Clothes" value=""
            class="customer-add-input w-100" />
          <div>
            <div>
              <div class="upload-text-heading">
                <h5 class="coupon-code-main-heading txt-regular">
                  Upload your attachments
                </h5>
              </div>
              <div>
                <p class="upload-main-paragraph txt-label2">
                  Drag and drop your files here
                </p>
              </div>
            </div>
            <div class="card text-center uload-card">
              <div class="file-upload">
                <div class="image-upload-wrap">
                  <input class="file-upload-input" type="file" onchange="readURL(this);" accept="image/*" />
                  <div class="drag-text">
                    <div class="card-body upload-card-body">
                      <div class="upload-img">
                        <img src="../public/image/upload.png" alt="" />
                      </div>
                      <div class="upload-image-format">
                        <p>
                          .PDF .JPG .PNG .DOC
                        </p>
                      </div>
                      <div class="upload-detail">
                        <h4>You can also upload files by</h4>
                        <div class="upload-clicking">
                          <a href="#" class="">Clicking here</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="file-upload-content">
                  <img class="file-upload-image" id="child_edit_image" src="#" alt="your image" />
                  <div class="image-title-wrap">
                    <button type="button" onclick="removeUpload()" class="btn remove-image">
                      Remove
                      <span class="image-title" style="display: none;">Uploaded Image</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cat_edit_switch">
            <div>
              <label class="switch">
                <input type="checkbox" id="childcatgory-edit-status" >
                <span class="slider round"></span>
              </label>
            </div>
            <h1 class="ml-2">Enable/Disable</h1>
          </div>
        </div>
        <div class="modal-footer mf">
          <button type="button" onclick="updateChildCategoryData()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- childbox edit modal end -->

  <!-- Bootstrap core JavaScript -->
  <script src="../vendor/jquery/jquery.min.js"></script>
  <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.js"></script>
  <!-- legacy bundle for older browsers (IE11) -->
  <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/draggable.bundle.legacy.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/swappable.js"></script>


  <!-- Menu Toggle Script -->

  <script>
    /*Function for handling dragging of Categories List Start*/

    $(function () {


      $("#second-box").sortable({
        revert: true,
        update: function (event, ui) {
          console.log('update: ' + ui.item.index())
        },
        start: function (event, ui) {
          console.log('start: ' + ui.item.index())
        }
      });


      /*Dragging event handling of changing position in Categories List Start*/

      var ctg_original_card_pos;
      $("#catgory_cards").sortable({
        revert: true,
        update: function (event, ui) {
          console.log('update: ' + ui.item.index())

          var replaced_item_index_value = '[name="main_ctg_' + ui.item.index() + '"]'
          var positoned_item_index_value = '[name="main_ctg_' + ctg_original_card_pos + '"]'
          var replaced_position_value = ui.item.index() + 1

          ///alert(abc);


          var positioned_item_value = $('' + positoned_item_index_value + '').attr("value")
          var replaced_item_value = $('' + replaced_item_index_value + '').attr("value")

          console.log('Position Item Value = ' + positioned_item_value + ' Replaced Item Value = ' +
            replaced_item_value + " Replaced Position Value = " + replaced_position_value)

          $.ajax({
            url: "all-category-action.php?position_item_value=" + positioned_item_value +
              "&replaced_item_value=" + replaced_item_value +
              "&replaced_position_value=" + replaced_position_value +
              "&type=update_category_positions",
            success: function (data) {

              ////alert(data);

              if (data == "202") {
                ///alert("Successfully Deleted");
                console.log("Successfully Positioned");

              } else if (data == "206") {
                ///alert("Failed to Delete");
                console.log("Failed to Positioned");
              }

            }
          });


        },
        start: function (event, ui) {
          console.log('start: ' + ui.item.index())
          ctg_original_card_pos = ui.item.index()
        }
      });

      /*Dragging event handling of changing position in Categories List End*/

    });

    /*Function for handling dragging of Categories List End*/



    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });

    function childmodalimg() {
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();
      $('#child-name').val("");
    }
    ///var catglobal=0;

    var rm = 0;

    function addchildbox() {
      rm = rm + 1;
      var z = $("#child-name").val();
      var img = $(".file-upload-image").attr("src");

      var text = '<div class="card cat-card removechildcard' + rm + '">' +
        '<div class="card-body cat-card-body">' +
        '<div class="cat-txt-div" style="display: flex;">' +
        '<div class="drag">' +
        '<i class="fa fa-ellipsis-v fa-ellip"aria-hidden="true"></i>' +
        '</div>' +
        '<div class="cat-img">' +
        '<img src="' + img + '" class="cat-img-w childcatimg' + rm + '" alt="" />' +
        '</div>' +
        '<div class="my-auto cat-txt">' +
        '<h5 class="childtextmode' + rm + '">' + z + '</h5>' +
        '</div>' +
        '</div>' +
        '<div class="cat-btn">' +
        '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" data-toggle="modal" data-target="#childboxeditmodal" onclick="updateedit(' +
        rm + ')">' +
        '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
        '</button>' +
        '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deletechildcard(' +
        rm +
        ')">' +
        '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
        '</button>' +
        '</div>' +
        '</div>' +
        '</div>';
      $("#child-box").append(text);
      $("#childbox-modal").modal('hide');
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();

    }

    function deletechildcard(id) {

      $(".removechildcard" + id).remove();
    }

    function updateedit(id) {
      var textcard = $('.childtextmode' + id).text();
      var textimg = $('.childcatimg' + id).attr("src");
      $('#child-edit').val(textcard);
      $(".file-upload-content").show();
      $(".image-upload-wrap").hide();
      $(".file-upload-image").attr("src", textimg);


    }

    var s = 0;
    $(".great-modal").click(function () {
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();
    })


    /*$("#firstcard").click(function () {
      s = s + 1;
      $(".cat-child-box").hide();
      firstcard(s);


    });*/

    function childbox() {
      $(".cat-child-box").show();
      $("#child-box").empty();
    }





    function subeditmodaladd() {
      // var y=$('#subcatagory-edit-add').val();
      // var a=$("#edittext"+id).text(y);
      // // alert(a);
      $("#subcategory-edit-modal").modal('hide');
    }



    function subeditmodal(id) {
      // alert(id);
      var g = $("#edittext" + id).text();
      // alert(g);
      var y = $('#subcatagory-edit-add').val(g);
      var a = $(".edittext" + id).text(y);
      // alert(a);
      // subeditmodaladd(id)



    }



    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          $(".image-upload-wrap").hide();

          $(".file-upload-image").attr("src", e.target.result);
          $(".file-upload-content").show();

          $(".image-title").html(input.files[0].name);
        };

        reader.readAsDataURL(input.files[0]);
      } else {
        removeUpload();
      }
    }

    function removeUpload() {
      $(".file-upload-input").replaceWith($(".file-upload-input").clone());
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();
    }
    $(".image-upload-wrap").bind("dragover", function () {
      $(".image-upload-wrap").addClass("image-dropping");
    });
    $(".image-upload-wrap").bind("dragleave", function () {
      $(".image-upload-wrap").removeClass("image-dropping");
    });

    function showimage() {
      var s = $("#cat-name-upload").val();
      var v = $(".file-upload-image").attr("src");
    }



    function colsemodel() {
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();
    }

    /*Funnctionality of Category Modal Start*/


    $(document).on("click", "#editmodal", function () {
      // var x = new Date();
      // var myHeading = "<p>I Am Added Dynamically </p>";
      // $("#modal-body").html(myHeading + x);
      var ctg_id = $(this).data('ctgid');
      $("#modaledit").modal("show");
      var v = $("#elect-head-" + ctg_id).text();
      var img = $("#first-img-" + ctg_id).attr("src");
      var enable = $("#category-status-" + ctg_id).val();
      // alert(enable);

      $("#cat-edit-upload").val(v);
      $("#category-id").val(ctg_id);
      $(".image-upload-wrap").hide();
      if (enable == 0) {
        $('#catgory-edit-status').prop('checked', true);
        $('#catgory-edit-status').val(0);
      } else {
        $('#catgory-edit-status').prop('checked', false);
        $('#catgory-edit-status').val(1);
      }

      $(".file-upload-image").attr("src", img);
      $(".file-upload-content").show();
    });



    $('#catgory-edit-status').on('change', function (e) {
      if ($('#catgory-edit-status').is(':checked')) {
        $('#catgory-edit-status').val(0);
      } else {
        $('#catgory-edit-status').val(1);
      }

    });



    function retrieveSpecificCategoriesData(n) {
      $('.cat-sub-box').show();
      $('#child-box').empty();

      $('.subcategory-add-modal').attr('data-id', n);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=retrieve_specific_category_sub_categories",
        type: "POST",
        data: JSON.stringify({
          category_id: n
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          var result = JSON.parse(data);
          console.log("Successfully Positioned " + result);

          for (var i = 0; i < result.length; i++) {

            console.log("Data  Id = " + result[i].id + " Name = " + result[i].name + " enable = " + result[i].enable);
            var n = result[i].id;
            var name = result[i].name;
            var enable = result[i].enable;

            var text =
              '<div class="card cat-card cat-card-sub-catagory  removeclass' + n +
              '" id="cat-card' + n + '" onclick="retrieveSpecificChildCategoriesData(' + n + ')"' +
              n +
              ">" +
              '<div class="card-body">' +
              '<input type="hidden" class="subcategory_status'+n+'" value="'+enable+'" >'+
              "<div" +
              'class="" style="display: flex; justify-content: space-between;">' +
              '<div class="my-auto cat-txt2">' +
              "<h5 class='cat-sub-text-" + n + "' >" + name + "</h5>" +
              "</div>" +
              "<div>" +
              '<div class="btn_width">' +
              '<button type="button" id="sub_edit_modal" data-subcatid=' + n + ' onclick="subEditModal(' + n +
              ')"  class="btn btn-outline-white2 btn-rounded btn-sm">' +
              '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
              "</button>" +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deleteSubcategory(' +
              n +
              ')">' +
              '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
              "</button>" +
              "</div>" +
              "</div>" +
              "</div>" +
              "</div>" +
              "</div>";

            $("#second-box").append(text);
            if (enable == '0') {
              $("#cat-card" + n).attr("class", "cat-card");
              // $("#category-status-" + n).val(0);

            } else {
              $("#cat-card" + n).attr("class", "disable_outline");
              // $("#category-status-" + subcategory_id).val(1);
            }
           


            ///alert(result[i]);
            ///console.log("Value = "+i+" Id = "+result[i])
          }



        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });


      $("#second-box").empty();




    }

    function updateCategoryData() {

      var category_id = $("#category-id").val();
      var category_name = $("#cat-edit-upload").val();
      var category_picture = $(".file-upload-image").attr("src");
      var category_status = $('#catgory-edit-status').val();


      /*JSON.stringify(category_picture)*/
      console.log('ID = ' + category_id + " Name = " + category_name + " Picture = " + category_picture + " Status " +
        category_status);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=update_specific_category",
        type: "POST",
        data: JSON.stringify({
          category_picture: category_picture,
          id: category_id,
          category_name: category_name,
          category_picture: category_picture,
          category_status: category_status,
          type: "update_specific_category"
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            ///alert("Successfully Deleted");
            console.log("Successfully Positioned");
            $('#modaledit').modal('hide');

            $("#first-img-" + category_id).attr("src", category_picture);
            $("#elect-head-" + category_id).text(category_name);
            if (category_status == 0) {
              $("#firstcard-" + category_id).attr("class", "cat-card");
              $("#category-status-" + category_id).val(0);

            } else {
              $("#firstcard-" + category_id).attr("class", "disable_outline");
              $("#category-status-" + category_id).val(1);
            }


          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });



    }

    function deleteCategory(id) {

      ///alert(id);
      $.ajax({
        url: "all-category-action.php?id=" + id + "&type=delete_category",
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            ///alert("Successfully Deleted");
            console.log("Successfully Deleted");
            $("#firstcard-" + id).remove();
            refreshSubAndChildCategoryData();
          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Delete");
          }

        }
      });

    }

    function refreshSubAndChildCategoryData() {


      var text =
        '<div class="card cat-card cat-card-sub-catagory  removeclass' + n +
        '" id="cat-card" onclick="childbox()"' +
        n +
        ">" +
        '<div class="card-body">' +
        "<div" +
        'class="" style="display: flex; justify-content: space-between;">' +
        '<div class="my-auto cat-txt2">' +
        "<h5>Electrnics</h5>" +
        "</div>" +
        "<div>" +
        '<div class="btn_width">' +
        '<button type="button"  class="btn btn-outline-white2 btn-rounded btn-sm">' +
        '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
        "</button>" +
        '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deletecard(' +
        n +
        ')">' +
        '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
        "</button>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>";

      // $("#second-box").append(text);
      $("#second-box").empty();




    }

    function addCatgoryModal() {
      ///catglobal = catglobal + 1;
      var z = $(".catgory_name").val();
      var img = $(".file-upload-image").attr("src");
      var item_count = $("#item-count").val();
      var catglobal = parseInt(item_count) + 1;
      // alert(catglobal);

      ///alert("Item Count = "+item_count);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=add_new_category",
        type: "POST",
        data: JSON.stringify({
          position: catglobal,
          category_name: z,
          category_picture: img,
          type: "add_new_category"
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          data = JSON.parse(data);

          if (data.code == "202") {

            console.log(data.message);
            var data_arr = data.response;
            var catgory_id = data_arr[0].last_id;
            // alert(data_arr[0].last_id);
            var text = '<div class="card cat-card  ui-state-default" id="firstcard-' + catgory_id +
              '" onclick="retrieveSpecificCategoriesData(' + catgory_id + ')">' +
              '<div class="card-body cat-card-body">' +
              '<div class="cat-txt-div" style="display: flex;">' +
              '<input type="hidden" id="category-status-' + catgory_id + '" name="category-status" value="0">' +
              '<input type="hidden" id="main_ctg_' + catglobal + '" name="main_ctg_' + catglobal + '"  value="' +
              catgory_id + '">' +
              '<div class="drag"><i class="fa fa-ellipsis-v fa-ellip" aria-hidden="true"></i></div>' +
              '<div class="cat-img"><img src="' + img + '" id="first-img-' + catgory_id +
              '" class="cat-img-w" alt="" /></div>' +
              '<div class="my-auto cat-txt" style="margin-left: 11px"><h5 id="elect-head-' + catgory_id + '">' +
              z + '</h5></div>' +
              '</div>' +
              '<div class="btn_width">' +
              '<button data-toggle="modal" data-target="" data-ctgid="' + catgory_id +
              '" id="editmodal" type="button" class="btn btn-outline-white2 btn-rounded btn-sm"> <i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
              '</button>' +
              '<button type="button" onclick="deleteCategory(' + catgory_id +
              ')" class="btn btn-outline-white2 btn-rounded btn-sm"><i class="far fa-trash-alt fa-trash-alt2 mt-0"></i></button>' +
              '</div></div></div>';


            $("#catgory_cards").append(text);
            $("#exampleModalCenter").modal('hide');
            $(".file-upload-content").hide();
            $(".image-upload-wrap").show();


          } else if (data.status == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });




    }


    /*Funnctionality of Category Modal End*/



    /* Functionality of Sub Category Modal Start*/

    function subEditModal(id) {

      $("#subcategory-edit-modal").modal("show");
      var v = $(".cat-sub-text-" + id).text();
      var enable = $(".subcategory_status" + id).val();
      // alert(enable);
      // alert(v);
      // var img = $("#first-img-" + subctg_id).attr("src");
      // var enable = $("#category-status-" + subctg_id).val();
      // alert(enable);

      $("#subcatagory-edit-add").val(v);
      $("#subcategory-id").val(id);

      if (enable == 0) {
        $('#subcatgory-edit-status').prop('checked', true);
        $('#subcatgory-edit-status').val(0);
        $(".subcategory_status" + id).val(0);
      } else {
        $('#subcatgory-edit-status').prop('checked', false);
        $('#subcatgory-edit-status').val(1);
        $(".subcategory_status" + id).val(1);
      }


    }

    $('#subcatgory-edit-status').on('change', function (e) {
      if ($('#subcatgory-edit-status').is(':checked')) {
        $('#subcatgory-edit-status').val(0);
      } else {
        $('#subcatgory-edit-status').val(1);
      }

    });

    function addSubcategory() {
      ///catglobal = catglobal + 1;
      var sub_name = $("#subcatagory-add").val();
      var cat_id = $('.subcategory-add-modal').attr('data-id');


      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=add_sub_new_category",
        type: "POST",
        data: JSON.stringify({
          category_id: cat_id,
          subcategory_name: sub_name,

          type: "add_sub_new_category"
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          data = JSON.parse(data);

          if (data.code == "202") {

            console.log(data.message);
            var data_arr = data.response;
            var n = data_arr[0].last_id;
            // alert(data_arr[0].last_id);
            var text =
              '<div class="card cat-card cat-card-sub-catagory  removeclass' + n +
              '" id="cat-card' + n + '" onclick="retrieveSpecificChildCategoriesData(' + n + ')">' +
              '<div class="card-body">' +
              '<div' +
              'class="yes" style="display: flex; justify-content: space-between;">' +
              '<div class="my-auto cat-txt2">' +
              "<h5 class='cat-sub-text-" + n + "' >" + sub_name + "</h5>" +
              "</div>" +
              "<div>" +
              '<div class="btn_width">' +
              '<button type="button" id="sub_edit_modal" onclick="subEditModal(' + n + ')" data-subcatid=' + n +
              '  class="btn btn-outline-white2 btn-rounded btn-sm">' +
              '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
              "</button>" +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deleteSubcategory(' +
              n +
              ')">' +
              '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
              "</button>" +
              "</div>" +
              "</div>" +
              "</div>" +
              "</div>" +
              "</div>";

            $("#second-box").append(text);
            $("#subcategory-modal").modal('hide');

            // $("#catgory_cards").append(text);
            // $("#exampleModalCenter").modal('hide');
            // $(".file-upload-content").hide();
            // $(".image-upload-wrap").show();


          } else if (data.status == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });




    }

    function deleteSubcategory(id) {
      ///alert(id);
      $.ajax({
        url: "all-category-action.php?id=" + id + "&type=delete_sub_category",
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            ///alert("Successfully Deleted");
            console.log("Successfully Deleted");
            $("#cat-card" + id).remove();
            // refreshSubAndChildCategoryData();
          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Delete");
          }

        }
      });
    }

    function updateSubCategoryData() {

      var subcategory_id = $("#subcategory-id").val();
      var subcategory_name = $("#subcatagory-edit-add").val();
      var subcategory_status = $('#subcatgory-edit-status').val();


      /*JSON.stringify(category_picture)*/
      console.log('ID = ' + subcategory_id + " Name = " + subcategory_name + " Status " +
        subcategory_status);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=update_specific_subcategory",
        type: "POST",
        data: JSON.stringify({
          id: subcategory_id,
          subcategory_name: subcategory_name,
          subcategory_status: subcategory_status,
          type: "update_specific_subcategory"
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            // alert("Successfully insert");
            console.log("Successfully Positioned");
            $('#subcategory-edit-modal').modal('hide');


            $(".cat-sub-text-"+subcategory_id).text(subcategory_name);
            if (subcategory_status == 0 ) {
              $("#cat-card" + subcategory_id).attr("class", "cat-card");
              $(".subcategory_status" + subcategory_id).val(0);

            } else {
              $("#cat-card" + subcategory_id).attr("class", "disable_outline");
              $("#subcategory_status" + subcategory_id).val(1);
            }


          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });



    }

    function retrieveSpecificChildCategoriesData(n) {
      $('#child-box').empty();
      $(".cat-child-box").show();

      $('.childcategory-add-modal').attr('data-id', n);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=retrieve_specific_category_child_categories",
        type: "POST",
        data: JSON.stringify({
          subcategory_id: n
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          var result = JSON.parse(data);
          console.log("Successfully Positioned " + result);

          for (var i = 0; i < result.length; i++) {

            console.log("Data  Id = " + result[i].id + " Name = " + result[i].name + " image = " + result[i]
              .image + " enable = " + result[i].enable);
            var n = result[i].id;
            var name = result[i].name;
            var img = result[i].image;
            var enable = result[i].enable;
           



            var text = '<div class="card cat-card " id="remove-child-card-' + n + '">' +
              '<div class="card-body cat-card-body">' +
              '<input type="hidden" class="childcategory_status'+n+'" value="'+enable+'" >'+
              '<div class="cat-txt-div" style="display: flex;">' +
              '<div class="drag">' +
              '<i class="fa fa-ellipsis-v fa-ellip"aria-hidden="true"></i>' +
              '</div>' +
              '<div class="cat-img">' +
              '<img src=" ' + img + '" class="cat-img-w child-cat-img-' + n + '" alt="" />' +
              '</div>' +
              '<div class="my-auto cat-txt">' +
              '<h5 class="child-cat-text-' + n + ' ml-2">' + name + '</h5>' +
              '</div>' +
              '</div>' +
              '<div class="cat-btn">' +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" data-toggle="modal" data-target="" onclick="editchildcategory(' +
              n + ')">' +
              '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
              '</button>' +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deletechildcategory(' +
              n +
              ')">' +
              '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
              '</button>' +
              '</div>' +
              '</div>' +
              '</div>';
              $("#child-box").append(text);
              if (enable == '0') {
              $("#remove-child-card-" + n).attr("class", "cat-card");
              // $("#category-status-" + n).val(0);

            } else {
              $("#remove-child-card-" + n).attr("class", "disable_outline");
              // $("#category-status-" + subcategory_id).val(1);
            }
           
            // $("#childbox-modal").modal('hide');
            // $(".file-upload-content").hide();
            // $(".image-upload-wrap").show();
          }



        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });


      // $("#second-box").empty();




    }

    /* Functionality of Sub Category Modal End*/

    /* Functionality of Child Category Modal Start */
   
   
    $('#childcatgory-edit-status').on('change', function (e) {
      if ($('#childcatgory-edit-status').is(':checked')) {
        $('#childcatgory-edit-status').val(0);
      } else {
        $('#childcatgory-edit-status').val(1);
      }

    });


    function editchildcategory(id) {

      $("#childboxeditmodal").modal("show");

      var v = $(".child-cat-text-" + id).text();
      var img = $(".child-cat-img-" + id).attr("src");
      var enable = $(".childcategory_status" + id).val();


      $("#child-edit").val(v);
      $("#subedit_id").val(id);
      if (enable == 0) {
        $('#childcatgory-edit-status').prop('checked', true);
        $('#childcatgory-edit-status').val(0);
      } else {
        $('#childcatgory-edit-status').prop('checked', false);
        $('#childcatgory-edit-status').val(1);
      }
      $(".image-upload-wrap").hide();

      $(".file-upload-image").attr("src", img);
      $(".file-upload-content").show();




    }

    function addChildcategory() {

      var child_name = $("#child-name").val();
      var child_id = $('.childcategory-add-modal').attr('data-id');
      var img = $(".file-upload-image").attr("src");


      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=add_child_new_category",
        type: "POST",
        data: JSON.stringify({
          child_id: child_id,
          childcategory_name: child_name,
          childcategory_picture: img,
          type: "add_child_new_category"
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          data = JSON.parse(data);

          if (data.code == "202") {

            console.log(data.message);
            var data_arr = data.response;
            var n = data_arr[0].last_id;
            // alert(data_arr[0].last_id);
            var text = '<div class="card cat-card " id="remove-child-card-' + n + '">' +
              '<div class="card-body cat-card-body">' +
              '<div class="cat-txt-div" style="display: flex;">' +
              '<div class="drag">' +
              '<i class="fa fa-ellipsis-v fa-ellip"aria-hidden="true"></i>' +
              '</div>' +
              '<div class="cat-img">' +
              '<img src="' + img + '" class="cat-img-w child-cat-img-' + n + '" alt="" />' +
              '</div>' +
              '<div class="my-auto cat-txt">' +
              '<h5 class="child-cat-text-' + n + ' ml-2">' + child_name + '</h5>' +
              '</div>' +
              '</div>' +
              '<div class="cat-btn">' +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" data-toggle="modal" data-target="" onclick="editchildcategory(' +
              n + ')">' +
              '<i class="fas fa-pencil-alt fa-pencil-alt2 mt-0"></i>' +
              '</button>' +
              '<button type="button" class="btn btn-outline-white2 btn-rounded btn-sm" onclick="deletechildcategory(' +
              n +
              ')">' +
              '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
              '</button>' +
              '</div>' +
              '</div>' +
              '</div>';
            $("#child-box").append(text);
            $("#childbox-modal").modal('hide');
            $(".file-upload-content").hide();
            $(".image-upload-wrap").show();


          } else if (data.status == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });




    }

    function deletechildcategory(id) {

      ///alert(id);
      $.ajax({
        url: "all-category-action.php?id=" + id + "&type=delete_child_category",
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            ///alert("Successfully Deleted");
            console.log("Successfully Deleted");
            $("#remove-child-card-" + id).remove();
            // refreshSubAndChildCategoryData();
          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Delete");
          }

        }
      });

    }

    function updateChildCategoryData() {

      var subcategory_id = $("#subedit_id").val();
      var child_name = $("#child-edit").val();
      var child_picture = $(".file-upload-image").attr("src");
      var child_status = $('#childcatgory-edit-status').val();


      /*JSON.stringify(category_picture)*/
      console.log('ID = ' + subcategory_id + " Name = " + child_name + " Picture = " + child_picture + " Status " +
      child_status);

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "all-category-action.php?type=update_child_specific_category",
        type: "POST",
        data: JSON.stringify({
          id: subcategory_id,
          child_name: child_name,
          child_picture: child_picture,
          child_status: child_status,
          type: "update_child_specific_category"
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          ////alert(data);

          if (data == "202") {
            ///alert("Successfully Deleted");
            console.log("Successfully Positioned");
            $("#childboxeditmodal").modal("hide");

            $(".child-cat-img-" + subcategory_id).attr("src", child_picture);
            $(".child-cat-text-" + subcategory_id).text(child_name);
            if (child_status == '0') {
              $("#remove-child-card-" + subcategory_id).attr("class","cat-card");
              $(".childcategory_status" + subcategory_id).val(0);

            } else {
              $("#remove-child-card-" + subcategory_id).attr("class","disable_outline");
              $(".childcategory_status" + subcategory_id).val(1);
            }


          } else if (data == "206") {
            ///alert("Failed to Delete");
            console.log("Failed to Positioned");
          }

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          window.alert("Problem = " + errorThrown);

        }
      });



    }


    /* Functionality of Child Category Modal End */
  </script>
  <script>
    function deletecard(id) {

      $(".removeclass" + id).remove();
    }
    $('.all_cat_active ').addClass('active');
  </script>
</body>

</html>