@extends('layouts.app')

@section('title','Bikes & Kit - Dusty helmets')

@section('content')

    <!-- Page Header Start -->
    <!-- p8/pic1 -->
    <div class="mb-0 page-header" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(public/assets/P6/pic2.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Bikes & Kit</h2>
                </div>
                <div class="col-12">
                    <a href="{{url('/')}}">Home</a>
                    <a href="{{url('/bikes')}}">Bikes & Kit</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="blog">
        <div class="container">
            <div class="section-header ">
                <p>Bikes & Kit</p>
                <h2 class="dusty-color">Dusty Helmets</h2>
            </div>
            <div class="row">
                @foreach($bikes as $bike)
                    <div class="col-md-6">
                        <div class="blog-item">
                            <div class="shadow blog-img">
                                <img src="{{asset('')}}public/storage/{{$bike->image}}" class="img-responsive" alt="Dusty Helmets">
                            </div>
                            <div class="blog-content">
                                <h2 class="blog-title">{{$bike->title}}</h2>
                                 <!--$bike->content -->
                                                                  {!! strip_tags(substr(($str),0,500),"<br><br>") !!}
                                 @if(strlen(strip_tags($str,"<br>")) > 500)
                                 <small>
                                     <a style="color:#006FCD" href="#" id="ty{{$bike->id}}" onclick="$('#ty{{$bike->id}}').hide(); $('#moreDoc{{$bike->id}}').slideDown();">View More</a>
                                 </small>
                                    <span id="moreDoc{{$bike->id}}" style="display:none;">
                                        
                                        {!! strip_tags(substr(($str),500),"<br>") !!}
                                    <small>
                                        <a href="#" onclick="$('#moreDoc{{$bike->id}}').slideUp(); $('#ty{{$bike->id}}').show();" style="color:#006FCD">View Less</a>
                                    </small>
                                    </span>
                                    
                                    @endif
                            </div>
                        </div>
                    </div>
                @endforeach
                {{--                    <div class="col-md-6">--}}
                {{--                        <div class="blog-item">--}}
                {{--                            <div class="shadow blog-img">--}}
                {{--                                <img src="assets/P8/pic2.jpg" class="img-responsive" alt="Offroad motorbike racing">--}}
                {{--                            </div>--}}
                {{--                            <div class="blog-content">--}}
                {{--                                <h2 class="blog-title">The Husaberg FE390</h2>--}}
                {{--                                <div class="blog-text">--}}
                {{--                                    <p>--}}
                {{--                                       Dusty Helmets is proud to offer one of the world's leading off-road bike - the Husaberg FE390, getting through some of East Africa's most spectacular scenery and bike trails.--}}
                {{--                                    </p>--}}
                {{--                                    <p>--}}
                {{--                                        The youngest member of the Husaberg four-stroke family offers smooth power development coupled with ample power for every situation in everyday enduro use.--}}
                {{--                                    </p>--}}
                {{--                                    <p>All of our bikes are fully insured, road tested, safety tested and maintained to the highest Husaberg service standards.</p>--}}
                {{--                                    <!-- <a class="btn custom-btn" href="">Read More</a> -->--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                    <div class="col-md-6">--}}
                {{--                        <div class="blog-item">--}}
                {{--                            <div class="shadow blog-img">--}}
                {{--                                <img src="assets/P8/GC2.jpg" class="img-responsive" alt="Dusty Helmets">--}}
                {{--                            </div>--}}
                {{--                            <div class="blog-content">--}}
                {{--                                <h2 class="blog-title">Riding Gears</h2>--}}
                {{--                                <div class="blog-text">--}}

                {{--                                    <p>--}}
                {{--                                        For riding gear, Dusty Helmets have a wide range of top of the range gear, which--}}
                {{--                                        is maintained and thoroughly cleaned--}}
                {{--                                        after every safari. There are options to suit all kinds of clientele and we can--}}
                {{--                                        provide:--}}
                {{--                                    </p>--}}
                {{--                                    <p>Helmets, Goggles, Gloves, Shirts, knee and elbow guards. We do have a few pair of--}}
                {{--                                        boots available, but we encourage--}}
                {{--                                        riders to bring their own to ensure they are comfortable with this essential--}}
                {{--                                        riding gear.--}}
                {{--                                    </p>--}}
                {{--                                    <!-- <a class="btn custom-btn" href="">Read More</a> -->--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
            </div>
            {{-- <center><p><i>Alternatively, clients are more than welcome to bring all their own gear. </i></p></center> --}}
        </div>
    </div>

@endsection