{!! Form::open(array('route' => ['schedule.punch-clock-comment-save', $punchClock->id], 'method' => 'POST' ,'id' => 'ajaxModalSave','files' => true)) !!}
<div>
    <div class="error-msg1"></div>
    <div class="req-conv-wrap row">
        <div class="col-md-6">
            {!! Form::label('punch_clock_timing', __('schedule.shift_clock_timings')) !!}
            <div class="input-group">
                                {!! Form::text('shift_from', $from, ['class' => 'form-control time-picker', 'placeholder' => 'From', 'id' => 'shift_from', 'autocomplete' => 'off']) !!}
                {!! Form::text('shift_to', $to, ['class' => 'form-control time-picker', 'placeholder' => 'To', 'id' => 'shift_to', 'autocomplete' => 'off']) !!}
            </div>
        </div>

        <div class="col-md-12 mt-2">
            <div class="form-group">
                {!! Form::label('comment', __('schedule.comment')) !!}
                {!! Form::textarea('comment', $comment, ['class' => 'form-control', 'size' => '3x4']) !!}
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <div class="req-btn">
            <button type="submit" class="btn btn-primary width80">{!! __('common.save') !!}</button>
            <button type="button" class="btn btn-default ml-3" data-dismiss="modal" aria-label="Close">{!! __('common.close') !!}</button>
        </div>
    </div>
</div>
{!! Form::close() !!}

<script>
    $("#ajaxModalSave").submit(function(e) {
        e.preventDefault(); // avoid to execute the actual submit of the form.
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes the form's elements.
            dataType: "JSON",
            beforeSend: function() {
                $('.error-msg1').hide();
            },
            success: function(data) {
                if (data.status == 206) {
                    $('.error-msg1').html(data.message).addClass('alert alert-danger').show();
                    setTimeout(function() {
                        $('.error-msg1').fadeOut(1000);
                    }, 3000);
                }

                if (data.status == 207) {
                    $('#ajaxModalSave').find(".error").remove();
                    $.each(data.message, function (i, v) {
                        var error = '<div class="error">' + v + '</div>';
                        var split = i.split('.');
                        form.find("[name='" + i + "']").parent().append(error);
                    });
                }

                if (data.status == 200) {
                    $('.error-msg1').html(data.message).addClass('alert alert-success').show();
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000);
                }
            }
        });
    });

    $(".number").keypress(function(e) {
        return false;
    });

    $(".time-picker").datetimepicker({
        format: 'HH:mm',
        icons:
        {
            up: 'fa fa-angle-up',
            down: 'fa fa-angle-down'
        }
    });
</script>