<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
</style>
<div class="modal fade stick-up " id="add_EmployeeDependent" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <div id="EmployeeDependentValidationAlert"></div>
                <div style="color:white !important;" id="warning_dependant_alert" class="alert alert-warning"><?php echo CommonLanguage::getMessage('warning_dependant_alert') ?></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_dependent_emp'); ?>  </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="input-group">
                                <span class="input-group-addon complete">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="hidden" required  class="full-width EmployeeDependant_ID" name="Employee_ID" id="EmployeeDependant_ID"/>
                            </div>
                        </div>
                        <!-- <div class="col-md-12" style="margin-left:10px;">
<input type="hidden" id='Wife_Works'/>
<div class="col-md-12 hidden">
<div class="radio radio-success" id="Wife_Works">
<input type="radio" checked="" value="1"  name="Wife_Works" id="Wife_Work">
<label for="Wife_Work">< ?php print CommonLanguage::getMessage('wife_works'); ?> </label>
<input type="radio"  value="0" name="Wife_Works"  id="Wife_notWorks" >
<label for="Wife_notWorks">< ?php print CommonLanguage::getMessage('no_wife_works'); ?></label>
<input type="radio" value="3"  name="Wife_Works" id="Husband_foreignNationality">
<label for="Husband_foreignNationality">< ?php print CommonLanguage::getMessage('husband_foreign_nationality'); ?></label>
<input type="radio"  value="2" name="Wife_Works"  id="Other" >
<label for="Other">< ?php print CommonLanguage::getMessage('others'); ?> </label>
</div>
</div>
</div>-->
                    </div>
                    <div class="row m-t-10">
                        <!--                        <div class="col-md-12 Number_Of_Children hidden" >
                                                    <div class="input-group ">
                                                        <span class="input-group-addon complete">
                                                            <i class="fa fa-users"></i>
                                                        </span>
                                                        <input type="number" autocomplete="off" min="0" placeholder="<?php print CommonLanguage::getMessage('nb_of_child'); ?>" id="Number_Of_Children" name="Number_Of_Children" class="form-control full-width " required>
                                                    </div>
                                                </div>
                                                <br>-->
                        <div id="ChildrenListContainer" class="form-group">
                            <div class="row" style="margin:5px 0; display:flex;">
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_name'); ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_dob'); ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('gender'); ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('marital_status'); ?></label></div>
                                <div style="width:5%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('study') . ' ?'; ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_school'); ?></label></div>
                                <div style="width:10%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_school_type'); ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_class'); ?></label></div>
                                <div style="width:10%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('self_nssf'); ?></label></div>
                                <div style="width:8%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('special_prob') . ' ?'; ?></label></div>
                                <div style="width:14%;margin-right:1%;"><label><?php echo CommonLanguage::getMessage('child_prob'); ?></label></div>
                                <div style="width:7%;margin-right:1%;"></div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="CloseEmployeeDependent"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                <button class="btn btn-success" id="SubmitEmployeeDependent"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
            </div>
            <?php echo Forms::ModalLoader('EmployeeDependentIsBusy'); ?>
        </div>
    </div>
</div>
<div class="child-row row hidden"  style="margin:5px 0; display:flex;">
    <div style="width:8%;margin-right:1%;">
        <input  type="text"  class="form-control AddChildName"  />
    </div>
    <div style="width:8%;margin-right:1%;">
        <input type="text"  class="form-control ChildDateOfBirth" />
    </div>
    <div style="width:8%;margin-right:1%;">
        <select class="gender_id full-width" data-init-plugin="select2">
            <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
            <option value="1"><?php echo CommonLanguage::getMessage('male') ?></option>
            <option value="2"><?php echo CommonLanguage::getMessage('female') ?></option>
        </select>  
    </div>
    <div style="width:8%;margin-right:1%;">
        <select class="marital_status_id full-width" data-init-plugin="select2">
            <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
            <option value="1"><?php echo CommonLanguage::getMessage('single') ?></option>
            <option value="2"><?php echo CommonLanguage::getMessage('married') ?></option>
            <option value="3"><?php echo CommonLanguage::getMessage('divorced') ?></option>
            <option value="4"><?php echo CommonLanguage::getMessage('widow') ?></option>
        </select> 
    </div>
    <div style="width:5%;margin-right:1%;">
        <input  type="checkbox"  class="is_study"  />
    </div>
    <div style="width:8%;margin-right:1%;">
        <input  type="text"  class="form-control AddChildSchool"  />
    </div>
    <div style="width:10%;margin-right:1%;">
        <input type="hidden" class="full-width school_type" />
    </div>
    <div style="width:8%;margin-right:1%;">
        <input  type="text"  class="form-control ChildClass"  />
    </div>
    <div style="width:8%;margin-right:1%;">
        <input  type="checkbox"  class="self_nssf"  />
    </div>
    <div style="width:8%;margin-right:1%;">
        <input  type="checkbox"  class="has_special_problem"  />
    </div>
    <div style="width:14%;margin-right:1%;">
        <input  type="text" class="form-control ChildProblem"  />
    </div>
    <div class="Add" style="width:7%;margin-right:1%;">
        <span class="fa fa-plus m-l-5 " style="color:#70e0d5;cursor:pointer"></span>
        <span class="fa fa-minus m-l-5 " style="color:#ed9421;cursor:pointer;"></span>
    </div>
