<?php $__env->startSection('content_header'); ?>
    <?php echo notifyCss(); ?>
    <?php echo notifyJs(); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-primary">
                    <div class="card-header">
                        <h3 class="card-title">User Registration</h3>
                    </div>
                    <?php echo $__env->make('notify::messages', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#userregform"><b>Add User</b></a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#listdata"><b>View Users</b></a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="userregform" class="tab-pane fade active show">
                              <!-- form start -->
                              <form id="userregform" class="form-horizontal" action="<?php echo e(URL::to('/user_registration_post')); ?>" method="post" autocomplete="off" enctype="multipart/form-data">
                                  <?php echo e(csrf_field()); ?>

                                  <div class="card-body">
                                      <div class="col-12">
                                          <div class="form-group row">
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Organisation</label>
                                                  <select name="organisation_id" id="organisation_id" class="form-control" required onchange="load_department(this.value)">
                                                      <option value="">Select Organisation</option>
                                                      <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $organisation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                          <option value="<?php echo e($organisation->id); ?>"><?php echo e($organisation->organisation_name); ?></option>
                                                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                  </select>
                                              </div>
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Department</label>
                                                  <select name="department_id" id="department_id" class="form-control" required onchange="load_section(this.value)">
                                                      <option value="">Select Department</option>
                                                  </select>
                                              </div>
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Section</label>
                                                  <select name="section_id" id="section_id" class="form-control" required>
                                                      <option value="">Select Section</option>
                                                  </select>
                                              </div>
                                          </div>
                                          <div class="form-group row">
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Name</label>
                                                  <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
                                              </div>
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Email ID</label>
                                                  <div class="input-group">
                                                      <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                                      <input type="text" class="form-control" id="email" name="email" placeholder="Enter Email" required>
                                                  </div>
                                              </div>
                                              <div class="col-4">
                                                  <label for="exampleroles">Roles</label>
                                                  <select class="form-control" name="roles[]" id="roles" multiple="multiple" data-placeholder="Select Roles">
                                                      <?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rolesobj): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <option value="<?php echo e($rolesobj->id); ?>"><?php echo e($rolesobj->name); ?></option>
                                                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                  </select>
                                              </div>
                                          </div>
                                          <div class="form-group row">
                                              <div class="col-4">
                                                  <label for="exampleInputPassword1">Password</label>
                                                  <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                                              </div>
                                              <div class="col-4">
                                                  <label for="exampleInputPassword1">Confirm Password</label>
                                                  <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Password" required>
                                              </div>
                                          </div>
                                          <div class="form-group row">
                                              <div class="col-4">
                                                  <label for="exampleInputEmail1">Photo</label><br>
                                                  <input type="file" name="photo" id="photo" onchange="check_extension_photo(this);PreviewImage();" required>
                                              </div>
                                              <div class="col-4">
                                                  <!-- uploaded photo showing  -->
                                                  <img id="uploadPreview" style="width: 100px; height: 100px;" />                        
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <!-- /.card-body -->

                                  <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                  </div>
                              </form>
                            </div>
                            <div id="listdata" class="tab-pane fade"  style="padding: 10px;">
                                <table class="table table-hover table-bordered table-striped datatable" id="user_details" width="100%">
                                    <thead>
                                        <tr>
                                          <th>Slno</th>
                                          <th>Organisation</th>
                                          <th>Department</th>
                                          <th>Section</th>
                                          <th>Name</th>
                                          <th>Email</th>
                                          <th>Roles</th>
                                          <th>Status</th>
                                          <th>Actions</th>
                                        </tr>
                                    </thead>                           
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function load_department(organisation_id)
        {
            $.ajax({
               type:'GET',
               url: "<?php echo url('get_department/"+organisation_id+"'); ?>",
               success:function(data)
               {
                  $('#department_id').empty();
                  $('#department_id').append("<option value=''>Select Department</option>");
                  $.each(data, function(key, element) {
                      $('#department_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        function load_section(department_id)
        {
            $.ajax({
               type:'GET',
               url: "<?php echo url('get_section/"+department_id+"'); ?>",
               success:function(data)
               {
                  $('#section_id').empty();
                  $('#section_id').append("<option value=''>Select Section</option>");
                  $.each(data, function(key, element) {
                      $('#section_id').append("<option value='" + key +"'>" + element + "</option>");
                  }); 
               }
            });
        }
        $(document).ready(function() {
            $("#roles").select2({
                columns: 1,
                placeholder : "Select Roles",
                allowClear: true,
                search: true,
                selectAll: true
            });
        });
        $(document).ready(function () 
        {
            $('#user_details').DataTable({
                "buttons" : ['excelHtml5', 'excel', 'pdf', 'print', 'reset', 'reload'],
                "processing": true,
                "serverSide": true,
                "ajax":{

                         "url": "<?php echo e(url('get_user_details')); ?>",
                         "dataType": "json",
                         "type": "POST",
                         "data":{ _token: "<?php echo e(csrf_token()); ?>"}
                       },
                "columns": [
                    { "data": "DT_RowIndex" },
                    { "data": "organisation_name" },
                    { "data": "department_name" },
                    { "data": "section_name" },
                    { "data": "name" },
                    { "data": "email" },
                    { "data": "roles" },
                    { "data": "status" },
                    { "data": "action" }
                ], 
                "order": [[1, 'asc']]
            });      
        });

        
        function confirmDeleteUser(user_id) 
        {
            var x = confirm("Are you sure you want to delete?");
            if (x)
            {
                var csrf = "<?php echo e(csrf_token()); ?>";
                $.ajax({
                    type: "POST",
                    url: "<?php echo e(url('delete_user')); ?>",
                    dataType : 'json',
                    data: {_token: csrf, user_id: user_id},
                    success: function( msg ) {
                      if(msg)
                        alert("User has been deleted");
                      //else
                        //alert("Active Users are assigned to Roles.");
                      location.reload();
                    }
                });  
            }
            else
            {
              return false;
            }
        }

        //////check the extension of photo upload////////////////////////
        function check_extension_photo(field)
        {
          var file= field.value;
          var reg = /(.*?)\.(jpeg|jpg|png|JPEG|JPG|PNG)$/;
          if(!file.match(reg))
          {
              alert("Invalid File format. Please upload jpeg/jpg/png format.");
              field.value="";
              field.focus();
              return false;
          }
        }
        //to show the uploaded photo immediately after uploading before insertion
        function PreviewImage()
        {
          var oFReader = new FileReader();
          oFReader.readAsDataURL(document.getElementById("photo").files[0]);
          oFReader.onload = function (oFREvent) {
              document.getElementById("uploadPreview").src = oFREvent.target.result;
          };
        }
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('adminlte::page', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/kmportal/resources/views/User/user_registration.blade.php ENDPATH**/ ?>