@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

    <!-- Breadcrumb Area  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Protected Areas') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Protected Areas') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /Breadcrumb Area -->

    <!-- Work Area  -->
    <div class="about-us-area section">
        <div class="container">
            @foreach (reservations() as $reservation)
                <div class="dividorBox">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="emzReserveBoxDetails">
                                <div class="emzTit">{{ langConverter($reservation->en_name,$reservation->fr_name) }}</div>
                                <div class="emzDescription">
                                  {!! Str::limit(langConverter($reservation->en_description,$reservation->fr_description),500) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="emzReserveDetails">
                                <img src="{{ asset($reservation->image_medium) }}" class="emzReserveImg">
                                <div class="emzDetailsBox" style="background-color:{{ $reservation->color_code }}">
                                    <div class="emzDiscoverBox">
                                        <a href="{{ route('reservation.show',$reservation->id) }}" class="emzDiscoverLink d-inline-block">
                                            <div class="d-flex align-items-center">
                                                <span class="emzDiscoverIcon">
                                                    <i class="fas fa-link"></i>
                                                </span>
                                                <div class="emzDiscoverTit">
                                                    <span>{{ __('Discover more') }}</span>
                                                    <span class="ms-2 rscnAngleLtr"><i class="fas fa-angle-right"></i></span>
                                                    <span class="me-2 rscnAngleRtl"><i class="fas fa-angle-left"></i></span>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="emzDiscoverDesc">
                                            {!! Str::limit(langConverter($reservation->en_discover,$reservation->fr_discover),120) !!}
                                        </div>
                                    </div>
                                    <div class="emzDiscoverBox">
                                        <a   target="_blank" href="{{ $reservation->location }}" class="emzDiscoverLink d-inline-block">
                                            <div class="d-flex">
                                                <span class="emzDiscoverIcon">
                                                    <i class="fas fa-map-marker-alt"></i>
                                                </span>
                                                <div class="emzDiscoverTit">
                                                    <span>{{ __('Location') }}</span>
                                                    <span class="ms-2 rscnAngleLtr"><i class="fas fa-angle-right"></i></span>
                                                    <span class="me-2 rscnAngleRtl"><i class="fas fa-angle-left"></i></span>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="emzDiscoverDesc">
                                            {!! Str::limit(langConverter($reservation->en_location,$reservation->fr_location),120) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <!-- /Work Area  -->

@endsection