</div>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            AddLang = <?php echo json_encode(CommonLanguage::getMessage('Add')); ?>,
            CancelLang = <?php echo json_encode(CommonLanguage::getMessage('Close')); ?>,
            child_name = <?php echo json_encode(CommonLanguage::getMessage('child_name')); ?>,
            child_dob = <?php echo json_encode(CommonLanguage::getMessage('child_dob')); ?>,
            select = <?php echo json_encode(CommonLanguage::getMessage('select')); ?>,
            child_school = <?php echo json_encode(CommonLanguage::getMessage('child_school')); ?>;
    child_class = <?php echo json_encode(CommonLanguage::getMessage('child_class')); ?>,
            child_prob = <?php echo json_encode(CommonLanguage::getMessage('child_prob')); ?>;
    $(function () {
        build_select2($("input.school_type"), "xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child")
        build_select2($('.EmployeeDependant_ID'), 'xhr/employeeDependantSearch');
//        $("#Number_Of_Children").on("input", function () {
//            buildItems();
//        });
        $("#ChildrenListContainer").on("click", " .fa-plus", function (e) {
            var Parent = $(this).parents(".ChildrenItemDiv"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            NewItem.removeAttr("child_id")
            NewItem.find(".select2-container").remove()
            $('input[type=checkbox]', NewItem).prop('checked', false)
            build_select2($("input.school_type", NewItem), ("xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child"))
            $(".select2-container", NewItem).show()
            $('.ChildDateOfBirth', NewItem).datepicker({autoclose: true})
            $(".gender_id,.marital_status_id", NewItem).show().select2();
//            $('#Number_Of_Children').val($('#ChildrenListContainer .ChildrenItemDiv').length)
        })
        $("#ChildrenListContainer").on("click", ".fa-minus", function (e) {
            var tr = $(this).closest(".ChildrenItemDiv");
            if ($("#ChildrenListContainer .ChildrenItemDiv").length > 1)
                tr.empty().remove();
            if ($("#ChildrenListContainer .ChildrenItemDiv").length == 1) {
                tr.find('input').val('')
                tr.find('input[type=checkbox]').prop("checked", false)
                $("input.school_type", tr).attr('data-select-name', '')
                $("input.marital_status_id", tr).select2()
                $("input.gender_id ", tr).select2()
                build_select2($("input.school_type", tr), ("xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child"))

            }
//            $('#Number_Of_Children').val($('#ChildrenListContainer .ChildrenItemDiv').length)
        });
        $("#add_EmployeeDependent").on("hidden.bs.modal", function () {
            $('#ChildrenListContainer .ChildrenItemDiv').remove();
            $('#ChildrenListContainer').addClass("hidden");
            $('#EmployeeDependant_ID').attr('disabled', false);
        })
        $("#EmployeeDependant_ID").on('change', function () {
            var emp_id = $(this).val(), new_items = '';
            $.ajax({
                url: "HRMAjax/viewEmployeeDependantChild?id=" + emp_id,
                dataType: 'JSON',
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        var Data = (v1.responseJSON);
                        if (Data.length > 0) {
//                            $("#Number_Of_Children").attr('readonly', true);
//                            $("#Number_Of_Children").val(Data[0]['Number_Of_Children']);
                            buildItems(Data);
                        } else {
//                            $("#Number_Of_Children").attr('readonly', false);
//                            $("#Number_Of_Children").val('');
                            buildItems();
                        }
                    }
                }
            })
        })
        $("#SubmitEmployeeDependent").on("click", function () {
            $("#EmployeeDependentIsBusy").removeClass('hidden');
            var is_empty = false;
            var Data = {
                // Wife_Works: $('#Wife_Works').val(),
                Number_Of_Children: $('#ChildrenListContainer .ChildrenItemDiv').length,
                Employee_ID: $("#EmployeeDependant_ID").val(),
                Childreen: []
            }
            if ( Data.Employee_ID == '')
                is_empty = true;
            if (!is_empty && $('#ChildrenListContainer .ChildrenItemDiv').length > 0) {
                $(".ChildrenItemDiv").each(function () {
                    var me = $(this);
                    var data_row = {
                        Child_ID: me.attr('Child_ID'),
                        ChildName: me.find('.AddChildName').val(),
                        ChildDob: me.find('.ChildDateOfBirth').val(),
                        ChildSchool: me.find('.AddChildSchool').val(),
                        ChildClass: me.find('.ChildClass').val(),
                        ChildProblem: me.find('.ChildProblem').val(),
                        has_special_problem: me.find('.has_special_problem').is(":checked") ? 1 : 0,
                        is_study: me.find('.is_study').is(":checked") ? 1 : 0,
                        is_self_nssf: me.find('.self_nssf').is(":checked") ? 1 : 0,
                        gender_id: me.find('select.gender_id').val(),
                        marital_status_id: me.find('select.marital_status_id').val(),
                        ChildSchoolType: me.find('input.school_type').val()    //must specify tag select since there is another class for the select2
                    };
                    if (data_row.ChildName == '' || data_row.ChildDob == '')
                        is_empty = true;
                    Data.Childreen.push(data_row);
                });
            }
            //
            if (is_empty) {
                $("#EmployeeDependentValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                $("#EmployeeDependentIsBusy").addClass('hidden');
                return false;
            }
            $.ajax({
                url: "HRMAjax/addEmployeeDependentRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success' && v1.responseText == 'success') {
                        $("#EmployeeDependentValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);
                        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4, 5], 'HRMAjax/viewEmployeeDependantRequest', {}, '#tableWithSearch', [0, 1, 8]);
                        setTimeout(function () {
                            $("#add_EmployeeDependent").modal('hide')
                            $("#EmployeeDependentValidationAlert").addClass('hidden')
//                            $('#ChildrenListContainer .ChildrenItemDiv').remove();
                        }, 1500);
                    } else {
                        $("#EmployeeDependentValidationAlert").attr("class", "alert alert-danger").empty().html(Failed_Submit);
                    }
                    $("#EmployeeDependentIsBusy").addClass('hidden');
                }
            });
        });
