<?php if ($IsEdit && empty($shift_details)) { ?>
    <div class="alert alert-danger" role="alert">
        <button class="close" data-dismiss="alert"></button>
        <strong>Danger: </strong>you can not edit this shift! 
        <br>
        This shift is not available.
    </div>
    <?php die();
}
?>


<style type="text/css">
    /*
    .input-group-addon.complete {
    background-color:#4c0870;
    color: #ffffff;
    }
    */
    #OverTimeTable thead tr th {
        color:#555;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    #OverTimeTable tbody tr td input{
        width:100%;
        margin:0;
        border: 1px solid rgba(0,0,0,0.02);
        background-color:#e5e5e5;
    }
    #OverTimeTable tbody tr td {
        border:0;
        padding:3px 1px;
        position:relative;
    }
    #OverTimeTable tbody tr:first-child td{
        padding-top:10px;
    }
    #InvoiceDiscountInput{
        display: inline-block;
        width: 40px;
        padding: 3px;
        line-height: 20px;
        background: rgb(250, 250, 250);
        min-height: 12px;
        text-align: center;
        height: 25px;
        font-size: 12px;
        top: -2px;
        position: relative;
        margin: 0 3px;
    }
    #OverTimeTable .Hint{
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
        bottom: 2px;
        right: 4px;
        color: rgb(153, 153, 153);   
    }
    #OverTimeTable .TotalTD{
        width: auto;
        display: inline-block;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    #OverTimeTable .Disc{
        width:50px;
    }
    #OverTimeTable input.wrong{
        border: 1px solid rgba(255, 0, 0, 0.2);
        background: rgba(255, 0, 0, 0.05);
    }
    .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{
        position:relative;
        z-index:999;
    }
    .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;
    }
    .Disabled{
        cursor:default;
        opacity:0.5;
    }
    #AdvanceValue{
        width: 102px;
        display: inline-block;
    }
    .datepicker thead tr .dow {
        color:#4c0870!important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870!important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870!important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870 !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870!important;
    }
    .datepicker table tr td span:hover {
        background-color: #4c0870!important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .input-group-addon 
    {
        background-color:#4c0870 !important;
        color:#fff;
    }
    form .row [class*='col-']:first-child {
        padding-left: 7px;
        padding-right: 7px;
    }   
</style>
<!--< ?php echo "<pre>";die(print_r($shift_details));?>-->
<div class="container-fluid container-fixed-lg bg-white" >
    <div class="panel panel-transparent">
        <div class="panel-heading">
<?php echo Forms::ModalLoader('AddShiftIsBusy') ?>
            <div class="modal-header clearfix text-left" >
                <h5><span class="semi-bold"><?php echo CommonLanguage::getMessage($IsEdit ? "edit_shift" : "add_shift"); ?>  </span></h5>

            </div>
            <div class="modal-body">
                <div id="AddShiftValidationAlert"></div>
                <form id="AddShiftPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" style="margin-left:5px;">
                            <div class="col-md-2">
                                <label><?php echo CommonLanguage::getMessage('shift_type') ?></label>
                                <select id="shift_type" class="full-width" data-init-plugin="select2">
                                    <option value="fx"><?php echo CommonLanguage::getMessage('fixed_shift') ?></option>
                                    <option value="hrm"><?php echo CommonLanguage::getMessage('hrs_month') ?></option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12" style="margin-left:5px;">

                            <div class="col-md-6 form-group">
                                <label><?php print CommonLanguage::getMessage('shift_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('shift_name'); ?>" id="Shift_Name" name="Shift_Name" class="form-control " required>
                                </div>
                            </div>
                            <div class="col-md-6 form-group" style="display:grid;">
                                <label><?php echo CommonLanguage::getMessage('round_bfr_post') ?></label>
                                <select  id="round_bfr_post" name="round_bfr_post" data-init-plugin="select2">
                                    <option value="0"><?php echo CommonLanguage::getMessage('select') ?></option>
                                    <option value="1"><?php echo CommonLanguage::getMessage('before') ?></option>
                                    <option value="2"><?php echo CommonLanguage::getMessage('after') ?></option>
                                    <option value="3"><?php echo CommonLanguage::getMessage('before_after') ?></option>
                                </select>
                            </div>        

                        </div>
                        <br><br>
                        <div id="fx" class="shift_types">
<?php for ($i = 0; $i < count($days); $i++) { ?>

                                <div class="col-md-12 WorkDays" style="margin-left:4px;" >
                                    <div class="col-md-12 text-left Work_ID">
                                        <div class="col-md-12 text-left">
                                            <input type="checkbox" name="WorkingDate" value="<?php echo $days[$i]['Working_Day_ID'] ?>" id="<?php echo $days[$i]['Working_Day_ID'] ?>">
                                            <label for="<?php echo $days[$i]['Working_Day_ID'] ?>"><?php echo $days[$i]['Working_Day_Name_Arabic'] . ' / ' . $days[$i]['Working_Day_Name'] ?></label>
                                        </div>
                                        <div class="col-md-2 form-group" >
                                            <label><?php print CommonLanguage::getMessage('From'); ?></label><span class="red-star">*</span>
                                            <div class="input-group ">
                                                <span class="input-group-addon complete">
                                                    <i class="fa fa-users"></i>
                                                </span>
                                                <input data-id="<?php echo $days[$i]['Working_Day_ID'] ?>" disabled type="text"   data-format="hh:mm:ss" name="Shift_From" placeholder="<?php print CommonLanguage::getMessage('From'); ?>"   class="form-control timepicker Shift_From">
                                            </div>
                                        </div>
                                        <div class="col-md-2 form-group" >
                                            <label><?php print CommonLanguage::getMessage('allow_min'); ?></label><span class="red-star">*</span>
                                            <div class="input-group ">
                                                <span class="input-group-addon complete">
                                                    <i class="fa fa-users"></i>
                                                </span>
                                                <input data-id="<?php echo $days[$i]['Working_Day_ID'] ?>"  type="number" min="0" name="round_in" disabled   class="form-control  round_in">
                                            </div>
                                        </div>
                                        <div class="col-md-2 form-group">
                                            <label><?php print CommonLanguage::getMessage('To'); ?></label><span class="red-star">*</span>
                                            <div class="input-group ">
                                                <span class="input-group-addon complete">
                                                    <i class="fa fa-users"></i>
                                                </span>
                                                <input data-id="<?php echo $days[$i]['Working_Day_ID'] ?>" type="text" disabled     data-format="hh:mm:ss"   name="Shift_To" placeholder="<?php print CommonLanguage::getMessage('To'); ?>" class="form-control timepicker  Shift_To">
                                            </div>
                                        </div>
                                        <div class="col-md-2 form-group" >
                                            <label><?php print CommonLanguage::getMessage('allow_min'); ?></label><span class="red-star">*</span>
                                            <div class="input-group ">
                                                <span class="input-group-addon complete">
                                                    <i class="fa fa-users"></i>
                                                </span>
                                                <input data-id="<?php echo $days[$i]['Working_Day_ID'] ?>"  type="number" min="0" name="round_out" disabled   class="form-control  round_out">
                                            </div>
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <label><?php print CommonLanguage::getMessage('duration'); ?></label>
                                            <div class="input-group ">
                                                <span class="input-group-addon complete">
                                                    <i class="fa fa-users"></i>
                                                </span>
                                                <input  data-id="<?php echo $days[$i]['Working_Day_ID'] ?>" type="text" value="00:00"  data-format="hh:mm:ss" placeholder="<?php print CommonLanguage::getMessage('duration'); ?>" disabled name="Shift_Duration" class="form-control Shift_Duration">
                                            </div>
                                        </div>
                                    </div>
                                </div>

<?php } ?>

                        </div>
                        <div id="hrm" class="shift_types hidden">
                            <div class="col-md-12" style="margin-left:5px;">

                                <div class="col-md-2 form-group">
                                    <label><?php print CommonLanguage::getMessage('avg_hrs'); ?></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('avg_hrs'); ?>" id="avg_hrs" name="avg_hrs" class="form-control " required>
                                    </div>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label><?php print CommonLanguage::getMessage('avg_days'); ?>&nbsp;<i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('avg_days_tooltip') ?>"></i></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('avg_days'); ?>" id="avg_days" name="avg_days" class="form-control " required>
                                    </div>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label><?php print CommonLanguage::getMessage('max_hrs_per_day'); ?>&nbsp;<i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('max_hrs_per_day_tooltip') ?>"></i></label>
                                    <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('max_hrs_per_day'); ?>" id="max_hrs_per_day" name="max_hrs_per_day" class="form-control " >
                                    </div>
                                </div>
                                <div class="col-md-2 form-group">
                                    <label><?php print CommonLanguage::getMessage('avg_hrs_per_day'); ?>&nbsp;<i class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('avg_hrs_per_day_tooltip') ?>"></i></label>
                                    <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('avg_hrs_per_day'); ?>" id="avg_hrs_per_day" name="avg_hrs_per_day" class="form-control " >
                                    </div>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label><?php print CommonLanguage::getMessage('unit_time'); ?></label><span class="red-star">*</span>
                                    <div class="input-group ">
                                        <span class="input-group-addon complete">
                                            <i class="fa fa-users"></i>
                                        </span>
                                        <select id="unit_time" class="full-width" data-init-plugin="select2">
                                            <option value=""><?php echo CommonLanguage::getMessage('select') ?></option>
                                            <option value="1"><?php echo CommonLanguage::getMessage('month') ?></option>
                                            <option value="2"><?php echo CommonLanguage::getMessage('week') ?></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2" style="margin-top:25px;">
                                    <button id="adjust_times" class="btn btn-success hidden"><?php echo CommonLanguage::getMessage('adjust') ?></button>
                                </div>
                            </div>

                            <div id="hrm-div-elements" class="hidden">
                                <div class="col-md-12 form-group">
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('hrs_month') ?><span class="red-star">*</span></label>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('nb_days') ?><span class="red-star">*</span></label>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('avg_hrs_per_day') ?></label>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('month') ?><span class="red-star">*</span></label>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('year') ?></label>
                                    </div>

                                </div>
                                <div class="hrm-element">
                                    <div class="col-md-12  m-b-10">
                                        <div class="col-md-2">
                                            <input class="nb_hrs form-control" type="number" step="any" />
                                        </div>
                                        <div class="col-md-2">
                                            <input class="nb_days form-control" type="number" step="any" />
                                        </div>
                                        <div class="col-md-2">
                                            <input class="avg_hrs_day form-control" type="number" step="any" />
                                        </div>
                                        <div class="col-md-2">
                                            <input class="month_date form-control" type="text" data-date-format="mm" value="" />
                                        </div>
                                        <div class="col-md-2">
                                            <input class="year_date form-control" type="text" data-date-format="yyyy" value="" />
                                        </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 id="hrm-rounds">
                                <div class="col-md-12">
                                    <div class="col-md-2 form-group" >
                                        <label><?php print CommonLanguage::getMessage('From'); ?></label>
                                    </div>
                                    <div class="col-md-2 form-group" >
                                        <label><?php print CommonLanguage::getMessage('allow_min'); ?></label>
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <label><?php print CommonLanguage::getMessage('To'); ?></label>
                                    </div>
                                    <div class="col-md-2 form-group" >
                                        <label><?php print CommonLanguage::getMessage('allow_min'); ?></label>
                                    </div>
                                </div>
                                <div class="col-md-12 round-item">
                                    <div class="col-md-2 form-group" >
                                        <input   type="text"   data-format="hh:mm:ss" name="Shift_From" placeholder="<?php print CommonLanguage::getMessage('From'); ?>"   class="form-control timepicker Shift_From">
                                    </div>
                                    <div class="col-md-2 form-group" >
                                        <input   type="number" min="0" name="round_in"    class="form-control  round_in">
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <input  type="text"      data-format="hh:mm:ss"   name="Shift_To" placeholder="<?php print CommonLanguage::getMessage('To'); ?>" class="form-control timepicker  Shift_To">
                                    </div>
                                    <div class="col-md-2 form-group" >
                                        <input   type="number" min="0" name="round_out"    class="form-control  round_out">
                                    </div>
                                    <div class="col-md-2 add-round">
                                        <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>
                    <br><br>
                    <div class="col-md-12 " style="margin-left:10px;margin-top:10px">
                        <div class="col-md-4 pull-right">
                            <button class="btn btn-success " id="SubmitAddShift"  > <?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')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            shift_days_required = <?php echo json_encode(CommonLanguage::getMessage('shift_days_required')); ?>;
    var IsEdit = <?php echo $IsEdit ? "true" : "false" ?>, CurrentID,
            shift_data = <?php echo json_encode($shift_details) ?>;
    $(function () {
//        new Switchery($("#round_bfr_post").get(0), {color: $.Pages.getColor("success")})
//        console.log(shift_data)
        $("#shift_type").on("change", function () {
            $(".shift_types").addClass("hidden")
            $("#" + $(this).val()).removeClass("hidden")
        })
        $(".month_date").datepicker({autoclose: true,
            viewMode: "months",
            minViewMode: "months"})
        $(".year_date").datepicker({autoclose: true,
            viewMode: "years",
            minViewMode: "years"})
        $('.Shift_From,.Shift_To').timepicker({autoclose: true})
        $('.Shift_Duration').timepicker({
            showMeridian: false,
            maxHours: 60
        })
        $("#unit_time").on("change", function () {
            if ($(this).val() == 1)
                $("#adjust_times").removeClass("hidden")
            else
                $("#adjust_times,#hrm-div-elements").addClass("hidden")
        })
        $("#adjust_times").on("click", function () {
            $("#hrm-div-elements").removeClass("hidden")
        })
        $("#hrm-rounds").on("click", " .fa-plus-circle", function (e) {
            $("#hrm-rounds  .fa-minus-circle").css("display", "inline-block")
            var Parent = $(this).parents(".round-item"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            NewItem.find('.Shift_From,.Shift_To').timepicker({autoclose: true})


        })
        $("#hrm-rounds").on("click", ".fa-minus-circle", function (e) {
            if ($(".round-item").length == 1) {
                $(".round-item input").val("");
            } else {
                $(this).closest(".round-item").empty().remove();
            }
        })
        $("#hrm-div-elements").on("click", " .fa-plus-circle", function (e) {
            $(".hrm-element  .fa-minus-circle").css("display", "inline-block")
            var Parent = $(this).parents(".hrm-element"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            NewItem.find("input.month_date").datepicker({autoclose: true,
                viewMode: "months",
                minViewMode: "months"});
            NewItem.find("input.year_date").datepicker({autoclose: true,
                viewMode: "years",
                minViewMode: "years"});


        })
        $("#hrm-div-elements").on("click", ".fa-minus-circle", function (e) {
            if ($(".hrm-element").length == 1) {
                $(".hrm-element input").val("");
                $("#hrm-div-elements").addClass("hidden")
            } else {
                $(this).closest(".hrm-element").empty().remove();
            }
        })
        if (IsEdit) {
            $('#shift_type').val(shift_data['shift_type']).select2().trigger("change")
            $('#Shift_Name').val(shift_data['Shift_Name'])
            $("#round_bfr_post").val(shift_data['round_bfr_post']).select2()
            CurrentID = shift_data['Shift_ID'];
            var data = shift_data['Work_Day'];
            if (shift_data['shift_type'] == 'hrm') {
                $("#avg_hrs").val(shift_data['avg_hrs'])
                $("#avg_days").val(shift_data['avg_days'])
                $("#max_hrs_per_day").val(shift_data['max_hrs_per_day'])
                $("#avg_hrs_per_day").val(shift_data['avg_hrs_per_day'])
                $("#unit_time").val(shift_data['unit_time']).select2()
//                alert(shift_data['round_bfr_post'])
//                if (shift_data['round_bfr_post'] == 1){

//                        $("#round_bfr_post").trigger("click")
//                }
                if (shift_data['unit_time'] == 1)
                    $("#adjust_times").removeClass("hidden")
                if ('rounds' in shift_data && shift_data['rounds'].length > 0) {
                    for (var y = 0; y < shift_data['rounds'].length; y++) {
                        if (y == 0) {
                            $(".round-item:eq(0) input.Shift_From").val(('hr_in' in shift_data['rounds'][y]) ? tConvert(shift_data['rounds'][y]['hr_in']) : '')
                            $(".round-item:eq(0) input.Shift_To").val(('hr_out' in shift_data['rounds'][y]) ? tConvert(shift_data['rounds'][y]['hr_out']) : '')
                            $(".round-item:eq(0) input.round_in").val(shift_data['rounds'][y]['round_in'])
                            $(".round-item:eq(0) input.round_out").val(shift_data['rounds'][y]['round_out'])
                            if ('hr_in' in shift_data['rounds'][y])
                                $("input.Shift_From").timepicker({autoclose: true})
                            if ('hr_out' in shift_data['rounds'][y])
                                $("input.Shift_To").timepicker({autoclose: true})
//                            $('.Shift_From,.Shift_To').timepicker({autoclose: true})

                        } else {
//                            $("#hrm-rounds  .fa-minus-circle").css("display", "inline-block")
                            var Parent = $(".round-item:eq(0)"), NewItem = Parent.clone().insertAfter(Parent);
                            NewItem.find("input").val('');
                            NewItem.find("input.Shift_From").val(('hr_in' in shift_data['rounds'][y]) ? tConvert(shift_data['rounds'][y]['hr_in']) : '')
                            NewItem.find("input.Shift_To").val(('hr_out' in shift_data['rounds'][y]) ? tConvert(shift_data['rounds'][y]['hr_out']) : '')
                            NewItem.find("input.round_in").val(shift_data['rounds'][y]['round_in'])
                            NewItem.find("input.round_out").val(shift_data['rounds'][y]['round_out'])
                            if ('hr_in' in shift_data['rounds'][y])
                                NewItem.find('.Shift_From').timepicker({autoclose: true})
                            if ('hr_out' in shift_data['rounds'][y])
                                NewItem.find('.Shift_To').timepicker({autoclose: true})

                        }
                    }
                }
//                  var item = $(".round-item:eq(0)").clone();
//                        if (x == 0) {
//                            $(".round-item:eq(0)").find(".Shift_From").val(data[x]['month'])
//                            $(".round-item:eq(0)").find(".year_date").val(data[x]['year'] == 0 ? '' : data[x]['year'])
//                            $(".round-item:eq(0)").find(".nb_days").val(data[x]['nb_days'])
//                            $(".round-item:eq(0)").find(".nb_hrs").val(data[x]['nb_of_hours'])
//                        } else {
//                            item.find(".month_date").val(data[x]['month'])
//                            item.find(".year_date").val(data[x]['year'] == 0 ? '' : data[x]['year'])
//                            item.find(".nb_hrs").val(data[x]['nb_of_hours'])
//                            item.find(".nb_days").val(data[x]['nb_days'])
//                            item.find("input.month_date").datepicker({autoclose: true,
//                                viewMode: "months",
//                                minViewMode: "months"});
//                            item.find("input.year_date").datepicker({autoclose: true,
//                                viewMode: "years",
//                                minViewMode: "years"});
//                            item.appendTo($("#hrm-div-elements"))
//
//                        }

            }
//            console.log(data)
            if ('Work_Day' in shift_data && data != null) {
//                alert(1)
                for (var x = 0; x < data.length; x++) {
                    if (shift_data['shift_type'] == 'fx') {


                        var id = (data[x]['day_id']),
                                From_to = data[x]['Shift_From'],
                                Shift_to = data[x]['Shift_To'],
                                Shift_Duration = data[x]['Shift_Duration'];
                        $("input[id='" + id + "']").attr('checked', true)
                        $(".round_in[data-id='" + id + "']").val(data[x]['round_in'])
                        $(".round_out[data-id='" + id + "']").val(data[x]['round_out'])
                        $(".Shift_From[data-id='" + id + "']").val(From_to)
                        $(".Shift_To[data-id='" + id + "']").val(Shift_to)
                        $(".Shift_Duration[data-id='" + id + "']").val(Shift_Duration)
                        $("input[data-id='" + id + "']").removeAttr('disabled')

                    } else if (shift_data['shift_type'] == 'hrm') {
//                        alert()
                        if (data.length > 0)
                            $("#hrm-div-elements").removeClass("hidden")

                        var item = $(".hrm-element:eq(0)").clone();
                        if (x == 0) {
                            $(".hrm-element:eq(0)").find(".month_date").val(data[x]['month'])
                            $(".hrm-element:eq(0)").find(".year_date").val(data[x]['year'] == 0 ? '' : data[x]['year'])
                            $(".hrm-element:eq(0)").find(".nb_days").val(data[x]['nb_days'])
                            $(".hrm-element:eq(0)").find(".avg_hrs_day").val(data[x]['avg_hrs_day'])
                            $(".hrm-element:eq(0)").find(".nb_hrs").val(data[x]['nb_of_hours'])
                        } else {
                            item.find(".month_date").val(data[x]['month'])
                            item.find(".year_date").val(data[x]['year'] == 0 ? '' : data[x]['year'])
                            item.find(".nb_hrs").val(data[x]['nb_of_hours'])
                            item.find(".nb_days").val(data[x]['nb_days'])
                            item.find(".avg_hrs_day").val(data[x]['avg_hrs_day'])
                            item.find("input.month_date").datepicker({autoclose: true,
                                viewMode: "months",
                                minViewMode: "months"});
                            item.find("input.year_date").datepicker({autoclose: true,
                                viewMode: "years",
                                minViewMode: "years"});
                            item.appendTo($("#hrm-div-elements"))

                        }
                    }
                }
            }
        }
        $(".Work_ID input[name='WorkingDate']").on('click', function () {
            var id = ($(this).attr('id'))
            if ($(this).is(':checked')) {
                $("input[data-id='" + id + "']").removeAttr('disabled')
            } else {
                $("input[data-id='" + id + "']").attr('disabled', 'diasbled')
            }
        })

        $('.Shift_From,.Shift_To').on("change", function () {
            var id = $(this).attr('data-id');
            CalculateTimeFromTo(id)
        })
        $("#SubmitAddShift").on("click", function () {
            var validate = true;
            var days = [], rounds = [];
            if ($("#shift_type").val() == 'fx') {
                if ($(".Shift_To").val() == '' || $(".Shift_From").val() == '' || $("#Shift_Name").val() == '') {
                    $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                    return;
                }

                $('#AddShiftPostForm input[type="checkbox"]:checked').each(function () {
                    var id = $(this).attr("id");
                    days.push({
                        day_id: id,
                        Shift_From: $(".Shift_From[data-id='" + id + "']").val(),
                        Shift_To: $(".Shift_To[data-id='" + id + "']").val(),
                        Shift_Duration: $(".Shift_Duration[data-id='" + id + "']").val(),
                        round_in: $(".round_in[data-id='" + id + "']").val(),
                        round_out: $(".round_out[data-id='" + id + "']").val(),
                    })
                    if ($(".round_in[data-id='" + id + "']").val() != '' || $(".round_out[data-id='" + id + "']").val() != '') {
                        rounds.push({
                            round_in: $(".round_in[data-id='" + id + "']").val(),
                            round_out: $(".round_out[data-id='" + id + "']").val(),
                            time_in: $(".Shift_From[data-id='" + id + "']").val(),
                            time_out: $(".Shift_To[data-id='" + id + "']").val(),
                            work_day_id: id
                        })
                    }
                })
                if (days.length == 0) {
                    $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(shift_days_required);
                    return;
                }
            } else if ($("#shift_type").val() == 'hrm') {
                if ($("#Shift_Name").val() == '' || $("#unit_time").val() == '')
                    validate = false;
                if ($("#unit_time").val() == 1) {
                    $("#hrm-div-elements:not(.hidden) .hrm-element").each(function () {
                        if ($(this).find(".nb_hrs").val() != '' && $(this).find(".nb_hrs").val() != 0
                                && $(this).find(".month_date").val() != '' && $(this).find(".nb_dayes").val() != ''
                                && $(this).find(".nb_dayes").val() != 0) {
//                            validate = false;
                            days.push({
                                nb_hrs: $(this).find(".nb_hrs").val(),
                                month: $(this).find(".month_date").val(),
                                year: $(this).find(".year_date").val(),
                                nb_days: $(this).find(".nb_days").val(),
                                avg_hrs_day: $(this).find(".avg_hrs_day").val(),

                            })
                        } else {
                            validate = false;
                        }
                    })
                }

                $("#hrm-rounds .round-item").each(function () {
                    if ($(".round_in", $(this)).val() != '' || $(".round_out", $(this)).val() != '') {
                        rounds.push({
                            round_in: $(".round_in", $(this)).val(),
                            round_out: $(".round_out", $(this)).val(),
                            time_in: $(".Shift_From", $(this)).val(),
                            time_out: $(".Shift_To", $(this)).val()
                        })
                    }
                })
                if (!validate) {
                    $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(Required_Fields);
                    $(document.body).animate({scrollTop: 0}, 800)
                    return;
                }
            }

            $("#AddShiftIsBusy").removeClass('hidden');
            var Data = {
                Shift_Name: $("#Shift_Name").val(),
                round_bfr_post: $("#round_bfr_post").val(),
                shift_type: $("#shift_type").val(),
                avg_hrs: $("#avg_hrs").val(),
                avg_days: $("#avg_days").val(),
                max_hrs_per_day: $("#max_hrs_per_day").val(),
                avg_hrs_per_day: $("#avg_hrs_per_day").val(),
                unit_time: $("#unit_time").val(),
                Shift_Data: days,
                rounds: rounds
            };
            if (IsEdit)
                Data.Shift_ID = CurrentID;

            $.ajax({
                url: "HRMAjax/addShiftRequest",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        if (v1.responseText == 'ok') {
                            $("#AddShiftValidationAlert").attr("class", "alert alert-success").empty().html(Submitted_Successfully);

                        } else {
                            $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(v1.responseText);
                        }
                    } else {
                        $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(v1.responseText);
                    }
                    $("#AddShiftIsBusy").addClass('hidden');
                }
            });
        });
    })
    function CalculateTimeFromTo(id) {
        var X = new Date(Date.parse("1/1/2010 " + $(".Shift_To[data-id='" + id + "']").val()) - Date.parse("1/1/2010 " + $(".Shift_From[data-id='" + id + "']").val()))
        $(".Shift_Duration[data-id='" + id + "']").val(X.getUTCHours() + ":" + X.getUTCMinutes())
        $(".Shift_Duration[data-id='" + id + "']").attr('disabled', 'disabled')
    }
    function tConvert(time) {
        // Check correct time format and split into components
        time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

        if (time.length > 1) { // If time format correct
            time = time.slice(1);  // Remove full string match value
            time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
            time[0] = +time[0] % 12 || 12; // Adjust hours
        }
        return time.join(''); // return adjusted time or original string
    }
</script>