
<style type="text/css">
    .line{
        border-left:1px solid #4c0870;
        border-left-style: dashed;
    }
    .pic {
        text-align: center;
        font-size:10em;
        width: 210px;
        height: 210px;
        margin-left: 26px;
        margin-top: 37px;
        overflow: hidden;
    }
    .DropDownForForms > .dropdown-menu{
        width:100%;
        height:200px;
        max-height:200px;
        overflow-y:scroll;
    }
    .DropDownForForms > .dropdown-menu{
        height:auto;
        cursor: pointer;
        overflow-y:auto;
    }
    .DropDownForForms > button > input{
        position: absolute;
        left:5;
        top: 0;
        width:90%;
        cursor: pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .dropdown-menu>li>a{
        color: #000 !Important;
        opacity: 1;
    }
</style>
<!--<div id="AddJob" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:2099;display:none"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>-->
<!--<div class="container-fluid container-fixed-lg bg-white">
<?php echo Forms::ModalLoader('addJobLoader') ?>
    <div class="panel panel-transparent">
        <div class="panel-heading">
          
            <h5 class="bold"> <?php print CommonLanguage::getMessage('add_job'); ?></h5>
            <div id="AddJobAlert" ></div>-->
<div class="modal fade bs-example-modal-md " id="add_job" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog " style="width:70%;" >
        <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('add_job') ?></h4>
                <div id="AddJobAlert"></div>
            </div>
            <div class="modal-body">
                <form id="Job-form" method="POST" action="" onsubmit="return false">

                    <div class="col-md-12">
                        <div class="col-sm-12" id="JOb">
                            <div class="col-sm-6 form-group">
                                <div class="form-group  ">
                                    <label><?php print CommonLanguage::getMessage('job_name'); ?><span class="red-star">*</span></label>
                                    <input type="text"	name="Job_Name" id="Job_Name" class="form-control" placeholder="<?php print CommonLanguage::getMessage('job_name'); ?>">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group  ">
                                    <label><?php print CommonLanguage::getMessage('description'); ?></label>
                                    <input type="text"	name="Job_Description" id="Job_Description" class="form-control" placeholder="<?php print CommonLanguage::getMessage('Description'); ?>" >	
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12  form-group" >
                            <div class="col-sm-3">
                                <label> <?php print CommonLanguage::getMessage('paygrade'); ?> </label>
                            </div>
                            <div class="col-sm-3">
                                <label><?php print CommonLanguage::getMessage('paygrade_value'); ?></label>
                            </div> 
                            <div class="col-sm-4" >
                                <label> <?php print CommonLanguage::getMessage('currency'); ?> </label>
                            </div>
                            <div class="col-md-2 "></div>
                        </div>
                        <div id="PayGrade">
                            <div class="col-md-12 PayGradeClass form-group"  >
                                <div class="col-sm-3">
                                    <input type="text" name="Paygrade_Name" id="Paygrade_Name" class="form-control Paygrade_Name"	placeholder="<?php print CommonLanguage::getMessage('paygrade'); ?>">	
                                </div>
                                <div class="col-sm-3">
                                    <input type="number"  step="any" name="Paygrade_Value"  id="Paygrade_Value" class="form-control Paygrade_Value"	placeholder="<?php print CommonLanguage::getMessage('paygrade_value'); ?>"/>
                                </div>  
                                <div class="col-sm-4" >
                                    <!--<span onclick="addinput()" class="fa fa-plus-circle" style="margin-top: 10px; color: #40d9ca;float: right;margin-right: -14px;" ></span>-->
                                    <div class="input-group-btn DropDownForForms Closable" id="CurrencyDropDown">
                                        <button type="button" class="btn btn-success btn-block dropdown-toggle" name="Paygrade_Currency" data-toggle="dropdown" aria-expanded="false">
                                            <span class="currency-title"><strong ><?php print CommonLanguage::getMessage('Select_Currency'); ?></strong></span>
                                            <input type="hidden" value="" class="form-control ignore Paygrade_Currency" onkeyup="return false" onkeydown="return false" required/>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <?php echo($currency->GetLIListCurrency()); ?>
                                            <li class="divider"></li>
                                            <li><a class="LoadMore"><?php print CommonLanguage::getMessage('More'); ?>..</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-2 AddButtons">
                                    <span class="fa fa-plus-circle" style="color:#4c0870;margin-top:15px;margin-right:25px"></span>
                                    <span class="fa fa-minus-circle" style="color:#ed9421;margin-top:15px;"></span>
                                </div>
                            </div>
                        </div>
                        <div >
                            <div class="col-md-12">
                                <button id="toggle_absence" class="btn btn-success"><?php echo CommonLanguage::getMessage('manage_absence') ?></button>
                            </div>
                            <div id="absences" class="hidden">
                                <div class="col-md-12 form-group">
                                    <div class="col-md-6">
                                        <label><?php echo CommonLanguage::getMessage('absence_reason_name') ?></label>
                                    </div>
                                    <div class="col-md-6">
                                        <label><?php echo CommonLanguage::getMessage('days_nb') ?></label>
                                    </div>
                                </div>
                                <div class="col-md-12 abs-row m-b-10">
                                    <div class="col-md-6">
                                        <input type="text" readonly class="reason_name form-control"/>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number"  class="nb_days form-control" min="0"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                <div class="col-md-4 pull-right">  
                                        <button class=" btn btn-success btn-cons m-b-10 pull-right "  id="SubmitJob"> <span class="bold"><?php print CommonLanguage::getMessage('Save'); ?></span></button>
                                    </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="SubmitJob" style="width:auto"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
        </div>
    </div>
</div>
<!--        </div>
    </div>
</div>-->
<script>
    var PaygradeLang = <?php echo json_encode(CommonLanguage::getMessage('paygrade')); ?>,
            PaygradeValLang = <?php echo json_encode(CommonLanguage::getMessage('paygrade_value')); ?>,
            SelectLang = <?php echo json_encode(CommonLanguage::getMessage('Select_Currency')); ?>,
            MoreLang = <?php echo json_encode(CommonLanguage::getMessage('More')); ?>,
            Data_Exists = <?php echo json_encode(CommonLanguage::getMessage('Data_Exists')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            select_currency = <?php echo json_encode(CommonLanguage::getMessage('Select_Currency')); ?>,
            FailedToSubmit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            paygrade_check = <?php echo json_encode(CommonLanguage::getMessage('paygrade_check')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
    $(function () {
        $("#toggle_absence").on("click", function () {
            $("#absences").toggleClass("hidden")
        })
        $("#PayGrade").on("click", ".AddButtons > .fa-plus-circle", function (e) {
            $(".AddButtons > .fa-minus-circle").css("display", "")
            var Parent = $(this).parents(".PayGradeClass"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input:not(.Paygrade_Currency)").val('');
            NewItem.attr('data-id','0');
        });
        $("#PayGrade").on("click", ".AddButtons > .fa-minus-circle", function (e) {
            if ($(".PayGradeClass").length == 1) {
                $(".PayGradeClass input").val("")
            } else {
                $(this).closest(".PayGradeClass").empty().remove();
            }
        });

        $("#SubmitJob").on("click", function () {
            if ($("#Job_Name").val() == '') {
                $("#AddJobAlert").attr("class", "alert alert-danger").html(Required_Fields)
                $(document.body).animate({scrollTop: 0}, 800)
                return;
            }
            var Data = {
                Job_Name: $("#Job_Name").val(),
                Job_ID: IDToEdit,
                Job_Description: $("#Job_Description").val(),
                PayGrade: [],
                absences: []
            };
            $("#PayGrade .PayGradeClass").each(function (e) {
                var me = $(this);
                if (me.find(".Paygrade_Name").val() != '' && me.find(".Paygrade_Value").val() != '' && me.find(".Paygrade_Currency").val() != '') {
                    Data.PayGrade.push({
                        Paygrade_ID: me.attr("data-id") ? me.attr("data-id") : 0,
                        Paygrade_Name: me.find(".Paygrade_Name").val(),
                        Paygrade_Value: me.find(".Paygrade_Value").val(),
                        Paygrade_Currency: me.find(".Paygrade_Currency").val(),
                    })
                }
            })
            $(".abs-row").each(function (e) {
                var me = $(this);
                if (me.attr("data-id") != undefined && me.attr("data-id")!='') {
                    Data.absences.push({
                        absence_reason_id: me.attr("data-id"),
                        nb_days: me.find("input.nb_days").val()
                    })
                }
            })
            $("#addJobLoader").removeClass('hidden')
            $.ajax({
                url: IsEdit ? "HRMAjax/ManagePaygradeRequest" : "HRMAjax/addJobRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == "success" && v1.responseText == "success") {
                        $("#AddJobAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                        setTimeout(function () {
                            $("#add_job").modal("hide")
                            $("#AddJobAlert").hide();
                        }, 1000)
                        RebuildDataTable(title, [0, 1], 'HRMAjax/viewJobsRequest', '')
                    } else if (v1.responseText == "exists") {
                        $("#AddJobAlert").attr("class", "alert alert-danger").html(Data_Exists)
                    } else {
                        $("#AddJobAlert").attr("class", "alert alert-danger").html(FailedToSubmit)
                    }
                    $(document.body).animate({scrollTop: 0}, 800)
                    $("#addJobLoader").addClass('hidden')
                }
            })
        })

        $("#add_job").on("hidden.bs.modal", function () {
            $("#Job-form input").val("")
            $(".PayGradeClass:gt(0)").empty().remove()
            $(".currency-title").text(select_currency)
        })
    })
</script>