
<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
    .hidden{
        display: none;
    }
</style>
<div class="modal fade stick-up " id="CreateMedicalTypeSetting" tabindex="-1" role="dialog" aria-hidden="true" style="    width: 50%;
     margin: 0 auto;">
     
    <div class="modal-dialog ">
        <div class="modal-content">
            <?php echo Forms::ModalLoader('MedicalTypeDisabled'); ?>
            <div class="modal-header clearfix text-left">
                <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('medical_type'); ?> </span></h5>
                <div id="MedicalTypeSettingSuccess" class="hidden"></div>
                <input type="hidden" id="IsEdit" class="hidden" value=0 />
            </div>
            <div class="modal-body">
                <form id="AddMedicalTypeSettingPostForm" method="POST" onsubmit="return false">
                    <div class="row" id="MedicalTypeSetting">
                        <div class="col-md-12 Setting" style="margin:8px;margin-bottom:10px;" > 
                            <div class="col-md-6">
                            <span class="red-star">*</span>
                                <input type="text"  placeholder="<?php print CommonLanguage::getMessage('medical_type_name'); ?>" class='medical_type_name form-control' name="medical_type_name"  required />
                            </div>
                            <div class="col-md-5">
                            <span class="red-star">*</span>
                                <input type="number" min='0' max='100' placeholder="<?php print CommonLanguage::getMessage('medical_type_percent'); ?>" min='0' class='medical_type_percent form-control' name="medical_type_percent"  required />
                            </div>
                            <span class="fa fa-plus-circle" style="color: #4c0870;margin-left: 10px;cursor: pointer;font-size: 16px;"></span><span class="fa fa-minus-circle" style="color: #ed9421;margin-left: 5px;cursor: pointer;font-size: 16px;display:none"></span>
                        </div>
                        <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="Close_Medical_Type"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                                <button class="btn btn-success " id="Submit_Medical_Type"  > <?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')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    $(function () {
        $("#MedicalTypeSetting").on("click", " .Setting >.fa-plus-circle", function (e) {
            $(".Setting >.fa-minus-circle").css("display", "");
            $(".Setting >.fa-minus-circle").removeClass("hidden");
            var Parent = $(this).closest(".Setting"), NewItem = Parent.clone(false).insertAfter(Parent);
            NewItem.find("input").val('');
        })
        $("#MedicalTypeSetting").on("click", ".Setting >.fa-minus-circle", function (e) {
            $(this).closest(".Setting").empty().remove();
            $("#MedicalTypeSetting .Setting").each(function () {
                $(".Setting>.fa-minus-circle", $(this).parent()).css({"display": $(".Setting", $(this).parent()).length <= 1 ? "none" : "inline-block"})
            })
        })
        $("#Submit_Medical_Type").on("click", function () {

            var Data = {
                Medical_Type: [],
                IsEdit: $("#IsEdit").val()
            }
            $("#MedicalTypeSetting > .Setting").each(function () {
                var me = $(this);
                if (me.find('.medical_type_name').val() != '' && me.find('.medical_type_percent').val() != '' && me.find('.medical_type_percent').val() >= 0 && me.find('.medical_type_percent').val() <= 100 ) {
                    Data.Medical_Type.push({
                        medical_type_name: me.find('.medical_type_name').val(),
                        medical_type_percent: me.find('.medical_type_percent').val()
                    })
                }
                if (($("#IsEdit").val() == 1)) {

                    Data.Medical_Type_ID = CurrentMedical_ToDelete
                }
            })
            if (Data.Medical_Type.length == 0) {
                $("#MedicalTypeSettingSuccess").attr("class", "alert alert-danger").html(Required_Fields)
                return;
            }
            
            $("#MedicalTypeDisabled").removeClass('hidden');
            $.ajax({
                url: "HRMAjax/addMedicalTypeSetting",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    console.log()
                    if (v2 == "success" && v1.responseText == "success") {
                        $("#MedicalTypeSettingSuccess").attr("class", "alert alert-success").html(Submitted_Successfully)
                        RebuildDataTable(title, [0], 'HRMAjax/MedicalSettingRequest', '', '#medical_setting_list');
                        $(".Setting:gt(0),#MedicalTypeSetting  .Setting >.fa-minus-circle").remove()
                        setTimeout(function () {
                            $("#CreateMedicalTypeSetting").modal('hide'), $("#MedicalTypeSettingSuccess").addClass("hidden")
                        }, 800);


                    } else {
                        $("#MedicalTypeSettingSuccess").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                    $(document.body).animate({scrollTop: 0}, 800)
                    $("#MedicalTypeDisabled").addClass('hidden');
                }
            })
            $("#IsEdit").val(0)
        })

        $("#Close_Medical_Type").on("click", function () {
            $("#CreateMedicalTypeSetting").modal('hide')
            $("#IsEdit").val(0)
            $(".Setting:gt(0),#MedicalTypeSetting  .Setting >.fa-minus-circle").addClass('hidden')
//            $("#MedicalTypeSetting  .Setting >.fa-plus-circle").css("display", "none")
        });
    });
</script>