@extends('layout.main')

@push('title')
    <title>Our Vehicles - Challa Brothers Tour and Travel</title>
	<meta name="description" content="Explore our diverse fleet of taxis, including sedans, SUVs, and more. Book now for reliable and comfortable transportation."/>
	<meta name="author" content="Challa Brothers Tour and Travels"/>
	<meta name="robots" content="index, follow"/>
	<meta name="distribution" content="global"/>
	<meta name="coverage" content="india"/>
	<meta name="object" content="document"/>
	<meta name="audience" content="All"/>
	<meta name="revisit-after" content="1 day"/>
	<meta name="language" content="en"/>
	<meta name="rating" content="general"/>
	<meta name="copyright" content="Copyright Challa Brothers Tour and Travels 2023"/>
	<!--General Meta End-->
	
	<!--canonical tag-->
    <link rel="canonical" href="https://www.challabrotherstourandtravel.com/vehicle"/>
    
     <!--Open Graph Meta Start-->
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Our Vehicles - Challa Brothers Tour and Travel"/>
    <meta property="og:description" content="Explore our diverse fleet of taxis, including sedans, SUVs, and more. Book now for reliable and comfortable transportation."/>
    <meta property="og:url" content="https://www.challabrotherstourandtravel.com/vehicle" />
    <meta property="og:image" content="https://www.challabrotherstourandtravel.com/public/storage/logo/1699010233challa-logo1.png"/>
    <!--Open Graph end-->

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [{
    "@type": "ListItem", 
    "position": 1, 
    "name": "Home",
    "item": "https://www.challabrotherstourandtravel.com/"  
  },{
    "@type": "ListItem", 
    "position": 2, 
    "name": "Vehciles",
    "item": "https://www.challabrotherstourandtravel.com/vehicle"  
  },]
}
</script>
   
   
   
@endpush

@section('main-section')

<!--============= PAGE-COVER =============-->
<section class="page-cover" id="cover-about-us">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="page-title" style="color:black;">Vehicles</h1>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item">Vehicles</li>
                </ul>
            </div><!-- end columns -->
        </div><!-- end row -->
    </div><!-- end container -->
</section><!-- end page-cover -->
<!--===== INNERPAGE-WRAPPER ====-->
 
    <!--==== INNERPAGE-WRAPPER =====-->
    <section class="innerpage-wrapper">
        <div id="car-grid" class="innerpage-section-padding">
            <div class="container">
                <div class="row"> 
                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 content-side">
                        <div class="row">
                            
                            @foreach ($vehicleData as $vehicleRow)
                            <div class="col-md-6 col-lg-6 col-xl-4">
                                <div class="grid-block main-block cr-grid-block">
                                    <div class="main-img cr-grid-img">
                                        <a href="{{url('vehicle/'.$vehicleRow->url)}}">
                                            <img src="{{asset('public/storage/'.$vehicleRow->image)}}" class="img-fluid" alt="{{$vehicleRow->name}}" />
                                        </a>
                                        <div class="main-mask">
                                            <ul class="list-unstyled list-inline offer-price-1">
                                                <li class="price">₹ {{$vehicleRow->price}}<span class="divider"></span><span class="pkg"></span></li>
                                            </ul>
                                        </div><!-- end main-mask -->
                                    </div><!-- end cr-grid-img -->
                                    
                                     <div class="block-info cr-grid-info">
                                         <div class="rating">
                                            @for ($i = 1; $i <= 5; $i++)
                                                    @if ($i <= $vehicleRow->rating)
                                                    <span><i class="fa fa-star orange"></i></span>
                                                    @else
                                                    <span><i class="fa fa-star lightgrey"></i></span>
                                                    @endif
                                                @endfor
                                        </div><!-- end rating -->
                                        
                                         <h3 class="block-title"><a href="{{url('vehicle/'.$vehicleRow->url)}}">{{$vehicleRow->name}}</a></h3>
                                        <p class="block-minor">{{$vehicleRow->type}}</p>
                                        <ul class="list-unstyled list-inline car-features">
                                            <li class="list-inline-item"><span><i class="fa fa-users"></i></span>{{$vehicleRow->seat}}</li>
                                            <li class="list-inline-item"><span><i class="fa fa-briefcase"></i></span>{{$vehicleRow->bags}}</li>
                                            <li class="list-inline-item"><span><i class="fa fa-map-marker"></i></span>Gps</li>
                                            <li class="list-inline-item"><span><i class="fa fa-tint"></i></span>Fuel</li>
                                            <li class="list-inline-item"><span><i class="fa fa-music"></i></span>Music</li>
                                        </ul>
                                        <div class="grid-btn">
                                            <a href="{{url('vehicle/'.$vehicleRow->url)}}" class="btn btn-orange btn-block btn-lg">View More</a>
                                        </div><!-- end grid-btn -->
                                     </div><!-- end cr-grid-info -->
                                </div><!-- end cr-grid-block -->
                            </div><!-- end columns -->
                            @endforeach
                        </div><!-- end row -->
                    </div><!-- end columns -->
    
                </div><!-- end row -->
            </div><!-- end container -->
        </div><!-- end car-grid -->
    </section><!-- end innerpage-wrapper -->
    
@endsection