//        $("#add_EmployeeDependent").on("keyup", "input", function () {
//            DisableSubmit()
//        });
        $("#CloseEmployeeDependent").on("click", function () {
            $("#add_EmployeeDependent").modal("hide");
        })
    })

//    function DisableSubmit() {
//        var IsValidated = true;
//        if ($("#Number_Of_Children").val() == "") {
//            IsValidated = false;
//        }
//        if (!IsValidated) {
//            $("#SubmitEmployeeDependent").addClass("disabled")
//        } else {
//            $("#SubmitEmployeeDependent").removeClass("disabled")
//        }
//    }
    function buildItems(Data) {
        $('#ChildrenListContainer').removeClass("hidden")
//        console.log(Data)
        $('#ChildrenListContainer .ChildrenItemDiv').remove();

        if (Data == undefined) {
            var new_item = $(".child-row").clone();
            new_item.removeClass("child-row hidden").addClass("ChildrenItemDiv")
            new_item.find(".select2-container").remove();
            $("select.gender_id", new_item).val('').select2()
            $("select.marital_status_id", new_item).val('').select2()
            $("input.school_type", new_item).val("").attr("data-select-name", "")
            build_select2($("input.school_type", new_item), "xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child")
            $(".select2-container", new_item).show();
            $('#ChildrenListContainer').append(new_item)
            $('.ChildDateOfBirth', new_item).datepicker({autoclose: true});
            return;
        }
//        var all_items = parseFloat($('#Number_Of_Children').val());
//        if (isNaN(all_items))
//            all_items = 0;
//        if (Data.length == 0) {
//            $('#ChildrenListContainer .ChildrenItemDiv').remove();
//            return;
//        }
//        var exist_items_no = $('#ChildrenListContainer .ChildrenItemDiv').length;
//        var new_items_no = all_items - exist_items_no;
//        if (new_items_no <= 0) {
//            for (var x = 0; x < Math.abs(new_items_no); x++)
//                $('#ChildrenListContainer .ChildrenItemDiv').eq(exist_items_no - x - 1).remove();
//        } else {
//        $('#ChildrenListContainer .ChildrenItemDiv:gt(0)').remove()
//            var all_items = parseFloat($('#Number_Of_Children').val());
        $('#ChildrenListContainer .ChildrenItemDiv').removeClass('NewChildrenDiv');
        for (var x = 0; x < Data.length; x++) {
//            console.log(school_type_name)
            var child_name_val = Data !== undefined && Data[x]['child_name'] !== undefined ? Data[x]['child_name'] : '',
                    Child_ID = Data !== undefined && Data[x]['Child_ID'] !== undefined ? Data[x]['Child_ID'] : '',
                    child_dob_val = Data !== undefined && Data[x]['child_dob'] !== undefined ? Data[x]['child_dob'] : '',
                    child_school_val = Data !== undefined && Data[x]['child_school'] !== undefined ? Data[x]['child_school'] : '',
                    school_type_val = Data !== undefined && Data[x]['school_type'] !== undefined ? Data[x]['school_type'] : '',
                    school_type_name = Data !== undefined && Data[x]['school_type_name'] !== null && Data[x]['school_type_name'] !== undefined ? Data[x]['school_type_name'] : '',
                    child_class_val = Data !== undefined && Data[x]['child_class'] !== undefined ? Data[x]['child_class'] : '',
                    gender_val = Data !== undefined && Data[x]['gender_id'] !== undefined ? Data[x]['gender_id'] : '',
                    marital_val = Data !== undefined && Data[x]['marital_status_id'] !== undefined ? Data[x]['marital_status_id'] : '',
                    is_study = Data !== undefined && Data[x]['is_study'] !== undefined ? Data[x]['is_study'] : 0,
                    is_self_nssf = Data !== undefined && Data[x]['is_self_nssf'] !== undefined ? Data[x]['is_self_nssf'] : 0,
                    has_special_problem = Data !== undefined && Data[x]['has_special_problem'] !== undefined ? Data[x]['has_special_problem'] : 0,
                    child_prob_val = Data !== undefined && Data[x]['child_problem'] !== undefined ? Data[x]['child_problem'] : '';
            var new_item = $(".child-row").clone();
            new_item.removeClass("child-row hidden").addClass("ChildrenItemDiv").removeAttr("child_id")
//            console.log(school_type_name)
            new_item.find(".select2-container").remove();
            new_item.attr("Child_ID", Child_ID)
            $(".AddChildName", new_item).val(child_name_val)
            $("select.gender_id", new_item).val(gender_val).select2()
            $("select.marital_status_id", new_item).val(marital_val).select2()
            $(".ChildDateOfBirth", new_item).val(child_dob_val)
            $(".AddChildSchool", new_item).val(child_school_val)
            $(".ChildClass", new_item).val(child_class_val)
            $(".ChildProblem", new_item).val(child_prob_val)
            $(".is_study", new_item).prop('checked', is_study == 1 ? true : false)
            $(".self_nssf", new_item).prop('checked', is_self_nssf == 1 ? true : false)
            $(".has_special_problem", new_item).prop('checked', has_special_problem == 1 ? true : false)
            $("input.school_type", new_item).val(school_type_val).attr("data-select-name", school_type_name)
            build_select2($("input.school_type", new_item), "xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child")
            $(".select2-container", new_item).show();
            $('#ChildrenListContainer').append(new_item)
            $('.ChildDateOfBirth', new_item).datepicker({autoclose: true});

        }
//        }

    }
