<?php 
include "config.php";
error_reporting(0);

?>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="th.css">
<script src="datatable/data.js" type="text/javascript"></script>
<script src="datatable/table.js" type="text/javascript"></script>
<script src="datatable/datatable.js"></script>
<link rel="stylesheet" href="datatable/data-boot.css">
<style>
    
    #navbar
    {
        flex:15%;
      
        flex-direction:row;
        overflow:auto;
        
    }
    #content
    {
        flex:90%;
        overflow:auto;
        padding-left:10px;
        padding-right:10px;
    }
    #fullbody
    {
        display:flex;
        
         height:100%;         
    }
    label
    {
      font-size:20px;
    }
    .edit
    {
        font-size:18px;
        color:green;
        cursor:pointer;
    }
    .dele
    {
        font-size:18px;
        color:red;
        cursor:pointer;
    }
    .edit:hover
    {
        font-size:20px;
        
    }
    .dele:hover
    {
        font-size:20px;
        color:red;
        cursor:pointer;
        
    }
    td
    {
      text-align:center;
    }
    th
    {
      text-align:center;
    }
    .row input
    {
      height:30px;
    }
    .row select
    {
      height:35px;
    }
    input[type="checkbox"]{
      width:20px;height:20px;
    }
    @media (max-width: 800px) {
        #fullbody
    {
        display:flex;
        flex-wrap: wrap;
                 
    }
        #navbar,#content {
    flex: 100%;
  }
}
</style>
<script>
$(document).ready( function () {
    $('#protable').DataTable();
} );
</script>
</head>
<body>
    <div ><?php include "navbar.php"?></div>
    <div id="fullbody"> 

<div id="content">
<br>
<h3>Customer-Master</h3>
<br>
<?php 
        $userall=$_SESSION['log'];
        $usper = mysqli_query($connect,"select * from userpermission where username = '$userall'  && filename='customermaster'");
while($per=mysqli_fetch_array($usper))
{
          ?>
          <?php if($per['dataadd'] =='1'){ ?>
<input type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="float:right;margin-right:0px;" value="+ Add"><?php }?>
<br><br>
<!-- table -->
<div>
<table class="table table-bordered table-hover " style="border:1px solid lightgrey" id="protable">
    <thead >
<tr>
  <th>Sno</th>
    <th>Code</th>
    <th>Name</th>
    <th>Address</th>
    <th>Contact</th>
    <?php if($per['dataedit'] =='1'){ ?><th>Edit</th><?php }?>
    <?php if($per['datadelete'] =='1'){ ?><th>Delete</th><?php }?>
</tr>

    </thead>
    <tbody>
    <?php 
$cussh=mysqli_query($connect,"select * from customerdetails where status!='deleted' order by code desc");
$sno=0;
while($cusshow = mysqli_fetch_array($cussh))
{
  $sno+=1;
?>


        <tr <?php if($cusshow['status']=='deleted' ){ echo 'style="color:rgba(245, 71, 109)"';} ?>>
          <td><?php echo $sno ?></td>
        <td><?php echo $cusshow['code'] ?></td>
    <td><?php echo $cusshow['name'] ?></td>
    <td><?php echo $cusshow['address'] ?>,<?php echo $cusshow['district'] ?>,<?php echo $cusshow['state'] ?>,<?php echo $cusshow['pincode'] ?></td>
    <td><?php echo $cusshow['mobile'] ?></td>
    <?php if($per['dataedit'] =='1'){ ?>  <td><a href="edit_customer.php?code=<?php echo $cusshow['code'] ?>"><?php if($cusshow['status']!='deleted' ){ ?><i class="fas fa-edit edit"></i><?php } ?></a></td><?php }?>
    <?php if($per['datadelete'] =='1'){ ?>  <td><a data-toggle="modal" data-target="#delete<?php echo $cusshow['code'] ?>"><?php if($cusshow['status']!='deleted' ){ ?><i  class="fas fa-trash-alt dele"></i><?php } ?> <?php if($cusshow['status'] =='deleted' ){ ?><a href="adddelecustomer.php?add=<?php echo $cusshow['code'] ?>"><i class="fas fa-plus-circle" style="color:green;font-size:20px;padding-top:10px"></i></a><?php } ?>  </a></td><?php }?>
        </tr>
        <?php }}?>
    </tbody>



