<style>
    .table thead tr>th {
        background-color: #4c0870;
        color: #fff;
    }

    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }

    .bg-master-lighter {
        border: none;
        background-color: #fff;
        border-top: 1px solid #ddd;

    }

    .btn-default {
        border: none;
        background-color: #eee;
    }

    .btn-default:hover {
        background-color: #4c0870 !important;
        color: #fff;
        border: none;
    }

    .p-0 {
        padding: 0 !important;
    }
</style>


<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"> <?php print CommonLanguage::getMessage('salary_periods'); ?></div>

            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php
            if ($permissions->hasPermission('add_salary_periods')) {
                echo Forms::FloatingAddButton('4c0870', '#add_period', CommonLanguage::getMessage('add'));
            }
            ?>
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                <thead>
                    <tr>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('Name'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('basic_salary'); ?></th>

                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('payment_period'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('unit_time'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('formula'); ?></th>
                        <th class="text-center" style="width:15%"><?php print CommonLanguage::getMessage('Action'); ?></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>



    </div>
</div>
<div class="modal fade bs-example-modal-md " id="add_period" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog " style="width:50%;">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="pg-close fa-22"></i></span></button>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('salary_periods') ?></h4>
                <div id="assignperiodAlert"></div>
            </div>
            <div class="modal-body">
                <form id="assignperiodForm">
                    <div class="row">
                        <div class=" col-md-12 m-t-10 ">
                            <div class=" col-md-6 m-t-10 ">
                                <label class="labelText"><?php print CommonLanguage::getMessage('Name'); ?><span class="red-star">*</span></label>
                                <input type="text" class="form-control" id="period_name" name="period_name" required />
                            </div>
                            <div class=" col-md-6 m-t-10 ">
                                <label class="labelText"><?php print CommonLanguage::getMessage('payment_period'); ?><span class="red-star">*</span>&nbsp;<i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('pay_period_hint') ?>"></i></label>
                                <select id="pay_period" name="pay_period" class="full-width" data-init-plugin="select2" required>
                                    <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
                                    <option value="0"><?php echo CommonLanguage::getMessage('weekly') ?></option>
                                    <option value="1"><?php echo CommonLanguage::getMessage('monthly') ?></option>
                                    <option value="2"><?php echo CommonLanguage::getMessage('daily') ?></option>
                                </select>
                            </div>
                        </div>

                        <div class=" col-md-12 m-t-10 ">
                            <div class=" col-md-6 m-t-10 ">
                                <label><?php print CommonLanguage::getMessage('currency'); ?></label>
                                <div id="CurrencyIDContainer" class=" ">
                                    <div class="form-group form-material floating ">
                                        <div class="input-group-btn DropDownForForms Closable" id="CurrencyDropDown" data-symbol="<?php echo smc_session()['local_currency_symbol']; ?>">
                                            <button type="button" class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                                <span><strong class="currency-symbol"><?php echo smc_session()['local_currency_name'] . ' - ' . smc_session()['local_currency_symbol'] ?></strong></span>
                                                <input type="hidden" value="<?php echo smc_session()['local_currency'] ?>" class="form-control ignore" onkeyup="return false" onkeydown="return false" id="Currency_ID" name="Currency_ID" />
                                            </button>
                                            <ul class="dropdown-menu">
                                                <?php echo $CurList ?>
                                                <li class="divider"></li>
                                                <li><a class="LoadMore">More..</a></li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class=" col-md-6 m-t-10 ">
                                <label class="labelText"><?php print CommonLanguage::getMessage('formula'); ?><span class="red-star">*</span></label>
                                <input type="text" class="full-width" id="formula_id" name="formula_id" required />
                            </div>
                        </div>

                        <div class=" col-md-12 m-t-10 ">
                            <div class=" col-md-6 m-t-10 ">
                                <label class="labelText"><?php print CommonLanguage::getMessage('basic_salary'); ?><span class="red-star">*</span></label>
                                <input type="text" class="form-control" id="basic_salary" name="basic_salary" required />
                            </div>
                            <div class=" col-md-6 m-t-10 ">
                                <label class="labelText"><?php print CommonLanguage::getMessage('unit_time'); ?><span class="red-star">*</span>&nbsp;<i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('unit_time_hint') ?>"></i></label>
                                <select id="unit_time" name="unit_time" class="full-width" data-init-plugin="select2" required>
                                    <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
                                    <option value="0"><?php echo CommonLanguage::getMessage('hour') ?></option>
                                    <option value="2"><?php echo CommonLanguage::getMessage('day') ?></option>
                                    <option value="1"><?php echo CommonLanguage::getMessage('month') ?></option>
                                </select>
                            </div>

                        </div>
                        <div class=" col-md-12 m-t-10 hidden update_emp_div">
                            <label class="labelText"><?php print CommonLanguage::getMessage('update_emp_basic_salary_msg'); ?></label>

                            <input type="checkbox" id="update_emp" name="update_emp" />
                        </div>
                        <div class=" col-md-12 m-t-10 ">
                            <label class="labelText"><?php print CommonLanguage::getMessage('bs_worked_hrs'); ?></label>

                            <input type="checkbox" id="bs_worked_hrs" name="bs_worked_hrs" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button style="color:white !important;" type="button" class="btn bg-success white" id="assignBtn" style="width:auto"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
        </div>
    </div>
</div>

<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('salary_periods')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
        Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    var IsEdit = false,
        IDToEdit = 0;
    $(function() {
        build_select2($("#formula_id"), "xhr/CommonSearch?col_id=formula_id&col_name=formula_name&table=tbl_hrm_salary_unit_formulas")
        new Switchery($("#update_emp").get(0), {
            color: $.Pages.getColor("success")
        });
        new Switchery($("#bs_worked_hrs").get(0), {
            color: $.Pages.getColor("success")
        });

        $(".floatingContainer").on("click", function() {
            $(".update_emp_div").addClass("hidden")
            if ($("#update_emp").is(":checked"))
                $("#update_emp").trigger("click")
            if ($("#bs_worked_hrs").is(":checked"))
                $("#bs_worked_hrs").trigger("click")
            IsEdit = false;
            IDToEdit = 0;
        })

        RebuildDataTable(title, [0], "HRMAjax/salary_periods_ajax")

        $("#assignBtn").on("click", function() {
            $("#assignperiodAlert").removeClass('hidden')

            if ($("#pay_period").val() == '' || $("#unit_time").val() == '' || $("#formula_id").val() == '' || $("#period_name").val() == '') {
                $("#assignperiodAlert").attr("class", "alert alert-danger").html(Required_Fields)
                return false;

            }
            var DataArr = new FormData(document.getElementById("assignperiodForm"));
            DataArr.append("period_id", IDToEdit)
            DataArr.append("is_edit", (IsEdit ? 1 : 0))
            $.ajax({
                url: "HRMAjax/add_edit_salary_periods",
                method: "POST",
                dataType: 'json',
                data: DataArr,
                processData: false,
                contentType: false,
                complete: function(v1, v2) {
                    if (v2 == "success" && v1.responseJSON == 'OK') {
                        $("#assignperiodAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                        RebuildDataTable(title, [0], "HRMAjax/salary_periods_ajax")
                        setTimeout(function() {
                            $("#assignperiodAlert").addClass('hidden')
                            $("#add_period").modal("hide")
                        }, 5000)
                    } else {
                        $("#assignperiodAlert").attr("class", "alert alert-danger").html(v1.responseJSON)
                    }
                }
            })
        })

        $("#tableWithSearch tbody").on('click', '.Edit', function() {
            $(".update_emp_div").removeClass("hidden")

            IsEdit = true;
            IDToEdit = $(this).attr('data-id');
            $.ajax({
                url: "HRMAjax/get_salary_periods_by_id",
                method: "GET",
                dataType: 'json',
                data: {
                    id: IDToEdit
                },
                complete: function(v1, v2) {
                    if (v2 == "success") {
                        var data = v1.responseJSON;
                        $("#period_name").val(data['period_name'])
                        $("#unit_time").val(data['unit_time']).select2()
                        $("#pay_period").val(data['pay_period']).select2()
                        $("#formula_id").val(data['formula_id']).attr("data-select-name", data['formula_name'])
                        build_select2($("#formula_id"), "xhr/CommonSearch?col_id=formula_id&col_name=formula_name&table=tbl_hrm_salary_unit_formulas")
                        $("#basic_salary").val(data['basic_salary'])
                        $("#Currency_ID").val(data['Currency_ID'])
                        $(".currency-symbol").html(data['Currency_Name'] + ' - ' + data['Currency_Code'])

                    }
                }
            })

            $("#add_period").modal("show")

        })


    })
</script>