@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)
            <video width="320" height="240" controls autoplay>
                <source src="{{ url('storage/videos/'.$fleet->video) }}">
                    type="video/mp4">
            </video>
        @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>{{ $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="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