<script type="text/javascript">
    $(".modal-title").text("Add Bulk Rota");
    $(".modal-dialog").addClass("modal-lg");
</script>
{!! Form::open(['url'=>'shift-assign','id'=>'myForm','novalidate'=>'']) !!}
{!! Form::hidden('date',$date) !!}
{!! Form::hidden('user_group_id',$userGroup->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"  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">
        <button type="submit" class="btn btn-info btn-fill center-block" id="submitRota">CREATE ROTA</button> <br>
    </div>
    <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 class="col-md-12 userGroupWiseUser">
        <div class="alert" style="background-color:#d9d9d9; color: #000;">
            <p class="text-center">
                <input type="checkbox" checked id="selectAll">
                <label for="selectAll"> {{$userGroup->title}}</label>
            </p>

        </div>
        @foreach($users as $user)
        <div class="col-md-3">
            <div class="form-group">
                <input type="checkbox" checked="checked" data-toggle="checkbox" value="{{$user->id}}" name="user_id[]">{{$user->first_name." ".$user->last_name}}
            </div>
        </div>
        @endforeach
    </div>

</div>
{!! Form::close() !!}

<script>

    $().ready(function() {
        $("#selectAll").change(function () {
            $(".userGroupWiseUser").find('input:checkbox').prop('checked', $(this).prop("checked"));
        });

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

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


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

