@extends('adminlte::layouts.app')

@section('htmlheader_title')	
{{ trans('Bike Image Add') }}
@endsection

@section('contentheader_title')
{{ trans('Bike Image Add') }}
@endsection
@section('main-content')
<!-- searchable dropdown -->
<div class="row">

    <div class="col-md-12 ">
        @foreach ($errors->all() as $error)
        <p class="alert alert-warning">{{ $error }}</p>
        @endforeach
        <!-- if there are creation errors, they will show here -->
        <span class="errormessage"></span>
    </div>    
    <div class="col-md-12 ">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">{{ trans('Bike Image') }} Info</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            {!! Form::open(array('url' => ('admin/bikeimage/store'),'method'=>'POST', 'files'=>true)) !!}
              
            <div class="box-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">{!! Form::label('name', 'Bike Name') !!}</label>
                    {!! Form::select('bike_id', [null=>''] + $bikes, null,['class' => 'form-control bike','id' => 'name']) !!}
                    <p class="red" id="nameError"></p>
                </div>
                <div class="form-group">
                    <label for="picture">{{ trans('Bike images') }}<small> :</small> </label>
                    <input type="file" name="bike_image[]" multiple accept="image/*" class="form-control" id="picture" onchange="readURL(this);">
                    <div class="img_show"></div>
                    <p class="red" id="pictureError"></p>
                </div>
               <!--  <div class="form-group">
                    {!! Form::label('status', 'Status:')   !!}
                    {!! Form::radio('status', '1',true,['class' => 'minimal']) !!}  Active &nbsp;
                    {!! Form::radio('status', '0','',['class' => 'minimal']) !!}  InActive &nbsp;
                </div> -->
            </div>

            <div class="box-footer">
                {!! Form::submit('Create', array('class' => 'btn btn-primary addProduct')) !!}
                <a class="btn btn-default btn-close" href="{{ URL::to('admin/bikeimage') }}">Cancel</a>
            </div>
            
        </div>


        {!! Form::close() !!}

    </div>

</div>
@include('adminlte::layouts.bikeImage.validation')
@endsection
@push('scripts')
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $('select.bike').chosen({
        placeholder_text_single: 'Please Select',
        allow_single_deselect: true,
        width: "100%"
    });
} );

</script>
<script type="text/javascript">
function readURL(input) {
    //console.log(input.files);
if (input.files && input.files[0]) {
    var files = input.files;
    var img_show = $(".img_show");
    img_show.html("");
    /*var ul = document.createElement("ul");
    img_show.append(ul);*/
    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        var reader = new FileReader();

        reader.onload = (function(f) {
            return function(e) {
                img_show.append('<img class="profile-user-img img-responsive pull-left" src="'+this.result+'" style="margin: 5px;"/>');
                /*var li = document.createElement("li");
                li.innerHTML = '<img class="profile-user-img img-responsive pull-left" src="'+this.result+'"/>';
                ul.appendChild(li);*/
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

        reader.readAsDataURL(file);
    }
}
}
 </script>
@endpush