<?php include 'controller/pageCode.php' ?>
<!DOCTYPE html>
<html lang="en">
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="utf-8">
    <title>Profile</title>
    <?php include 'inc/meta_inc.php'; ?>
    <!-- base css -->
    <?php include 'inc/styles_inc.php'; ?>
    <link rel="stylesheet" media="screen, print" href="assets/css/markdown.css">
    <link rel="stylesheet" media="screen, print" href="assets/css/datagrid/datatables/datatables.bundle.css">
    <style>
        .container {
            position: relative;
            width: 50%;
            max-width: 300px;
        }
        .image {
            display: block;
        }

        .overlay {
            position: absolute; 
            bottom: 0; 
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.5); /* Black see-through */
            color: #f1f1f1; 
            width: 80%;
            height:20px;
            transition: .5s ease;
            opacity:0.6;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
            color: white;
            font-size: 8px;
            padding: 5px;
            text-align: center;
        }

        #picture_holder{
            cursor:pointer;
        }

        .container:hover .overlay {
            opacity: 1;
        }
    </style>
</head>
    <body class="mod-bg-1 ">
        <!-- DOC: script to save and load page settings -->
        <?php include 'inc/theme_script_inc.php'; ?>
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper" id="app">
            <div class="page-inner">
                <!-- BEGIN Left Aside -->
        <?php include 'inc/aside_inc.php'; ?>
<!-- END Left Aside -->
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Header -->
        <?php include 'inc/header_inc.php'; ?>
<!-- END Page Header -->
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content">
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                        </ol>
                        <div class="row">
                            <div class="col-md-6">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Add Role Permission <span class="fw-300"><i></i></span>
                                        </h2>
                                        <div class="panel-toolbar"></div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                <div class="card mb-g rounded-top">
                                    <div class="row no-gutters row-grid">
                                        <div class="col-12">
                                            <div class="p-4">
                                                <div class="form-group">
                                                    <label for="role">Select Role</label>
                                                    <select class="select2 form-control" multiple name="role[]" id="role">
                                                    <?php if($roles):?>
                                                        <?php foreach($roles as $key):?>
                                                            <option value="<?php echo $key['role_id'] ?>"><?php echo $key['role_name'] ?></option>
                                                        <?php endforeach ?>
                                                    <?php endif ?>
                                                    </select>
                                                </div>
                                                <div class="form-group permission-group d-none">
                                                    <label for="system_permission">Select System permission</label>
                                                    <select class="select2 form-control" multiple name="permission[]" id="system_permission">
                                                    <option value="All">All</option>
                                                    <?php if($system_permissions):?>
                                                        <?php foreach($system_permissions as $key):?>
                                                            <option value="<?php echo $key['system_permission_id'] ?>"><?php echo $key['display_name'] ?></option>
                                                        <?php endforeach ?>
                                                    <?php endif ?>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="p-3 text-center buttons-group d-none">
                                            <button class="btn btn-xs btn-danger" id="clear_permission"><i class="fal fa-times"> Clear permission </i></button>  
                                            <button class="btn btn-xs btn-info" data-toggle="modal" id="set_permission"><i class="fal fa-cogs"></i> Set Permission</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                            <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Role Permissions <span class="fw-300"><i></i></span>
                                        </h2>
                                        <div class="panel-toolbar"></div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                <div class="card mb-g rounded-top">
                                    <div class="row no-gutters row-grid">
                                        <div class="p-4">
                                            <table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100"></table>
                                            
                                        </div>
                                    </div>
                                </div>
                                        </div>
                                    </div>
                                </div>
                            
                            </div>
                        </div>
                    </main>
                    <!-- END Page Content -->
                    <!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<!-- BEGIN Page Footer -->
<?php include 'inc/footer_inc.php' ?>
<!-- END Page Footer -->
<!-- BEGIN Shortcuts -->
<!-- modal shortcut -->
<?php //include 'inc/header_menu.php'; ?>
 <!-- END Shortcuts -->
                </div>
            </div>
        </div>
        <!-- END Page Wrapper -->
        <!-- BEGIN Quick Menu -->
<!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
<nav class="shortcut-menu d-none d-sm-block">
    <input type="checkbox" class="menu-open" name="menu-open" id="menu_open" />
    <label for="menu_open" class="menu-open-button ">
        <span class="app-shortcut-icon d-block"></span>
    </label>
    <a href="#" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Scroll Top">
        <i class="fal fa-arrow-up"></i>
    </a>
    <a href="login/logout.php" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Logout">
        <i class="fal fa-sign-out"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen">
        <i class="fal fa-expand"></i>
    </a>
    <a href="#" class="menu-item btn" data-action="app-print" data-toggle="tooltip" data-placement="left" title="Print page">
        <i class="fal fa-print"></i>
    </a>
