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

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

@section('contentheader_title')
{{ trans('Bike 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">
            <!-- /.box-header -->
            <!-- form start -->
            {!! Form::open(array('url' => ('admin/bike/store'),'method'=>'POST', 'files'=>true)) !!}
            <input type="hidden" id="id" name="id" value="" >
            
            <div class="box-body col-sm-12">
                <div class="form-group">
                    {!! Form::label('brand', 'Brand *') !!}
                    {!! Form::select('brand_id', [null=>''] + $brands, null,['class' => 'form-control brand']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('name', 'Name *') !!}
                    {!! Form::text('name', null, array('class' => 'form-control','placeholder'=>'Enter name','id'=>'name')) !!}
                    <p class="red" id="nameError"></p>
                </div>
            </div>
            <div class="box-body col-sm-6">
                <div class="form-group">
                    {!! Form::label('review', 'Review *') !!}
                    {!! Form::textarea('review',null,['class'=>'form-control review', 'rows' => 6, 'cols' => 40,'placeholder'=>'Enter review']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('suspension', 'Suspension *') !!}
                    {!! Form::textarea('suspension',null,['class'=>'form-control suspension', 'rows' => 3, 'cols' => 40,'placeholder'=>'Enter suspension']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('tyres', 'Tyres *') !!}
                    {!! Form::textarea('tyres',null,['class'=>'form-control tyres', 'rows' => 3, 'cols' => 40,'placeholder'=>'Enter tyres']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('brakes', 'Brakes *') !!}
                    {!! Form::textarea('brakes',null,['class'=>'form-control brakes', 'rows' => 3, 'cols' => 40,'placeholder'=>'Enter brakes']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('dimensions', 'Dimensions *') !!}
                    {!! Form::textarea('dimensions',null,['class'=>'form-control dimensions', 'rows' => 3, 'cols' => 40,'placeholder'=>'Enter dimensions']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('fuel_tank', 'Fuel Tank *') !!}
                    {!! Form::text('fuel_tank', null, array('class' => 'form-control','placeholder'=>'Enter fuel tank','id'=>'fuel_tank')) !!}
                </div>
            </div>
            <div class="box-body col-sm-6">
                <div class="form-group">
                    {!! Form::label('engine', 'Engine Details *') !!}
                    {!! Form::textarea('engine',null,['class'=>'form-control engine', 'rows' => 3, 'cols' => 40,'placeholder'=>'Enter engine']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('engine_type', 'Engine Type *') !!}
                    {!! Form::text('engine_type',null,['class'=>'form-control engine_type','placeholder'=>'Enter engine type']) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('displacement', 'Displacement *') !!}
                    {!! Form::text('displacement', null, array('class' => 'form-control','placeholder'=>'Enter displacement','id'=>'displacement')) !!}
                </div>
                
                <div class="form-group">
                    {!! Form::label('bore_stroke', 'Bore & Stroke *') !!}
                    {!! Form::text('bore_stroke', null, array('class' => 'form-control','placeholder'=>'Enter bore stroke','id'=>'bore_stroke')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('power', 'Maximum Power (PS/RPM) *') !!}
                    {!! Form::text('power', null, array('class' => 'form-control','placeholder'=>'Enter Maximum Power (PS/RPM)','id'=>'power')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('torque', 'Maximum Torque (NM/RPM) *') !!}
                    {!! Form::text('torque', null, array('class' => 'form-control','placeholder'=>'Enter Maximum Torque (NM/RPM)','id'=>'torque')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('gearbox', 'Gearbox *') !!}
                    {!! Form::text('gearbox', null, array('class' => 'form-control','placeholder'=>'Enter gearbox','id'=>'gearbox')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('final_drive', 'Final Drive *') !!}
                    {!! Form::text('final_drive', null, array('class' => 'form-control','placeholder'=>'Enter final drive','id'=>'final_drive')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('ticket_price', 'Ticket price *') !!}
                    {!! Form::text('ticket_price', null, array('class' => 'form-control','placeholder'=>'Enter ticket price','id'=>'ticket_price')) !!}
                    <p class="red" id="ticket_priceError"></p>
                </div>
            </div>
            <div class="box-body col-sm-6">
                <div class="form-group">
                    {!! Form::label('title', 'Features Title') !!}
                    {!! Form::text('title[]', null, array('class' => 'form-control','placeholder'=>'Enter title','id'=>'title')) !!}
                </div>
                <div class="form-group">
                    {!! Form::label('features_image', 'Features Image') !!}
                    <input type="file" name="features_image[]"  class="form-control" id="features_image" accept="image/*"   onchange="readURL(this);">
                    <div class="img_show"></div>
                </div>
                <button onclick="return features_fields();" class="btn btn-primary">Add More</button>
            </div>
            <div class="box-body col-sm-6">
                <div class="form-group">
                    {!! Form::label('details', 'Features Details') !!}
                    {!! Form::textarea('details[]',null,['class'=>'form-control details', 'rows' => 7, 'cols' => 40,'placeholder'=>'Enter details', 'id' => 'details']) !!}
                </div>
            </div>

            <div id="bikeFetures"></div>
            <div class="box-body col-sm-12">
                <div class="form-group">
                    {!! Form::label('image', 'Main Image *') !!}
                    <input type="file" name="image"  class="form-control" id="image">
                    <p class="red" id="pictureError"></p>
                </div>
                <div class="form-group">
                    {!! Form::label('bike_image', 'Slider Images *') !!}
                    <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>
                </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 addBike')) !!}
                <a class="btn btn-default btn-close" href="{{ URL::to('admin/bike') }}">Cancel</a>
            </div>
            
        </div>


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

    </div>

</div>
@include('adminlte::layouts.bike.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.brand').chosen({
        placeholder_text_single: 'Please Select',
        allow_single_deselect: true,
        width: "100%"
    });
} );
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#display_image')
.attr('src', e.target.result)

};
reader.readAsDataURL(input.files[0]);
}
}
CKEDITOR.replace( 'engine' , {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [
                {"name":"basicstyles","groups":["basicstyles"]},
                {"name":"links","groups":["links"]},
                {"name":"paragraph","groups":["list","blocks"]},
                {"name":"document","groups":["mode"]},
                {"name":"insert","groups":["insert"]},
                {"name":"styles","groups":["styles"]},
                {"name":"about","groups":["about"]}
            ],
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
        } );
CKEDITOR.replace( 'review' , {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [
                {"name":"basicstyles","groups":["basicstyles"]},
                {"name":"links","groups":["links"]},
                {"name":"paragraph","groups":["list","blocks"]},
                {"name":"document","groups":["mode"]},
                {"name":"insert","groups":["insert"]},
                {"name":"styles","groups":["styles"]},
                {"name":"about","groups":["about"]}
            ],
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
        } );
$('textarea[name^=details]').each(function(index, el) {
    CKEDITOR.replace($(this).attr('id'), {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [
                {"name":"basicstyles","groups":["basicstyles"]},
                {"name":"links","groups":["links"]},
                {"name":"paragraph","groups":["list","blocks"]},
                {"name":"document","groups":["mode"]},
                {"name":"insert","groups":["insert"]},
                {"name":"styles","groups":["styles"]},
                {"name":"about","groups":["about"]}
            ],
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
        });
});

var room = 1;
function features_fields() {
 
    room++;
    var objTo = document.getElementById('bikeFetures')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass"+room);
    var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="box-body col-sm-6"><div class="form-group">{!! Form::label("title", "Features Title") !!}{!! Form::text("title[]", null, array("class" => "form-control","placeholder"=>"Enter title","id"=>"title")) !!}</div><div class="form-group">{!! Form::label("features_image", "Features Image") !!}<input type="file" name="features_image[]"  class="form-control" id="features_image" accept="image/*"   onchange="readURL(this);"><div class="img_show"></div></div><button onclick="return remove_features_fields('+ room +');" class="btn btn-danger">Remove</button></div><div class="box-body col-sm-6"><div class="form-group">{!! Form::label("details", "Features Details") !!}<textarea name="details[]" cols="40" rows="7"  placeholder="Enter details" id="details_'+ room +'" class="form-control details"></textarea></div></div>';
    
    objTo.appendChild(divtest)
    setCKEditor('details_'+room);
    return false;
}
function setCKEditor(id) {
    CKEDITOR.replace(id, {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [
                {"name":"basicstyles","groups":["basicstyles"]},
                {"name":"links","groups":["links"]},
                {"name":"paragraph","groups":["list","blocks"]},
                {"name":"document","groups":["mode"]},
                {"name":"insert","groups":["insert"]},
                {"name":"styles","groups":["styles"]},
                {"name":"about","groups":["about"]}
            ],
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
        });
}
   function remove_features_fields(rid) {
       $('.removeclass'+rid).remove();
       return false;
   }
</script>
@endpush