<style>
    img {
        vertical-align: middle;
        border-style: none;
        width: 250px;
        height: 250px;
        object-fit: contain;
    }
</style>


<section class="container" style="padding-bottom: 2rem;">
    <div class="row">
        <div class="col-sm-12">
            <div class="tab-content" id="tabContent">
                <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="card bg-light-transparent">
                        <div class="card-header bg-light">
                            <h4 class="card-title float-left"><?php echo (empty($ID))?'New ':'Edit '; ?>IT System Support Request Form</h4>
                            <h6 class="card-title float-left"><i>Instruction: This form was designed for SALIHIN staff that may require IT System support request. Please reserve request three (3) business days in advance by completing and submitting this form. All specified system and information are the property of SALIHIN and setup with the standard software for use. If you should require technical assistance with the system, please refer to technical personnel.</h6></i>
                        </div>

                        <div class="card-body">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <form id="itSystemForm" class="form" action="<?php echo (!empty($ID))?base_url('hr/Serviceform/it_system_edit'):base_url('hr/Serviceform/it_system_save'); ?>" enctype="multipart/form-data" method="POST">
                                        <input type="text" name="itSystemID" id="itSystemID" value="<?php echo $ID; ?>" hidden>
                                        <input type="text" class="form-control" name="file_id" id="file_id" value="<?php echo (!empty($systemDetails))?$systemDetails[0]['fileID']:''; ?>" hidden>

                                        <div class="form-row">
                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label>Name</label>
                                                    <?php if(!empty($row)) { ?>
                                                        <input type="text" class="form-control" name="name" id="name" value="<?php echo $rsSystem[0]['requestor']; ?>" readonly>    
                                                        <input type="text" class="form-control" name="name_id" id="name_id" value="<?php echo $rsSystem[0]['user_id']; ?>" hidden>
                                                    <?php  } else{ ?>
                                                        <input type="text" class="form-control" name="name" id="name" value="<?php echo $_SESSION['user']['name']; ?>" readonly>    
                                                        <input type="text" class="form-control" name="name_id" id="name_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
                                                    <?php }?>
                                                </div>
                                            </div>

                                            <div class="col-12 col-sm-3">
                                                <div class="form-group">
                                                    <label for="department">Department</label>
                                                    <?php if(!empty($row)){ ?>
                                                        <input type="text" class="form-control" name="department" id="department" value="<?php echo $row['dept_name']; ?>" readonly>
                                                        <input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['department_id']; ?>" hidden>
                                                    <?php } else{ ?>
                                                        <input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>
                                                        <input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
                                                    <?php } ?>
                                                </div>
                                            </div>

                                            <div class="col-12 col-sm-3">
                                                <div class="form-group">
                                                    <label for="datereq">Date Request</label>
                                                    <?php if(!empty($row)){ ?>
                                                        <input type="" class="form-control" name="datereq" id="datereq" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['createdTS'])):''; ?>" readonly>
                                                    <?php } else { ?>
                                                        <input type="" value="<?php echo date("d-m-Y"); ?>" class="form-control" name="datereq" id="datereq" readonly>
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="systemname">System Name</label>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-append">
                                                            <?php if($_SESSION['user']['department_id'] == 1){ ?>
                                                                <button type="button" id="updateSystemList" class="btn btn-sm btn-warning" onclick="open_modal()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update System List"><i class="far fa-edit"></i></button>
                                                            <?php } ?>
                                                        </div>
                                                        <select class="form-control" name="systemname" id="systemname" required>
                                                            <option value="-1" selected disabled>-- Please Select --</option>
                                                            <?php if(!empty($rsSystemList)): foreach($rsSystemList as $row): ?>
                                                                <option value="<?php echo $row['ID']; ?>" <?php echo (!empty($ID) && $rsSystem[0]['systemID']==$row['ID'])?'selected':''; ?>><?php echo $row['systemName'];?></option>
                                                            <?php endforeach;endif; ?>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label for="location">System Location/Link</label>
                                                    <?php if(!empty($ID)) { ?>
                                                        <?php if(!empty($rsSystem)): foreach($rsSystem as $row): ?>
                                                            <input type="text" class="form-control" name="location" id="location" value="<?php echo (!empty($ID))?$row['location']:''; ?>" required>
                                                        <?php endforeach; endif; ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control" name="location" id="location" required>
                                                    <?php } ?>
                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="Internal">Internal external</label>
                                                    <div class="row">
                                                        <div class="col-12 col-sm-6">
                                                            <input type="radio" name="internal" id="internal" value="1"> Internal
                                                        </div>

                                                        <div class="col-12 col-sm-6">
                                                            <input type="radio" name="internal" id="internal" value="2" onchange="open_hidden_external(this);">
                                                            <label for="external_crm">External</label>
                                                            <select class="form-control" id="external_crm" name="external_crm" hidden>
                                                                <?php if(!empty($customer)): foreach($customer as $row): //debug($row); ?>
                                                                    <option value="<?php echo $row->customer_id; ?>"><?php echo $row->name; ?></option>
                                                                <?php endforeach; endif;?>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="prob">Problem</label>
                                                    <?php if(!empty($ID)) { ?>
                                                        <?php if(!empty($rsSystem)): foreach($rsSystem as $row): ?>
                                                            <textarea rows="6" cols="50" class="form-control" name="problem" id="problem" value="" required><?php echo (!empty($ID))?$row['problem']:''; ?></textarea>
                                                        <?php endforeach; endif; ?>
                                                    <?php } else { ?>
                                                        <textarea rows="6" cols="50" class="form-control" name="problem" id="problem" required></textarea>
                                                    <?php } ?>
                                                </div>
                                            </div>

                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="complaint">Complaint</label>
                                                    <?php if(!empty($row)){ ?>
                                                        <textarea rows="6" cols="50" class="form-control" name="complaint" id="complaint" value="" required><?php echo (!empty($ID))?$row['complaint']:''; ?></textarea>
                                                    <?php } else { ?>
                                                        <textarea rows="6" cols="50" class="form-control" name="complaint" id="complaint" required></textarea>
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-12">
                                                <div class="float-right" style="padding-top: 2rem;">
                                                    <a class="btn btn-light" href="<?php echo base_url('hr/serviceform/it_system_list/'); ?>">Cancel</a>
                                                    <button type="submit" class="btn btn-primary" onclick="confirmation()">Submit</button>
                                                </div> 
                                            </div>
                                        </div>

                                        <br><hr><br>

                                        <div class="tab-pane fade show active" id="attachment_new" role="tabpanel" aria-labelledby="forms-tab">
                                            <div style="color: red;">*Please submit the form first and click edit to attach new picture*</div>
                                            <div class="card" style="margin-bottom: 2rem;">
                                                <div class="card-header bg-light">
                                                    <?php if(!empty($ID)) { ?>
                                                        <div class="float-left">
                                                            <button onclick="openFormModal(<?php echo $ID; ?>);" type="button" class="btn btn-outline-dark btn-sm"><i class="fa fa-plus"></i> Add New Attachment</button>
                                                        </div>
                                                    <?php } else { ?>
                                                        <div class="float-left">
                                                            <button onclick="openFormModal(<?php echo $ID; ?>);" type="button" class="btn btn-outline-dark btn-sm" disabled><i class="fa fa-plus"></i> Add New Attachment</button>
                                                        </div>
                                                    <?php } ?>
                                                </div>

                                                <div class="card-body"> 
                                                    <div class="row" >
                                                        <?php if(!empty($ID)){ ?>
                                                            <?php if(!empty($systemDetails)): 
                                                                $row = $systemDetails[0]; 
                                                                $rowFileID = explode(',',$row['fileID']);
                                                                $rowFileName = explode(',',$row['filename']);
                                                                $rowFileLocation = explode(',',$row['file_location']);
                                                                foreach($rowFileName as $key => $filename): ?>
                                                                    <div class="col-sm-12 col-lg-4">
                                                                        <div class="img">
                                                                            <div class="pop">
                                                                                <div class="card no-shadow <?php echo (!empty($row['fileID']))?'':'d-none'?>">
                                                                                    <div class="card-header text-center bg-white">
                                                                                        <img src="<?php echo base_url($rowFileLocation[$key].$filename); ?>" style="width: 160px; height: 160px;">
                                                                                    </div>
                                                                                    <div class="card-body">
                                                                                        <div class="float-left">
                                                                                            <h5 class="card-title"><?php echo $filename; ?></h5>
                                                                                        </div>

                                                                                        <div class="float-right">
                                                                                            <div class="btn-group btn-group-sm" role="group">
                                                                                                <button type="button" class="btn btn-outline-dark" id="deleteButton" onclick="deleteAttachment(<?php echo $rowFileID[$key]; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <br>
                                                                    </div>
                                                                <?php endforeach; ?>
                                                            <?php endif; ?>
                                                        <?php } ?>
                                                    </div>
                                                </div>
                                            </div>  
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- adminLte -->
<link rel="stylesheet" id="stylesheet1" type="text/css" href="<?php echo base_url(); ?>assets/vendors/AdminLTE.css">
<link rel="stylesheet" id="stylesheet2" type="text/css" href="<?php echo base_url(); ?>assets/vendors/AdminLTE.min.css">

<section class="container" style="padding-bottom: 2rem;">
    <div class="row">
        <div class="col-sm-12">
            <div class="tab-content" id="tabContent">
                <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="card bg-light-transparent">
                        <div class="card-header bg-light">
                            <h3>Discussion</h3>
                        </div>
                        <div class="card-body">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <div>*Please submit the form first to start discussion*</div>
                                    <form id="itSystemForm" class="form" action="<?php echo base_url('hr/Serviceform/it_system_save_discussion') ?>" method="POST" enctype="multipart/form-data">
                                        <input type="text" class="form-control" name="ID" id="ID" value="<?php echo $ID; ?>" hidden>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="box box-success direct-chat direct-chat-success">
                                                    <hr>
                                                    <!-- /.box-header -->
                                                    <div class="box-body">
                                                        <div class="direct-chat-messages">
                                                            <?php if(!empty($discussions)) foreach ($discussions as $key => $value) {?>
                                                                <div class="direct-chat-msg <?php echo ($value['userID'] == $_SESSION['user']['id'])?'right':'left' ?>">
                                                                    <div class="direct-chat-info clearfix">
                                                                        <span class="direct-chat-name <?php echo ($value['userID'] == $_SESSION['user']['id'])?' float-right':' float-left' ?>"><?php echo $value['name']; ?></span> 
                                                                        <span class="direct-chat-timestamp <?php echo ($value['userID'] == $_SESSION['user']['id'])?' float-left':' float-right' ?>"><?php echo date('d M H:i',strtotime($value['createdTS'])); ?></span>
                                                                    </div>

                                                                    <img class="direct-chat-img" src="<?php echo (!empty($value['file_name']))?base_url($value['file_location'].$value['file_name']):base_url('assets/uploads/admin/users/1/picture/people_default.PNG') ?>" alt="User Image" style="border-radius: 50%; max-width:50px; max-height:50px; border: 1px solid black;">

                                                                    <div class="direct-chat-text"><?php echo ($value['text'])?></div>
                                                                </div>
                                                            <?php } ?>
                                                        </div>
                                                    </div>

                                                    <!-- /.box-body -->
                                                    <div class="box-footer">
                                                        <?php if(!empty($ID)) { ?>
                                                            <div class="input-group">
                                                                <input type="text" name="message" id="message" placeholder="Type Message ..." class="form-control" >
                                                                <span class="input-group-btn">
                                                                    <button type="submit" class="btn btn-primary btn-flat">Send</button>
                                                                </span>
                                                            </div>
                                                        <?php } else { ?>
                                                            <div class="input-group">
                                                                <input type="text" name="message" id="message" placeholder="Type Message ..." class="form-control" disabled>
                                                                <span class="input-group-btn">
                                                                    <button type="submit" class="btn btn-primary btn-flat" disabled>Send</button>
                                                                </span>
                                                            </div>
                                                        <?php } ?>
                                                    </div>
                                                    <!-- /.box-footer-->
                                                </div>
                                                <!--/.direct-chat -->
                                            </div>                                        
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php echo (!empty($approval))?$approval:''; ?>

<!-- modal form -->
<div class="modal fade" id="formModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="form-modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="<?php echo base_url('hr/Serviceform/it_system_save_attachment') ?>" enctype="multipart/form-data" method="post">
                    <div class="col" hidden>
                        <div class="form-group">
                            <label for="form_id">ID</label>
                            <input type="text" class="form-control" name="form_id" id="form_id" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="file_upload">File Upload</label>
                        <input type="file" required data-parsley-error-message="Form file is required." class="form-control" name="file_upload" id="file_upload" aria-describedby="formHelp">
                        <small id="formHelp" class="form-text text-muted">We only accept the following image formats: jpg, jpeg, png</small>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group float-right">
                            <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" class="btn btn-light">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- modal form -->

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">              
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <img src="" class="imagepreview" style="width: 100%; height: 100%">
            </div>
        </div>
    </div>
</div>

<!-- modal edit car detail -->

<div class="modal fade d-print-none" id="update_system_list_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_title">Add/Update System List</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="systemListForm" class="form">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <label>System Name</label>
                            <input type="text" class="form-control" name="modal_system_name" id="modal_system_name">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <label>Sequence</label>
                            <input type="number" class="form-control" name="modal_system_sequence" id="modal_system_sequence">
                        </div>
                    </div>

                    <div class="row pt-3">
                        <div class="col-12">
                            <div class="btn-group float-right">
                                <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                                <button type="button" id="saveSystemListBtn" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-12">
                            <label>List System</label>
                            <div class="table-responsive">
                                <table id="filter_table_system_listing" class="table table-bordered">
                                    <thead>
                                        <th>#</th>
                                        <th>System Name</th>
                                        <th>Sequence</th>
                                        <th>Action</th>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <br>

                    <div class="modal-footer">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- modal edit car detail -->

<!-- modal update car detail -->

<div class="modal fade d-print-none" id="update_system_detail_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_title">Add/Update System List</h5>&emsp;
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="systemDetailForm" class="form">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <label>System Name</label>
                            <input type="text" class="form-control" name="edit_modal_system" id="edit_modal_system">
                            <input type="text" class="form-control" name="edit_modal_system_id" id="edit_modal_system_id" hidden>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <label>Sequence</label>
                            <input type="text" class="form-control" name="edit_modal_system_sequence" id="edit_modal_system_sequence">
                        </div>
                    </div>

                    <div class="row pt-3">
                        <div class="col-12">
                            <div class="btn-group float-right">
                                <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                                <button type="button" id="updateSystemBtn" class="btn btn-primary">Update</button>
                            </div>
                        </div>
                    </div>

                    <br>

                    <div class="modal-footer">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- modal update car detail -->

<script>
    function confirmation() {
        confirm('Do you really want to submit the form?');
    }

    function open_hidden_external(elem) 
    {
        let checked = $(elem).val();
        if(checked == 2)
        {
            $('#external_crm').removeAttr('hidden');
        }else {
            $('#external_crm').attr('hidden','hidden');
        }
    }

    function openFormModal(id) 
    {
        $('#form_id').val(id);
        $('#form-modal-title').html('Add New Attachment');
        $('#formModalSubmitBtn').attr('onclick', 'uploadForm()');
        $('#form_file').attr('required', true);
        $('#formModal').modal('show');
    }


    function uploadForm()
    {
        validateForm("#formForm", "Are you sure you want to add this attachment?", function(){
            $("#formModalSubmitBtn").attr('disabled', true);append("&nbsp;&nbsp;<i class='fas fa-spinner fa-spin'>");
            var form_data = new FormData();

                // form_data.append("category", $('#form_category').val());

                form_data.append('form_id',$('#form_id').val());
                form_data.append("form", $('#form_file').prop('files')[0]);

                $.ajax({
                    url: "<?php echo base_url('upload/hr/form/uploadForm'); ?>",
                    type: "POST",
                    data: form_data,
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if(data.status == 'Success')
                        {
                            $('#formModal').modal('hide');

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

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

    function updateForm()
    {
        validateForm("#formForm", "Are you sure you want to update this form?", function(){
            var form_data = new FormData();

            form_data.append("id", $('#form_id').val());

            if($('#form_file').get(0).files.length > 0){
                form_data.append("form", $('#form_file').prop('files')[0]);
            }

            $.ajax({
                url: "<?php echo base_url('upload/hr/form/updateForm'); ?>",
                type: "POST",
                data: form_data,
                dataType: "JSON",
                processData: false,
                contentType: false,
                success: function(data) {
                    if(data.status == 'Success')
                    {
                        $('#formModal').modal('hide');
                        localStorage.setItem("status",data.status);
                        localStorage.setItem("msg",data.msg);

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

    function deleteAttachment (ID) 
    {
        validateForm("#deleteButton", "Delete this picture?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/deleteAttachments') ?>',
                data: {
                    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() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   
        });   
    });

    function open_modal()
    {
        $("#stylesheet1").attr("disabled", "disabled");
        $("#stylesheet2").attr("disabled", "disabled");
        clearForm('#systemListForm');

        var table = $('#filter_table_system_listing').DataTable();
        table.clear().draw();

        var data_system = '<?php echo json_encode($rsSystemList); ?>';
        let system = JSON.parse(data_system);

        if(system != null)
        {
            $.each(system,function(key,content)
            {
                var btn_edit = '<button type="button" class="btn btn-sm btn-warning" data-systemname="'+content.systemName+'" data-id="'+content.ID+'" data-seq="'+content.seq_no+'" onclick="update_system(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update System List"><i class="far fa-edit"></i></button>';
                
                var btn_delete = '<button type="button" id="deleteButton" class="btn btn-sm btn-danger" data-systemname="'+content.systemName+'" data-id="'+content.ID+'" data-seq="'+content.seq_no+'" onclick="delete_system(this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update System List"><i class="fas fa-trash"></i></button>';

                table.row.add({
                    0   : '<div class="text-center">'+(key + 1)+'</div>',
                    1   : content.systemName,
                    2   : '<div class="text-center">'+content.seq_no+'</div>',
                    3   : '<div class="text-center">'+btn_edit+btn_delete+'</div>',
                }).draw();
            });

            $('#filter_table_system_listing').DataTable().destroy();
        }
        
        $('#saveSystemListBtn').attr('onclick', 'saveSystem()');
        $('#update_system_list_modal').modal('show');
    }

    function closeModal()
    {
        $("#stylesheet1").removeAttr("disabled");
        $("#stylesheet2").removeAttr("disabled");
    }

    function update_system(elem)
    {
        var system_id = $(elem).data('id');
        var system_name = $(elem).data('systemname');
        var system_sequence = $(elem).data('seq');

        $('#edit_modal_system_id').val(system_id);
        $('#edit_modal_system').val(system_name);
        $('#edit_modal_system_sequence').val(system_sequence);
        $('#updateSystemBtn').attr('onclick', 'updateSystem()');
        $('#update_system_detail_modal').modal('show');
    }

    function saveSystem()
    {
        var system_name         = $('#modal_system_name').val();
        var system_sequence     = $('#modal_system_sequence').val();
        
        validateForm("#saveSystemListBtn", "Add "+system_name+" to system list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateSystemList/add') ?>',
                data: {
                    system_name : system_name,
                    system_sequence : system_sequence,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

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

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

    function updateSystem()
    {
        var system_id           = $('#edit_modal_system_id').val();
        var system_name         = $('#edit_modal_system').val();
        var system_sequence     = $('#edit_modal_system_sequence').val();
        
        validateForm("#updateSystemBtn", "Update detail of system "+system_name+"?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateSystemList') ?>',
                data: {
                    system_id : system_id,
                    system_name : system_name,
                    system_sequence : system_sequence,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

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

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

    function delete_system(elem) 
    {
        var system_id = $(elem).data('id');
        var system_name = $(elem).data('systemname');

        validateForm("#deleteButton", "Delete "+system_name+" from system list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/updateSystemList/delete') ?>',
                data: {
                    system_id : system_id,
                    system_name : system_name,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

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

                        location.reload();
                    }
                }
            });
        });
    }
</script>