{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="perspective_photo">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Documents</h3>
    </div>
    <div class="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="perspective_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required>
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div><!--mediamgr_left -->
    </div>
</div>
<!--#myModal-->{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="font_pic">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Images</h3>
    </div>
    <div class="modal-body"  id="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head" id="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="font_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required onchange="readURL(this);">
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
            <div >
                <img id="image" src="">
            </div>
        </div><!--mediamgr_left -->
    </div>
</div>
<!--#myModal-->{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="back_pic">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Documents</h3>
    </div>
    <div class="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="back_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required>
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div><!--mediamgr_left -->
    </div>
</div>
<!--#myModal-->{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="right_pic">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Documents</h3>
    </div>
    <div class="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="right_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required>
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div><!--mediamgr_left -->
    </div>
</div>
<!--#myModal-->{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="left_pic">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Documents</h3>
    </div>
    <div class="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="left_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required>
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div><!--mediamgr_left -->
    </div>
</div>
<!--#myModal-->{{--model for adding new vehicle/truck--}}
<div aria-hidden="false" aria-labelledby="myModalLabel"
     role="dialog"
     tabindex="-1" class="modal hide fade in" id="inside_pic">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h3 id="myModalLabel">Upload New Documents</h3>
    </div>
    <div class="modal-body">
        <div class="col-lg-12 text-center">
            <div class="mediamgr_head">
                {!! Form::open(array('route' => 'vehicle.single.picture.upload', 'method' => 'POST', 'id' => 'my-dropzone', 'files' => true)) !!}
                <input type="hidden" name="vehicle_id"
                       value="{{$vehicle->id}}">
                <input type="hidden" name="position"
                       value="inside_pic">
                <input type="hidden" name="registration_id"
                       value="{{$vehicle->registration_number}}">
                <ul class="mediamgr_menu">
                    <li class=" newfilebtn">
                        <input type="file" name="picture" required>
                    </li>
                    <li class=" newfilebtn">
                        <input type="submit"
                               class="btn btn-default margin-t-5"
                               value="Upload Document"
                               id="upload-submit">
                    </li>
                </ul>
                {!! Form::close() !!}
                <span class="clearall"></span>
            </div><!--mediamgr_head-->
        </div><!--mediamgr_left -->
    </div>
</div>
<script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var height = jQuery('#modal-body').height() - jQuery('#mediamgr_head').height();
                jQuery('#image')
                        .attr('src', e.target.result)
                        .width('60%')//  ×
                        .height(height);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>