</nav>
<!-- END Quick Menu -->
<!-- BEGIN Page Settings -->
 <!-- END Page Settings -->
 <?php $employee_id = $_SESSION['employee_id'] ?>
<?php include 'inc/script_inc.php' ?>
        <script src="assets/js/datagrid/datatables/datatables.bundle.js"></script>
        <script>
            $(document).ready(function()
            {
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": 300,
                    "hideDuration": 5000,
                    "timeOut": 5000,
                    "extendedTimeOut": 1000,
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                let btn_template = `
                                    <div class="process">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        <span class="sr-only"> ...</span>
                                    </div> `;
                $('#role').on('change',function(){
                    let role = $('#role').val();
                    role_ids = role;
                    
                    if(role_ids && role_ids.length>0){
                        console.log(role_ids.length)
                        $('.permission-group').removeClass('d-none');
                    }else{
                        $('.permission-group').addClass('d-none');
                        toastr.warning('Please Select a Role to Proceed!', 'Admin');
                        toastr.clear()
                    }
                });
                
                $('#system_permission').on('change',function(){
                    let system_permission = $('#system_permission').val();
                    permission_ids = system_permission;
                    if(permission_ids && permission_ids.length>0){
                        $('.buttons-group').removeClass('d-none');
                    }else{
                        $('.buttons-group').addClass('d-none');
                        toastr.warning('Please Select a Permission to Proceed!', 'Admin');
                        toastr.clear()
                    }
                });

                $('#set_permission').click(function(){
                    var role = $('#role').val();
                    var system_permission = $('#system_permission').val();
                    var serverData = {
                        system_permission:system_permission,
                        role:role,
                        add_role_permission:''
                    }

                    $.post('controller/rolePermissionCode.php',serverData,function(serverResponse){
                        console.log(serverResponse)
                    if(serverResponse){
                        let response = JSON.parse(serverResponse);
                        if(response.data=="success"){
                            $('#dt-basic-example').DataTable().ajax.reload();
                            $('#set_permission').text('Set Permission');
                            toastr.success('Permission Set Successfully.', 'Admin');
                            toastr.clear()
                        }else if(response.data=="fail"){
                            $('#set_permission').html('Set Permission');
                            toastr.warning('Request Failed!', 'Admin');
                            toastr.clear()
                        }else{
                            $('#set_permission').html('Set Permission');
                            toastr.error('Internal Error!', 'Admin');
                            toastr.clear()
                        }
                    }
                    });
                });

                $('#clear_permission').click(function(){
                    var role = $('#role').val();
                    var system_permission = $('#system_permission').val();
                    var serverData = {
                        system_permission:system_permission,
                        role:role,
                        remove_role_permission:''
                    }

                    $.post('controller/rolePermissionCode.php',serverData,function(serverResponse){
                        console.log(serverResponse)
                    if(serverResponse){
                        let response = JSON.parse(serverResponse);
                        if(response.data=="success"){
                            $('#dt-basic-example').DataTable().ajax.reload();
                            $('#set_permission').text('Clear Permission');
                            toastr.success('Permission Cleared Successfully.', 'Admin');
                            toastr.clear()
                        }else if(response.data=="fail"){
                            $('#set_permission').html('Clear Permission');
                            toastr.warning('Action Failed!', 'Admin');
                            toastr.clear()
                        }else{
                            $('#set_permission').html('Clear Permission');
                            toastr.error('Internal Error!', 'Admin');
                            toastr.clear()
                        }
                    }
                    });
                });

                
                
                // Event Lot
                var events = $("#app-eventlog");

                // Column Definitions
                var columnSet = [
                {
                    title: "RowId",
                    id: "role_permission_id",
                    data: "role_permission_id",
                    placeholderMsg: "Server Generated ID",
                    "visible": false,
                    "searchable": false,
                    type: "readonly"
                },
                {
                    title: "Role",
                    id: "role_name",
                    data: "role_name",
                    type: "readonly"
                },
                {
                    title: "Permission",
                    id: "display_name",
                    data: "display_name",
                    required: true, 
                    type: "readonly"
                }
                
            ]
                /* start data table */
                var myTable = $('#dt-basic-example').dataTable(
                {
                    /* check datatable buttons page for more info on how this DOM structure works */
                    dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    ajax: "controller/rolePermissionCode.php?all_role_permissions",
                    columns: columnSet,
                    /* selecting multiple rows will not work */
                    select: 'single',
                    order:[[1,'asc']],
                    /* altEditor at work */
                    altEditor: true,
                    responsive: true,
                    buttons: [
                    {
                        text: '<i class="fal fa-sync mr-1"></i> Refresh',
                        name: 'refresh',
                        className: 'btn-xs btn-primary btn-sm'
                    }],
                    columnDefs: [
                        {
                            targets: 1,
                            render: function(data, type, full, meta)
                            {
                                if(data=="Root"){
                                    data = `<span class="badge badge-danger">${data}</span>`;
                                }else if(data=="Admin"){
                                    data = `<span class="badge badge-warning">${data}</span>`;
                                }else if(data=="Director"){
                                    data = `<span class="badge badge-success">${data}</span>`;
                                }
                                else if(data=="Manager"){
                                    data = `<span class="badge badge-info">${data}</span>`;
                                }
                                else if(data=="Secretary"){
                                    data = `<span class="badge badge-primary">${data}</span>`;
                                }else if(data=="Marketer"){
                                    data = `<span class="badge badge-light">${data}</span>`;
                                }else{
                                    data = `<span class="badge badge-dark">${data}</span>`;
                                }
                                return data;
                            },
                            
                        },
                    ],

                    /* default callback for insertion: mock webservice, always success */
                    onAddRow: function(dt, rowdata, success, error)
                    {
                        let process = `Please Wait
                            <div class="spinner-grow spinner-grow-sm text-light">
                            <span class="sr-only"> ...</span>
                        </div>
                        `;
                        $('#addRowBtn').html(process);
                        rowdata['add_role_permission'] = '';
                        //success(rowdata);
                        $.post('controller/rolePermissionCode.php',rowdata,function(serverResponse){
                            console.log(serverResponse)
                            if(serverResponse){
                                let response = JSON.parse(serverResponse);
                                if(response.data=="success"){
                                    $('#addRowBtn').html("Add");
                                    $('#dt-basic-example').DataTable().ajax.reload();
                                    $('.modal').modal('hide');
                                    Swal.fire(
                                    {
                                        type: "success",
                                        title: "Group Created",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else if(response.data=="fail"){
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Action Failed",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else{
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Internal Error!",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }
                            }
                        });
                        // demo only below:
                        events.prepend('<p class="text-success fw-500">' + JSON.stringify(rowdata, null, 4) + '</p>');
                    },
                    onEditRow: function(dt, rowdata, success, error)
                    {
                        
                        success(rowdata);
                        rowdata['delete_role_permission'] = '';
                        //success(rowdata);
                        $.post('controller/rolePermissionCode.php',rowdata,function(serverResponse){
                            console.log(serverResponse)
                            if(serverResponse){
                                let response = JSON.parse(serverResponse);
                                if(response.data=="success"){
                                    Swal.fire(
                                    {
                                        type: "success",
                                        title: "Group Updated",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else if(response.data=="fail"){
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Action Failed",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else{
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Internal Error!",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }
                            }
                        });
                        // demo only below:
                        events.prepend('<p class="text-info fw-500">' + JSON.stringify(rowdata, null, 4) + '</p>');
                    },
                    onDeleteRow: function(dt, rowdata, success, error)
                    {
                        
                        success(rowdata);
                        rowdata['remove_system_group'] = '';
                        //success(rowdata);
                        $.post('controller/groupCode.php',rowdata,function(serverResponse){
                            console.log(serverResponse)
                            if(serverResponse){
                                let response = JSON.parse(serverResponse);
                                if(response.data=="success"){
                                    Swal.fire(
                                    {
                                        type: "success",
                                        title: "Group Removed",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else if(response.data=="fail"){
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Action Failed",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }else{
                                    Swal.fire(
                                    {
                                        type: "error",
                                        title: "Internal Error!",
                                        showConfirmButton: false,
                                        timer: 2500
                                    });
                                }
                            }
                        });

                        // demo only below:
                        events.prepend('<p class="text-danger fw-500">' + JSON.stringify(rowdata, null, 4) + '</p>');
                    },
                });


                $('.select2').select2();

                $(".select2-placeholder-multiple").select2(
                {
                    placeholder: "Select State"
                });
                $(".js-hide-search").select2(
                {
                    minimumResultsForSearch: 1 / 0
                });
                $(".js-max-length").select2(
                {
                    maximumSelectionLength: 2,
                    placeholder: "Select maximum 2 items"
                });
                $(".select2-placeholder").select2(
                {
                    placeholder: "Select a state",
                    allowClear: true
                });

                $(".js-select2-icons").select2(
                {
                    minimumResultsForSearch: 1 / 0,
                    templateResult: icon,
                    templateSelection: icon,
                    escapeMarkup: function(elm)
                    {
                        return elm
                    }
                });

                function icon(elm)
                {
                    elm.element;
                    return elm.id ? "<i class='" + $(elm.element).data("icon") + " mr-2'></i>" + elm.text : elm.text
                }

            });
            
        </script>
            <!-- Modal center Small -->
            
    </body>

</html>
