<?php 
session_start();
require_once 'config.php';
require_once 'auth.php';
$MainPage="Master";
$Page = "User-Master";
?>
<!DOCTYPE html>

<html lang="en" class="default-style">

<head>
    <title><?php echo $Proj_Title; ?></title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description"
        content="" />
    <meta name="keywords" content="">
    <meta name="author" content="Codedthemes" />
    <?php include_once 'header_script.php'; ?>
</head>

<body>
    <!-- [ Preloader ] Start -->
    <div class="page-loader">
        <div class="bg-primary"></div>
    </div>
    <!-- [ Preloader ] End -->

    <!-- [ Layout wrapper ] Start -->
  <div class="layout-wrapper layout-1 layout-without-sidenav">
        <div class="layout-inner">
         
         <?php include 'sidenavi.php'; ?>

<div class="layout-container">
           
                 <div class="layout-content">

                    <!-- [ content ] Start -->
                    <div class="container-fluid flex-grow-1 container-p-y">
                        

                        <div class="row">
                            <!-- customar project  start -->
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-body">
                                         <div class="row align-items-center m-l-0">
                                            
                                              
                                            
                                            <div class="col-sm-2 text-left">
                                                <button class="btn btn-success btn-sm mb-3 btn-round" data-toggle="modal" data-target="#modal-report" id="add_button"><i class="feather icon-plus"></i> Add User</button>
                                            </div>
                                             
                                           
                                        </div>
                                        <hr>
                                        <div class="table-responsive" id="custresult">
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- customar project  end -->
                        </div>
                    </div>
                    <!-- [ content ] End -->
                    <!-- [ Layout footer ] Start -->
                    <nav class="layout-footer footer footer-light">
                        <div class="container-fluid d-flex flex-wrap justify-content-between text-center container-p-x pb-3">
                            <div class="pt-3">
                                <span class="float-md-right d-none d-lg-block">&copy; Exclusive on Themeforest | Hand-crafted &amp; Made with <i class="fas fa-heart text-danger mr-2"></i></span>
                            </div>
                            <div>
                                <a href="javascript:" class="footer-link pt-3">About Us</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Help</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Contact</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Terms &amp; Conditions</a>
                            </div>
                        </div>
                    </nav>
                    <!-- [ Layout footer ] End -->
                </div>

                
                <!-- [ Layout content ] Start -->
            </div>
            <!-- [ Layout container ] End -->
        </div>
        <!-- Overlay -->
        <div class="layout-overlay layout-sidenav-toggle"></div>
    </div>


    <!-- [ Layout wrapper] End -->
    <div class="modal fade" id="modal-report" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 70rem; ">
        <div class="modal-content">
          
            
            <div class="modal-header">
                <h5 class="modal-title">Add User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="validation-form" method="POST">
                    <div class="row">
                       <input type="hidden" name="action" id="action" value="Save">
                       <input type="hidden" name="id" id="id" /> 
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Name">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Name" name="Name" placeholder="" required>
                            </div>
                        </div>
                         <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Name">User Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Username" name="Username" placeholder="" oninput="checkUsername()" required>
                                <span id="error_msg" style="color:red;display: none;">Username Already Exists!</span>
                            </div>

                        </div>

                         <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Name">Password <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Password" name="Password" placeholder="" required>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="gender">Type <span class="text-danger">*</span></label>
                                <select class="form-control" id="Type" name="Type" required onchange="getType(this.value)">
                                    <option value=""></option>
                                    <option value="Consultant">Consultant</option>
                                    <option value="Optometrist">Optometrist</option>
                                    <option value="Reception">Reception</option>
                                </select>
                            </div>
                        </div>
    <script type="text/javascript">
        function getType(val){
            if(val == 'Consultant'){
                $('.required_cls').attr('required','required');
                $('.star').show();
            }
            else{
               $('.required_cls').attr('required',false);
                $('.star').hide(); 
            }
        }
    </script>                   
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Mobile <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Phone" name="Phone" placeholder="" onKeyPress="return isNumberKey(event)" required>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Registration No <span class="text-danger star" style="display:none;">*</span></label>
                                <input type="text" class="form-control required_cls" id="RegNo" name="RegNo" placeholder="">
                            </div>
                        </div>
                         
                                                                                                                        
                         <div class="col-sm-2">
                            <div class="form-group">
                                <label class="floating-label" for="Phone">Fees <span class="text-danger star" style="display:none;">*</span></label>
                                <input type="text" class="form-control required_cls" id="Fees" name="Fees" placeholder="" onKeyPress="return isNumberKey(event)" value="0">
                            </div>
                        </div>

                        
                        <div class="col-sm-12">
                            <button class="btn btn-primary" type="submit" name="submit" id="submit">Submit</button>
                            <button class="btn btn-danger" type="reset">Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include_once 'footer_script.php'; ?>
