<style>
    .button-pill {
      background-color: #ddd;
      border: none;
      color: black;
      padding: 5px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 16px;
    }

    .button-pill:hover {
      background-color: #f1f1f1;
    }
</style>
<?php if($_SESSION['all_modules_access'][1]['access_lvl'] == 'admin'){ ?>
    <div class="container-fluid" >
        <div class="row">
            <div class="col-md-12">
                <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                    <div class="card-header bg-white">
                        <h5 class="card-title">Complaint Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <a class="btn btn-block btn-dark add-shadow" href="<?php echo base_url('hr/serviceform/complaint_form'); ?>" style="padding-top: 1rem; padding-bottom: 1rem;">New Complaint</a>
                            </div>
                        </div>
                        <br>
                        <div class="card bg-white no-shadow">
                            <div class="card-body">
                                <h6>Total Complaint (<?php echo date('Y') ?>)</h6>
                                <br>
                                <div class="row">
                                    <table id="table_complaint" class="table table-bordered table-striped table-hover mx-1">
                                        <thead>
                                            <th class="text-center">Department</th>
                                            <th class="text-center">Total Complaint</th>
                                        </thead>
                                        <tbody>
                                            <?php if(!empty($count_request)) foreach($count_request as $key => $count){ ?>
                                                <tr>
                                                    <td><?php echo $count['dept_name'].' | '.$count['branchName']; ?></td>
                                                    <td class="text-center"><?php echo $count['total_request']; ?></td>
                                                </tr>
                                            <?php } ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } ?>

