@extends('layouts.plusadmin')
@section('content')

<style>
.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}

        .custom {
            font-size: 12px;
            font-family: Century Gothic;
        }
        .bottomcustom, .topcustom {
            font-size: 12px;
            font-family: Century Gothic;
        }

        .table-responsive {
          overflow-x: inherit;
        }   
        
        th, td { white-space: nowrap; }
        div.dataTables_wrapper {
            margin: 0 auto;
        }
     
        div.container {
            width: 80%;
        }  


/* MODAL DIALOG */
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 600px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 4px;
    background: #fff;
    /*
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    */
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}


</style>

<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">List of Permissions</h3>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">User Management</a></li>
          <li class="breadcrumb-item active" aria-current="page"> List of Permissions </li>
        </ol>
      </nav>
    </div>

    <!-- MODAL ################################################################################-->
<!--<a href="#openModal">Open Modal</a>-->

                    <div id="openModal" class="modalDialog">
                        <div>   <!--<a href="#close" title="Close" class="close">X</a>-->

                              <h4 class="card-title">Edit Permission</h4>  
                              <div class="card">
                                <div class="card-body">
                                  


                                    <div class="form-group">
                                      <input id="editid" name="editid" class="form-control" type="hidden" readonly>  
                                      <label for="exampleInputUsername1">Permission</label>
                                      <input type="text" class="form-control" id="eelement" name="eelement"  placeholder="Permission Name" style="height:30px" required>
                                    </div>
                                    <div class="form-group">
                                      <label for="exampleInputUsername1">Category</label>
                                      <select class="form-control form-control-sm select2" id="ecategory" name = "ecategory" style="width: 100%; display: inline-block; height:30px">
                                        <option value = "">Select Category</option>
                                        @foreach($permissioncats as $cats2)
                                            <option value = "{{ $cats2->catid}}">{{ $cats2->category}}</option>
                                        @endforeach    
                                      </select>                                      
                                    </div>
                                    <div class="row"> 
                                        <a href="#close" title="Close" ><button type = "button" class="btn-sm btn-success" onclick="UpdateData();" style="font-size: 12px;"><i class="fa fa-paper-plane"></i> Update Permission</button></a>
                                        &nbsp;
                                        <a href="#close" title="Close" ><button type = "button" class="btn-sm btn-info"  style="font-size: 12px;"><i class="fa fa-arrow-circle-left"></i> Cancel</button></a>
                                    </div>
                                </div>

                              </div>  
                        </div>
                    </div>


                
    <!-- END MODAL ################################################################################-->


    <div class="row">
      <div class="col-lg-3 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Add New Permission</h4>
              <p class="card-description">Complete the Details below</p>

                <div class="form-group">
                  <label for="exampleInputUsername1">Permission</label>
                  <input type="text" class="form-control" id="element" name="element" placeholder="Permission" style="height:30px" />
                </div>
                <div class="form-group">
                  <label for="exampleInputUsername1">Category</label>
                  <select class="form-control form-control-sm select2" id="category" name = "category" style="width: 100%; display: inline-block; height:30px">
                    <option value = "">Select Category</option>
                    @foreach($permissioncats as $cats)
                        <option value = "{{ $cats->catid}}">{{ $cats->category}}</option>
                    @endforeach    
                  </select>
                </div>
                <div class="row"> 
                    <button type = "button" class="btn-sm btn-success btn-block" onclick="addPermission();" style="font-size: 12px;"><i class="fa fa-paper-plane"></i> Save Permission</button>
                </div>
            </div>

          </div> 
      
      </div>  
      <div class="col-lg-9 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">

             <div class="row">
                     
                  <div class="px-1">
                      <fieldset class="form-group position-relative">
                           <input type="text" class="form-control form-control-sm" placeholder="Group Permission" id= "spermission" name="spermission" style="height:30px;">
                      </fieldset>
                  </div>                          
                  <div class="px-1">
                      <fieldset class="form-group position-relative">
                          <select class="form-control form-control-sm select2" id="scategory" name = "scategory" style="width: 100%; display: inline-block; height:30px;">
                            <option value = "">Select Category</option>
                            @foreach($permissioncats as $cats2)
                                <option value = "{{ $cats2->catid}}">{{ $cats2->category}}</option>
                            @endforeach    
                          </select>
                      </fieldset>
                  </div>                    

                  <div class="px-1" >

                      <fieldset class="form-group position-relative">

                          <button type = "button" class="btn-xs btn-primary" name ="filter" id = "filter" style="font-size: 12px;"><i class="icofont icofont-job-search"></i> Search</button>
                          <button type = "button" class="btn-xs btn-warning" name ="reset" id = "reset" style="font-size: 12px;"><i class="icofont icofont-ui-rotation"></i> Show All</button>
                      </fieldset>
                  </div>  
          
              </div>

          </div>           
          <div class="card-body">

            <div class="table-responsive">
                <table  id="employee-grid" class="display compact custom" cellspacing="0" cellspacing="0" style="width:100%">
                    <thead>
                    <tr>
                        <th>Action</th>
                        <th>Group Permission</th>
                        <th>Category</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>   
            </div>
          </div>
        </div>
      </div>

    </div>







  </div>
  <!-- content-wrapper ends -->
  <!-- partial:../../partials/_footer.html -->
  <footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
      <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © St Joseph Drug 2021</span>
      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a href="https://www.stjosephdrug.com/" target="_blank">Digital Signage</a> ver. JS 1.0</span>
    </div>
  </footer>
  <!-- partial -->
</div>

