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

</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');
        ?>

        <form action="../framework/main_action.php?action_type=create&request_type=coupons&functionality_type=insert_coupons" method="POST">
      <div class="container add_teacher_page">
        <div class="page_name">
          <h1>Add Coupons</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="card mt-3 mb-3 add_coupons_card">
          <div class="card-body">
            <div class="row ">
              <div class="col-lg-12">
                <div class="">
                  <h5 class="coupon-code-main-heading txt-label">
                    Coupon Information
                  </h5>
                </div>
                <div>
                  <p class="coupon-code-main-paragraph txt-regular color-sec">
                    Code will be used by users in checkout
                  </p>
                </div>
              </div>
              <div class="col-lg-6 coupon-code-input-margin">
                <div class="form-group">
                  <label for="ccode" class="coupon-code-input-label txt-regular color-sec">Coupon Code</label>
                  <input type="text" id="ccode" name="ccode" placeholder="shipfree20"
                    class="form-control coupon-code-input w-100" required/>
                </div>

              </div>
              <div class="col-lg-6 coupon-code-input-margin">
                <div class="form-group">
                  <label for="cname" class="coupon-code-input-label txt-regular color-sec">Coupon Name</label>
                  <input type="text" id="cname" name="cname" placeholder="Free Shipping"
                    class="form-control coupon-code-input w-100" required />
                </div>

              </div>
              <div class="col-lg-12 coupon-code-input-margin">
                <hr />
              </div>
              <div class="col-lg-12 coupon-code-input-margin">
                <div class="">
                  <h5 class="coupon-code-main-heading txt-label">
                    Coupon type
                  </h5>
                </div>
                <div>
                  <p class="coupon-code-main-paragraph txt-regular color-sec">
                    Type of coupon you wand to create
                  </p>
                </div>
              </div>
                <input type="hidden" id="coupon-type-value" name="coupon type">
              <div class="col-lg-3 coupon-code-input-margin">
                <div class="card text-center cou-card-body" id="card1" onclick="changecolor(this.id)">
                  <div class="card-body">
                    <div>
                      <i class="far fa-money-bill-alt"></i>
                    </div>

                    <p class="card-text">Fixed Discount</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 coupon-code-input-margin">
                <div class="card text-center cou-card-body" id="card2" onclick="changecolor(this.id)">
                  <div class="card-body">
                    <div>
                      <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    </div>

                    <p class="card-text">Percentage Discount</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 coupon-code-input-margin">
                <div class="card text-center cou-card-body" id="card3" onclick="changecolor(this.id)">
                  <div class="card-body">
                    <div>
                      <i class="fa fa-truck" aria-hidden="true"></i>
                    </div>

                    <p class="card-text">Free Shipping</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 coupon-code-input-margin">
                <div class="card text-center cou-card-body" id="card4" onclick="changecolor(this.id)">
                  <div class="card-body">
                    <div>
                      <i class="fa fa-tag" aria-hidden="true"></i>
                    </div>

                    <p class="card-text">Price Discount</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-12 coupon-code-input-margin">
                <div id="disvalue"></div>
                <div id="disval">
                  <div class="form-group">
                    <label for="dvalue" class="coupon-code-input-label txt-regular color-sec">Discount Value</label>
                    <input type="text" id="dvalue" name="dvalue" placeholder="Amount"
                      class="form-control coupon-code-input w-100"  />
                  </div>

                </div>
              </div>

              <div class="col-lg-6 coupon-code-input-margin">
                <div class="form-group">
                    <label for="Count" class="addpro_main-input-label txt-regular color-sec coupon_select_lable">Type</label>
                    <?php
                    $query="SELECT * FROM CouponCategory";
                    $result = queryRunner($query);

                    ?>
                    <select name="type_id" class="addpro_main-input coupon_select w-100" id="type_id" placeholder="Pick a type...">
                      <option value="">Select a type...</option>
                      <?php
                      while ($row = rowRetriever($result)) {
                      ?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
                          <?php
                      }

                      ?>
