@extends('layout.main')

@push('title')
    <title>Locations - {{$data->title}}</title>
@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">Locations</h1>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item">Locations</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 in {{$location->name}}</h2>
                            <hr class="heading-line" />
                        </div><!-- end page-heading -->
                        
                        <div class="row">
                            
                            @foreach ($destinationData as $destinationRow)
                            @if ($destinationRow->location_id == $location->id)
                            <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 -->
                            @endif
                            @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