<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>Invoice Description List</h4> -->

                <button type="button" class="btn btn-outline-dark btn-sm" data-trigger="hover" data-tooltip="tooltip" title="Add New" onclick="open_modal(this)"><i class="fa fa-plus"></i> Add New Invoice Description</button>

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

        <div class="collapse show active" 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_invoice_filter_entity" class="col-lg-2">
                                        Business Entity
                                    </label>
                                    <div class="col-lg-5">
                                        <select class="custom-select" name="sv_invoice_filter_entity" id="sv_invoice_filter_entity">
                                         <option value="-1" selected disabled>[All]</option>
                                         <?php if($entity) foreach($entity as $row){ ?>
                                            <option value="<?php echo $row['id']; ?>" <?php echo ($entity_id)?(($entity_id == $row['id'])?'selected':''):''; ?>><?php echo $row['name']; ?></option> 
                                        <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="row float-right">
                                    <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 <?php echo ($entity_id)?'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_invoice_description" class="table table-bordered p-0 m-0" width="100%">
                                    <thead> 
                                        <th class="text-center" width="10%">#</th>
                                        <th class="text-center" width="60%">Description</th>
                                        <th class="text-center" width="15%">Description Type</th>
                                        <th class="text-center" width="15%">Action</th>
                                    </thead>
                                    <tbody>
                                        <?php if(!empty($description)) { ?> 
                                            <?php foreach($description as $key => $row) {
                                                ?>
                                                <tr>
                                                    <td class="text-center"><?php echo $key+1; ?></td>
                                                    <td><?php echo $row['description']; ?></td>
                                                    <td><?php echo ($row['type'] == 1)?'Disbursement':'Services'; ?></td>
                                                    <td class="text-center">
                                                        <div class="btn-group btn-group-sm" role="group">
                                                            <button type="button" class="btn btn-warning btn-sm" data-trigger="hover" data-tooltip="tooltip" title="Edit" data-id="<?php echo $row['ID']; ?>" data-description="<?php echo $row['description']; ?>" data-type="<?php echo $row['type']; ?>" onclick="open_modal(this)"><i class="fa fa-edit text-white"></i></button>
                                                            <button id="deleteButtonDescription" type="button" class="btn btn-danger btn-sm" onclick="deleteDescription(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="fas fa-trash-alt"></i></button>
                                                        </div>
                                                    </td>  
                                                </tr>
                                            <?php } ?>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div>
</div>

<div class="modal fade" id="modal_entity_description" 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_entity_description_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 class="form" method="post" action="<?php //echo base_url('hr/serviceform/update_invoice_form'); ?>"> -->
                    <input type="text" class="form-control" name="description_id" id="description_id" hidden>
                    <input type="text" class="form-control" name="entity_id" id="entity_id" value="<?php echo $entity_id; ?>" hidden>
                    <div class="row p-3">
                        <div class="col-12">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" id="description" required>
                        </div>
                    </div>

                    <div class="row p-3">
                        <div class="col-12">
                            <label>Disbursement</label>
                            <select class="form-control" name="type" id="type" required>
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                    </div>

                    <div class="float-right">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="submitBtnDesc" onclick="saveDescription()">Save</button>
                    </div> 
                <!-- </form> -->
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function()
    {        
        $('#searchBtn').click(function(){
            getData();
        });
    });

    function to_invoice_form()
    {
        var entity_id = $('#entity_id').val();

        if(entity_id > 0)
        {
            window.location.href = '<?php echo base_url('hr/serviceform/invoice_form/'); ?>'+entity_id;
        }
    }

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

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

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

    function getData() {
        var entity_id = $('#sv_invoice_filter_entity').val();
        if(entity_id > 0)
        {
            window.location.href = '<?php echo base_url('hr/serviceform/invoice_description/'); ?>'+entity_id;
        }else{
            alert("Please select Business Entity. Thank You.")
        }
    }

    function open_modal(elem)
    {
        var title       = $(elem).data('original-title')

        if(title.toLowerCase() == 'edit')
        {
            var id          = $(elem).data('id');
            var description = $(elem).data('description');
            var type        = $(elem).data('type');
            
            $('#description_id').val(id);
            $('#description').val(description);
            $('#type').val(type);

            $('#modal_entity_description_title').text('Update Description');
            $('#submitBtnDesc').attr('onclick', 'saveDescription("update")');
        }else{
            $('#modal_entity_description_title').text('Add New Description');
            $('#submitBtnDesc').attr('onclick', 'saveDescription("add")');
        }
        $('#modal_entity_description').modal('show');
    }

    function saveDescription(mode)
    {
        var id          = $('#description_id').val();
        var entity_id   = $('#entity_id').val();
        var description = $('#description').val();
        var type        = $('#type').val();

        $.ajax({
            type: 'POST',
            url: '<?php echo base_url('hr/serviceform/saveDescription/'); ?>'+mode,
            data: {
                'id'              : id,
                'entity_id'       : entity_id,
                'description'     : description,
                'type'            : type,
            },
            dataType: 'JSON',
            success: function(data) {
                if(data.status == 'success')
                {
                    localStorage.setItem("status",data.status);
                    localStorage.setItem("msg",data.msg);

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