<script type="text/javascript">
    $(".modal-title").text("Add Rota");
    $(".modal-dialog").addClass("modal-md");
</script>
{!! Form::open(['url'=>'shift-assign','id'=>'myForm','novalidate'=>'']) !!}
{!! Form::hidden('date',$date) !!}
{!! Form::hidden('user_id[]',$userId) !!}
{!! Form::hidden('user_group_id',$userGroupId) !!}

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label class="control-label">From</label>
            <input class="form-control timepicker" name="from_time" required="true"  type="text"  placeholder="09:00:00"/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label class="control-label">To</label>
            <input class="form-control timepicker" name="to_time" required="true"  type="text"  placeholder="18:00:00"/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label class="control-label">Break</label>
            <input class="form-control" name="break"  type="number"  placeholder="Break in minutes"/>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label">Note</label>
            <textarea class="form-control" name="note"></textarea>
        </div>
        <div class="pull-right">
            <button class="btn btn-info btn-fill">SAVE</button>
            <button class="btn btn-danger btn-fill" data-dismiss="modal">CLOSE</button>
        </div>
    </div>

    <div class="col-md-12">
        <br>
        <div class="alert alert-info" id="successMessage" style="display:none;">
            <span><b class="successMessage"></b></span>
        </div>
    </div>
    <div class="col-md-12">
        <div class="alert alert-danger" id="errorMessage" style="display:none;">
            <span><b class="errorMessage"></b></span>
        </div>
    </div>
</div>
{!! Form::close() !!}

<script>
    $().ready(function() {
        $('#myForm').validate({
            submitHandler: function () {
                ajaxSubmit();
            }
        });
    });
    function ajaxSubmit(){
        $.ajax({
            url: $("#myForm").attr('action'),
            data: $("#myForm").serialize(),
            method: 'POST',
            dataType: 'json',
            success: function(data) {
                $("#successMessage").hide();
                $("#errorMessage").hide();

                if(data.success) {
                    $("#successMessage").show(100);
                    $(".successMessage").text(data.success);
                }
                if(data.error){
                    $("#errorMessage").show(100);
                    $(".errorMessage").text(data.error);
                }
                $("#modal").on("hidden.bs.modal", function () {
                    window.location.href="{{URL::to('rota-setup')}}/{{$userGroupId}}"
                });

            }
        });
    }
    $('.timepicker').datetimepicker({
//          format: 'H:mm',    // use this format if you want the 24hours timepicker
        format: 'h:mm A',    //use this format if you want the 12hours timpiecker with AM/PM toggle
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        }
    });
</script>
