<div class="modal fade stick-up " id="Add_Pro" 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('ProDisabled'); ?>
            <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('add_pro'); ?> </span></h5>
                <div id="ProSettingSuccess" class="hidden"></div>
                <input type='hidden' id="IsEdit"  value='0'>
            </div>
            <div class="modal-body">
                <form id="ProSettingPostForm" method="POST" onsubmit="return false">
                    <div class="col-md-12">
                        <div class="row">

                            <div class="col-md-6">
                                <label><?php print CommonLanguage::getMessage('pro_name'); ?></label><span class="red-star">*</span>

                                <input type="text"  placeholder="<?php print CommonLanguage::getMessage('pro_name'); ?>" class='pro_name form-control' name="pro_name"  required />
                            </div>
                            <div class="col-md-6">
                                <label><?php print CommonLanguage::getMessage('Date'); ?></label><span class="red-star">*</span>
                                <input type="text"  placeholder="<?php print CommonLanguage::getMessage('Date'); ?>" value="<?php echo $today ?>" class='pro_date form-control' name="pro_date"  required />
                            </div>

                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">

                            <div class="col-md-6">
                                <label><?php print CommonLanguage::getMessage('location'); ?></label><span class="red-star">*</span>
                                <input type="text"  placeholder="<?php print CommonLanguage::getMessage('location'); ?>" class='pro_loc form-control' name="pro_loc"  required />
                            </div>
                            <div class="col-md-6">
                                <label><?php print CommonLanguage::getMessage('description'); ?></label><span class="red-star">*</span>
                                <input type="text"  placeholder="<?php print CommonLanguage::getMessage('description'); ?>" class='pro_desc form-control' name="pro_desc"  required />
                            </div>



                        </div>
                    </div>


                    <div id="ProSetting" class="row">


                        <div class="col-md-12" style="margin:10px 0px;padding:5px 0px;background:#ddd;" > 
                            <div class="col-md-12 m-b-10"   > 
                                <div class="col-md-5">
                                    <label><?php print CommonLanguage::getMessage('volunteers'); ?></label>
                                </div>
                                <div class="col-md-5">
                                    <label><?php print CommonLanguage::getMessage('hours'); ?></label>
                                </div>
                            </div>

                            <div class="col-md-12 Setting_clone hidden m-b-10"  style="" > 
                                <div class="col-md-5">
                                    <!--<label><?php print CommonLanguage::getMessage('volunteers'); ?></label>-->
                                    <input type="hidden"  placeholder="<?php print CommonLanguage::getMessage('volunteers'); ?>" class='full-width vlnt_id' name="vlnt_id"  required />
                                </div>
                                <div class="col-md-5">
                                    <!--<label><?php print CommonLanguage::getMessage('hours'); ?></label>-->
                                    <input type="number" placeholder="<?php print CommonLanguage::getMessage('hour_working'); ?>" min='0' class='vlnt_hours form-control' name="vlnt_hours"  required />
                                </div>
                                <div class="col-md-2">
                                    <span class="fa fa-plus-circle" style="color: #4c0870;margin-left: 10px;margin-top:12px;cursor: pointer;font-size: 16px;"></span><span class="fa fa-minus-circle" style="color: #ed9421;margin-left: 5px;margin-top:12px;cursor: pointer;font-size: 16px;display:none"></span>
                                </div>
                            </div>
                        </div>


                        <div  class="col-md-12">
                            <label><?php echo CommonLanguage::getMessage('pro_link') ?></label>
                            <textarea class="form-control pro_link" placeholder="<?php echo CommonLanguage::getMessage('pro_link') ?>" name="pro_link" style="overflow: hidden; word-wrap: break-word; resize:vertical "></textarea>
                        </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="ClosePro"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                                <button class="btn btn-success " id="SubmitPro"  > <?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 () {
        $('.pro_date').datepicker({autoclose: true});
//        build_select2($(".vlnt_id"), "xhr/CommonSearch?col_id=volunteer_id&col_name=Volunteer_Name&table=view_volunteers");
        $("#ProSetting").on("click", ".Setting_clone .fa-plus-circle, .Setting .fa-plus-circle", function (e) {
            var clone_item = $('#ProSetting .Setting_clone');
            var Parent = $(this).closest(".Setting").length ? $(this).closest(".Setting") : clone_item;
            var NewItem = clone_item.clone(false).insertAfter(Parent).addClass('Setting').removeClass('Setting_clone hidden');
//            NewItem.find("input").val('');
//            $(".select2-container", NewItem).empty().remove();
//            NewItem.find(".vlnt_id").show();
//            NewItem.find(".vlnt_id").attr('data-select-name', '').val('');
            build_select2(NewItem.find(".vlnt_id"), "xhr/CommonSearch?col_id=volunteer_id&col_name=Volunteer_Name&table=view_volunteers");
            if ($("#ProSetting .Setting").length > 1)
                $(".Setting .fa-minus-circle").css("display", "");
        });
        $("#ProSetting").on("click", ".Setting  .fa-minus-circle", function (e) {
            $(this).closest(".Setting").empty().remove();
            if ($("#ProSetting .Setting").length <= 1)
                $(".Setting .fa-minus-circle").css("display", "none");
        });
        $('.floatingContainer').on('click', function () {
            $("#ProSetting .Setting").remove();
            $("#ProSetting .Setting_clone .fa-plus-circle").click();
//            $(".select2-container").empty().remove();
//            $(".vlnt_id").show();
//            $(".vlnt_id").attr('data-select-name', '').val('');
//            build_select2($(".vlnt_id"), "xhr/CommonSearch?col_id=volunteer_id&col_name=Volunteer_Name&table=view_volunteers");
        });
        $("#SubmitPro").on("click", function () {
            var Data = {
                pro_name: $('.pro_name').val(),
                pro_desc: $('.pro_desc').val(),
                pro_date: $('.pro_date').val(),
                pro_loc: $('.pro_loc').val(),
                pro_link: $('.pro_link').val(),
                pro_dtl: [],
                IsEdit: $("#IsEdit").val()
            }
            $("#ProSetting .Setting").each(function () {
                var me = $(this);
                if (me.find('input.vlnt_id').val() != '' && me.find('.vlnt_hours').val() != '') {
                    Data.pro_dtl.push({
                        vlnt_id: me.find('input.vlnt_id').val(),
                        vlnt_hours: me.find('.vlnt_hours').val()
                    });
                }

            });
            if (Data.pro_dtl.length == 0 || Data.pro_name == '' || Data.pro_desc == '' || Data.pro_date == '' || Data.pro_loc == '') {
                $("#ProSettingSuccess").attr("class", "alert alert-danger").html(Required_Fields)
                return;
            }
            if (($("#IsEdit").val() == 1)) {
                Data.pro_id = Cuurent_ToDelete;
            }

            $("#ProDisabled").removeClass('hidden');
            $.ajax({
                url: "HRMAjax/addProSetting",
                method: "POST",
                data: Data,
                dataType: 'Json',
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        if (v1.responseJSON[0] == "ok") {
                            $("#ProSettingSuccess").attr("class", "alert alert-success").html(Submitted_Successfully);
                            RebuildDataTable(title, [0, 1, 2, 3, 4], 'HRMAjax/viewProListRequest');
//                            $(".Setting:gt(0),#ProSetting  .Setting .fa-minus-circle").remove();
                            $("#ProSetting .Setting").remove();
                            setTimeout(function () {
                                $("#Add_Pro").modal('hide'), $("#ProSettingSuccess").addClass("hidden");
                            }, 800);
                        } else {
                            $("#ProSettingSuccess").attr("class", "alert alert-danger").html(v1.responseJSON[1]);
                        }
                        $("#ProDisabled").addClass('hidden');
                    } else {
                        $("#ProSettingSuccess").attr("class", "alert alert-danger").html(Failed_Submit);
                        $(document.body).animate({scrollTop: 0}, 800)
                        $("#ProDisabled").addClass('hidden');
                    }
                }
            });
            $("#IsEdit").val('0');

        });

        $("#ClosePro").on("click", function () {
            $("#Add_Pro").modal('hide');
            $("#IsEdit").val('0');
        });
    });
</script>