@extends('public.layouts.default')

@section('title')
    | Fleet
@endsection

@section('styling')
    <link rel="stylesheet" href="{{ asset('frontend/fleet/fleet.css') }}"> 
@endsection

@section('content')
<div class="hero-section fleet-page-hero inner-page-hero">
        <div class="container-md">
            <h1 class="hero-heading">Fleet</h1>
            <p><a href="/">Home</a> / Fleet</p>
        </div>
    </div>
    <div class="container-md">
        <div class="padding-wrap fleet_page">
        <div class="text-center">
          <h2 class="main-heading ">OUR FLEET</h2>
        </div>
                <div class="filter_section">
                    <button class="btn btn-default filter-button is-active" data-filter="all">ALL</button>
                    <button class="btn btn-default filter-button" data-filter="Party_Bus">PARTY BUS</button>
                    <button class="btn btn-default filter-button" data-filter="Sedan_and_SUV">SEDAN SUV</button>
                    <button class="btn btn-default filter-button" data-filter="Stretch_Limousine">STRETCHED LIMOUSINE</button>
                </div>
                <div class="row">
                    @foreach($fleets as $fleet)
                        <div class="gallery_product col-lg-4 col-md-6 col-sm-12 filter {{ str_replace(' ', '_', $fleet->type) }}">
                       <div class="fleet_thumb">
                        @if(!empty($fleet->video_thumb))
                                <img src="{{ url('/').'/storage/videos/thumbs/'.$fleet['video_thumb']}}" alt="{{ $fleet->name}}" title="{{ $fleet->name}}">
                                <div class="fleet-content">
                                <div class="fleet-btn">
                                <a href="{{route('fleet', $fleet->slug)}}" class="primary-btn"> View Details</a>
                                </div>
                                </div>

                            @endif
                            </div>
                            <a href="#" class="fleet_title"><h3 >{{ $fleet->name}}</h3></a>
                            <span class="fleet-icons">
                                <strong><i class="fa fa-users" aria-hidden="true"></i>({{ $fleet->no_of_seats }})</strong>
                                <strong><i class="fa fa-image" aria-hidden="true"></i>({{ count($fleet->fleet_images) }})</strong>
                                <strong><i class="fa fa-play-circle-o" aria-hidden="true"></i>(1)</strong>
                            </span>

                        </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')
    @parent

    <script>
        $(document).ready(function(){

            $(".filter-button").click(function(){
                var value = $(this).attr('data-filter');

                if(value == "all")
                {
                    //$('.filter').removeClass('hidden');
                    $('.filter').show('1000');
                }
                else
                {
            //            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
            //            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
                    $(".filter").not('.'+value).hide('3000');
                    $('.filter').filter('.'+value).show('3000');

                }
            });


            // if ($(".filter-button").addClass("is-active")) {
            //     $(this).removeClass("is-active");
            // }
            $('.filter-button').on('click', function() {
                $(this).addClass('is-active').siblings().removeClass('is-active');

            });
                // $(this).addClass("active");
        });

    </script>
@endsection