</table>

</div>
<!-- modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Add Customer</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
            <!--  -->
            <form action="insertcustomer.php" method="post">
          <div class="row">
              <div class="col-sm-2"><label> Name</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" name="customername" placeholder="Name" id="cusnameadd"></div>
              <?php 
              $code = mysqli_query($connect,"select max(id)as count from customerdetails ");
              while($row=mysqli_fetch_array($code))
              {
                $code = $row['count'];
                $codeco = sprintf("%04d",$code + 1);
              }
              ?>

              <input type="hidden" class="required" autocomplete="off" name="code" placeholder="Name" value="CTS-<?php echo $codeco ?>">
              <?php 
$proname_val=mysqli_query($connect,"select * from customerdetails where status!='deleted' order by id desc");
while($proname_val_show = mysqli_fetch_array($proname_val))
{
?>
<input type="hidden" class="cusNameValue" value="<?php echo $proname_val_show['name'] ?>">
<?php
}
?>
<script>
  var cusName = document.querySelectorAll(".cusNameValue");
  var cusAdd = document.getElementById("cusnameadd");
  cusAdd.addEventListener("blur",function(e){
    //console.log("a");
   var customer = e.target.value.toLowerCase();
   cusName.forEach((list)=>{
    if(customer.replace(/ /g,"") == list.value.toLowerCase().replace(/ /g,"")){
      document.getElementById("alertUser").click();
      cusAdd.value="";
   }
   });
     
  });
  console.log(userName);
  </script>
              <div class="col-sm-3"><label>Mobile</label></div>:
              <div class="col-sm-3"><input type="text" class="required " id="mobile" onKeyUp="mob()" autocomplete="off" name="mobile" placeholder="mobile"></div>
              
            </div><br>
            
            <!--  -->
            
            <script>
function mob() 
{
  var a = document.getElementById("mobile").value;
  var n = a.length;
  //alert(n);
  if(n != 10)
  {
  //alert("Mobile Number Should Be 10 Digit");
  //document.getElementById("email").disabled=true;
  document.getElementById("mobile").style.color= "red";
  }
  else
  {
    //document.getElementById("email").disabled=false;
    document.getElementById("mobile").style.color = "black";
  }
}
</script>  
            
            <!--  -->
            
            <div class="row">
              
              <div class="col-sm-2"><label>Credit limit:</label></div>:
              <div class="col-sm-3"><input type="text" class="required creditdisplay" autocomplete="off" name="credit" placeholder="Limit"></div>
              <div class="col-sm-3"><label>Sales Opening</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" name="salesopening" placeholder="opening"></div>
            </div>
            <br>
           
            
            
            <!--  -->

            <!--  -->
            <div class="row">
            <div class="col-sm-2" style="color:red"><label>Purchase Opening</label></div>:
              <div class="col-sm-3" ><input type="text" class="required" autocomplete="off" name="purchaseopening" placeholder="Purchase-Opening" style="color:red"></div>
              
              <div class="col-sm-3"><label>Pincode</label></div>:
              <div class="col-sm-3"><input type="number" class="required" autocomplete="off" id="pincode" name="pincode" placeholder="Pincode"></div>
            </div><br>
            <!--  -->
            
            <!--  -->
            <div class="row">
              <div class="col-sm-2"><label>Address</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" name="address" placeholder="Address"></div>
              <div class="col-sm-3"><label>District</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" id="district" name="district" placeholder="district"></div><div class="spinner-border text-info spinner-grow-sm districtspin"></div>
            </div><br>
            <!--  -->
           
            <!--  -->
            <div class="row">
              <div class="col-sm-2"><label>State</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" id="state" name="state" placeholder="state"></div><div class="spinner-border text-info spinner-grow-sm statespin"></div>
              <div class="col-sm-3"><label>Gst</label></div>:
              <div class="col-sm-3"><input type="text" class="required" autocomplete="off" id="state" name="gst" placeholder="Gst"></div>
            </div>
            
            <!--  -->
        </div>
        <script>
          $(document).ready(function(){
           $(".statespin").hide();
           $(".districtspin").hide();
           $("#pincode").keyup(function(){
            $(".statespin").show();
           $(".districtspin").show();
             var pincode= $(this).val();
             var pinlen= pincode.length;

            //  alert(pinlen);
            if(pinlen == 6 )
            {
              // alert(pincode);
              $.ajax({
                      type:'POST',
                      url:'districtajax.php',
                      data:{pincode:pincode},
                      success:function(a){
                      //  alert(a);
                       // $("#showquantity-with-color").css("display","block");
                        $("#district").val(a);
                        //alert(a);

                     }
                                  });
                                  $.ajax({
                      type:'POST',
                      url:'stateajax.php',
                      data:{pincode:pincode},
                      success:function(a){
                      //  alert(a);
                       // $("#showquantity-with-color").css("display","block");
                        $("#state").val(a);
                       // alert(a);

                     }
                                  });
              $(".statespin").hide();
           $(".districtspin").hide();
            }
else
{
  $(".statespin").show();
           $(".districtspin").show();
           $("#state").val("");
           $("#district").val("");
}
           });
          });
        </script>
        <div class="row">
              <div class="col-sm-2"><label>Block Date</label></div>:
              <div class="col-sm-3"><input type="date" class="" autocomplete="off"  name="blockdate" placeholder="Block Date"></div>
              <div class="col-sm-4"><input type="checkbox"  value="1"  name="forsingleentry">&nbsp;<label>To Show In Single Entry</label></div>
            <!--  -->
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
        <input type="button"  class="btn btn-success" id="validationButton" value="Add">
          <input type="hidden"  class="btn btn-success" data-toggle="modal" data-target="#addpro" value="Add" id="submitButton" >
        </div>
        <!-- modal for add -->
