<?php include 'header1.php';
include'config.php';
$query = "SELECT * FROM tbl_features ORDER BY id ASC";  
$result = mysqli_query($con, $query);  
?>
<style>
  .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
  }

  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }
  input:disabled + .slider {
    background-color: #ffb2b2;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 10px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
</style>
<div class="content-wrapper">
  <section class="content-header">
    <h1>
      Pump Manager
    </h1>
    <ol class="breadcrumb">
      <li>
        <a href="#">
          <i class="fa fa-dashboard">
          </i> Home
        </a>
      </li>
      <li>
        <a href="#">Pump Manager
        </a>
      </li>
      <li class="active">Feature List
      </li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title"> Feature List
            </h3>
          </div>
          <div class="box-body">
            <div class="container-fluid">  
              <div class="table-responsive">  
                <div align="right">  
                  <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal1" class="btn btn-warning btn-md add_data">Add
                  </button>  
                </div>  
                <br />  
                <div id="alert_message">
                </div>
                <div id="employee_table">  
                </div>  
                <br>
              </div>  
            </div>  
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>Version
    </b> 2.4.18
  </div>
  <strong>Copyright &copy; 2019 
    <a href="https://adminlte.io">Pump Manager
    </a>.
  </strong> All rights
  reserved.
  <span> Powered by 
    <a href="http://qisystems.in/"> QI Systems
    </a>
  </span>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/demo.js"></script>
<script>
  $(function () {
    $('#example1').DataTable()
    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true
    }
    )
  }
  )
</script>
<script>  
  function fetch_data()  
  {  
    $.ajax({  
      url:"select_feature.php",  
      method:"GET",  
      success:function(data){  
       $('#employee_table').html(data);  
     }  
   });  
  } 
  function update_data()  
  {
    $.ajax({
      url : "feature_insert.php",
      type:"POST",
      cache :false,
      dataType :"html",
      data:$("form[name='UpdateData']").serializeArray(),
      success:function(data)
      {
        $('#add_data_Modal').modal('hide');
        fetch_data();
      },
      error :function(data)
      {
        Alert("Fail");
      }
    });
  }
  function addnew_data()  
  {
    $.ajax({
      url : "feature_insert.php",
      type:"POST",
      cache :false,
      dataType :"html",
      data:$("form[name='AddData']").serializeArray(),
      success:function(data)
      {
        $('#add_data_Modal1').modal('hide');
        fetch_data();
      },
      error :function(data)
      {
        Alert("Fail");
      }
    });
  }
  $(document).ready(function(){
    fetch_data();
    $('#add').click(function(){
      $('#insert').val("Insert");
      $('#insert_form1')[0].reset();
    }
    );
    $('#insert_form1').on("submit", function(event){
      event.preventDefault();
      $.ajax({
        url:"feature_insert.php",  
        method:"POST",  
        data:$('#insert_form1').serialize(),  
        beforeSend:function(){
          $('#insert').val("Inserting");
        },  
        success:function(data){
          $('#insert_form1')[0].reset();
          $('#add_data_Modal1').modal('hide');
          $('#add_data_Modal').modal('hide');
          fetch_data();
        }
      }
      );      
    }
    );
    $(document).on('click', '.view_data', function(){
      var employee_id = $(this).attr("id");
      if(employee_id != '')  
      {
        $.ajax({
          url:"view_feature.php",  
          method:"POST",  
          data:{employee_id:employee_id},  
            success:function(data){
              $('#employee_detail').html(data);
              $('#dataModal').modal('show');
              fetch_data();
            }
          }
          );
      }
    }
    );
    $(document).on('click', '.delete', function(){
      var id = $(this).attr("id");
      if(confirm("Are you sure you want to remove this?"))
      {
        $.ajax({
           url:"feature_insert.php",
          method:"POST",
          data:{id:id,request_type:2},
            success:function(data){
              // alert(data);  
              fetch_data(); 
            }
          });       
      }
    });
  }
  );
  $(document).on('click', '.add_data', function(){
    $.ajax({
      url:"feature-add.php",
      success:function(data){
        $('.ajax-body2').html(data);
      }
    });
  });
  $(document).on('click', '.edit_data', function(){
    var id= $(this).data("index");
    $.ajax({
      url:"feature-edit.php",
      method:"POST",
      data:{id:id},
      success:function(data){
        $('#add_data_Modal').modal('show');
        $('.ajax-body1').html(data);
      }
    });
  });
  $(document).on('click', '.status_data', function(){
    var id= $(this).data("index");
    $.ajax({
      url:"feature_insert.php",
      method:"POST",
      data:{id:id,request_type:3},
      success:function(data){
        fetch_data();
      }
    });
  });
</script>
</body>
</html> 
<div id="add_data_Modal" class="modal fade">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>  
        <h4 class="modal-title">Pump Manager Features detail
        </h4>  
      </div>  
      <div class="modal-body ajax-body1">
      </div>   
    </div>  
  </div>  
</div>
<div id="add_data_Modal1" class="modal fade">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>  
        <h4 class="modal-title">Pump Manager Features detail
        </h4>  
      </div>  
      <div class="modal-body ajax-body2">
      </div>   
    </div>  
  </div>  
</div>  