@extends('layout.main')

@push('title')
   <title>Our Destination - Challa Brothers Tour and Travel</title>
	<meta name="description" content="Enjoy hassle-free taxi service to popular destinations like Lucknow, Varanasi, Agra, and Yamunotri. Book now for comfortable and reliable 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/destination"/>
    
     <!--Open Graph Meta Start-->
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Our Destination - Challa Brothers Tour and Travel"/>
    <meta property="og:description" content="Enjoy hassle-free taxi service to popular destinations like Lucknow, Varanasi, Agra, and Yamunotri. Book now for comfortable and reliable transportation."/>
    <meta property="og:url" content="https://www.challabrotherstourandtravel.com/destination" />
    <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": "Destination",
    "item": "https://www.challabrotherstourandtravel.com/destination"  
  },]
}
</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;">Our Taxi Service Destinations</h1>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item">Destinations</li>
                </ul>
            </div><!-- end columns -->
        </div><!-- end row -->
    </div><!-- end container -->
</section><!-- end page-cover -->
<!--===== INNERPAGE-WRAPPER ====-->


        <!--=============== CRUISE OFFERS ===============-->
        <section id="cruise-offers" class="section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="page-heading">
                            <h2>Popular Places</h2>
                            <hr class="heading-line" />
                        </div><!-- end page-heading -->
                        
                        <div class="row">
                            
                            @foreach ($destinationData as $destinationRow)
                            <div class="col-md-6 col-lg-6">
                                <div class="main-block cruise-block">
                                    <div class="row">
                                        <div class="col-md-12 col-lg-6 col-lg-pull-6 no-pd-r">
                                            <div class=" main-info cruise-info">
                                                <div class="main-title cruise-title">
                                                    <a href="#">{{$destinationRow->name}}</a>
                                                    <p>From: {{$destinationRow->location->name}}</p>
                                                    <div class="rating">
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        <span><i class="fa fa-star grey"></i></span>
                                                    </div><!-- end rating -->
                                                    
                                                    <span class="cruise-price">₹ {{$destinationRow->price}}</span>
                                                </div><!-- end cruise-title -->
                                            </div><!-- end cruise-info -->
                                        </div><!-- end columns -->
        
                                        <div class="col-md-12 col-lg-6 col-lg-push-6 no-pd-l">
                                            <div class="main-img cruise-img" style="height: 100%">
                                                <a href="#">
                                                    <img src="{{asset('public/storage/'.$destinationRow->image)}}" class="img-fluid" alt="{{$destinationRow->name}}" style="height: 100%;object-fit: cover"/>
                                                    <div class="cruise-mask">
                                                        <p>{{$destinationRow->time_period}}</p>
                                                    </div><!-- end cruise-mask -->
                                                </a>
                                            </div><!-- end cruise-img -->
                                        </div><!-- end columns -->                                        
                                        
                                    </div><!-- end row -->    
                                </div><!-- end cruise-block -->
                            </div><!-- end columns -->
                            @endforeach
                        </div><!-- end row -->
                        
                        <div class="view-all text-center">
                            <a href="{{url('/destination')}}" class="btn btn-orange">View All</a>
                        </div><!-- end view-all -->
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end cruise-offers -->
          

@endsection