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

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

@section('contentheader_title')
Update Bike Image ""
@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/bikeimage/store'),'method'=>'POST', 'files'=>true)) !!}
        <div class="box box-primary">

            <!-- /.box-header -->
            <!-- form start -->
            
            <input type="hidden" name="id" value="{{ $bikeimage['id'] }} " >
            <div class="box-body">
                <div class="form-group">
                    <label for="name">{!! Form::label('name', 'Bike Name') !!}</label>
                      {!! Form::select('bike_id', [null=>''] + $bikes, $bikeimage['id'],['class' => 'form-control bike','id' => 'name']) !!}

                    
                </div>
                
               <div class="form-group">
                <label for="picture">{!! Form::label('bike_image', 'Bike Images') !!}<small> :</small></label>
                    <input type="file" name="bike_image[]" id="picture" class=" form-control" accept="image/*" multiple onchange="readURL(this);">
                    <div class="img_show" id="img_show">
                    </div>
                    @if(count($bikeimage['bike_image']) > 0)
                    <label>Uploaded :</label>
                    <div class="img_show">
                                            </div>
                   @endif
                </div>
            </div>
             <div class="box-footer">
                    {!! Form::submit('Save', 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> 

@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);
    }
}
}

function remove(id) {
    if (confirm('Are You Sure? Do You Want To Delete?')) {
        $.ajax({
            url: '{{ url('admin/bikeimage/remove') }}/'+id,
            type: 'GET'
        })
        .done(function(data) {
            $('#'+id).remove();
            alert(data.message);
        });
        
        //console.log(id);
        //return true;
    } else {
        return false;
    }
}
 </script>

@endpush