<!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">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" />

  <!-- Custom styles for this template -->
  <link href="../public/css/main.css" rel="stylesheet">

</head>

<body>

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

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


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

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


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


          <!-- second box subcatogy 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">Catogories</h5>

                <div id="second-box">
                  <?php
                 
                 $query = "SELECT * FROM HomeFeaturedCategories";
                 $result = queryRunner($query);
                //  $i = 0;
                 while ($row = rowRetriever($result)) {
                   
                   ?>
                  <div
                    class="card <?php if($row['enable']== 0){echo "cat-card";  } else { echo "disable_outline"; }?> cat-card-sub-catagory"
                    onclick="retrieveSpecificCategoriesData(<?php echo $row['id']; ?>)"
                    id="feat-card-id-<?php echo $row['id']; ?>">
                    <input type="hidden" id="featured-card-id-<?php echo $row['id']; ?>"
                      value="<?php echo $row['child_sub_categories']; ?>">
                    <input type="hidden" id="feat-category-status-<?php echo $row['id']; ?>"
                      value="<?php echo $row['enable']; ?>">
                    <div class="card-body">
                      <div class="" style="display: flex; justify-content: space-between;">
                        <div class="my-auto cat-txt2">
                          <h5 id="featured-name-<?php echo $row['id']; ?>"><?php echo $row['name']; ?></h5>
                        </div>
                        <div>
                          <div class="">
                            <button type="button" id="edit-featured-cat" onclick="updateedit(<?php echo $row['id']; ?>)"
                              class="btn btn-outline-white2 btn-rounded btn-sm" data-ctgid="<?php echo $row['id']; ?>">
                              <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="deleteCategory(<?php echo $row['id']; ?>)">
                              <i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                  <?php 
                 } 
                 ?>

                </div>

                <!-- <div class="card cat-card sub-cat 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="">
                          <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="card text-center cat-card-btn">
                  <div class="card-body text-center">
                    <div class="plus-cat-img" data-toggle="modal" 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">Sub Catogories</h5>
                <div id="featured-box"></div>




                <div class="card text-center cat-card-btn">
                  <div class="card-body text-center">
                    <div class="plus-cat-img childsub_category" id="child-get-btn-id" data-toggle="modal" data-child="0"  data-target="#child_category_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 -->

  <!-- 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="addCatgoryModal()" 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="featured-category-id">
          <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="feat-edit-status" value="0">
                <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="featuredmodaledit()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- subcategory edit modal End  -->
  <!-- childbox modal start -->
  <div class="modal fade admin_cat_modal" id="child_category_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>
          <?php 
                     
                     $query = "SELECT * FROM Categories where enable ='0'";
                     $result = queryRunner($query);
                   
            ?>
          <div class="form-group">
            <label for="exampleFormControlSelect1"
              class="customer-add-input-label txt-regular addpro-input-label">Select Type</label>
            <select class="selectpicker form-control featured_select_type" id="featued_select_id" data-live-search="true">
              <option value="none" selected="selected">
                Choose Type
              </option>
              <?php while ($row = rowRetriever($result)) { ?>
              <option value="<?php echo $row['id']; ?>" ><?php echo $row['name']; ?></option>
              <?php
               } 
              ?>

              <!-- <option>LBt</option> -->
            </select>
          </div>
          <div class="form-group brands_select" style="display: none">
            <label for="exampleFormControlSelect1"
              class="customer-add-input-label txt-regular addpro-input-label">Select Brands</label>
            <select class="selectpicker form-control featured_product_select_type" id="featued_select_brands_id"
              data-live-search="true">
             
             
             
              <!-- <option>Product</option>
              <option>LBt</option> -->
            </select>
          </div>
          <div class="form-group product_select" style="display: none">
            <label for="exampleFormControlSelect1"
              class="customer-add-input-label txt-regular addpro-input-label">Select Products</label>
            <select class="selectpicker form-control featured_product_select_type"
              id="featued_select_products_id" data-live-search="true">
              <option value="none" disabled selected="selected">Choose Product</option>
              <!-- <option>Product</option>
              <option>LBt</option> -->
            </select>
          </div>
          <!-- hiddeninputs -->
          <input type="hidden" id="child-sub-id">
          <input type="hidden" id="child-sub-name">
          <input type="hidden" id="child-sub-image">
          <input type="hidden" id="child-sub-enable">

        </div>
        <div class="modal-footer mf">
          <button type="button" onclick="addDataInChild()" class="btn btn-primary">
            <img src="../public/image/tick (1).png" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- childbox modal End -->
  <!-- childbox edit modal start -->
  <div class="modal fade admin_cat_modal" id="child_category_modal_update" 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="featued_value_edit" name="subcatagory-add" placeholder="Woman Clothes" value=""
            class="customer-add-input w-100" />

        </div>
        <div class="modal-footer mf">
          <button type="button" onclick="featuredDataadd()" 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://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

  <!-- Menu Toggle Script -->

  <script>
    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
    // $('.sub-cat').click(function () {
    //   $('.cat-child-box').show();
    // })

    function childmodalimg() {
      $(".file-upload-content").hide();
      $(".image-upload-wrap").show();
      $('#child-name').val("");
    }
    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 firstcard(n) {


      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="">' +
        '<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 subeditmodaladd() {
      // var y=$('#subcatagory-edit-add').val();
      // var a=$("#edittext"+id).text(y);
      // // alert(a);
      $("#subcategory-edit-modal").modal('hide');
    }
    var n = 0;

    function addData() {
      n = n + 1;

      var x = $("#subcatagory-add").val();
      // alert(x);
      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 id='edittext" + n + "'>" + x + "</h5>" +
        "</div>" +
        "<div>" +
        '<div class="">' +
        '<button type="button" data-toggle="modal" data-target="#subcategory-edit-modal" onclick="subeditmodal(' +
        n +
        ')" class="btn btn-outline-white2 btn-rounded subeditmodal' + n + ' 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);
      $("#subcategory-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)



    }
    // child box function start
    var chval = 0;

    function addDatainchild() {
      chval = chval + 1;

      // var x = $("#featued_value").val();

      // var text =
      //     '<div class="card cat-card cat-card-sub-catagory featuredremoveclass' + chval +
      //     '" id="cat-card" onclick="childbox()"' +
      //     chval +
      //     ">" +
      //     '<div class="card-body">' +
      //     "<div" +
      //     'class="" style="display: flex; justify-content: space-between;">' +
      //     '<div class="my-auto cat-txt2">' +
      //     "<h5 id='featured_edit" + chval + "'>" + x + "</h5>" +
      //     "</div>" +
      //     "<div>" +
      //     '<div class="">' +
      //     '<button type="button" data-toggle="modal" data-target="#child_category_modal_update" onclick="subeditmodalchild(' +
      //     chval +
      //     ')" class="btn btn-outline-white2 btn-rounded subeditmodal' + chval + ' 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="featureddeletecard(' +
      //     chval +
      //     ')">' +
      //     '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
      //     "</button>" +
      //     "</div>" +
      //     "</div>" +
      //     "</div>" +
      //     "</div>" +
      //     "</div>";

      // $("#featured-box").append(text);
      $("#child_category_modal").modal('hide');

    }

    function subeditmodalchild(id) {
      // alert(id);
      var g = $("#featured_edit" + id).text();
      // alert(g);
      var y = $('#featued_value_edit').val(g);
      // var a = $("#edittext" + id).text(y);
      // alert(a);
      // subeditmodaladd(id)



    }

    function featureddeletecard(id) {

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

    function featuredDataadd() {

      $("#child_category_modal_update").modal('hide');
    }

    // child box function end



    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();
    }

    $(document).on("click", "#editmodal", function () {
      // var x = new Date();
      // var myHeading = "<p>I Am Added Dynamically </p>";
      // $("#modal-body").html(myHeading + x);
      $("#modaledit").modal("show");
      var v = $("#elect-head").text();
      var img = $("#first-img").attr("src");
      $("#cat-edit-upload").val(v);
      $(".image-upload-wrap").hide();

      $(".file-upload-image").attr("src", img);
      $(".file-upload-content").show();
    });
  </script>
  <script>
    function deletecard(id) {

      $(".removeclass" + id).remove();
    }
    $(function () {
      $(".selectpicker").selectpicker();
    });
   

    $('.feat_cat_active ').addClass('active');
  </script>
  <!-- backend and ajax code in this script -->
  <script>
    function retrieveSpecificCategoriesData(n) {
      $(".cat-child-box").show();
      $('#featured-box').empty();
      $('.childsub_category').attr('data-child', n);

      var feat_val = $("#featured-card-id-" + n).val();

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=retrieve_child_category",
        type: "POST",
        data: JSON.stringify({
          childcategory_id: feat_val
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          // console.log(data);

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

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

            var list = data.response;

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


              // console.log("Data  Id = " + list[i].id + " Name = " + list[i].logo + " enable = " + list[i].name);
              var n = list[i].id;
              var img = list[i].image;
              var name = list[i].name;
              var enable = list[i].enable;
              var checked = "";
              if (enable == 0) {

                checked = "value='0'";
              } else {

                checked = "value='1'  checked";
              }



              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" onclick="deletechildcategory(' +
                n +
                ')">' +
                '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
                '</button>' +
                '</div>' +
                '</div>' +
                '</div>';
              $("#featured-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);
              // }



            }



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



        },

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

        }
      });


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




    }

    function updateedit(id) {
      $('#subcategory-edit-modal').modal('show');
      var text = $("#featured-name-" + id).text();
      var enable = $("#feat-category-status-" + id).val();

      $("#subcatagory-edit-add").val(text);
      $("#featured-category-id").val(id);
      if (enable == 0) {
        $('#feat-edit-status').prop('checked', true);
        $('#feat-edit-status').val(0);
        $("#feat-category-status-" + id).val(0);
      } else {
        $('#feat-edit-status').prop('checked', false);
        $('#feat-edit-status').val(1);
        $("#feat-category-status-" + id).val(1);
      }


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

    });

    function featuredmodaledit() {

      var category_id = $("#featured-category-id").val();
      var category_name = $("#subcatagory-edit-add").val();
      var category_status = $('#feat-edit-status').val();


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

      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=update_specific_category",
        type: "POST",
        data: JSON.stringify({
          id: category_id,
          category_name: category_name,
          category_status: category_status

        }),
        /*dataType: "json" ,*/
        success: function (data) {

          ////alert(data);

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


            $("#featured-name-" + category_id).text(category_name);
            if (category_status == 0) {
              $("#feat-card-id-" + category_id).attr("class", "cat-card");
              $("#feat-category-status-" + category_id).val(0);

            } else {
              $("#feat-card-id-" + category_id).attr("class", "disable_outline");
              $("#feat-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) {
      var cat_id = id;

      ///alert(id);
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=delete_category",
        type: "POST",
        data: JSON.stringify({
          id: cat_id,

        }),
        success: function (data) {

          ////alert(data);

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

        }
      });

    }

    function addCatgoryModal() {
      ///catglobal = catglobal + 1;
      var x = $("#subcatagory-add").val();


      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=add_new_category",
        type: "POST",
        data: JSON.stringify({
          category_name: x

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

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

            console.log(data.message);
            var data_arr = data.response;
            var category_id = data_arr[0].last_id;
            // alert(data_arr[0].last_id);
            var text =
              '<div class="card cat-card sub-cat cat-card-sub-catagory" id="feat-card-id-' + category_id +
              '"  onclick="retrieveSpecificCategoriesData(' + category_id + ')" value="-1">' +
              '<input type="hidden" id="featured-card-id-'+ category_id + '">' +
              '<input type="hidden" id="feat-category-status-' + category_id + '" value="0">' +
              '<div class="card-body">' +
              "<div" +
              'class="" style="display: flex; justify-content: space-between;">' +
              '<div class="my-auto cat-txt2">' +
              '<h5 id="featured-name-' + category_id + '"> ' + x + ' </h5>' +
              "</div>" +
              "<div>" +
              '<div class="">' +
              '<button type="button" id="edit-featured-cat" onclick="updateedit(' + category_id +
              ')"  class="btn btn-outline-white2 btn-rounded btn-sm" data-ctgid="' + category_id + '">' +
              '<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="deleteCategory(' +
              category_id + ')" >' +
              '<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');


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

        },

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

        }
      });




    }
  
   

    $("#featued_select_id").on("change", function (e) {
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;
      // alert(valueSelected);
      // $(".brands_select").hide();
      // $(".product_select").hide();

      
      // $("#featued_select_products_id").empty();
      $(".brands_select").show();
      $("#featued_select_brands_id").empty();
    
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=retrieve_specific_category_sub_categories",
        type: "POST",
        data: JSON.stringify({
          category_id: valueSelected
        }),
        /*dataType: "json" ,*/
        success: function (data) {

          var result = JSON.parse(data);
          console.log("Successfully Positioned " + result);
          // var text1 ='<option value="none" disabled selected="selected">Choose Product</option>';

          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 = '<option value="'+n+'">'+name+'</option>';
              
          
            $("#featued_select_brands_id").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])
          }
          $('.selectpicker').selectpicker('refresh');



        },

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

        }
      });


    });


    $("#featued_select_brands_id").on("change", function (e) {
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;

      $(".product_select").show();
      $("#featued_select_products_id").empty();
      // $(".brands_select").show();
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=retrieve_specific_category_child_categories",
        type: "POST",
        data: JSON.stringify({
          subcategory_id: valueSelected
        }),
        /*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 img = result[i].image;
            var enable = result[i].enable;

            var text = '<option value="'+n+'">'+name+'</option>';
            // var text2 = '<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);
              
           
            $("#featued_select_products_id").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])
          }
          $('.selectpicker').selectpicker('refresh');



        },

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

        }
      });

    });
    

    $("#featued_select_products_id").on("change", function (e) {
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;
      // alert(valueSelected);
      // $(".product_select").show();
      // $(".brands_select").show();
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=retrieve_child_category_id",
        type: "POST",
        data: JSON.stringify({
          childcategory_id: valueSelected
        }),
        /*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 + " image = " + result[i].image);
            var n = result[i].id;
            var name = result[i].name;
            var img = result[i].image;
            var enable = result[i].enable;
            $("#child-sub-id").val(n);
            $("#child-sub-name").val(name);
            $("#child-sub-image").val(img);
            $("#child-sub-enable").val(enable);
           
          }
        

        },

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

        }
      });

    });


    function addDataInChild() {
        var n = $("#child-sub-id").val();
        var name = $("#child-sub-name").val();
        var img = $("#child-sub-image").val();
         var enable = $("#child-sub-enable").val();
         var s = $('.childsub_category').attr('data-child');
         var card_id =$("#featured-card-id-"+s).val();

         var card_arry =card_id.split(',');
         for (var i = 0; i < card_arry.length; i++) {
        if (card_arry[i] != n) {
          card_arry.push(n);
          break;
       
        } 
       
        console.log(card_arry[i]);
     
      }
      // alert(card_arry.length)
      var g;
      if(card_arry[0] == ""){
        g = card_arry.join("");
        // alert('greater less');
       
      }
      else {
        g = card_arry.join(",");
         // alert('greater then');
     

      }
     
      // alert(g);
     
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=addsub_child_category",
        type: "POST",
        data: JSON.stringify({
          childcategory_id: s,
          child_sub_category: g
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          // console.log(data);
          console.log(data);
          var data = JSON.parse(data);
        
          console.log("Successfully Positioned " + data);
          var list = data.response;

          if (data == "202") {

              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" onclick="deletechildcategory(' +
                n +
                ')">' +
                '<i class="far fa-trash-alt fa-trash-alt2 mt-0"></i>' +
                '</button>' +
                '</div>' +
                '</div>' +
                '</div>';

              $("#featured-box").append(text);
              $("#child_category_modal").modal('hide');
              $("#featured-card-id-"+s).val(g);
              // 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);
              // }



          



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



        },

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

        }
      });
      $('.selectpicker').selectpicker('refresh');

      $(".brands_select").hide();
      $(".product_select").hide();

      $("#featued_select_brands_id").empty();
      $("#featued_select_products_id").empty();

      // alert(card_arry[3]);
    }

    function  deletechildcategory(id){
      var s = $('.childsub_category').attr('data-child');
         var card_id =$("#featured-card-id-"+s).val();
         // alert(card_id);
         var card_arry =card_id.split(',');
         for (var i = 0; i < card_arry.length; i++){
          if (card_arry[i] == id) { 
            card_arry.splice(i, 1);
          break;
          }
          console.log(card_arry[i]);
         }
         var g;
      if(card_arry[0] == ""){
         g = card_arry.join("");
        
      }
      else {
        g = card_arry.join(",");
       
      }
      $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "featured-category-action.php?type=addsub_child_category",
        type: "POST",
        data: JSON.stringify({
          childcategory_id: s,
          child_sub_category: g
        }),
        /*dataType: "json" ,*/
        success: function (data) {
          // console.log(data);
          console.log(data);
          var data = JSON.parse(data);
        
          console.log("Successfully Positioned " + data);
          var list = data.response;

          if (data == "202") {

              $("#remove-child-card-"+id).remove();
              $("#child_category_modal").modal('hide');
              $("#featured-card-id-"+s).val(g);

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



        },

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

        }
      });
        
       
        
     
      


    }

//     function doTheThing(url,data) {
//     return new Promise((resolve, reject) => {
//     $.ajax({
//       url: url,
//         type: "POST",
//         data: data,
//       success: function (data) {
//         resolve(data)
//       },
//       error: function (error) {
//         reject(error)
//       },
//     })
//   })
// }
//  function doSomethingElse() {
//   doTheThing("featured-category-action.php?type=retrieve_child_category", JSON.stringify({
//           childcategory_id: "2"
//         }))
//   .then((data) => {
//     console.log(data)
//     // doSomethingElse()
//   })
//   .catch((error) => {
//     console.log(error)
//   })
//  }
//  doSomethingElse();
 

  
  </script>
</body>

</html>