<script type="text/javascript">
    $(".modal-title").text("Edit | {{ $rota->user->first_name }} : {{ $rota->date }}");
    $(".modal-dialog").addClass("modal-md");
</script>
{!! Form::open(['url'=>'shift-edit-modal','id'=>'myForm','novalidate'=>'']) !!}
{!! Form::hidden('rotaId',$rota->id) !!}

<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" value="{{$rota->from_time}}"  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" value="{{$rota->to_time}}"  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" value="{{$rota->break}}"  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">{{$rota->note}}</textarea>
        </div>
        <div class="pull-right">
            <button class="btn btn-info btn-fill" type="submit">UPDATE</button>
            <button class="btn btn-danger btn-fill" data-dismiss="modal">CLOSE</button>
        </div>
    </div>

    <br><br>

    <div class="col-md-12">
        <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="existsMessage" style="display:none;">
            <span><b class="existsMessage"></b></span>
        </div>
    </div>
</div>
{!! Form::close() !!}

<script>
    $().ready(function() {
        $('#myForm').validate({
        });
    });

    $('.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>