<script type="text/javascript">
    function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : evt.keyCode
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function success_toast(){
    var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
   $.growl.notice({
      title:    'Success',
      message:  'New User Added Successfully!',
      location: isRtl ? 'tl' : 'tr'
    });
  }
  function error_toast(){
    var isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
   $.growl.error({
      title:    'Error',
      message:  'Username Already Exists',
      location: isRtl ? 'tl' : 'tr'
    });
  }

  function user_lists(){
  var action = 'view';
      $.ajax({
  type: "POST",
  url: "ajax_files/ajax_users.php",
   data:{action:action},  
  success: function(data){
      $('#custresult').html(data);
  }
  });
    }

    function checkUsername(){
        var action = "checkUsername";
        var Username = $('#Username').val();
        $.ajax({
    url:"ajax_files/ajax_users.php",
    method:"POST",
    data : {action:action,Username:Username},
    success:function(data)
    {
        if(data == 1){
            $('#error_msg').show();
        }
        else{
            $('#error_msg').hide();
        }
        
    }
    });
    }

    $(document).ready(function() {
        user_lists();

        $('#add_button').click(function(){  
           $('.modal-title').html("Add <span class='font-weight-light'>New User</span>");  
           $('#action').val("Save");  
           $('#id').val('');

     $('#Name').val('');  
                $('#Username').val('').attr('readonly',false);
                $('#Type').val('').attr("selected",true);  
                $('#Password').val('');
                $('#Phone').val('');
                $('#RegNo').val('');
                $('#Fees').val(0);
       $('#submit').text('Submit');
          
      }) 

      $('#validation-form').on('submit', function(e){
      e.preventDefault();  
          if ($('#validation-form').valid()){ 
         $.ajax({  
                url :"ajax_files/ajax_users.php",  
                method:"POST",  
                data:new FormData(this),  
                contentType:false,  
                processData:false,  
                 beforeSend:function(){
     $('#submit').attr('disabled','disabled');
     $('#submit').text('Please Wait...');
    },
                success:function(data){ 
                    //alert(data);
                    //console.log(data);exit();
                    if(data == 1){
                          $('#modal-report').modal('hide'); 
                         success_toast();
                         user_lists();
                        
                    }
                    else{
                        error_toast();
                        $('#modal-report').modal('show'); 
                    }
                     $('#submit').attr('disabled',false);
                       $('#submit').text('Submit');
                }
                });
     }
      });


      $(document).on("click", ".update", function(event){
 event.preventDefault();
 event.stopPropagation();
 var id = $(this).attr("data-id");
 var action = "fetch_record";
 $.ajax({  
                url:"ajax_files/ajax_users.php",  
                method:"POST",  
                data:{action:action,id:id},  
                dataType:"json",  
                success:function(data){  
                $('#Name').val(data.Name);  
                $('#Username').val(data.Username).attr('readonly','readonly');
                $('#Type').val(data.Type).attr("selected",true);  
                $('#Password').val(data.Password);
                $('#Phone').val(data.Phone);
                $('#RegNo').val(data.RegNo);
                $('#Fees').val(data.Fees);
                $('#action').val('Edit'); 
                   
                       $('#id').val(id);  
                       $('#submit').text("Update");   
                       $('#modal-report').modal('show');
                         $('.modal-title').html("Update <span class='font-weight-light'>User</span>"); 
                     
                }  
           });
});



 $(document).on("click", ".delete", function(event){
 event.preventDefault();
 var id = $(this).attr("data-id");
 var action = "delete";
 //alert(id);
   swal({
            title: "Are you sure?",
            text: "You will not be able to recover this User!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, delete",
            cancelButtonText: "No, cancel",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm) {
            if (isConfirm) {
                 $.ajax({  
                url:"ajax_files/ajax_users.php",  
                method:"POST",  
                data:{action:action,id:id},  
               
                success:function(data){
              swal("Deleted!", "User has been deleted.", "success");
              
              user_lists();

                     }  
           });
                
            } else {
                swal("Cancelled", "User is safe :)", "error");
            }
        });

           
 });
    });  
</script>
</body>

</html>
