<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
</style>
<div class="modal fade stick-up " id="add_holiday" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-sm">
        <?php echo Forms::ModalLoader('AddHolidayIsBusy') ?>
        <div class="modal-content">
            <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_holiday'); ?> </span></h5>
            </div>
            <div class="modal-body">
                <div id="AddHolidayValidationAlert"></div>
                <form id="AddHolidayPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" style="margin-left:5px;">
                            <div class="col-md-12 form-group">
                                <label><?php print CommonLanguage::getMessage('Name'); ?></label><span class="red-star">*</span>
                                <div class="input-group ">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-users"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('Name'); ?>" id="Holiday_Name" name="Holiday_Name" class="form-control " required>
                                </div>
                            </div>
                        </div>
                        <br><br>
                        <div class="col-md-12"  >
                            <div class="col-md-12 form-group">
                                <label><?php print CommonLanguage::getMessage('holiday_reason'); ?></label><span class="red-star">*</span>
                                <div class="input-group ">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-users"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('holiday_reason'); ?>" id="Holiday_Reason" name="Holiday_Reason" class="form-control ">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12"  >
                            <div class="col-md-12 form-group" style="margin-left:-8px;margin-bottom:10px;">
                                <label><?php echo CommonLanguage::getMessage('Date') ?></label><span class="red-star">*</span>
                                <div class="input-group  col-md-12 " >
                                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" autocomplete="off">
                                </div> 
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="CloseAddHoliday"  data-dismiss="modal" > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                <button class="btn btn-success " id="SubmitAddHoliday"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
            </div>
        </div>
    </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')); ?>;
    var CurrentID;
    $(function () {
        $("input[name=From_To_Date]").daterangepicker({
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                    window.endDate = end.format("YYYY-MM-DD")
        });
        $("#tableWithSearch").on("click", ".Action .Edit", function (e) {
            $('#add_holiday').modal('show')
            window.CurrentID = $(this).parents("tr").find('.Action').attr("data-id");
            $('#myModalLabel').empty().html('Edit Holiday');
            $("#Holiday_Name").val($(this).parents('tr').find('span.holiday').attr("data-name"));
            $("#Holiday_Reason").val($(this).parents('tr').find('span.holiday').attr("data-reason"));
            $('#From_To_Date').data('daterangepicker').setStartDate($(this).parents('tr').find('span.holiday').attr("data-from"));
            $('#From_To_Date').data('daterangepicker').setEndDate($(this).parents('tr').find('span.holiday').attr("data-to"));
//            if ($(this).parents('tr').find('td:eq(3)').html() == '-- -- --') {
//                $("#From_To_Date").val($(this).parents('tr').find('td:eq(2)').html() + ' - ' + $(this).parents('tr').find('td:eq(2)').html());
//            } else {
//                $("#From_To_Date").val($(this).parents('tr').find('td:eq(2)').html() + ' - ' + $(this).parents('tr').find('td:eq(3)').html());
//            }
        })
        $("#SubmitAddHoliday").on("click", function () {
            if ($("#Holiday_Name").val() == '' || $("input[name=From_To_Date]").val() == '' || $("#Holiday_Reason").val() == '') {
                $("#AddHolidayValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                return;
            }
            var Data = {
                Holiday_Name: $("#Holiday_Name").val(),
                Holiday_Reason: $("#Holiday_Reason").val(),
                Holiday_From_Date: (window.startDate ? window.startDate : today),
                Holiday_To_Date: (window.endDate ? window.endDate : today),
                Holiday_ID: CurrentID
            };
            $.ajax({
                url: "HRMAjax/addHolidayRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        if (v1.responseText == 'success') {
                            $("#AddHolidayValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);
                            RebuildDataTable(title, [0, 1, 2, 3], 'HRMAjax/viewHolidayRequest')
                            setTimeout(function () {
                                $("#add_holiday").modal('hide')
                                $("#AddHolidayValidationAlert").addClass('hidden')
                            }, 1500)
                        } else {
                            $("#AddHolidayValidationAlert").attr("class", "alert alert-danger").empty().html(v1.responseText);
                        }
                    } else {
                        $("#AddHolidayValidationAlert").attr("class", "alert alert-danger").empty().html(Failed_Submit);
                    }
                    $("#AddHolidayIsBusy").addClass('hidden');
                }
            });
        });
        $("#add_holiday input").val("");
    })
</script>