<?php if ($IsEdit && empty($shift_details)) { ?>
    <div class="alert alert-danger" role="alert">
        <button class="close" data-dismiss="alert"></button>
        <strong><?php print CommonLanguage::getMessage('danger'); ?>: </strong><?php print CommonLanguage::getMessage('you_can_not_edit_this_shift'); ?>
        <br>
        <?php print CommonLanguage::getMessage('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-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>
                        <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('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>
                                </div>

<?php } ?>

                        </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)
        
        $(".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
        })
        $("#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_Name').val(shift_data['Shift_Name'])
            CurrentID = shift_data['user_shifts_id'];
            var data = shift_data['Work_Day'];
//            console.log(data)
            if ('Work_Day' in shift_data && data != null) {
//                alert(1)
                for (var x = 0; x < data.length; x++) {
                     


                        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')

                    
                }
            }
        }
        $(".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_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 (days.length == 0) {
                    $("#AddShiftValidationAlert").attr("class", "alert alert-danger").empty().html(shift_days_required);
                    return;
                }

            $("#AddShiftIsBusy").removeClass('hidden');
            var Data = {
                Shift_Name: $("#Shift_Name").val(),
                Shift_Data: days
            };
            if (IsEdit)
                Data.Shift_ID = CurrentID;

            $.ajax({
                url: "SettingsAjax/add_Shift_Request",
                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');
                }
            });
            console.log(Data)
        });
    })
    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>