<div class="modal fade" id="addpro">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="background-color:rgba(77, 219, 106,0.9)">
      
        <!-- Modal Header -->
        
        
        <!-- Modal body -->
        <div class="modal-body">
          <span style="color:white"><i class="fas fa-check" style="font-size:24px"></i> Customer Have Been Created Successfully</span>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="submit" type="button" class="btn btn-warning" >Ok</button>
        </div>
        
      </div>
    </div>
  </div>
  
<!-- modal for add -->
      </div>
    </div>
  </div>
        </form>
        
<!-- modal -->

<!-- modal for delete -->
<!-- The Modal -->
<?php 
$cusdele=mysqli_query($connect,"select * from customerdetails order by id desc");
while($cusshowdele = mysqli_fetch_array($cusdele))
{
?>
<div class="modal fade" id="delete<?php echo $cusshowdele['code'] ?>">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="background-color:rgba(247, 2, 80,0.9)">
      
        <!-- Modal Header -->
        <form action="deletecustomer.php" method="post" >
        <input type="hidden" name="delete" value="<?php echo $cusshowdele['code'] ?>">
        <!-- Modal body -->
        <div class="modal-body" >
         Are You Sure Want To Delete !.
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Yes" >
          <button type="button" class="btn btn-warning" data-dismiss="modal">No</button>
        </div>
</form>
      </div>
    </div>
  </div>
  <?php 
}
  ?>
<!-- ,odal for delete -->
<!-- table -->


<!-- main-content-div -->
</div>
<!-- main-content-div -->
</div>
<!-- modal to blockdate -->
<button type="button" class="btn btn-primary" id="alertUser" data-toggle="modal" data-target="#advanceLimit" style="display:none">
      </button>

  <!-- The Modal -->
  <div class="modal fade" id="advanceLimit">
    <div class="modal-dialog modal-lg">
     <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close"  data-dismiss="alert">&times;</button>
    <strong>Customer Already Exist</strong>
  </div>
  </div>
  </div>
        
<!-- alert -->
<script src="restriction/customer.js"></script>
</body>