@extends('layouts.app')

@section('content')
<div class="back-wrapper">
            @php
                $locale = app()->getLocale();
                $title = $post->titleForLocale($locale) ?? '';
                $excerpt = $post->excerptForLocale($locale);
                $content = $post->contentForLocale($locale) ?? '';
                $slug = $post->slugForLocale($locale) ?? '';
                $cover = $post->cover_image ? Storage::url($post->cover_image) : asset('assets/images/blog-grid/2.jpg');
                $categories = $post->categories;
            @endphp
            <!--================= Back Breadcrumbs Section Start Here =================-->
            <div class="back-breadcrumbs">
                <div class="breadcrumbs-wrap">
                    <div class="breadcrumbs-inner">
                        <div class="container">
                            <div class="breadcrumbs-text">
                                <h1 class="breadcrumbs-title">{{ $title }}</h1>
                                <div class="back-nav">
                                    <ul>
                                        <li><a href="{{ route('home', ['locale' => locale_param()]) }}">{{ __('site.common.home') }}</a></li>
                                        <li>{{ $title }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
            <!--================= Back Breadcrumbs Section End Here =================-->

            <!--================= Blog Section Start Here =================-->
            <div class="back__blog__area back-blog-page back-blog-page-single pt-70 pb-60">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="blog-single-inner">
                                <div class="blog-content">
                                    <div class="blog-image">
                                        <img src="{{ $cover }}" alt="Blog Image">
                                    </div>

                                    @if ($excerpt)
                                        <p>{{ $excerpt }}</p>
                                    @endif

                                    <div class="post-content">
                                        {!! $content !!}
                                    </div>

                                    <div class="blog-tags">
                                        <div class="row align-items-center">
                                            <div class="col-md-8">
                                                <ul class="mata-tags">
                                                    <li class="tags">{{ __('site.blog.tags') }}</li>
                                                    @foreach ($categories as $category)
                                                        @php
                                                            $catName = $category->nameForLocale($locale) ?? '';
                                                            $catSlug = $category->slugForLocale($locale) ?? '';
                                                        @endphp
                                                        <li><a href="{{ category_url($catSlug) }}">{{ $catName }}</a></li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <div class="col-md-4">
                                                <ul class="social-links text-right"> 
                                                    <li class="shares">{{ __('site.blog.share') }}</li>                                    
                                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div> 

                                    <a href="#" class="post-author">
                                        <div class="avatar">
                                            <img src="{{ asset('assets/images/single-blog/1.jpg') }}" alt=""> 
                                        </div>
                                        <div class="info">
                                            <h4 class="name">{{ $siteTitle }}</h4>                                                
                                            <p>{{ __('site.blog.latest_stories') }}</p>
                                            <span class="designation">{{ __('site.blog.all_stories_by', ['site' => $siteTitle]) }}</span>
                                        </div>
                                    </a> 

                                    <div class="single-nav"> 
                                        <div class="back-prev"> <a href="#"><i class="fa-solid fa-arrow-right"></i> {{ __('site.blog.previous_post') }} <em>{{ __('site.blog.prev_post_title') }}</em></a> </div>
                                        
                                        <div class="back-next"><a href="#">{{ __('site.blog.next_post') }} <i class="fa-solid fa-arrow-right"></i> <em>{{ __('site.blog.next_post_title') }}</em></a></div>
                                    </div>

                                    
                                    <div class="back-blog-related">                    
                                        <div class="container"> 
                                        <div class="back-title back-small-title">
                                            <h2>{{ __('site.blog.related_posts') }}</h2>
                                        </div>                   
                                            <ul id="back-blog-slider" class="owl-carousel owl-theme">
                                                @forelse ($relatedPosts ?? [] as $related)
                                                    @php
                                                        $relSlug = $related->slugForLocale($locale) ?? '';
                                                        $relTitle = $related->titleForLocale($locale) ?? '';
                                                        $relCover = $related->cover_image ? Storage::url($related->cover_image) : asset('assets/images/related/1.jpg');
                                                    @endphp
                                                    <li class="item">
                                                        <div class="back-inner">
                                                            <div class="back-blog-image">
                                                                <a href="{{ post_url($relSlug) }}"><img src="{{ $relCover }}" alt=""></a>
                                                            </div>
                                                            <div class="back-blog-content">
                                                                <em class="back-blog-date">{{ optional($related->published_at)->format('M d, Y') }}</em>
                                                                <a href="{{ post_url($relSlug) }}"><h3>{{ $relTitle }}</h3></a>    
                                                                <ul>
                                                                    <li class="back-author"> <span><img src="{{ asset('assets/images/author/1.jpg') }}" alt="image"></span> <a href="#">{{ $siteTitle }}</a> </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @empty
                                                    <li class="item">
                                                        <div class="back-inner">
                                                            <div class="back-blog-content">
                                                                <em class="back-blog-date">{{ __('site.blog.no_related_posts') }}</em>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforelse
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="author-comment">
                                        <div class="back-title back-small-title">
                                            <h2>{{ __('site.blog.comments_title') }}</h2>
                                        </div>
                                        <ul>
                                            <li>
                                                <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="image-comments"><img src="{{ asset('assets/images/user/user2.jpg') }}" alt=""> </div>
                                                    </div>
                                                    <div class="col-lg-11">                            
                                                        <div class="dsc-comments">
                                                            <h6>Neal Adams</h6>  
                                                            <span class="reply"> <span class="date">{{ __('site.blog.comment_date_1') }}</span></span>            
                                                            <p>{{ __('site.blog.comment_1') }}</p>
                                                            <a href="#">{{ __('site.blog.reply') }}</a>
                                                        </div>    
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="image-comments"><img src="{{ asset('assets/images/user/user.jpg') }}" alt=""> </div>
                                                    </div>
                                                    <div class="col-lg-11">                                   
                                                        <div class="dsc-comments">
                                                            <h6>Jim Séchen</h6> 
                                                            <span class="reply"> <span class="date">{{ __('site.blog.comment_date_2') }}</span></span>     
                                                            <p>{{ __('site.blog.comment_2') }}</p>
                                                            <a href="#">{{ __('site.blog.reply') }}</a>
                                                        </div>    
                                                    </div>
                                                </div>
                                            </li>  
                                            <li>
                                                <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="image-comments"><img src="{{ asset('assets/images/user/user3.jpg') }}" alt=""> </div>
                                                    </div>
                                                    <div class="col-lg-11">                                   
                                                        <div class="dsc-comments">
                                                            <h6>Justin Case</h6> 
                                                            <span class="reply"> <span class="date">{{ __('site.blog.comment_date_3') }}</span></span>     
                                                            <p>{{ __('site.blog.comment_3') }}</p>
                                                            <a href="#">{{ __('site.blog.reply') }}</a>
                                                        </div>    
                                                    </div>
                                                </div>
                                            </li>                                              
                                        </ul>
                                    </div> 

                                    <div class="back-blog-form">                                            
                                        <div id="blog-form" class="blog-form">
                                            <div class="back-title back-small-title">
                                                <h2>{{ __('site.blog.leave_reply') }}</h2>
                                            </div>
                                            <form>                                                    
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="back-textarea">
                                                            <textarea placeholder="{{ __('site.contact.message') }}"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="back-input">
                                                            <input type="text" name="name" placeholder="{{ __('site.contact.name') }}">
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-6">
                                                        <div class="back-input">
                                                            <input type="email" name="email" placeholder="{{ __('site.contact.email') }}">                                  
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-lg-12">
                                                        <div class="back-input">
                                                            <input type="text" name="website" placeholder="{{ __('site.blog.website') }}">                                  
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-12">
                                                        <div class="back-check-box">
                                                            <input type="checkbox" id="box-1"> {{ __('site.blog.save_comment_info') }}
                                                        </div>
                                                        <button type="submit" class="back-btn">{{ __('site.blog.submit_comment') }}</button>
                                                    </div>
                                                </div>                                                    
                                            </form>
                                        </div>                                            
                                    </div> 
                                </div>
                            </div> 
                        </div>
                        <div class="col-lg-4">
                            <div class="back-sidebar pl-30 md-pl-0 back-hero-area back-latest-posts back-whats-posts">

                                <form class="mb-44" action="{{ route('search', ['locale' => locale_param()]) }}" method="get">
                                    <input type="text" name="q" placeholder="{{ __('site.common.search_placeholder') }}">
                                    <button type="submit"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </button>
                                </form>                               

                                <div class="back-title back-small-title">
                                    <h2>{{ __('site.common.follow_us') }}</h2>
                                </div>

                                <ul class="social-area">
                                    @forelse (($socialLinks ?? collect()) as $link)
                                        <li>
                                            <div>
                                                <a href="{{ $link->url }}" target="_blank" rel="noopener">
                                                    <i class="{{ $link->icon ?: 'fa-brands fa-linkedin-in' }}"></i>
                                                </a>
                                                <span>{{ $link->name }}</span>
                                            </div>
                                        </li>
                                    @empty
                                        <li>
                                            <div>
                                                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                                                <span>{{ $siteTitle }}</span>
                                            </div>
                                        </li>
                                    @endforelse
                                </ul>
                                <div class="back-title back-small-title pt-30">
                                    <h2>{{ __('site.common.latest_news') }}</h2>
                                </div>
                                <ul class="back-hero-bottom">
                                    @forelse ($latestSidebar ?? [] as $post)
                                        @php
                                            $slug = $post->slugForLocale($locale) ?? '';
                                            $title = $post->titleForLocale($locale) ?? '';
                                            $cover = $post->cover_image ? Storage::url($post->cover_image) : asset('assets/images/dont/1.jpg');
                                            $category = $post->categories->first();
                                            $categoryName = $category?->nameForLocale($locale);
                                            $categorySlug = $category?->slugForLocale($locale);
                                        @endphp
                                        <li>
                                            <div class="image-areas">
                                                <a href="{{ post_url($slug) }}"><img src="{{ $cover }}" alt="image"></a>
                                            </div>
                                            <div class="back-btm-content">
                                                @if ($categoryName)
                                                    <a href="{{ category_url($categorySlug) }}" class="back-cates">{{ $categoryName }}</a>
                                                @endif
                                                <h3><a href="{{ post_url($slug) }}">{{ $title }}</a></h3>
                                                <ul>
                                                    <li class="back-date">{{ __('site.common.by') }} <a href="#">{{ $siteTitle }}</a></li>
                                                </ul>
                                            </div>
                                        </li>
                                    @empty
                                        <li>{{ __('site.common.no_posts') }}</li>
                                    @endforelse
                                </ul> 
                                @php
                                    $sidebarBanner = $bannerBlogSidebar ?? null;
                                    $gridBanners = ($bannerBlogGrid ?? collect())->take(6);
                                @endphp

                                @if ($sidebarBanner)
                                    <div class="back-add pt-15">
                                        <a href="{{ $sidebarBanner->link_url ?: '#' }}" target="_blank" rel="noopener">
                                            <img src="{{ Storage::url($sidebarBanner->image) }}" alt="{{ $sidebarBanner->titleForLocale($locale) ?? 'banner' }}">
                                        </a>
                                    </div>
                                @endif

                                @if ($gridBanners->isNotEmpty())
                                    <div class="back-title back-small-title pt-50">
                                        <h2>{{ __('site.common.highlights') }}</h2>
                                    </div>
                                    <ul class="back-instragram">
                                        @foreach ($gridBanners as $banner)
                                            <li>
                                                <a href="{{ $banner->link_url ?: '#' }}" target="_blank" rel="noopener">
                                                    <img src="{{ Storage::url($banner->image) }}" alt="{{ $banner->titleForLocale($locale) ?? 'banner' }}">
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif

                                @if (($navCategories ?? collect())->isNotEmpty())
                                    <div class="back-title back-small-title pt-50">
                                        <h2>{{ __('site.common.categories') }}</h2>
                                    </div>
                                    <div class="widget widget-tags">
                                        <ul class="tags">
                                            @foreach ($navCategories as $category)
                                                @php
                                                    $catName = $category->nameForLocale($locale) ?? '';
                                                    $catSlug = $category->slugForLocale($locale) ?? '';
                                                @endphp
                                                <li><a href="{{ category_url($catSlug) }}">{{ $catName }}</a></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--================= Blog Section End Here =================-->

        </div>
@endsection