//    function buildItems(Data) {
//        $('#ChildrenListContainer').removeClass("hidden")
//        if (Data !== undefined)
//            $('#ChildrenListContainer .ChildrenItemDiv').remove();
//        var all_items = parseFloat($('#Number_Of_Children').val());
//        if (isNaN(all_items))
//            all_items = 0;
//        if (all_items == 0) {
//            $('#ChildrenListContainer .ChildrenItemDiv').remove();
//            return;
//        }
//        var exist_items_no = $('#ChildrenListContainer .ChildrenItemDiv').length;
//        var new_items_no = all_items - exist_items_no;
//        if (new_items_no <= 0) {
//            for (var x = 0; x < Math.abs(new_items_no); x++)
//                $('#ChildrenListContainer .ChildrenItemDiv').eq(exist_items_no - x - 1).remove();
//        } else {
////        $('#ChildrenListContainer .ChildrenItemDiv:gt(0)').remove()
//            var all_items = parseFloat($('#Number_Of_Children').val());
//            $('#ChildrenListContainer .ChildrenItemDiv').removeClass('NewChildrenDiv');
//            for (var x = 0; x < new_items_no; x++) {
////            console.log(school_type_name)
//                var child_name_val = Data !== undefined && Data[x]['child_name'] !== undefined ? Data[x]['child_name'] : '',
//                        Child_ID = Data !== undefined && Data[x]['Child_ID'] !== undefined ? Data[x]['Child_ID'] : '',
//                        child_dob_val = Data !== undefined && Data[x]['child_dob'] !== undefined ? Data[x]['child_dob'] : '',
//                        child_school_val = Data !== undefined && Data[x]['child_school'] !== undefined ? Data[x]['child_school'] : '',
//                        school_type_val = Data !== undefined && Data[x]['school_type'] !== undefined ? Data[x]['school_type'] : '',
//                        school_type_name = Data !== undefined && Data[x]['school_type_name'] !== null && Data[x]['school_type_name'] !== undefined ? Data[x]['school_type_name'] : '',
//                        child_class_val = Data !== undefined && Data[x]['child_class'] !== undefined ? Data[x]['child_class'] : '',
//                        gender_val = Data !== undefined && Data[x]['gender_id'] !== undefined ? Data[x]['gender_id'] : '',
//                        marital_val = Data !== undefined && Data[x]['marital_status_id'] !== undefined ? Data[x]['marital_status_id'] : '',
//                        is_study = Data !== undefined && Data[x]['is_study'] !== undefined ? Data[x]['is_study'] : 0,
//                        is_self_nssf = Data !== undefined && Data[x]['is_self_nssf'] !== undefined ? Data[x]['is_self_nssf'] : 0,
//                        has_special_problem = Data !== undefined && Data[x]['has_special_problem'] !== undefined ? Data[x]['has_special_problem'] : 0,
//                        child_prob_val = Data !== undefined && Data[x]['child_problem'] !== undefined ? Data[x]['child_problem'] : '';
//                var new_item = $(".child-row").clone();
//                new_item.removeClass("child-row hidden").addClass("ChildrenItemDiv")
////            console.log(school_type_name)
//                new_item.find(".select2-container").remove();
//                new_item.attr("Child_ID", Child_ID)
//                $(".AddChildName", new_item).val(child_name_val)
//                $("select.gender_id", new_item).val(gender_val).select2()
//                $("select.marital_status_id", new_item).val(marital_val).select2()
//                $(".ChildDateOfBirth", new_item).val(child_dob_val)
//                $(".AddChildSchool", new_item).val(child_school_val)
//                $(".ChildClass", new_item).val(child_class_val)
//                $(".ChildProblem", new_item).val(child_prob_val)
//                $(".is_study", new_item).prop('checked', is_study == 1 ? true : false)
//                $(".self_nssf", new_item).prop('checked', is_self_nssf == 1 ? true : false)
//                $(".has_special_problem", new_item).prop('checked', has_special_problem == 1 ? true : false)
//                $("input.school_type", new_item).val(school_type_val).attr("data-select-name", school_type_name)
//                build_select2($("input.school_type", new_item), "xhr/CommonSearch?col_id=school_id&col_name=school_type&table=tbl_school_child")
//                $(".select2-container", new_item).show();
//                $('#ChildrenListContainer').append(new_item)
//                $('.ChildDateOfBirth', new_item).datepicker({autoclose: true});
//
//            }
//        }
//
//    }
</script>
