<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>AV/IT Service Request Form</h4>

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

                <a href="<?php echo base_url('hr/Serviceform_report/it_service_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_service_filter_dept" class="col-lg-3">Department</label>                           
                                        <div class="col-lg-4" >
                                            <select class="custom-select" name="sv_service_filter_dept" id="sv_service_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_service_filter_status" class="col-lg-3">Status</label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" id="sv_service_filter_status" name="sv_service_filter_status">
                                            <option value="-1">[All]</option>
                                            <option value="Pending">Pending</option>
                                            <option value="In_progress">In Progress</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_service_filter_year" class="col-lg-3">Year</label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_service_filter_year" id="sv_service_filter_year" class="form-control datepicker-yyyy">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_service_filter_month" class="col-lg-3">Requested Month</label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_service_filter_month" id="sv_service_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_service" class="table table-bordered p-0 m-0" width="100%">
                                    <thead>
                                        <th>#</th>
                                        <th>Department</th>
                                        <th>Location</th>
                                        <th>Request</th>
                                        <th>Problem</th>
                                        <th>Complaint</th>
                                        <th>Hardware</th>
                                        <th>Status</th>
                                        <th>Action</th>           
                                    </thead>

                                    <tbody>
                                        <?php if(!empty($rsServiceList)) { ?> 
                                            <?php foreach($rsServiceList as $key => $row) { ?>
                                                <tr>
                                                    <td class="text-center"><?php echo $key+1; ?></td>
                                                    <td class="text-center"><?php echo $row['dept_name']; ?></td>
                                                    <td><?php echo $row['location']; ?></td>
                                                    <td><?php echo $row['request']; ?></td>
                                                    <td><?php echo $row['problem']; ?></td>
                                                    <td><?php echo $row['complaint']; ?></td>
                                                    <td class="text-center"><?php echo $row['hardware']; ?></td>
                                                    <td class="text-center">
                                                        <?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 style="cursor: not-allowed;"';
                                                        }
                                                        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 style="cursor: not-allowed;"';
                                                        }
                                                        if($row['status_app'] == 'Rejected')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }
                                                        if($row['status_app'] == 'Cancel')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }

                                                        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-location="<?php echo $row['location']; ?>" 
                                                            data-request="<?php echo $row['request']; ?>" 
                                                            data-hw="<?php echo $row['hardware']; ?>" 
                                                            data-prob="<?php echo $row['problem']; ?>" 
                                                            data-complaint="<?php echo $row['complaint']; ?>" 
                                                            onclick="open_view_modal(this)">
                                                            <i class="far fa-eye"></i></button>

                                                            <?php if($_SESSION['user']['division_id'] == 19 || $_SESSION['user']['division_id'] == 10){ ?>
                                                                <a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform/it_service_form/').$row['ID']; ?>" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>
                                                            <?php }else{ ?>
                                                                <?php if($disabled == ''){ ?>
                                                                    <a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform/it_service_form/').$row['ID']; ?>" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>
                                                                <?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_service_print/').$row['ID']; ?>" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

                                                            <?php if(($_SESSION['user']['id'] == $row['user_id']) || ($_SESSION['user']['id'] == $row['createdBY'])){ ?>
                                                                <button id="deleteButton" type="button" class="btn btn-outline-dark" onclick="deleteItService(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete" <?php echo ($disabled == '')?'':'disabled style="cursor: not-allowed;"'; ?>><i class="far fa-trash-alt"></i></button>
                                                            <?php } ?>
                                                        </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">AV/IT Service 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>Location</label>
                    <input type="text" class="form-control" name="modal_view_location" id="modal_view_location" disabled>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <label>Request</label>
                    <input type="text" class="form-control" name="modal_view_request" id="modal_view_request" disabled>
                </div>
                <div class="col-6">
                    <label>Hardware</label>
                    <input type="text" class="form-control" name="modal_view_hardware" id="modal_view_hardware" disabled>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <label>Problem</label>
                    <input type="text" class="form-control" name="modal_view_problem" id="modal_view_problem" disabled>
                    <!-- <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>
                    <input type="text" class="form-control" name="modal_view_complaint" id="modal_view_complaint" disabled>
                    <!-- <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 deleteItService(ID) {
        validateForm("#deleteButtonService", "Delete this list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/deleteServiceList') ?>',
                data: {
                    itServiceID : 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_service_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 location    = $(elem).data('location');
        let request     = $(elem).data('request');
        let hw          = $(elem).data('hw');
        let prob        = $(elem).data('prob');
        let complaint   = $(elem).data('complaint');

        /* view modal */
        $('#modal_view_name').val(name);
        $('#modal_view_dept').val(dept);
        $('#modal_view_date_req').val(datereq);
        $('#modal_view_location').val(location);
        $('#modal_view_request').val(request);
        $('#modal_view_hardware').val(hw);
        $('#modal_view_problem').val(prob);
        $('#modal_view_complaint').val(complaint);
    }

    $(document).ready(function(){

        //getData();

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

        <?php $this->session->unset_userdata('sv_service_filter_dept'); ?>
        <?php $this->session->unset_userdata('sv_service_filter_year'); ?>
        <?php $this->session->unset_userdata('sv_service_filter_month'); ?>
        <?php $this->session->unset_userdata('sv_service_filter_status'); ?>
        <?php $this->session->unset_userdata('sv__it_service'); ?>
    });

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

        frmData.append('sv_service_filter_dept',$('#sv_service_filter_dept').val());
        frmData.append('sv_service_filter_status', $('#sv_service_filter_status').val());
        frmData.append('sv_service_filter_year',$('#sv_service_filter_year').val());
        frmData.append('sv_service_filter_month',$('#sv_service_filter_month').val());
        frmData.append('user_id',$('#user_id').val());

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

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

                let service = data.table;

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

                        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-request="'+content.request+'" data-hw="'+content.hardware+'" data-prob="'+content.problem+'" data-complaint="'+content.complaint+'" 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_service_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

                        if(content.status_app == null || content.status_app == 'Pending')
                        {
                            var status      = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                            var disabled    = '';
                        }
                        if(content.status_app == 'In_progress')
                        {
                            var status      = ((content.status_app).replace('_',' '))+' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Verified')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'+content.status_reason+'</p>';
                            var disabled    = '';
                        }
                        if(content.status_app == 'Approved')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Rejected')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Cancel')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }

                        if("<?php echo $_SESSION['user']['division_id']; ?>" == 19)
                        {
                            var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/it_service_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';
                        } else {        
                            if(disabled == '')
                            {
                                var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php //echo base_url();?>hr/serviceform/it_service_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';
                            }else{
                                var btn_edit = '<button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" '+disabled+'><i class="far fa-edit"></i></button>';
                            }
                        }

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

                        if(('<?php echo $_SESSION['user']['id']; ?>' == content.borrower_id) || ('<?php echo $_SESSION['user']['id']; ?>' == content.createdBY))
                        {
                            var btn = btn_view+btn_edit+btn_print+btn_delete;
                        }else{
                            var btn = btn_view+btn_edit+btn_print;
                        }

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