        <div class="container-fluid" style="padding-bottom: 2rem;">
            <div class="card bg-light-transparent">  
                <div class="card-header bg-white">
                    <div class="float-left">
                        <h4>IT System Support Request Form</h4>

                            <a href="<?php echo base_url('hr/serviceform/it_system_form'); ?>" class="btn btn-outline-dark btn-sm" title="Add New Support Request"><i class="fa fa-plus"></i> Add New Support Request</a>

                            <a href="<?php echo base_url('hr/Serviceform_report/it_system_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>

                            <a id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false">
                                <i class="fas fa-filter"></i>Show Filters</a> 
                    </div>
                </div>
                <div class="collapse" id="collapseFilter">
                    <div class="card-header">
                        <div class="row">
                            <div class="col">
                                <div class="card no-shadow">
                                    <div class="card-body">
                                        <input type="hidden" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">
                                        <?php if($_SESSION['module_data']['role']=='admin'){ ?>
                                            <div class="form-group row">
                                                <label for="sv_system_filter_dept" class="col-lg-3">
                                                  Department
                                                </label>                           
                                                <div class="col-lg-4" >
                                                    <select class="custom-select" name="sv_system_filter_dept" id="sv_system_filter_dept">
                                                        <option value="-1">[All]</option>
                                                           <?php if($department) foreach($department as $row){ ?>
                                                        <option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
                                                            <?php } ?>
                                                    </select>
                                                </div>
                                            </div>
                                            <?php } ?>
                                            <div class="form-group row">
                                                <label for="sv_system_filter_status" class="col-lg-3">
                                                    Status
                                                </label>                           
                                                <div class="col-lg-4" >
                                                    <select class="custom-select" id="sv_system_filter_status" name="sv_system_filter_status">
                                                        <option value="-1">[All]</option>
                                                        <option value="Pending">Pending</option>
                                                        <option value="Verified">Verified</option>
                                                        <option value="Approved">Approved</option>
                                                        <option value="Rejected">Rejected</option>
                                                        <option value="Cancel">Cancel</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="sv_system_filter_inexternal" class="col-lg-3">
                                                  Internal / External
                                                </label>                           
                                                <div class="col-lg-4" >
                                                    <select class="custom-select" name="sv_system_filter_inexternal" id="sv_system_filter_inexternal">
                                                        <option value="-1">[All]</option>
                                                        <option value="1">Internal</option>
                                                        <option value="2">External</option>   
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="sv_system_filter_year" class="col-lg-3">
                                                  Year
                                                </label>                           
                                                <div class="col-lg-4" >
                                                    <input type="text" name="sv_system_filter_year" id="sv_system_filter_year" class="form-control datepicker-yyyy">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="sv_system_filter_month" class="col-lg-3">
                                                  Requested Month
                                                </label>                           
                                                <div class="col-lg-4" >
                                                    <input type="text" name="sv_system_filter_month" id="sv_system_filter_month" class="form-control datepicker-mm">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col d-print-none">
                                                    <button class="btn btn-info" id="searchBtn">Search</button>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                        <div class="card-body">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="filter_table_system" class="table table-bordered p-0 m-0" width="100%">
                                            <thead>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
                                                    #
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    Department
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    System Name & Location
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    Internal / External
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    Problem
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    Complaint
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="" colspan="1" style="width: 0px;">
                                                    Status 
                                                </th> 
                                                <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" style="width: 0px;">
                                                    Action
                                                </th>          
                                            </thead>

                                            <tbody>
                                                <?php if(!empty($rsSystem)) { ?> 
                                                    <?php foreach($rsSystem as $key => $row) { ?>
                                                        <tr>
                                                            <td class="text-center"><?php echo $key+1; ?></td>
                                                            <td><?php echo $row['dept_name'].' ['.$row['branchName'].']'; ?></td>
                                                            <td class="text-center"><?php echo $row['systemname']; ?> /
                                                                <?php echo $row['location']; ?>
                                                            </td>
                                                          <!--   <td><?php //echo $row['name']; ?></td> -->
                                                            <td class="text-center"><?php if ($row['cust_id'] == 0) { ?>
                                                                <?php echo 'Internal';?>
                                                            <?php } else {?>
                                                                <?php echo $row['name'];?>
                                                            <?php }?>
                                                            </td>

                                                            <td><?php echo $row['problem']; ?></td>
                                                            <td><?php echo $row['complaint']; ?></td>
                                                            <td class="text-center">
                                                                <!-- <?php //echo ($row['status_app']==null || $row['status_app']=='Pending' )?'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>':$row['status_app']; ?> -->
                                                                <?php 
                                                                    if(($row['status_app']==null || $row['status_app']=='Pending'))
                                                                    {
                                                                        $status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                                                                        $disabled = '';
                                                                    }
                                                                    if($row['status_app'] == 'In_progress')
                                                                    {
                                                                        $status = str_replace('_', ' ', $row['status_app']).' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                                                                        $disabled = 'disabled';
                                                                    }
                                                                    if($row['status_app'] == 'Verified')
                                                                    {
                                                                        $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'.$row['status_reason'].'</p>';
                                                                        $disabled = '';
                                                                    }
                                                                    if($row['status_app'] == 'Approved')
                                                                    {
                                                                        $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i>';
                                                                        $disabled = 'disabled';
                                                                    }
                                                                    if($row['status_app'] == 'Rejected')
                                                                    {
                                                                        $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                                        $disabled = 'disabled';
                                                                    }
                                                                    if($row['status_app'] == 'Cancel')
                                                                    {
                                                                        $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                                        $disabled = 'disabled';
                                                                    }

                                                                    echo $status;
                                                                ?>
                                                            </td>
                                                            <td class="text-center"> 
                                                                <div class="btn-group btn-group-sm" role="group">
                                                                    <button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
                                                                    title="View Detail" 
                                                                    data-name="<?php echo $row['requestor']; ?>" 
                                                                    data-dept="<?php echo $row['dept_name'].'/'.$row['branchName']; ?>" 
                                                                    data-datereq="<?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>" 
                                                                    data-systemname="<?php echo $row['systemname']; ?>"
                                                                    data-location="<?php echo $row['location']; ?>" 
                                                                    data-inexternal="<?php echo $row['name']?>"
                                                                    data-customer="<?php echo($row['cust_id'])?>"
                                                                    data-prob="<?php echo $row['problem']; ?>" 
                                                                    data-complaint="<?php echo $row['complaint']; ?>"
                                                                    data-picture="<?php //echo $row['filename']; ?>" 
                                                                    onclick="open_view_modal(this)">
                                                                    <i class="far fa-eye"></i></button>

                                                                    <?php if($_SESSION['user']['department_id'] == 1){ ?>
                                                                        <button type="button" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Edit" data-row="<?php echo $row['ID']; ?>"><a href="<?php echo base_url('hr/serviceform/it_system/'.$row['ID']); ?>" class="btn-outline-dark"><i class="far fa-edit"></i></a></button>
                                                                    <?php }else{ ?>
                                                                        <?php if($disabled == ''){ ?>
                                                                            <button type="button" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Edit" data-row="<?php echo $row['ID']; ?>"><a href="<?php echo base_url('hr/serviceform/it_system/'.$row['ID']); ?>" class="btn-outline-dark"><i class="far fa-edit"></i></a></button>
                                                                        <?php }else{ ?>
                                                                            <button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" disabled style="cursor: not-allowed;"><i class="far fa-edit"></i></button>
                                                                        <?php } ?>
                                                                    <?php } ?>
                                                                        
                                                                    <a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform_report/it_system_print/').$row['ID']; ?>" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

                                                                    <button type="button" id="deleteButtonSystem" class="btn btn-outline-dark" onclick="deleteSystemList(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>

                                                                </div>
                                                            </td>
                                                        </tr>
                                                    <?php } ?>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>      
            </div>
        </div>

    <!-- modal view detail -->

        <div class="modal fade d-print-none" id="viewDetails" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">IT System Support Request Detail</h5>&emsp;
                        <!-- <a href="javascript:window.print()" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a> -->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-6">
                                <label>Name</label>
                                <input type="text" class="form-control" name="modal_view_name" id="modal_view_name" disabled>
                            </div>
                            <div class="col-6">
                                <label>Department</label>
                                <input type="text" class="form-control" name="modal_view_dept" id="modal_view_dept" disabled>
                            </div>
                            
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <label>Date Request</label>
                                <input type="text" class="form-control" name="modal_view_date_req" id="modal_view_date_req" disabled>
                            </div>
                            <div class="col-6">
                                <label>System Name</label>
                                <input type="text" class="form-control" name="modal_view_systemname" id="modal_view_systemname" disabled>
                            </div>
                             
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <label>System Location/Link</label>
                                <input type="text" class="form-control" name="modal_view_location" id="modal_view_location" disabled>
                            </div>
                           
                            <div class="col-6">
                                <label>Internal/External</label>
                                <input type="text" class="form-control" name="modal_view_inexternal" id="modal_view_inexternal" disabled>
                            </div>
                             <!-- <div class="col-6">
                                <label>Picture</label>
                                <input type="text" class="form-control" name="modal_view_picture" id="modal_view_picture" disabled>
                            </div> -->
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <label>Problem</label>
                                <textarea rows="4" cols="50" class="form-control" name="modal_view_problem" id="modal_view_problem" disabled></textarea>
                            </div>
                            <div class="col-6">
                                <label>Complaint</label>
                                <textarea rows="4" cols="50" class="form-control" name="modal_view_complaint" id="modal_view_complaint" disabled></textarea>                    
                            </div>
                        </div>
                        <br>
                        <div class="float-right"></div>
                    </div>
                </div>
            </div>
        </div>

    <!-- modal view detail -->

    <script>
        function deleteSystemList(ID) {
            validateForm("#deleteButtonSystem", "Delete this list?", function() {
                $.ajax({
                    url:'<?php echo base_url('hr/serviceform/deleteSystemList') ?>',
                    data: {
                        itSystemID : ID,
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if(data.status == "Success") {

                            localStorage.setItem("status", data.status);
                            localStorage.setItem("msg", data.msg);

                            location.reload();

                            redirect(base_url('hr/serviceform/it_system_list'));
                        }
                    }
                });
            });
        }

        function open_view_modal(elem) 
        {
            let name        = $(elem).data('name');
            let dept        = $(elem).data('dept');
            let datereq     = $(elem).data('datereq');
            // console.log(dept);
            let systemname  = $(elem).data('systemname');
            let location    = $(elem).data('location');
            let inexternal  = $(elem).data('inexternal');
            let prob        = $(elem).data('prob');
            let complaint   = $(elem).data('complaint');
            let picture     = $(elem).data('picture');
            let customer    = $(elem).data('customer');

            /* view modal */
            $('#modal_view_name').val(name);
            $('#modal_view_dept').val(dept);
            $('#modal_view_date_req').val(datereq);
            $('#modal_view_systemname').val(systemname);
            $('#modal_view_location').val(location);
            //$('#modal_view_inexternal').val(inexternal);
            $('#modal_view_problem').val(prob);
            $('#modal_view_complaint').val(complaint);
            $('#modal_view_picture').val(picture);

            if(customer == 0) {
                $('#modal_view_inexternal').val('Internal');
            } else {
                $('#modal_view_inexternal').val(inexternal);
            }
        }

        $(document).ready(function(){

            //getData();

            $('#searchBtn').click(function(){
                getData();
            });

        });

        function getData() {
            var table = $('#filter_table_system').DataTable();
            table.clear().draw();
            var frmData = new FormData();

            frmData.append('sv_system_filter_dept',$('#sv_system_filter_dept').val());
            frmData.append('sv_system_filter_status', $('#sv_system_filter_status').val());
            frmData.append('sv_system_filter_inexternal', $('#sv_system_filter_inexternal').val());
            frmData.append('sv_system_filter_year',$('#sv_system_filter_year').val());
            frmData.append('sv_system_filter_month',$('#sv_system_filter_month').val());
            frmData.append('user_id',$('#user_id').val());

            $.ajax({
                url:"<?php echo base_url('/hr/api/serviceform/get_it_system_filter'); ?>",
                type:'post',
                dataType:'json',
                data:frmData,
                processData: false,
                contentType: false,
                success:function(data){

                    iziToast.success({
                        position: 'bottomRight',
                        message: 'filtering data',
                    });

                    let system = data.table;

                    if(system != null){
                        var index = 1;
                        $.each(system,function(key,content)
                        {
                            var i = key + 1;
                            console.log(content); 

                            var btn_view = '<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Detail" data-name="'+content.requestor+'" data-dept="'+content.dept_name+'/'+content.branchName+'" data-datereq="'+moment(content.createdTS).format('DD-MM-YYYY')+'" data-location="'+content.location+'" data-systemname="'+content.systemname+'" data-inexternal="'+content.name+'" data-prob="'+content.problem+'" data-complaint="'+content.complaint+'" data-customer="'+content.cust_id+'" onclick="open_view_modal(this)"> <i class="far fa-eye"></i> </button>';

                            var btn_print = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform_report/it_system_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

                            var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/it_system/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';

                            var btn_delete = '<button type="button" class="btn btn-outline-dark" onclick="deleteButtonSystem('+content.ID+')" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>';

                        if(content.status_app == null || content.status_app == 'Pending')
                        {
                            var status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                        }else{
                            var status = content.status_app;
                        }

                        if (content.cust_id == 0) 
                        {
                            var cust = "Internal";
                        }else{
                            var cust = content.name;
                        }

                         table.row.add({
                            0   : i,
                            1   : content.dept_name+ ' [' +content.branchName+ ']',
                            2   : '<div class="text-center">'+content.systemname+' / ' +content.location,
                            3   : '<div class="text-center">'+cust,
                            4	: content.problem,
                            5	: content.complaint,
                            6   : '<div class="text-center">'+status,
                            7	: '<div class="btn-group btn-group-sm" role="group">'+btn_view+btn_edit+btn_print+btn_delete+'</div>',
                        }).draw();
                         console.log(data);
                     });                        
                    }
                },
                error:function(){
                    iziToast.warning({
                        position: 'bottomRight',
                        message: '500 Internal Server Error.'
                    });
                }
            });
        }
    </script>
