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

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

@section('contentheader_title')
Update Bike Features ""
@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 ">
        {!! Form::open(array('url' => ('admin/bikefeatures/store'),'method'=>'post', 'files'=>true)) !!}
        <div class="box box-primary">

            <!-- /.box-header -->
            <!-- form start -->
            
            <input type="hidden" name="id" value="{{ $bikefeatures['id'] }} " >
            <div class="box-body">
                <div class="form-group">
                    <label for="name">{!! Form::label('bike_id', 'Bike Name') !!}</label>
                      {!! Form::select('bike_id', [null=>''] + $bikes, $bikefeatures['bike_id'],['class' => 'form-control bike','id' => 'bike_id']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('image', 'Image') !!}
                    <input type="file" name="image" class="form-control" id="image" accept="image/*"   onchange="readURL(this);"><br>
                    <div class="img_show">
                    @if($bikefeatures->image != '')
                        <img  class="profile-user-img img-responsive pull-left " id="display_image" src="{{ imageUploadUrl(4,$bikefeatures->image) }}" alt="{{ trans('') }} "/>
                    @endif
                    </div>
                </div>
                
                <div class="form-group">
                    {!! Form::label('title', 'Title') !!}
                    {!! Form::text('title', $bikefeatures->title, array('class' => 'form-control','placeholder'=>'Enter title','id'=>'title')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('details', 'Details') !!}
                    {!! Form::textarea('details',$bikefeatures->details,['class'=>'form-control details', 'rows' => 6, 'cols' => 40,'placeholder'=>'Enter details', 'id' => 'details']) !!}
                </div>
             <div class="box-footer">
                    {!! Form::submit('Save', 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.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 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) {
    //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