<div class="container-fluid" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">  
        <!-- <div class="card-header bg-white">
            <div class="float-left">
                <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 Form Price</button>

                <a href="<?php //echo base_url('hr/Serviceform_report/petty_cash_advance_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>
            </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 class="table table-bordered p-0 m-0" width="100%">
                                    <thead> 
                                        <th class="text-center" width="10%">#</th>
                                        <th class="text-center" width="50%">Form</th>
                                        <th class="text-center" width="10%">Price</th>
                                        <th class="text-center" width="15%">Action</th>
                                    </thead>
                                    <tbody>
                                        <?php if(!empty($form_detail)) { ?> 
                                            <?php foreach($form_detail as $key => $row) {
                                                ?>
                                                <tr>
                                                    <td class="text-center"><?php echo $key+1; ?></td>
                                                    <td><?php echo $row['title']; ?></td>
                                                    <td class="text-center"><?php echo ($row['price_type'] == 1)?($row['price']*100).'%':number_format($row['price'],2); ?></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['form_id']; ?>" data-title="<?php echo $row['title']; ?>" data-price="<?php echo $row['price']; ?>" data-type="<?php echo $row['price_type']; ?>" onclick="open_modal(this)"><i class="fa fa-edit text-white"></i></button>
                                                            <button id="deleteButtonServicePrice" type="button" class="btn btn-danger btn-sm" onclick="deleteServicePrice(<?php echo $row['form_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_service_form" 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_service_form_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_sv_form_price'); ?>">
                    <input type="text" class="form-control" name="service_form_id" id="service_form_id" hidden>
                    
                    <div class="row p-3">
                        <div class="col-12">
                            <label>Form Title</label>
                            <input type="text" class="form-control" name="service_form_title" id="service_form_title" required>
                        </div>
                    </div>

                    <div class="row p-3">
                        <div class="col-12">
                            <label>Price</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="service_form_price" id="service_form_price">
                                <div class="input-group-append">
                                    <select class="form-control" name="service_form_type" id="service_form_type">
                                        <option value="0">RM</option>
                                        <option value="1">%</option>             
                                    </select>
                                </div>
                            </div>
                        </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">Save</button>
                        <!-- <button type="submit" class="btn btn-primary" id="submitBtn" onclick="saveServicePrice()">Save</button> -->
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>


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

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

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

    function open_modal(elem)
    {
        var title           = $(elem).data('title');
        var id              = $(elem).data('id');
        var price           = $(elem).data('price');
        var type            = $(elem).data('type');
        
        $('#service_form_id').val(id);
        $('#service_form_title').val(title);
        $('#service_form_price').val(price);
        if(type != '' && type != null && type != undefined)
        {
            $('#service_form_type').val(type);
        }else{    
            $('#service_form_type').val('0');
        }

        $('#modal_service_form_title').text('Update '+title);
        // $('#submitBtn').attr('onclick', 'saveServicePrice()');
        $('#modal_service_form').modal('show');
    }

    function saveServicePrice(mode)
    {
        var id          = $('#service_form_id').val();
        var service_form = $('#service_form').val();
        var type        = $('#service_form_type').val();
        
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url('hr/serviceform/savePettyCashAdvanceServicePrice'); ?>',
            data: {
                'id'              : id,
                'service_form'    : service_form,
                'type'            : type,
            },
            dataType: 'JSON',
            success: function(data) {
                if(data.status == 'success')
                {
                    localStorage.setItem("status",data.status);
                    localStorage.setItem("msg",data.msg);

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