@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => $article->meta_title,
        'description' => $article->meta_description,
        'keywords' => $article->meta_keywords,
        'image' => $article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'],
        'schema' => $article->schema,
    ])
@endsection

@section('extraStyles')
@endsection
@section('content')
    <div
        class="container-fluid bg-breadcrumb"style="  position: relative;
                                                                                                                                                                                                                                background: linear-gradient(#d09d5b30, #cc944e47), url({{ $article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_BANNER_MEDIA_PATH, 'webp')['url'] }});
                                                                                                                                                                                                                                background-position: center center;
                                                                                                                                                                                                                                background-repeat: no-repeat;
                                                                                                                                                                                                                                background-size: cover;
                                                                                                                                                                                                                                padding: 60px 0 100px 0;
                                                                                                                                                                                                                                transition: 0.5s;">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h1 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                {{ $article->name }}
            </h1>
        </div>
    </div>






    <div class="container-fluid  py-3 banar">
        <ol class="breadcrumb text-dark mb-0 wow fadeInDown" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-dark">{{ __('general.home') }}</a></li>
            <li class="breadcrumb-item active text-secondary"> {{ $article->name }}
            </li>
        </ol>
    </div>


    <section class="blog-details-container padtop-70">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-8">
                    <div class="single-post">
                        <h2 class="mb-4"> {{ $article->name }}</h2>
                        <!-- <ul class="blog-info-link mt-3 mb-4">
                            <li>
                                <a href="#"><i class="fa fa-user"></i> Travel, Lifestyle</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-comments"></i> 03 Comments</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa-solid fa-folder"></i>Egypt Travel News</a>
                            </li>
                        </ul> -->
                        <div class="feature_img">
                            <img class="img-fluid"
                                src="{{ $article->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'] }}"
                                alt="blog-details-img" />
                        </div>
                        <div class="blog_details">


                            <p>

                                {!! $article->description !!}

                            </p>
                            <blockquote>
                                {!! $article->quota_text !!}

                            </blockquote>
                        </div>
                    </div>
                </div>
                @if (count($recentArticles))
                    <div class="col-xl-4 col-lg-4">
                        <aside class="single_sidebar_widget popular_post_widget">
                            <h3 class="widget_title">Recent blog</h3>


                            @foreach ($recentArticles as $recentArticle)
                                <div class="d-flex align-items-start post_item">
                                    <a href="{{ route('blog.show', ['slug' => $recentArticle->slug]) }}">
                                        <img src="{{ $recentArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH, 'webp')['url'] }}"
                                            alt="{{ $recentArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['alt'] }}"
                                            title="{{ $recentArticle->getFirstMediaUrlOrDefault(MediaHelper::ARTICLE_MEDIA_PATH)['title'] }}"
                                            width="auto" height="auto" img-fluid"="">
                                    </a>
                                    <div class="media-body">
                                        <a href="{{ route('blog.show', ['slug' => $recentArticle->slug]) }}">
                                            <h3>{{ $recentArticle->name }}</h3>
                                        </a>
                                        <p>2024-10-28</p>
                                    </div>
                                </div>
                            @endforeach


                        </aside>

                        <aside class="single_sidebar_widget">
                            <h4 class="widget_title">Follow us </h4>
                            <ul class="social-media">

                                <li>
                                    <a href="{{ nova_get_setting('fb_url') }}" target="blank"
                                        class="btn-square btn btn-primary text-white rounded-circle mx-1 social_icon">
                                        <img src=" {{ asset('facebook.png') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ nova_get_setting('insta_url') }}" target="blank"
                                        class="btn-square btn btn-primary text-white rounded-circle mx-1 social_icon">
                                        <img src=" {{ asset('instagram.png') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ nova_get_setting('tripAdvisor_url') }}" target="blank"
                                        class="btn-square btn btn-primary text-white rounded-circle mx-1 social_icon">
                                        <img src=" {{ asset('tripAdvisor.png') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ nova_get_setting('linked_in_url') }}" target="blank"
                                        class="btn-square btn btn-primary text-white rounded-circle mx-1 social_icon">
                                        <img src="https://img.icons8.com/ios-glyphs/30/linkedin-2--v2.png">
                                    </a>
                                </li>
                            </ul>
                        </aside>
                    </div>
                @endif

            </div>
        </div>
        </div>
    </section>


    @if (count($related_tours))
        <section class="tours-card position-relative mt-5">
            <div class="container">
                <div class="row">
                    <div class="section--title text-center">
                        <div class="col-12">
                            <h3>Related Tours</h3>
                        </div>
                    </div>

                    @foreach ($related_tours as $related_tour)
                        <div class="col-lg-4">
                            <div class="package-card">
                                <div class="package-img position-relative">
                                    <a
                                        href="{{ route('tour.show', ['categorySlug' => $related_tour->category->category->slug, 'subCategorySlug' => $related_tour->category->slug, 'tourSlug' => $related_tour->slug]) }}">

                                        <img class="w-100 blog__img"
                                            src="{{ $related_tour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url'] }}"
                                            alt="{{ $related_tour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['alt'] }}"
                                            title="{{ $related_tour->getFirstMediaUrlOrDefault(MediaHelper::PARTNER_MEDIA_PATH)['title'] }}" /></a>

                                </div>
                                <div class="package-content">

                                    <h3 class="package-title mt-15 mb-15">
                                        <a
                                            href="{{ route('tour.show', ['categorySlug' => $related_tour->category->category->slug, 'subCategorySlug' => $related_tour->category->slug, 'tourSlug' => $related_tour->slug]) }}">{{ $related_tour->name }}</a>
                                    </h3>
                                    <div class="title-post">

                                        <p class="tour-para my-3">
                                            {!! \Illuminate\Support\Str::limit($related_tour->short_description, 100) !!}

                                        </p>
                                    </div>
                                    <div class="package-meta">
                                        <a
                                            href="{{ route('tour.show', ['categorySlug' => $related_tour->category->category->slug, 'subCategorySlug' => $related_tour->category->slug, 'tourSlug' => $related_tour->slug]) }}">
                                            <i class="fas fa-map-marker-alt"></i> {{ $related_tour->location }}
                                        </a>

                                        <a
                                            href="{{ route('tour.show', ['categorySlug' => $related_tour->category->category->slug, 'subCategorySlug' => $related_tour->category->slug, 'tourSlug' => $related_tour->slug]) }}"><i
                                                class="fa-solid fa-calendar-days"></i> {{ $related_tour->duration }}</a>
                                    </div>
                                    <div class="package-footer">
                                        <span class="package-price">
                                            @if (isset($related_tour->start_from))
                                                <span>{{ $related_tour->start_from }}</span>
                                            @elseif($related_tour->price)
                                                <span>{{ $related_tour->price }}</span>
                                            @else
                                                <span> {{ __('tour.price_not_avilable') }}</span>
                                            @endif
                                        </span>
                                        <a href="{{ route('tour.show', ['categorySlug' => $related_tour->category->category->slug, 'subCategorySlug' => $related_tour->category->slug, 'tourSlug' => $related_tour->slug]) }}"
                                            class="btn-effect">{{ __('tour.more_details') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
        </section>
    @endif


@endsection