<!--                    <option value="AL">Alabama</option>-->
<!--                    <option value="AK">Alaska</option>-->
<!--                    <option value="AZ">Arizona</option>-->
<!--                    <option value="AR">Arkansas</option>-->
<!--                    <option value="CA">California</option>-->
<!--                    <option value="CO">Colorado</option>-->
<!--                    <option value="CT">Connecticut</option>-->
<!--                    <option value="DE">Delaware</option>-->
<!--                    <option value="DC">District of Columbia</option>-->
<!--                    <option value="FL">Florida</option>-->
<!--                    <option value="GA">Georgia</option>-->
<!--                    <option value="HI">Hawaii</option>-->
<!--                    <option value="ID">Idaho</option>-->
<!--                    <option value="IL">Illinois</option>-->
<!--                    <option value="IN">Indiana</option>-->
                  </select>
                </div>

              </div>
              <div class="col-lg-6 coupon-code-input-margin">
                  <div class="form-group abc_hide">
                      <label for="Count" class=" addpro_main-input-label txt-regular color-sec coupon_select_lable">Abc</label>
                      <select name="abc_name" class="selectpicker addpro_main-input  w-100" data-live-search="true" id="abc_id">
                          <option class="first_option" value=""selected>select Type Item</option>

                      </select>
                  </div>

              </div>
              <div class="col-lg-6 coupon-code-input-margin">
                <div class="row">
                  <div class="col-lg-6 coupon-code-input-margin2">
                    <div class="form-group">
                      <label for="duration" class=" coupon-code-input-label txt-regular color-sec">Start
                        Duration</label>
                      <input type="datetime-local" id="duration1" name="startduration" placeholder="Set Duration"
                        class="form-control coupon-code-input w-100" />
                    </div>

                  </div>
                  <div class="col-lg-6 coupon-code-input-margin2">
                    <div class="form-group">
                      <label for="duration" class="coupon-code-input-label txt-regular color-sec">End Duration</label>
                      <input type="datetime-local" id="duration2" name="duration" placeholder="Set Duration"
                        class="form-control coupon-code-input w-100" />
                    </div>

                  </div>
                </div>

                <div class="form-check fcheck">

                  <input type="checkbox" class="form-check-input dchk" id="checkdis" />
                  <label class="form-check-label" for="checkdis">Dont't set duration</label>
                </div>
              </div>
              <div class="col-lg-6 coupon-code-input-margin">
                <div class="form-group">
                  <label for="ulimit" class="coupon-code-input-label txt-regular color-sec">Usage Limits</label>
                  <input type="text" id="ulimit" name="ulimit" placeholder="Amount of uses"
                    class="form-control coupon-code-input w-100" required/>
                </div>

                <div class="form-check fcheck">
                  <input type="checkbox" class="form-check-input dchk" id="checkdis2" />
                  <label class="form-check-label" for="exampleCheck1">Don't limit amout of uses</label>
                </div>
              </div>
            </div>
          </div>
        </div>



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

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

  <!-- 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>
  <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");
    });
    $('.selectpicker').selectpicker();

    document.getElementById("checkdis2").onchange = function () {
      document.getElementById("ulimit").disabled = this.checked;
    };

    var checkboxes = $("#checkdis");

    checkboxes.on("click", checkStatus);

    function checkStatus() {
      if ($(checkboxes).is(":checked")) {
        $("#duration1").prop("disabled", true);
        $("#duration2").prop("disabled", true);
      } else {
        $("#duration1").prop("disabled", false);
        $("#duration2").prop("disabled", false);
      }
    }

    // $(document).ready(function () {
    //   $("select").selectize({
    //     sortField: "text",
    //   });
    // });

    function changecolor(id) {
      if (id == "card1") {
        document.getElementById(id).style.color = "#1e5eff"; // forecolor
        document.getElementById(id).style.border = "1px solid #1e5eff"; // backcolor
        document.getElementById("card2").style.color = "#5a607f"; // forecolor
        document.getElementById("card2").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card3").style.color = "#5a607f"; // forecolor
        document.getElementById("card3").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card4").style.color = "#5a607f"; // forecolor
        document.getElementById("card4").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
          $('#coupon-type-value').val(4);
        $("#disvalueswap").hide();
        $("#disval").show();
      }
      if (id == "card2") {
        document.getElementById(id).style.color = "#1e5eff"; // forecolor
        document.getElementById(id).style.border = "1px solid #1e5eff"; // backcolor
        document.getElementById("card1").style.color = "#5a607f"; // forecolor
        document.getElementById("card1").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card3").style.color = "#5a607f"; // forecolor
        document.getElementById("card3").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card4").style.color = "#5a607f"; // forecolor
        document.getElementById("card4").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
          $('#coupon-type-value').val(1);
        $("#disvalueswap").hide();
        $("#disval").show();
      }
      if (id == "card3") {
        document.getElementById(id).style.color = "#1e5eff"; // forecolor
        document.getElementById(id).style.border = "1px solid #1e5eff"; // backcolor
        document.getElementById("card1").style.color = "#5a607f"; // forecolor
        document.getElementById("card1").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card2").style.color = "#5a607f"; // forecolor
        document.getElementById("card2").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card4").style.color = "#5a607f"; // forecolor
        document.getElementById("card4").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
          $('#coupon-type-value').val(3);
        $("#disvalueswap").hide();
        $("#disval").show();
      }
      if (id == "card4") {
        document.getElementById(id).style.color = "#1e5eff"; // forecolor
        document.getElementById(id).style.border = "1px solid #1e5eff"; // backcolor
        document.getElementById("card1").style.color = "#5a607f"; // forecolor
        document.getElementById("card1").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card2").style.color = "#5a607f"; // forecolor
        document.getElementById("card2").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
        document.getElementById("card3").style.color = "#5a607f"; // forecolor
        document.getElementById("card3").style.border =
          "1px solid rgba(0,0,0,.125)"; // backcolor
          $('#coupon-type-value').val(2);
        $("#disval").hide();
        var text =
          '<div class="row " id="disvalueswap">' +
          '<div class="col-lg-6 coupon-code-input-margin2">' +
          ' <div class="form-group"><label for="dvalue2" class="coupon-code-input-label txt-regular color-sec">Discount Value</label>' +
          '<input type="text" id="dvalue2" name="dvalue2" placeholder="Amount" class="form-control coupon-code-input w-100" />' +
          "</div></div>" +
          '<div class="col-lg-6 coupon-code-input-margin2">' +
          '<div class="form-group"><label for="dprice" class="coupon-code-input-label txt-regular color-sec">Required Price</label>' +
          '<input type="text" id="dprice" name="price" placeholder="Enter price" class="form-control coupon-code-input w-100"/>' +
          "</div></div>" +
          "</div>";
        $("#disvalue").html(text);
      }
    }

    $('.list_coupon_active').addClass('active');
  </script>
    <script>
    $(document).ready(function () {
        $(document).on('change','#type_id',function(){
            var s=$(this).val();
            var request_name="";
            $(".abc_hide").show();
            if(s == '1'){
                // alert("retrieve_brand_data");
                request_name = "retrieve_brand_data";
            }else if(s == '2'){
                // alert("retrieve_allCategory_data");
                request_name = "retrieve_allCategory_data";
            } else if(s == '3' ){
                // alert("retrieve_products_data");
                request_name = "retrieve_products_data";
            } else {
                // $(".abc_type").attr("disabled", "disabled");
                $(".abc_hide").hide();
            }

            sendRequest("?action_type=retrieve&request_type=coupons&functionality_type="+request_name, {
                id: s

            }, "POST")
                .then((data) => {
                    // console.log(data)
                    var data = JSON.parse(data);
                    if (data.code == "202") {
                        $("#abc_id").empty();
                        var list = data.listOfData;
                        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 name = list[i].name;


                            var text = '<option value="'+n+'">'+name+'</option>';
                            $("#abc_id").append(text);
                            $('#abc_id').selectpicker('refresh');


                        }

                    }

                })
                .catch((error) => {
                    console.log(error)
                })

        });


    });

    </script>

</body>

</html>