
<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
    #children_list_table tbody tr td{background:#f9edf0;}
    #children_list_table tbody tr.child_calculated_row td{background:#f5f7e6;}
</style>
<div class="modal fade stick-up " id="add_EmployeeChildren" tabindex="-1" role="dialog" aria-hidden="true" style="    width: 50%;
     margin: 0 auto;">
    <div class="modal-dialog ">
        <?php echo Forms::ModalLoader('EmployeeChildrenisBusy'); ?>
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <div id="EmployeeChildrenValidationAlert"></div>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('add_childreen_employee'); ?>  </span></h5>
            </div>
            <div class="modal-body">
                <form id="AddEmployeeDependentPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="input-group m-b "><span class="input-group-btn">
                                            <button type="button" class="btn btn-success" style="width:0 " ><i class="fa fa-user"style="color:#fff;"><span class="red-star">*</span></i> </button> </span>

                                        <input type="hidden" required  class="full-width EmployeeChildren_ID" name="Employee_ID" id="EmployeeChildren_ID" required/>


                                    </div>
                                </div>
                                <label><?php print CommonLanguage::getMessage('note:_you_can_only_choose_employees_who_have_children*'); ?> </label>
                            </div>
                            <div class="col-md-6">


                                <div  class="form-group form-group-default input-group" >
                                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                                    <input id="Amount_Date" name="Amount_Date" class="form-control" value="<?php echo ($today); ?>" />
                                    <span class="input-group-addon bg-success"><i class="fa fa-calendar"></i></span>
                                </div>


                            </div>


                        </div>

                        <div class="col-md-12 m-b-10" style="margin-left:10px;">
                            <div class="col-md-6">
                                <div class="input-group ">

                                    <span class="input-group-addon complete">
                                        <i class="fa fa-usd"><span class="red-star">*</span></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('amount'); ?>" required id="amount_children" name="amount_children" class="form-control " required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group-btn DropDownForForms Closable" id="CurrencyDropDown">
                                    <button type="button" class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <span><strong><?php print $DefaultCurrencyCode[1] . ' - ' . $DefaultCurrencyCode[0]; ?></strong></span>
                                        <input type="hidden" id="Child_Currency_ID" value="<?php echo $DefaultCurrencyID; ?>" class="form-control ignore" onkeyup="return false" onkeydown="return false" required/>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <?php echo $CurList ?>
                                        <li class="divider"></li>
                                        <li><a class="LoadMore">More..</a></li>
                                    </ul>
                                </div>


                            </div>

                        </div>

                        <div class="col-md-12" style="margin-left:10px;">
                            <div class="col-md-12">
                                <textarea class="form-control " id="note"  rows="5" cols="30"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12" style="margin-left:10px;">
                            <table  id="children_list_table" class="table table-bordered">
                                <thead>
                                    <tr>
                                        <td><?php print CommonLanguage::getMessage('child_name'); ?></td>
                                        <td><?php print CommonLanguage::getMessage('child_name'); ?></td>
                                        <td><?php print CommonLanguage::getMessage('child_dob'); ?></td>
                                        <td><?php print CommonLanguage::getMessage('age'); ?></td>
                                        <td><?php print CommonLanguage::getMessage('child_school'); ?></td>
                                        <td><?php print CommonLanguage::getMessage('amount') . ' ' . $DefaultCurrencySymbol; ?></td>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <br>
                        <div class="col-md-12 " style="margin-left:10px;margin-top:10px">
                            <div class="col-md-4 pull-right">
                                <button class="btn btn-default" id="CloseEmployeeChildren"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                                <button style="opacity:1;" class="btn btn-success disabled" id="addEmployeeChildren"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Data_Exists = <?php echo json_encode(CommonLanguage::getMessage('Data_Exists')); ?>,
            update_child = <?php echo json_encode(CommonLanguage::getMessage('update_childreen_employee')); ?>,
            add_child = <?php echo json_encode(CommonLanguage::getMessage('add_childreen_employee')); ?>,
            today = <?php echo json_encode($today); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    window.CurrentID = '';
    var Is_Edit = false;
    $(function () {
        $('#Amount_Date').datepicker({autoclose: true})
        build_select2($(".EmployeeChildren_ID"), "xhr/employeeDependantForChildSearch?is_actual="+is_actual)

        $('.floatingContainer  .actionButton').on('click', function () {
            Is_Edit = false;
            $('.modal-header > h5 span').empty().html(add_child);
            $('#EmployeeChildren_ID').removeAttr('disabled');
            $('#children_list_table tbody').empty();
            $('#Amount_Date').val(today)
            window.CurrentID = '';
        });
        $('#EmployeeChildren_ID').on("change", function () {
            $.ajax({
                url: 'HRMAjax/GetEmployeeChildSchoolTotal?emp_id=' + $(this).val() + '&entry_id=' + window.CurrentID,
                dataType: 'JSON',
                complete: function (v1, v2) {
                    if (window.CurrentID == '')   //on edit keep saved total
                        $('#amount_children').val(v1.responseJSON.total);
                  
                    if(v1.responseJSON.total == 0){
                       $('#addEmployeeChildren').attr('disabled','disabled')
                   }
                   else{
                        $('#addEmployeeChildren').removeAttr('disabled')
                   }
                    var children_list = '';
                    if (v1.responseJSON.children.length) {
                        $(v1.responseJSON.children).each(function (i, val) {
                            children_list += "<tr data-school-type='" + val.school_type + "'  data-id ='" + val.Child_ID + "' class='" + (val.child_is_calculated == true ? 'child_calculated_row' : '#f7f7f7') + "'><td>" + (val.child_is_accepted == true ? "<input type='checkbox' class='child_check' " + (val.child_is_checked == true ? " checked='checked' " : "") + " />" : "") + "</td><td class='child_name'>" + val.child_name + "</td><td class='child_dob'>" + val.child_dob + "</td><td class='child_age'>" + val.child_age + "</td><td class='child_school'>" + val.child_school + "</td><td class='child_school_value'>" + addCommas(val.school_value) + "</td></tr>";
                        });
                    }
                    $('#children_list_table tbody').html(children_list);
                    DisableSubmitEmployee();
                    if(!Is_Edit){
                    $('#Child_Currency_ID').val('<?php echo $DefaultCurrencyID; ?>')
                    $('#CurrencyDropDown  span').empty().html('<?php echo $DefaultCurrencyCode[1] . ' - ' . $DefaultCurrencyCode[0]; ?>')
                }
                }
            });
        });
        $("#tableWithSearch").on("click", ".Action .Edit", function (e) {
            Is_Edit = true;

            $('#add_EmployeeChildren').modal('show')
            window.CurrentID = $(this).parents("tr").find('.Action').attr("data-id");
            var Employee_ID = $(this).parents("tr").find('.Action').attr("Employee_id");
            var Currency_ID = $(this).parents("tr").find('.Action').attr("currency_id");
            var Currency_Name = $(this).parents("tr").find('.Action').attr("currency_name");
            var amount = $(this).parents('tr').find('td:eq(2)').html();

            $('.modal-header > h5 span').empty().html(update_child);
//console.log(Employee_ID)
            $('#EmployeeChildren_ID').val(Employee_ID)
            $('#EmployeeChildren_ID').attr('data-select-name', $(this).parents('tr').find('td:eq(0)').html())
            build_select2($("#EmployeeChildren_ID"), "xhr/employeeDependantForChildSearch");
            $('#EmployeeChildren_ID').attr('disabled', 'disabled').change();
            $("#Amount_Date").val($(this).parents('tr').find('td:eq(1)').html());
            $("#amount_children").val(parseFloat(amount.replace(/\L.L.|\$|\,/g, '')));
            $("#note").val($(this).parents('tr').find('td:eq(3)').html());
            $("#Child_Currency_ID").val(Currency_ID);
            $("#CurrencyDropDown button span").html(Currency_Name);
        });
        $("#addEmployeeChildren").on("click", function () {
            var Data = {
                note: $('#note').val(),
                amount_children: $("#amount_children").val(),
                Employee_ID: $("#EmployeeChildren_ID").val(),
                Currency_ID: $("#Child_Currency_ID").val(),
                Amount_Date: $("#Amount_Date").val(),
                Entry_ID: window.CurrentID,
                data_old: []
            };

            $('#children_list_table tbody tr').each(function () {
                var me = $(this);
                var data_row = {
                    Child_ID: me.attr('data-id'),
                    child_check: me.find('.child_check').is(':checked') ? 1 : 0,
                    child_name: $.trim(me.find('.child_name').html()),
                    child_dob: $.trim(me.find('.child_dob').html()),
                    child_age: $.trim(me.find('.child_age').html()),
                    child_school: $.trim(me.find('.child_school').html()),
                    school_value: $.trim(me.find('.child_school_value').html()),
                    school_type: me.attr('data-school-type')

                };

                Data.data_old.push(data_row);
            });
            $.ajax({
                url: "HRMAjax/viewEmployeeChildRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseText == 'success') {
                        $("#EmployeeChildrenisBusy").remove();
                        $("#EmployeeChildrenValidationAlert").attr("class", " alert alert-success").empty().html(Submitted_Successfully);
                        setTimeout(function () {
                            $("#add_EmployeeChildren").modal('hide')
                        }, 1500)
                        setTimeout(function () {
                            $("#EmployeeChildrenValidationAlert").addClass('hidden');
                        }, 1500)
                        RebuildDataTable(title, [0, 1, 2, 3, 4], 'HRMAjax/viewEmployeeChildRequest')
                    } else {
                        $("#EmployeeChildrenValidationAlert").attr("class", " alert alert-danger").empty().html(v1.responseText == 'error_exist' ? Data_Exists : Failed_Submit);
                    }
                    $("#EmployeeChildrenisBusy").addClass('hidden');
                }
            });
        });
        $("#add_EmployeeChildren input").on("keyup", function () {
            DisableSubmitEmployee()
        })

    });
    $("#CloseEmployeeChildren").on("click", function () {
        //        $("#add_EmployeeChildren input").val("");
        $("#add_EmployeeChildren").modal("hide");
    })
    function DisableSubmitEmployee() {
        var IsValidated = true;
        if ($("#amount_children").val() == "" || ($("#amount_children").val()).match(/^\s*?([\d]+(\.\d+)?|\.\d{1,2})\s*$/) == null) {
            IsValidated = false;
        }
        if (!IsValidated) {
            $("#addEmployeeChildren").addClass("disabled")
        } else {
            $("#addEmployeeChildren").removeClass("disabled")
        }
    }
</script>