<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>Complaint List</h4>

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

                <a href="<?php echo base_url('hr/Serviceform_report/complaint_print_all')?>" 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">
                                <div class="form-group row">
                                    <label for="sv_complaint_filter_dept" class="col-lg-3">
                                        Complaint to
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" name="sv_complaint_filter_dept" id="sv_complaint_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>
                                <div class="form-group row">
                                    <label for="sv_complaint_filter_type" class="col-lg-3">
                                        Client Type
                                    </label>                           
                                    <div class="col-lg-4" >
                                       <select class="custom-select" id="sv_complaint_filter_type" name="sv_complaint_filter_type" onchange="changeClientList(this)">
                                            <option value="-1">[All]</option>
                                            <option value="0">Internal Client</option>
                                            <option value="1">External Client</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_complaint_filter_client" class="col-lg-3">
                                        Client Name
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" id="sv_complaint_filter_client" name="sv_complaint_filter_client">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_complaint_filter_status" class="col-lg-3">
                                        Status
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" id="sv_complaint_filter_status" name="sv_complaint_filter_status">
                                            <option value="-1">[All]</option>
                                            <option value="0">New!</option>
                                            <option value="1">In Progress</option>
                                            <option value="2">Action Taken</option>
                                            <option value="3">Verified</option>
                                            <option value="4">Approved</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_complaint_filter_year" class="col-lg-3">
                                        Year
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_complaint_filter_year" id="sv_complaint_filter_year" class="form-control datepicker-yyyy">
                                    </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_complaint" class="table table-bordered p-0 m-0" width="100%">
                                    <thead> 
                                        <th class="text-center" width="5%">
                                            #
                                        </th>
                                        <th class="text-center" width="20%">
                                            Complaint Register
                                        </th>
                                        <th class="text-center" width="20%">
                                            Client Name
                                        </th>
                                        <th class="text-center" width="27%">
                                            Nature of Complaint 
                                        </th>
                                        <th class="text-center" width="8%">
                                            Status
                                        </th>
                                        <th class="text-center" width="5%">
                                            Action Taken Date
                                        </th>
                                        <th class="text-center" width="5%">
                                            Action
                                        </th>           
                                    </thead>
                                    <tbody>
                                        <?php if(!empty($complaint_list)) { //debug($complaint_list); ?> 
                                            <?php foreach($complaint_list as $key => $row) {
                                                ?>
                                                <tr>
                                                    <td class="text-center"><small><?php echo $key+1; ?></small></td>
                                                    <td>
                                                        <small>
                                                            Ref. No : <?php echo str_pad($row->ref_no, 4,'0', STR_PAD_LEFT); ?><br>
                                                            Date : <?php echo date('d-m-Y', strtotime($row->date)); ?><br>
                                                            Complaint to : <?php echo $row->department_name; ?> | <?php echo $row->branch_name ?><br>
                                                            Register by : <?php echo $row->reg_name; ?> 
                                                        </small>
                                                    </td>
                                                    <td><small><?php if($row->complaint_for == 1){echo "External Complaint";}else{echo "Internal Complaint";} ?> by <?php echo $row->client_name; ?></small></td>
                                                    <td>
                                                        <small>
                                                            Services : <?php echo $row->service; ?><br>
                                                            Type of Job : <?php echo $row->job; ?><br>
                                                            Person In Charge : <?php echo $row->pic_name; ?>
                                                        </small>
                                                    </td>
                                                    <td class="text-center">
                                                        <?php if($row->status == 0){ ?>
                                                            <span class="badge badge-pill badge-danger">New! <i class="far fa-tired"></i></span>
                                                        <?php }else if($row->status == 1){?>
                                                            <span class="badge badge-pill badge-warning">In Progress <i class="fas fa-spinner"></i></span>
                                                        <?php }else if($row->status == 2){?>
                                                            <span class="badge badge-pill badge-info">Action Taken <i class="far fa-smile"></i></span>
                                                        <?php }else if($row->status == 3){?>
                                                            <span class="badge badge-pill badge-success">Verified <i class="far fa-thumbs-up"></i></span>
                                                        <?php }else{?>
                                                            <span class="badge badge-pill badge-dark">Approved <i class="fas fa-check-circle"></i></span>
                                                        <?php } ?>
                                                    </td>
                                                    <td class="text-center"><small><?php if($row->date_solved != '0000-00-00'){ echo date ('d-m-Y', strtotime($row->date_solved)); }else{ echo '';} ?></small></td>
                                                    <td class="text-center">
                                                        <div class="btn-group btn-group-sm" role="group">
                                                            <a type="button" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="View Detail" href="<?php echo base_url('hr/serviceform/complaint_form_edit/'.$row->id.'/view'); ?>"><i class="far fa-eye"></i></a>
                            
                                                            <?php if(((($_SESSION['all_modules_access'][1]['access_lvl'] == 'admin') || ($_SESSION['user']['id'] == $row->created_by)) && ($row->status == 0))){ ?>
                                                                <a type="button" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" href="<?php echo base_url('hr/serviceform/complaint_form_edit/'.$row->id); ?>"><i class="far fa-edit"></i></a>
                                                            <?php } ?>

                                                            <a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform_report/complaint_print/').$row->id; ?>" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

                                                            <?php if((($_SESSION['all_modules_access'][1]['access_lvl'] == 'admin') || ($_SESSION['user']['id'] == $row->created_by)) && $row->status < 2){ ?>
                                                                <button id="deleteButtonComplaint" type="button" class="btn btn-outline-dark" onclick="deleteComplaint(<?php echo $row->id; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>
                                                            
                                                            <?php } ?>

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

<div class="modal" tabindex="-1" role="dialog" id="verify_complaint_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Complaint</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label for="complaint_client_satisfy" class="col-form-label-sm">Client Satisfied?</label>
                <select id="complaint_client_satisfy" type="text" class="form-control form-control-sm">
                    <option value="" selected="selected">Please Select</option>
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="verifyComplaint()">Verify</button>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .tooltipevent
    {
        width:auto;
        height:auto;
        background:rgba(0,0,0,0.75);
        position:absolute;
        color: #fff;
        z-index:10001;
        padding:10px 10px 10px 10px ;  
        line-height: 200%;
    }
</style>

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

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

    });

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

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

                        location.reload();
                    }
                }
            });
        });
    }

    function openVerifyModa(id){
        $('#verify_complaint_modal').modal('show');
    }

    function changeClientList(obj)
    {
        var id = obj.value;

        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>hr/ServiceForm/getClientList",
            data: "client_type=" + id,
            dataType: "json",
            success: function(content) {
                if (content.status == "success") {
                    if(id == 1){

                        jQuery("#sv_complaint_filter_client").empty();

                        var items = [];
                        items.push('<option value=-1> [All] </option>');
                        for (var i = 0; i < content.message.length; i++) {
                            items.push('<option value="' + content.message[i].id + '">'
                                    + content.message[i].name + '</option>');
                        }
                        
                        jQuery("#sv_complaint_filter_client").append(items.join('</br>'));
                        
                    }else{

                        jQuery("#sv_complaint_filter_client").empty();

                        var items = [];
                        items.push('<option value=-1> [All] </option>');
                        for (var i = 0; i < content.message.length; i++) {
                            items.push('<option value="' + content.message[i].id + '">'
                                    + content.message[i].name + ' | ' + content.message[i].branch_name + '</option>');
                        }
                        
                        jQuery("#sv_complaint_filter_client").append(items.join('</br>'));
                        
                    }
                }else{
                    $("#error").html('<p>' + content.message + '</p>');
                }
            }
        });
        return false;
    }

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

        frmData.append('sv_complaint_filter_dept',$('#sv_complaint_filter_dept').val());
        frmData.append('sv_complaint_filter_type',$('#sv_complaint_filter_type').val());
        frmData.append('sv_complaint_filter_client', $('#sv_complaint_filter_client').val());
        frmData.append('sv_complaint_filter_status',$('#sv_complaint_filter_status').val());
        frmData.append('sv_complaint_filter_year',$('#sv_complaint_filter_year').val());

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

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

                let complaint = data.table;

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

                        if(content.complaint_for == 1){
                            var complaint_for = "External Complaint"; 
                        } else { 
                            var complaint_for = "Internal Complaint";
                        } 

                        if(content.status == 0){
                            var status = '<span class="badge badge-pill badge-danger"> New! <i class="far fa-tired"></i></span>';
                        }else if(content.status == 1){
                            var status = '<span class="badge badge-pill badge-warning"> In Progress <i class="fas fa-spinner"></i></span>';
                        }else if(content.status == 2){
                            var status = '<span class="badge badge-pill badge-info"> Action Taken <i class="far fa-smile"></i></span>';
                        }else if(content.status == 3){
                            var status = '<span class="badge badge-pill badge-success"> Verified <i class="far fa-thumbs-up"></i></span>';
                        }else{
                            var status = '<span class="badge badge-pill badge-dark"> Approved <i class="fas fa-check-circle"></i></span>';
                        }

                        var btn_view = '<a type="button" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="View Detail" href="<?php echo base_url();?>hr/serviceform/complaint_form_edit/' + content.id + '/view"><i class="far fa-eye"></i></a>';

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

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

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

                        if(((('<?php echo $_SESSION['all_modules_access'][1]['access_lvl']; ?>' == 'admin') || ('<?php echo $_SESSION['user']['id']; ?>' == content.created_by)) && (content.status == 0)))
                        {
                            var btn_add_edit = btn_edit;

                        } else {
                            var btn_add_edit = '';
                        } 

                        if(((('<?php echo $_SESSION['all_modules_access'][1]['access_lvl']; ?>' == 'admin') || ('<?php echo $_SESSION['user']['id']; ?>' == content.created_by)) && (content.status < 2)))
                        {
                            var btn_add_delete = btn_delete;

                        } else {
                            var btn_add_delete = '';
                        }
                        
                        table.row.add({
                            0   : '<div  class="text-center"><small>' + i + '<small></div>',
                            1   : '<small>Ref. No : ' + content.ref_no.padStart(4,'0') + '<br> Date : ' + moment(content.date).format('DD-MM-YYYY') + '<br> Complaint to : ' + content.department_name + ' | ' + content.branch_name + '<br> Register by : ' + content.reg_name + '<small>',
                            2   : '<small>' + complaint_for + ' by ' + content.client_name + '</small>',
                            3   : '<small>Services : ' + content.service + '<br> Type of Job : ' + content.job + '<br> Person In Charge : ' + content.pic_name + '<small>',
                            4   : '<div  class="text-center">' + status + '</div>',
                            5   : moment(content.date_solved).format('DD-MM-YYYY'),
                            6   : '<div class="btn-group btn-group-sm text-center" role="group">' + btn_view + btn_add_edit + btn_print + btn_add_delete + '</div>',
                        }).draw();
                    });
                }
            },
            error:function(){
                iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    }
</script>