
<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" style="height:500px">
    <?php echo Forms::ModalLoader('addJobLoader') ?>
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <h5 class="bold"><?php print CommonLanguage::getMessage('edit_job'); ?></h5>
            <div id="AddJobAlert" ></div>
            <form id="Job-form" method="POST" action="" onsubmit="return false">
                <div class="col-md-4">
                    <i class="fa fa-briefcase fa-5x pic"></i>
                </div>
                <div class="col-md-8 line">
                    <div class="col-md-6" style="margin:20px">
                        <label><?php print CommonLanguage::getMessage('select_job'); ?></label>
                        <select required  name="Job_ID" id="Job_ID" style="color:#000;" placeholder="<?php print CommonLanguage::getMessage('job_name'); ?>" class="full-width " data-init-plugin="select2" >                     
                            <option></option>
                            <?php foreach ($jobnames as $job): ?>
                                <option value="<?php echo $job['Job_ID']; ?>"><?php echo $job['Job_Name']; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-sm-12" id="JOb">
                        <div class=" ">
                            <div class="col-sm-6">
                                <div class="form-group form-group-default ">
                                    <label><?php print CommonLanguage::getMessage('job_name'); ?><span class="red-star">*</span></label>
                                    <input type="text"	id="Job_Name" name="Job_Name" class="form-control"  >	
                                </div>
                            </div>    
                            <div class="col-sm-6">
                                <div class="form-group form-group-default ">
                                    <label><?php print CommonLanguage::getMessage('Description'); ?></label>
                                    <input type="text"	name="Job_Description" id="Job_Description" class="form-control" >	
                                </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>
</div>
<div class="col-md-12 PayGradeItem new hidden"   >
    <div class="col-sm-3">
        <div class="form-group form-group-default ">
            <label> <?php echo CommonLanguage::getMessage('paygrade') ?> </label>
            <input type="text"	name="Paygrade_Name"  class=" form-control Paygrade_Name"	>	
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group form-group-default ">
            <label><?php echo CommonLanguage::getMessage('paygrade_value') ?> </label>
            <input type="number"  step="any"	name="Paygrade_Value"    class=" form-control Paygrade_Value"/>
        </div>
    </div>  
    <div class="col-sm-6" style="margin-top: 10px;">
        <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><strong class="currency_label"><?php echo smc_session()['local_currency_name'] .' - '.smc_session()['local_currency_code'] ?></strong></span>
                <input type="hidden" value="<?php echo smc_session()['local_currency']?>" 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 echo CommonLanguage::getMessage('More') ?>..</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    var PaygradeLang = <?php echo json_encode(CommonLanguage::getMessage('paygrade')); ?>,
            PaygradeValLang = <?php echo json_encode(CommonLanguage::getMessage('paygrade_value')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            paygrade_check = <?php echo json_encode(CommonLanguage::getMessage('paygrade_check')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            MoreLang = <?php echo json_encode(CommonLanguage::getMessage('More')); ?>;
    $(function () {

        $("#Job_ID").on("change", function (e) {
            $(".PayGradeClass").remove()

            var data = {
                Job_Id: $("#Job_ID").val(),
                Job_Name: $("#Job_Name").val()
                        //                Job_Name: $("#select2-chosen-1").text()
            }

            $.ajax({
                url: "HRMAjax/ManagePaygradeRequest",
                data: data,
                dataType: "json",
                complete: function (v, vv) {
                    if (vv = "success") {
                        //full the info 
                        var results = (v.responseJSON);
                        $("#Job_Name").val(results['Job_Name']),
                                $("#Job_Description").val(results['Job_Description'])

                        // re-bulid the table
                        $(".PayGradeClass").empty().remove()
                        if (results['paygrade'].length > 0) {
                            for (var i = 0; i < (results['paygrade'].length); i++) {
                                
                                var item = $(".PayGradeItem").clone()
                                item.removeClass("PayGradeItem hidden").addClass("PayGradeClass")
                                item.find(".Paygrade_Name").val(results['paygrade'][i]['Paygrade_Name'])
                                item.find(".Paygrade_Value").val(results['paygrade'][i]['Paygrade_Value'])
                                item.attr("data-id",results['paygrade'][i]['Paygrade_ID'])
                                item.find(".Paygrade_Currency").val(results['paygrade'][i]['Currency_ID'])
                                item.find(".currency_label").html(results['paygrade'][i]['Currency_Name'] +' - '+results['paygrade'][i]['Currency_Name'])
                            }
                        } else {
                            var item = $(".PayGradeItem").clone()
                            item.removeClass("PayGradeItem hidden").addClass("PayGradeClass")
//                            console.log(item)

                        }
                        $("#JOb").append(item)

                    }
                }
            })
        })



        //post the data to the db (insert or update)
//        $("#AddJobAlert").hide();
        $("#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_ID: $("#Job_ID").val(),
                Job_Name: $("#Job_Name").val(),
                //              Job_Name        : $("#select2-chosen-1").text(),
                Job_Description: $("#Job_Description").val(),
                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(),
                    })
                }

            })
//            if (Data.PayGrade.length == 0) {
//                $("#AddJobAlert").attr("class", "alert alert-danger").html(paygrade_check)
//                $(document.body).animate({scrollTop: 0}, 800)
//                return;
//            }
            $.ajax({
                url: "HRMAjax/ManagePaygradeRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {

                    if (v2 == "success") {
//                        $("#AddJobAlert").show();
                        $("#AddJobAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                    } else {
                        $("#AddJobAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                    }

                    $(document.body).animate({scrollTop: 0}, 800)
                    $("#AddJob").hide();
                }
            })

        })

    })


    function addinput() {
        var paygrade = $(' <div class="col-md-12 PayGradeClass"  >' +
                ' <div class="col-sm-3"><div class="form-group form-group-default ">' +
                ' <label> Paygrade </label>' +
                ' <input type="text"	name="Paygrade_Name" class="form-control Paygrade_Name"	placeholder="Paygrade Name"></div></div>' +
                ' <div class="col-sm-3"><div class="form-group form-group-default "><label>Paygrade Value</label>' +
                ' <input type="number"  step="any"	name="Paygrade_Value" class="form-control Paygrade_Value"	placeholder="Paygrade Value"/></div></div>' +
                ' <div class="col-sm-6 RemoveRow" style="margin-top: 10px;">' +
                ' <span onclick="addinput()" class="fa fa-plus-circle" style="margin-top: 10px; color: #40d9ca;float: right;margin-right: -14px;" ></span>' +
                ' <span  class="fa fa-minus-circle remove" style="margin-top:10px;color:#ed9421;float:right; margin-right: -30px;" ></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><strong>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">More..</a></li> </ul></div></div></div>'
                )
        paygrade.insertAfter($("#JOb"));

    }
    $("#Job_Name").on("focus", function (e) {
        e.preventDefault()
    })

    $("body").on("click", ".remove", function (e) {
        $(this).parents("div .PayGradeClass ").remove();

    });

</script>