@extends('public.layouts.default')

@section('title')
    | Fleet
@endsection

@section('content')
        <div class="container-sm">
            <div class="padding-wrap fleet-detail_section">
        <div class="row">
        <div class="col-lg-5 video-section">
        @if($fleet->video)
            @php
			$parsed_url_query = parse_url($fleet->video, PHP_URL_QUERY);
			$parsed_url_path = parse_url($fleet->video,PHP_URL_PATH);
			$url = "https://www.youtube.com/embed".$parsed_url_path."?".$parsed_url_query;                               
			@endphp
           <iframe width="560" height="315" src="{{$url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        @else
            <img src="{{ url('/').'/storage/videos/thumbs/'.$fleet['video_thumb']}}" alt="Image preview" />
        @endif
        </div>
        <div class="col-lg-7">
            <div class="fleet-details">
                    <h1 class="fleet-name">{{ $fleet->name}}</h1>
                    <p>{!! html_entity_decode($fleet->description) !!}</p>
                    <div class="features">
                        <ul>

                        @foreach(explode(",",$fleet->features) as $feature)
                            <li><img src="{{ asset('storage/images/home/sapphire-icon.png') }}"> {{ $feature }}</li>
                        @endforeach
                        </ul>
                    </div>
                    <button type="button" class="primary-btn" data-toggle="modal" data-target="#gridSystemModal"> <span>Book Now</span></button>
            </div>
        </div>
        </div>
        <div class="row img_fleet-section">
        @php $filesIds =''; @endphp
        @foreach($fleet->fleet_images as $image)
            @php $filesIds .= $image->id.',' @endphp
            <div class="gallery-img col-md-4">
                <div class="view-gallery fleet_thumb">
                    <div class="img-preview">
                         <img src="{{ url('/').'/storage/images/fleet/thumb-md/'.$image['filename']}}" alt="{{ $fleet->name}}">
                    </div>
                    <div class="fleet-content">
                        <div class="fleet-btn">
                            <button type="button"  class="primary-btn showimage" data-toggle="modal" data-target="#galleryModal" data-name="{{ $image->filename }}" ><span>View Photo</span></button>
                        </div>
                     </div>
                </div>
            </div>
        @endforeach
        </div>
            </div>

        </div>
        @if(!empty($image['filename']))
            <div class="modal fade fleet_img_view" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="galleryModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
                        <div class="modal-body">
                            <img src="" class="imageName">
                        </div>
                    </div>
                </div>
            </div>
        @endif

{{-- <div class="dark-section testimonials">
        <div class="container-md">
            <div class="padding-wrap text-center">
                <h2 class="main-heading">Testimonials</h2>
                <div class="demo testimonials_owl">
                        <div class="item review_slider">
                            <ul id="review-slider" class="review-slider">
                              @include('public.pages.home._view_testimonial')                         
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </div> --}}
    <div class="testimonial_sec">
        <div class="container-sm">
            <div class="testimonial_title">
                <h2>Testimonial</h2>
            </div>
            <div class="row">
                @foreach ($testimonials as $testimonial)
                <div class="col-lg-6 col-xl-4">
                    <div class="testimonial_box">
						<img src="{{ asset('/storage/images/testimonial/'.$testimonial['image']) }}" width="90" height="90" alt="Client Image" title="Client Image">
                        {{-- <img height="55" width="49" data-src="/storage/images/home/quote-icon.png" alt="Testimonial" title="Testimonial" class="lazyload"> --}}
                        <p>{{ $testimonial->comment }}</p>
                        <p class="testimonial_name">- {{ $testimonial->name }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="fleet_banner text-center">
            <div class="container-md">
                <h2>We have Been providing excellent limo services in toronto and greater toronto area</h2>
                <button type="button" class="primary-btn" data-toggle="modal" data-target="#gridSystemModal"> <span>Book Now</span></button>
            </div>
        </div>

@endsection

@section('scripts')
<script>

$(document).ready(function(){
    $(document).on('click', '.showimage', function() {
        var ImageName = $(this).attr("data-name");
        var image_path="{{ url('/').'/storage/images/fleet/thumb-md/'}}";
        $('.imageName').attr("src", image_path+ImageName);
    });
});

</script>
@endsection