@extends('web.layouts.layout')
@section('content')

<main>

    <!-- ---------- innerheader ----------- -->
    <section class="inner-header pt-100">
        <div class="container">
            <div class="cont">
                <div class="bread d-flex fw-bold fsz-18">
                    <a href="{{ route('web.home') }}"> <i class="fal fa-home"></i> </a>
                    <span class="mx-3"> / </span>
                    <a href="{{ route('web.news') }}"> {{ __('web.blog') }} </a>
                    <span class="mx-3"> / </span>
                    <a href="javascript:void(0);"> {{ __('web.news_details') }} </a>
                </div>
                <h1 class="fsz-40 mt-10 cr-sub"> {{ $newsItem->currentDescription->title ?? $newsItem->title ?? __('web.news_title_default') }} </h1>
            </div>
        </div>
        <img src="{{ asset('assets/web/images/hero-top-shap.png') }}" alt="" class="shap">
    </section>

    <!-- ---------- post ----------- -->
    <section class="post-det section-padding pt-4">
        <div class="container">
            @php($newsImage = $newsItem->image_url ?? ($newsItem->image ? asset($newsItem->image) : asset('assets/web/images/port1.jpg')))
            @php($newsDate = $newsItem->created_at ? $newsItem->created_at->format('j M Y') : '')
            @php($newsDescription = $newsItem->currentDescription->description ?? $newsItem->description ?? '')

            <div class="main-img th-500 radius-20 overflow-hidden">
                <img src="{{ $newsImage }}" alt="{{ $newsItem->currentDescription->title ?? $newsItem->title ?? '' }}" class="img-cover">
                <div class="date fw-bold mb-10"> <i class="fal fa-calendar me-3"></i> <span class="txt"> {{ $newsDate }} </span> </div>
            </div>
            <div class="info col-lg-10">
                <div class="main-txt fsz-20 cr-sub fw-bold mt-30"> {{ $newsDescription }} </div>
                <div class="share d-flex align-items-center mb-20 mt-50 pt-4 border-top">
                    <strong> {{ __('web.share') }} : </strong>
                    <div class="social-icons fsz-18 ms-4">
                        @php($newsUrl = route('web.news.show', $newsItem->id))
                        @php($newsTitle = urlencode($newsItem->currentDescription->title ?? $newsItem->title ?? ''))
                        @php($newsDescription = urlencode(\Illuminate\Support\Str::limit(strip_tags($newsItem->currentDescription->description ?? $newsItem->description ?? ''), 200)))
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($newsUrl) }}&quote={{ $newsTitle }}" target="_blank" class="me-3" title="{{ __('web.share_on_facebook') }}"> <i class="fab fa-facebook-f"></i> </a>
                        <a href="https://www.instagram.com/" target="_blank" class="me-3" title="{{ __('web.share_on_instagram') }}"> <i class="fab fa-instagram"></i> </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode($newsUrl) }}&text={{ $newsTitle }}" target="_blank" class="me-3" title="{{ __('web.share_on_x') }}"> <i class="fab fa-x-twitter"></i> </a>
                        <a href="https://wa.me/?text={{ $newsTitle }}%20{{ urlencode($newsUrl) }}" target="_blank" class="me-3" title="{{ __('web.share_on_whatsapp') }}"> <i class="fab fa-whatsapp"></i> </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode($newsUrl) }}" target="_blank" class="me-3" title="{{ __('web.share_on_linkedin') }}"> <i class="fab fa-linkedin-in"></i> </a>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- ---------- posts ----------- -->
    <section class="another-posts section-padding border-top border-2 overflow-hidden">
        <div class="container">
            <div class="title-wrapper mb-30">
                <h2 class="fsz-50 fw-bold cr-sub"> {{ __('web.other_news') }} </h2>
            </div>
            <div class="posts-slider position-relative pb-80">
                <div class="swiper-wrapper">
                    @forelse($otherNews as $otherNewsItem)
                        @php($otherNewsImage = $otherNewsItem->image_url ?? ($otherNewsItem->image ? asset($otherNewsItem->image) : asset('assets/web/images/port1.jpg')))
                        @php($otherNewsTitle = strip_tags($otherNewsItem->currentDescription->title ?? $otherNewsItem->title ?? ''))
                        @php($otherNewsDescription = $otherNewsItem->currentDescription->description ?? $otherNewsItem->description ?? '')
                        @php($otherNewsDate = $otherNewsItem->created_at ? $otherNewsItem->created_at->format('d M Y') : '')
                        <div class="swiper-slide">
                            <a href="{{ route('web.news.show', $otherNewsItem->id) }}" class="post-card">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="img th-230 radius-15 overflow-hidden">
                                            <img src="{{ $otherNewsImage }}" alt="{{ $otherNewsTitle }}" class="img-cover">
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="info p-4">
                                            <div class="date fsz-14 opacity-75"> <i class="fal fa-clock cr-main me-2"></i> {{ $otherNewsDate }} </div>
                                            <h3 class="fsz-18 mt-3 cr-sub"> {{ $otherNewsTitle }} </h3>
                                            <div class="text"> {{ \Illuminate\Support\Str::limit(strip_tags($otherNewsDescription), 150) }} </div>
                                            <span class="more fw-bold mt-20"> {{ __('web.read_more') }} <i class="fal fa-arrow-left ms-3"></i> </span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @empty
                        {{-- No other news available --}}
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <img src="{{ asset('assets/web/images/ser-bg-shaps.png') }}" alt="" class="shapes">
    </section>

</main>

@endsection
