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

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

@section('contentheader_title')
{{ trans('Bike Features 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 Features') }} Info</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            {!! Form::open(array('url' => ('admin/bikefeatures/store'),'method'=>'POST', 'files'=>true)) !!}
              
            <div class="box-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">{!! Form::label('bike_id', 'Bike Name') !!}</label>
                    {!! Form::select('bike_id', [null=>''] + $bikes, null,['class' => 'form-control bike','id' => 'bike_id']) !!}
                    <p class="red" id="nameError"></p>
                </div>

                <div class="form-group">
                    {!! Form::label('image', 'Image') !!}
                    <input type="file" name="image"  class="form-control" id="image" accept="image/*"   onchange="readURL(this);">
                    <div class="img_show"></div>
                </div>
                
                <div class="form-group">
                    {!! Form::label('title', 'Title') !!}
                    {!! Form::text('title', null, array('class' => 'form-control','placeholder'=>'Enter title','id'=>'title')) !!}
                </div>

                <div class="form-group">
                    {!! Form::label('details', 'Details') !!}
                    {!! Form::textarea('details',null,['class'=>'form-control details', 'rows' => 6, 'cols' => 40,'placeholder'=>'Enter details', 'id' => 'details']) !!}
                </div>
            </div>

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


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

    </div>

</div>
@include('adminlte::layouts.bikeFeatures.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 src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script>
$(document).ready(function() {
    $('select.bike').chosen({
        placeholder_text_single: 'Please Select',
        allow_single_deselect: true,
        width: "100%"
    });
} );
CKEDITOR.replace( 'details' );
</script>
<script type="text/javascript">
function readURL(input) {
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