{!! Form::open(['url'=>'updateUserAttendance']) !!}
<div class="content">
    <div class="row">
        <div class="col-md-7">
            <div class="col-md-12">

                <div class="form-group col-md-4" style="margin-bottom: 4px;">
                    <label class="control-label">IN</label>
                    <input type="text" name="in_new[]" class="form-control timepicker">
                </div>
                <div class="form-group col-md-4" style="margin-bottom: 4px;">
                    <label class="control-label">OUT</label>
                    <input type="text" name="out_new[]" class="form-control timepicker">
                </div>
                <div class="form-group col-md-4">
                    <label class="control-label" style="display:block; ">&nbsp;</label>
                    <a class="btn btn-success btn-fill" id="addMore">More <i class="fa fa-plus" aria-hidden="true"></i></a>
                </div>
                <div class="addMoreDiv">

                </div>




                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>Sl</th>
                        <th>IN</th>
                        <th>OUT</th>
                        <th>Duration</th>
                        <th>OUT Message</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php $i=0; ?>
                    @forelse($result as $value)
                        <tr id="tr_{{$value->id}}">
                            <td>{{++$i}}</td>
                            <td><input type="time" value="{{$value->in_time}}" class="form-control" name="old_in[]"></td>
                            <td><input type="time" value="{{$value->out_time}}" class="form-control" name="old_out[]"></td>
                            <td>{{Helper::secondsToTime($value->time_calc)}}</td>
                            <td>{{$value->out_comment}}</td>
                            <td>
                                <a title="Delete" onclick="deleteConfirm('deleteAttendance',{{$value->id}})" href="javascript:void(0)"
                                   class="btn btn-simple btn-danger btn-icon remove"><i
                                            class="fa fa-times"></i></a>
                            </td>
                            <input type="hidden" name="in_out_id[]" value="{{$value->id}}">
                            <input type="hidden" name="max_row" value="{{$i}}">
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center">No records found</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>

            </div>
        </div>
        <div class="col-md-5">
            @if(count($task)>0)
                <label>Task: </label>
                <div>
                    {!! $task->details !!}
                </div>
                <label>Comment: </label>
                <div>
                    {{ $task->comment }}
                </div>
            @else
                <h4>No Records found </h4>
            @endif
        </div>

    </div>
</div>

<div class="footer">
    <input type="hidden" name="userId" value="{{$userId}}">
    <input type="hidden" name="date" value="{{$date}}">
    <button type="submit" class="btn btn-info btn-fill pull-right">UPDATE</button>
    <button type="button" class="btn btn-default btn-simple pull-right" data-dismiss="modal">Close</button>
    <div class="clearfix"></div>
</div>
{!! Form::close() !!}
<script type="text/javascript">
    $(document).ready(function () {
        $(".addMoreDiv").empty();
        $(".modal-title").text("Attendance Details :: {{$date}}");
        $(".modal-dialog").css({'width':'60%'});
    });
    $('.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'
        }
    });

    $("#addMore").click(function(){
        var i='test';
        $(".addMoreDiv").append('<div class='+i+'><div class="form-group col-md-4" style="margin-bottom: 4px;">'
            +'<label class="control-label">IN</label>'
            +'<input type="text" name="in_new[]" class="form-control timepicker2">'
            +'</div>'
            +'<div class="form-group col-md-4" style="margin-bottom: 4px;">'
            +'<label class="control-label">OUT</label>'
            +'<input type="text" name="out_new[]" class="form-control timepicker2">'
            +'</div>'
            +'<div class="form-group col-md-4">'
            +'<label class="control-label" style="display: block;">&nbsp;</label>'
            +'<a class="btn btn-danger btn-fill" onclick="remove(this)">Remove</a>'
            +'</div></div>');

        $('.timepicker2').datetimepicker({
            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'
            }
        });
    });
    function remove(ele) {
        $(ele).closest('.test').remove();
    }
    function deleteAttendance(id) {
        //IF need ajax based so plz active it
        /*$.ajax({
            url: "deleteAttendance'"+id,
            async: false,
            dataType: 'json',
            success: function (data) {
                if(data.success){
                    location.reload();
                }else{
                    swal("Something went wrong");
                }
            }
        });*/
    }

</script>
