@extends('frontend.master', ['activePage' => 'destination'])

@section('content')

{{-- breadcrumbs --}}
    @include('frontend.layout.breadcrumbs', [
        'title' => __('Destinations'),
        'page' => __('Destinations'),
    ])

{{-- page content --}}

<section class="property-grid grid">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="grid-option">
            <p>{{count($destinations)}} {{__('destinations found')}}</p>
            <div class="dropdown">
              <a class="dropdown-toggle" href="#" id="filterDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-filter"></i></a>
              <div class="dropdown-menu" aria-labelledby="filterDropdown">
              </div>
            </div>
          </div>
        </div>

        @if(count($destinations) == 0)
          <div class="col-lg-12 text-center">
            <div class="empty-state">
              <img src="{{url('frontend/images/empty.png')}}">
              <h6 class="mt-4"> {{__('No Events found')}}!</h6>
            </div>
          </div>
        @else
          @foreach ($destinations as $item)
            <div class="col-md-4 events">
                <div class="card-box-a card-shadow box-shadow radius-10">
                <div class="img-box-a">
                    <img src="{{url('images/upload/'.$item->image)}}" alt="" class="img-a img-fluid">
                </div>
                <div class="card-overlay">
                    <div class="card-overlay-a-content">
                    <div class="card-header-a">
                        <h2 class="card-title-a"><a href="{{url('event/'.$item->id.'/'.preg_replace('/\s+/', '-', $item->name))}}">{{$item->name}}</a></h2>
                    </div>
                    <div class="card-body-a">
                        <a href="{{url('destinations-events/'.$item->id)}}" class="link-a">{{__('More Detail')}}
                        <span class="ion-ios-arrow-forward"></span>
                        </a>
                    </div>
                    </div>
                </div>
                </div>
            </div>
          @endforeach
        @endif
      </div>

    </div>
</section>

@endsection