<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 

<script src="{{ asset('plusadmin/vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ asset('plusadmin/vendors/jquery-bar-rating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.fillbetween.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.stack.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('plusadmin/js/off-canvas.js') }}"></script>
<script src="{{ asset('plusadmin/js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('plusadmin/js/misc.js') }}"></script>
<script src="{{ asset('plusadmin/js/settings.js') }}"></script>
<script src="{{ asset('plusadmin/js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('plusadmin/js/dashboard.js') }}"></script>

<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.rowReorder.min.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.responsive.min.css') }}"> 


<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.rowReorder.min.js') }}"></script> 
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.responsive.min.js') }}"></script> 

  

<script>
$(document).ready(function(){
refreshpermissions();

});
</script>

<script>
function refreshpermissions() {

    fill_datatable();
    function fill_datatable(spermission = '', scategory='')
    {
        var dataTable = $('#employee-grid').DataTable({
            //scrollY:        "300px",
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true,
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
            columnDefs: [
                  { targets: [0], className: "text-center" },
            ],
            fixedColumns: true,

            processing: true,
            serverSide: true,
        dom: 'Blfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },            
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            
            'colvis'
        ], 
            "lengthMenu": [[10, 20, 30, 40, 50, 100, -1], [10, 20, 30, 40, 50, 100, "All"]],
            "pageLength": 10,                  

            ajax:{
                url: "{{ route('admin.elements.index') }}",

                data:{
                    spermission:spermission,
                    scategory:scategory
                }
            },
            columns: [
                {data: 'action', name: 'action', orderable: false, searchable: false},

                {
                    data:'element',
                    name:'element'
                },
                {
                    data:'category',
                    name:'category'
                }
                


        ]



        });


    }
    $('#filter').click(function(){
        var spermission = $('#spermission').val();
        var scategory = $('#scategory').val();
        

        if(spermission != '' || scategory != '')
        {
            $('#employee-grid').DataTable().destroy();
            fill_datatable(spermission, scategory);
        }
        else
        {
            $('#employee-grid').DataTable().destroy();
            fill_datatable();
        }
    });

    $('#reset').click(function(){
        $('#spermission').val('');
        $('#scategory').val('');
        $('#employee-grid').DataTable().destroy();
        fill_datatable();
    });

} 

</script>

<script>    

function addPermission() {

    
    if($('#element').val() == ""){//check leave type
        alert('Please Enter Group Permission to Continue!');
    } else if($('#category').val() == ""){
        alert('Please Select Category to Continue!');        
    }else{
                    var ok = confirm("Are you sure you want to Add Group Permission?");
                    if(ok){
                        $.ajax({
                            url: "{{ route('admin.elements.store') }}",
                            dataType:'JSON',
                            data: {
                                _token:"{{csrf_token()}}",
                                element: $('#element').val(),
                                category: $('#category').val()
                            },
                            type: "POST",

                            success: function(data){
                            
                            data = $.trim(data);

                                
                            document.getElementById('element').value = "";
                            document.getElementById('category').value = "";
                            $('#employee-grid').DataTable().destroy();
                            refreshpermissions();
                                if(data === "SUCCESS"){
                                    alert("Form has been submitted!");
                                    location.reload(true);
                                    //window.location.reload();
                                } //else{alert(data);}
                            }
                        });
                    }

                //} else{alert(data);}


    }



}
</script>


<script>
    function EditData(element) {  
     //$('#myModalmap').on('shown.bs.modal', (function() {
        
        var id = element.getAttribute('id');
        
        //Refresh Total
        $.ajax({
          url: "{{ route('getElements') }}",
          data: { 
            _token:"{{csrf_token()}}",
            id:id
          },
          type: "POST",
          success: function(data){
            data = $.trim(data);
            var array = data.split('|');
            document.getElementById('editid').value=array[0];
            document.getElementById('eelement').value=array[1];
            document.getElementById('ecategory').value=array[2];
          }
        });

    }
</script>    

<script>    

function UpdateData() 
{
    var id = document.getElementById('editid').value;

    if($('#eelement').val() == "" ){//check leave type
        alert('Please Enter Group Permission to Continue!');
    }else if($('#ecategory').val() == ""){
        alert('Please Select Category to Continue!');            
    }else{
        var ok = confirm("Are you sure you want to Edit Group Permission?");
        if(ok){
            $.ajax({
                url: "{{ route('updateElements') }}",
                dataType:'JSON',
                data: {
                    _token:"{{csrf_token()}}",
                    id: $('#editid').val(),
                    element: $('#eelement').val(),
                    catid: $('#ecategory').val()
                },
                type: 'POST',
                //type: "POST",
                success: function(data){
                    
                    data = $.trim(data);
                    $('#employee-grid').DataTable().destroy();
                    refreshpermissions();

                    if(data === "SUCCESS"){
                        alert("Form has been submitted!");
                        location.reload(true);
                        //window.location.reload();
                    } //else{alert(data);}
                }
            });
        }




    }



}
</script>

<script>
function DeleteData(element) {

    var id = element.getAttribute('id');

    var ok = confirm("Are you sure you want to Delete Selected Permission?");
    if(ok){
      $.ajax({
        url: "{{ route('admin.elements.destroy', " + id + ") }}",
        data: {
          _token:"{{csrf_token()}}",
          id: id
        },
        type: "DELETE",
        
        success: function(data){
          data = $.trim(data);
          $('#employee-grid').DataTable().destroy();
           refreshpermissions(); 

        }
      });
    }

}
//});


</script>


@endsection