<!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>Add Brands</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="../public/css/dropzone.css">
  <link rel="stylesheet" href="../public/css/jquery.tag.css">
  <link rel="stylesheet" href="../public/css/jquery.tagsinput-revisited.css">

</head>

<body>

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

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

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

<!--      <nav class="navbar navbar-expand-lg navbar-light  border-bottom">-->
        <!-- <button class="btn btn-primary" id="menu-toggle"><span><i class="fas fa-bars"></i></span></button> -->
          <?php
          include ('../navbar_admin.php');
          ?>


          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <!-- <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li> -->
            <li class="nav-item">
              <a class="nav-link" href="#"><span><i class="far fa-bell"></i></span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle user_name" href="#" id="navbarDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <img src="../public/image/person.jpg" alt="">
                <div class="admin_name">
                  <h1>Austin Robertson</h1>
                  <h3>Marketing Administrator</h3>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

      <div class="container add_teacher_page">
        <form role="form" action="../framework/main_action.php?action_type=create&request_type=brand&functionality_type=insert_add_brand"
              enctype="multipart/form-data" method="POST">
          <input type="hidden" name="type" id="type" value="add_brand">
          <div class="page_name">
            <h1>Add Brands</h1>
            <div class="years">
              <!-- <span class="active">1 years</span>
                        <span>2 years</span>
                        <span>3 years</span> -->
              <button class="brand_btn_save" type="submit">save</button>

            </div>

          </div>

          <div class="row">
            <input type="hidden" id="cat-id" name="cat-id">
            <input type="hidden" id="get-array" name="get-array">
            <div class="col-xl-8">
              <div class="card add_teacher_card mt-3 mb-3">
                <div class="card-body">
                  <div class="row">
                    <div class="col-xl-12">
                      <h1 class="bank_detail_heading">Bussiness Detail</h1>
                    </div>
                    <div class="col-xl-12">
                      <div class="form-group">
                        <label for="t_name">Name</label>
                        <input type="text" class="form-control" name="brand_name" placeholder="Enter Name" id="t_name"
                          required>
                      </div>

                    </div>
                    <div class="col-xl-12">
                      <div class="form-group">
                        <label for="t_info">Address</label>
                        <input type="text" class="form-control" name="brand_address" placeholder="Enter Address"
                          id="b_adress" required>
                      </div>
                    </div>
                    <div class="col-xl-12 teacher_picture">
                      <div class="addpro_main_head_second">
                        <h4>Logo <span class="recmend_size">( Recmended size 600 X 200 )</span> </h4>
                      </div>
                      <div class="card text-center uload-card">
                        <div class="file-upload">
                          <div class="image-upload-wrap">
                            <input class="file-upload-input" type="file" name="brand_image" onchange="readURL(this);"
                              accept="image/*" />
                            <div class="screen-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" />
                            <input type="hidden" name="brand_logo" id="brand-logo">
                            <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="col-xl-12  childcatagories_modal_from">
                      <div class="">
                        <h4 class="picture_heading">Cover Photo <span class="recmend_size">( Recmended size 600 X 200 )</span> </h4>
                      </div>
                      <div class="card text-center uload-card upload_pic_card4">
                        <div class="file-upload4">
                          <div class="image-upload-wrap4">
                            <input class="file-upload-input4" type="file" 
                              onchange="readURL4(this);" accept="image/*" />
                            <div class="drag-text4">
                              <div class="card-body upload-card-body4">
                                <div class="upload-img4">
                                  <img src="../public/image/upload.png" alt="" />
                                </div>
                                <div class="upload-image-format4">
                                  <p>
                                    .PDF .JPG .PNG .DOC
                                  </p>
                                </div>
                                <div class="upload-detail4">
                                  <h4>You can also upload files by</h4>
                                  <div class="upload-clicking4">
                                    <a href="#" class="">Clicking here</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="file-upload-content4">
                            <img class="file-upload-image4" name="brand_cover_photo" src="#" alt="your image" />
                            <input type="hidden" name="brand_cover_photo" id="brand-cover-photo">
                            <div class="image-title-wrap4">
                              <button type="button" onclick="removeUpload4()" class="btn remove-image4">
                                Remove
                                <span class="image-title4" style="display: none;">Uploaded
                                  Image</span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- <div class="col-xl-6">
                    <div class="form-group">
                      <label for="t_city">City</label>
                      <input type="text" class="form-control" placeholder="Enter City Name" id="t_city" required>
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="form-group">
                      <label for="country" class="">Country</label>
                      <select class="form-control w-100">
                        <option value="0">Select Country:</option>
                        <option value="1">England</option>
                        <option value="2">America</option>
                        <option value="3">LOndon</option>
                        <option value="4">Bangladesh</option>
                      </select>
                    </div>

                  </div>
                  <div class="col-xl-6">
                    <div class="form-group">
                      <label for="t_phone">Phone</label>
                      <input type="text" class="form-control" placeholder="Enter Phone Number" id="t_phone" required>
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="form-group">
                      <label for="t_postal_code">NTN</label>
                      <input type="text" class="form-control" placeholder="Enter NTN Code" id="b_ntn" required>
                    </div>
                  </div>
                  <div class="col-xl-12">
                    <div class="form-group">
                      <label for="t_adress">Address</label>
                      <input type="text" class="form-control" placeholder="Enter Address" id="t_adress" required>
                    </div>
                  </div> -->
                    <div class="col-xl-12">
                      <h1 class="bank_detail_heading">Bank Detail</h1>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="t_bank_detail">Bank Name</label>
                        <input type="text" class="form-control" name="bank_name" placeholder="Enter Bank Account"
                          id="t_bank_detail" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="t_branch_code">Branch Code</label>
                        <input type="text" class="form-control" name="branch_code" placeholder="Enter Branch Code"
                          id="t_branch_code" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="t_holder_name">Holder Name</label>
                        <input type="text" class="form-control" name="BanK_holder_name" placeholder="Enter Holder Name"
                          id="t_holder_name" required>
                      </div>
                    </div>

                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="t_account_no">Account No</label>
                        <input type="text" class="form-control" name="bank_account_no" placeholder="Enter Account no"
                          id="t_account_no" required>
                      </div>
                    </div>
                    <div class="col-xl-12">
                      <div class="form-group">
                        <label for="t_bank_name">IBAN No</label>
                        <input type="text" class="form-control" name="bank_iban_no" placeholder="Enter IBAN Number"
                          id="t_bank_name" required>
                      </div>
                    </div>
                    <div class="col-xl-12 screenshot_div">
                      <div class="addpro_main_head_second">
                        <h4>Screenshot Cheque <span class="recmend_size">( Recmended size  X 200 )</span></h4>
                      </div>
                      <div class="card text-center uload-card2">
                        <div class="file-upload">
                          <div class="image-upload-wrap2">
                            <input class="file-upload-input2" type="file" name="bank_checque_pic"
                              onchange="readURLS(this);" accept="image/*" />
                            <div class="drag-text2">
                              <div class="card-body upload-card-body2">
                                <div class="upload-img2">
                                  <img src="../public/image/upload.png" alt="" />
                                </div>
                                <div class="upload-image-format2">
                                  <p>
                                    .PDF .JPG .PNG .DOC
                                  </p>
                                </div>
                                <div class="upload-detail2">
                                  <h4>You can also upload files by</h4>
                                  <div class="upload-clicking2">
                                    <a href="#" class="">Clicking here</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="file-upload-content2">
                            <img class="file-upload-image2"  src="#" alt="your image" />
                            <input type="hidden" name="bank_cheque_pic" id="bank-cheque-pic">
                            <div class="image-title-wrap2">
                              <button type="button" onclick="removeUploads()" class="btn remove-image2">
                                Remove
                                <span class="image-title2" style="display: none;">Uploaded
                                  Image</span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-xl-12">
                      <h1 class="education_head">Personal Detail</h1>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_first_name">First Name</label>
                        <input type="text" class="form-control" name="personal_first_name"
                          placeholder="Enter First Name" id="b_first_namee" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_last_name">Last Name</label>
                        <input type="text" class="form-control" name="personal_last_name" placeholder="Enter Last Name"
                          id="b_last_name" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_cnic">CNIC</label>
                        <input type="text" class="form-control" name="personal_cnic" placeholder="Enter Cnic"
                          id="b_cnic" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="phone_no">Phone No</label>
                        <input type="text" class="form-control" name="personal_phone_no" placeholder="Enter phone No"
                          id="phone_no" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_p_adress">Address</label>
                        <input type="text" class="form-control" name="personal_address" placeholder="Enter Address"
                          id="b_p_adress" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_city">City</label>
                        <input type="text" class="form-control" name="persoanl_city" placeholder="Enter City"
                          id="b_city" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_cou">Country</label>
                        <input type="text" class="form-control" name="personal_country" placeholder="Enter Country"
                          id="b_cou" required>
                      </div>
                    </div>
                    <div class="col-xl-6">
                      <div class="form-group">
                        <label for="b_postal_code">Postal Code</label>
                        <input type="text" class="form-control" name="personal_postal_code"
                          placeholder="Enter Postal code" id="b_postal_code" required>
                      </div>
                    </div>
                    
                    <div class="col-xl-12">
                          <h1 class="education_head">Brand Crandential</h1>
                      </div>
                      <div class="col-xl-6">
                          <div class="form-group">
                              <label for="brand_crandential_email">Email</label>
                              <input type="text" class="form-control" name="brand_crandential_email"
                                     placeholder="Enter Email" id="brand_crandential_email" required>
                          </div>
                      </div>
                      <div class="col-xl-6">
                          <div class="form-group">
                              <label for="brand_crandential_password">Password</label>
                              <input type="text" class="form-control" name="brand_crandential_password" placeholder="Enter password"
                                     id="brand_crandential_password" required>
                          </div>
                      </div>


                  </div>

                </div>
              </div>
            </div>
        </form>
        <div class="col-xl-4 padtop">
          <div class="row">
            <div class="col-xl-12">
              <div class="card categories_card mt-3 mb-2">
                <div class="card-body">
                  <div class="addpro_main_side_bar_heding">
                    <h4>Categories</h4>
                    <?php 
                     
                 
                        $query = "SELECT * FROM Categories where enable ='0'";
                        $result = queryRunner($query);
                        $i = 0;
                      ?>
                    <div id="addpro_check" class="category-brand-class">
                      <?php  while ($row = rowRetriever($result)) {?>
                      <label class="container"><?php echo $row['name']; ?>
                        <input type="radio" name="radio" class="catgory_checkbox" value="<?php echo $row['id']; ?>"
                          id="category-checkboxs-<?php echo $row['id']; ?>"
                          onclick="retriveSubCategoriesData(<?php echo $row['id']; ?>)">
                        <span class="checkmark"></span>
                      </label>
                      <?php
                        $i++;
                      } ?>
                      <input type="hidden" id="item-count" name="item-count" value="<?php echo $i ?>">

                    </div>
                    <div class="addpro_link_tag">
                      <a href="#" data-toggle="modal" data-itemcount="<?php echo $i ?>"
                        data-target="#addproduct_catogories">Create
                        New</a>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="col-xl-12 addpro_subcategory" style="display: none;">
              <div class="card categories_card mt-2 mb-2">
                <div class="card-body">
                  <div class="addpro_main_side_bar_heding">
                    <h4>Sub Categories</h4>
                    <div id="addpro_check" class="addpro_subcat-label">
                      <!-- <label class="container addpro_child_cat">Women
                          <input type="checkbox" checked="checked">
                          <span class="checkmark"></span>
                        </label>

                        <label class="container">Men
                          <input type="checkbox">
                          <span class="checkmark"></span>
                        </label>

                        <label class="container">T-Shirt
                          <input type="checkbox">
                          <span class="checkmark"></span>
                        </label>

                        <label class="container">Hoodies
                          <input type="checkbox">
                          <span class="checkmark"></span>
                        </label> -->
                    </div>
                    <div class="addpro_link_tag">
                      <a href="#" data-toggle="modal" id="sub-cat-link" data-id="0"
                        data-target="#subcategory-modal">Create
                        New</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>


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

  </div>
  <!-- /#wrapper -->
  </div>
  <!-- catagories modal start -->
  <form class="catagories_modal_from" id="modal-form" action="">
    <div class="modal fade" id="addproduct_catogories" 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="cat-name-upload" class="customer-add-input-label txt-regular upload-input-label">Category
              Name</label>

            <input type="text" id="addpro_cat" name="addpro_cat" placeholder="Woman Clothes" value=""
              class="customer-add-input brand_cat_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-upload3">
                  <div class="image-upload-wrap3">
                    <input class="file-upload-input3" type="file" onchange="readURL3(this);" accept="image/*" />
                    <div class="drag-text3">
                      <div class="card-body upload-card-body3">
                        <div class="upload-img3">
                          <img src="../public/image/upload.png" alt="" />
                        </div>
                        <div class="upload-image-format3">
                          <p>
                            .PDF .JPG .PNG .DOC
                          </p>
                        </div>
                        <div class="upload-detail3">
                          <h4>You can also upload files by</h4>
                          <div class="upload-clicking3">
                            <a href="#" class="">Clicking here</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="file-upload-content3">
                    <img class="file-upload-image3" src="#" alt="your image" />
                    <div class="image-title-wrap3">
                      <button type="button" onclick="removeUpload3()" class="btn remove-image3">
                        Remove
                        <span class="image-title3" 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>
  <!-- catagories modal 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 -->
  <!-- child catagories modal start -->
  <form class="childcatagories_modal_from" id="modal-form" action="">
    <div class="modal fade" id="addteacher_child_catogories" 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="cat-name-upload" class="customer-add-input-label txt-regular upload-input-label">Category
              Name</label>

            <input type="text" id="addpro_cat" name="addpro_cat" 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-upload4">
                  <div class="image-upload-wrap4">
                    <input class="file-upload-input4" type="file" onchange="readURL4(this);" accept="image/*" />
                    <div class="drag-text4">
                      <div class="card-body upload-card-body4">
                        <div class="upload-img4">
                          <img src="../public/image/upload.png" alt="" />
                        </div>
                        <div class="upload-image-format4">
                          <p>
                            .PDF .JPG .PNG .DOC
                          </p>
                        </div>
                        <div class="upload-detail4">
                          <h4>You can also upload files by</h4>
                          <div class="upload-clicking4">
                            <a href="#" class="">Clicking here</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="file-upload-content4">
                    <img class="file-upload-image4" src="#" alt="your image" />
                    <div class="image-title-wrap4">
                      <button type="button" onclick="removeUpload4()" class="btn remove-image4">
                        Remove
                        <span class="image-title4" style="display: none;">Uploaded
                          Image</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer mf">
            <button type="button" onclick="addproductfield()" class="btn btn-primary">
              <img src="../public/image/tick (1).png" alt="" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <!-- child catagories 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="../public/js/jquery.easing.min.js"></script>
  <script src="../public/js/dropzone.js"></script>
  <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

  <!-- <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script> -->
  <script src="../public/js/jquery.tag.js"></script>
  <script src="../public/js/jquery.tagsinput-revisited.js"></script>
  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
    $('.addpro_sub_cat').click(function () {
      $('.addpro_subcategory').show();
      $('.addpro_childcategory').hide();

    });
    $('.addpro_child_cat').click(function () {
      $('.addpro_childcategory').show();

    });
    $('#example').tagsInput({
      limit: 7,

    });
    // picture info 
    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);
          $('#brand-logo').val(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');
    });
    // screen shot image upload

    function readURLS(input) {
      if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {
          $('.image-upload-wrap2').hide();

          $('.file-upload-image2').attr('src', e.target.result);
          $('#bank-cheque-pic').val(e.target.result);
          $('.file-upload-content2').show();

          $('.image-title2').html(input.files[0].name);
        };

        reader.readAsDataURL(input.files[0]);

      } else {
        removeUploads();
      }
    }

    function removeUploads() {
      $('.file-upload-input2').replaceWith($('.file-upload-input2').clone());
      $('.file-upload-content2').hide();
      $('.image-upload-wrap2').show();
    }
    //categories modal 
    function readURL3(input) {
      if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {
          $('.image-upload-wrap3').hide();

          $('.file-upload-image3').attr('src', e.target.result);
          $('.file-upload-content3').show();

          $('.image-title3').html(input.files[0].name);
        };

        reader.readAsDataURL(input.files[0]);

      } else {
        removeUpload3();
      }
    }

    function removeUpload3() {
      $('.file-upload-input3').replaceWith($('.file-upload-input3').clone());
      $('.file-upload-content3').hide();
      $('.image-upload-wrap3').show();
    }

    //childcataories modal function
    function readURL4(input) {
      if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {
          $('.image-upload-wrap4').hide();

          $('.file-upload-image4').attr('src', e.target.result);
          $('#brand-cover-photo').val(e.target.result);
          $('.file-upload-content4').show();

          $('.image-title4').html(input.files[0].name);
        };

        reader.readAsDataURL(input.files[0]);

      } else {
        removeUpload4();
      }
    }

    function removeUpload4() {
      $('.file-upload-input4').replaceWith($('.file-upload-input4').clone());
      $('.file-upload-content4').hide();
      $('.image-upload-wrap4').show();
    }
    // multiple certificate picture
    function colsemodel() {
      $(".file-upload-content3").hide();
      $(".image-upload-wrap3").show();
    }

    function addproductfield() {
      var v = $('#addpro_cat').val();

      //   alert(v);
      var t = '<label class="container">' + v +
        '<input type="checkbox">' +
        '<span class="checkmark"></span>' +
        '</label>';
      $('#addpro_check').append(t);
      $("#addproduct_catogories").modal('hide');

      $("#modal-form").trigger("reset");

    }

    $('.list_brands_active').addClass('active');


    // Functioality of categories chekboxes start

    function retriveSubCategoriesData(n) {
      $('.addpro_subcategory').show();
      $('.addpro_subcat-label').empty();
      gh = [];
      $('#cat-id').val(n);
      $('#sub-cat-link').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 = '<label class="container">' + name +
              '<input type="checkbox"  value="' + n + '">' +
              '<span class="checkmark"></span>' +
              '</label>';

            $(".addpro_subcat-label").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 addCatgoryModal() {
      ///catglobal = catglobal + 1;
      var z = $(".brand_cat_input").val();
      var img = $(".file-upload-image3").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 = '<label class="container">' + z +
              '<input type="radio" name="radio" onclick="retriveSubCategoriesData(' + catgory_id + ')" value="' +
              catgory_id + '">' +
              '<span class="checkmark"></span>' +
              '</label>';;


            $(".category-brand-class").append(text);
            $("#addproduct_catogories").modal('hide');
            $(".file-upload-content3").hide();
            $(".image-upload-wrap3").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 addSubcategory() {
      ///catglobal = catglobal + 1;
      var sub_name = $("#subcatagory-add").val();
      var cat_id = $('#sub-cat-link').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,
        }),
        /*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;
            var text = '<label class="container">' + sub_name +
              '<input type="checkbox"  value="' + n + '">' +
              '<span class="checkmark"></span>' +
              '</label>';

            $(".addpro_subcat-label").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);

        }
      });




    }

    //  insert value in array 
    var gh = [];
    $('.addpro_subcat-label').on('change', 'input[type=checkbox]', function () {

      var id = $(this).val(); // this gives me null
      var index = gh.indexOf(id);

      if ($(this).is(':checked')) {
        gh.push(id);
        $('#get-array').val(gh);
        console.log(gh);
        // document.getElementById("demo").innerHTML='['+gh+']';
      } else {
        if (index > -1) {
          gh.splice(index, 1);
          console.log(gh);
          $('#get-array').val(gh);
          // document.getElementById("demo").innerHTML='['+gh+']';
        }
      }
      // console.log(gh);
    });
  </script>

</body>

</html>