@extends('layouts.app')

@section('title', $post->title . ' - Kdot Web Tech')

@section('header-class', 'header-transparent has-border-bottom has-sticky-bg')

@section('content')

        <!-- breadcrumb area start -->
        <section class="rs-breadcrumb-area rs-breadcrumb-one p-relative">
            <div class="breadcrumb-bg-thumb" data-background="{{ asset('assets/images/bg/breadcrumb-bg-thumb-05.png') }}"></div>
            <div class="breadcrumb-btn">
                <div class="rs-rotate-btn">
                    <a class="rs-circle-btn" href="{{ route('blog.index') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M26.29,20.29,18,28.59V0H16V28.59L7.71,20.29,6.29,21.71l10,10a1,1,0,0,0,1.41,0l10-10Z"></path>
                        </svg>
                    </a>
                    <div class="gsap-rotate rs-text-circle-wrapper">
                        <div class="rs-text-circle is-text-white" data-rotate-degree="12.545">Leading Digital Agency 2001.</div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xxl-12">
                        <div class="breadcrumb-wrapper">
                            <div class="breadcrumb-title-wrapper">
                                <h1 class="breadcrumb-title">Blog<br>
                                    <span class="breadcrumb-text-wrap">
                                        <span class="breadcrumb-more-btn">
                                            <a class="rs-btn has-icon hover-white" href="{{ route('home') }}">Back to home
                                                <span class="icon-box">
                                                    <i class="fa-light fa-arrow-right-long icon-first"></i>
                                                    <i class="fa-light fa-arrow-right-long icon-second"></i>
                                                </span>
                                            </a>
                                        </span>
                                        details
                                    </span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- breadcrumb area end -->

        <!-- text slider area start -->
        <div class="rs-text-slide-area rs-text-slide-one">
            <div class="text-slide-wrapper">
                <div class="gsap-marquee right speed-20 move-to-1000">
                    <div class="text-slide-inner">
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Software Programming</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">UI/UX Design</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Development Agency</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Web Development</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Innovative Ideas</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">Programming</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                        <div class="text-slide-item">
                            <h5 class="text-slide-title">App Development</h5>
                            <div class="text-slide-thumb">
                                <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- text slider area end -->

        <!-- postbox area start -->
        <section class="rs-postbox-area section-space">
            <div class="container">
                <div class="row g-5">
                    <div class="col-xl-8 col-lg-8">
                        <div class="rs-postbox-details-wrapper">
                            @if($post->featured_image)
                            <div class="rs-postbox-details-thumb mb-40">
                                <img src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}">
                            </div>
                            @endif
                            <div class="rs-postbox-details-content">
                                <h1 class="rs-postbox-details-title mb-20">{{ $post->title }}</h1>
                                <div class="rs-postbox-meta mb-30">
                                    @if($post->category)
                                    <span class="rs-postbox-category"><i class="fa-light fa-folder"></i> {{ $post->category }}</span>
                                    @endif
                                    @if($post->published_at)
                                    <span class="rs-postbox-date"><i class="fa-light fa-calendar"></i> {{ $post->published_at->format('M d, Y') }}</span>
                                    @endif
                                </div>
                                <div class="rs-postbox-text">
                                    {!! nl2br(e($post->content)) !!}
                                </div>
                                
                                @if($post->tags)
                                <div class="rs-postbox-details-tags tagcloud mt-40">
                                    <span>Tags:</span>
                                    @foreach(explode(',', $post->tags) as $tag)
                                        <a href="#">{{ trim($tag) }}</a>
                                    @endforeach
                                </div>
                                @endif

                                <div class="rs-postbox-nav mt-50">
                                    <div class="rs-postbox-nav-item">
                                        <a class="rs-btn hover-white" href="{{ route('blog.index') }}">
                                            <i class="fa-light fa-arrow-left"></i> Back to Blog
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-lg-4">
                        <div class="rs-sidebar-wrapper rs-sidebar-sticky">
                            <!-- Search Widget -->
                            <div class="sidebar-widget mb-30">
                                <div class="sidebar-search">
                                    <form action="#" method="get">
                                        <div class="sidebar-search-input">
                                            <input type="text" placeholder="Searching...">
                                            <button type="submit">
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M8.11111 15.2222C12.0385 15.2222 15.2222 12.0385 15.2222 8.11111C15.2222 4.18375 12.0385 1 8.11111 1C4.18375 1 1 4.18375 1 8.11111C1 12.0385 4.18375 15.2222 8.11111 15.2222Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M16.9995 17L13.1328 13.1333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- Categories Widget -->
                            <div class="sidebar-widget widget-categories-two mb-30">
                                <h5 class="sidebar-widget-title">Popular Categories</h5>
                                <div class="sidebar-widget-content">
                                    <div class="list">
                                        <ul>
                                            @foreach(\App\Models\BlogPost::published()->select('category')->distinct()->limit(4)->get() as $cat)
                                                @if($cat->category)
                                                <li>
                                                    <a href="#">
                                                        {{ $cat->category }}
                                                        <i class="ri-arrow-right-line"></i>
                                                    </a>
                                                </li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- Recent Posts Widget -->
                            <div class="sidebar-widget mb-30">
                                <h5 class="sidebar-widget-title">Recent Posts</h5>
                                <div class="sidebar-widget-content">
                                    <div class="sidebar-blog-item-wrapper">
                                        @foreach(\App\Models\BlogPost::published()->where('id', '!=', $post->id)->take(3)->get() as $recentPost)
                                        <div class="sidebar-blog-item">
                                            @if($recentPost->featured_image)
                                            <div class="sidebar-blog-thumb">
                                                <a href="{{ route('blog.show', $recentPost->slug) }}">
                                                    <img src="{{ asset($recentPost->featured_image) }}" alt="{{ $recentPost->title }}">
                                                </a>
                                            </div>
                                            @endif
                                            <div class="sidebar-blog-content">
                                                <h6 class="sidebar-blog-title">
                                                    <a href="{{ route('blog.show', $recentPost->slug) }}">{{ $recentPost->title }}</a>
                                                </h6>
                                                <div class="sidebar-blog-meta">
                                                    <i class="ri-calendar-line"></i>
                                                    @if($recentPost->published_at)
                                                    <span>{{ $recentPost->published_at->format('M d, Y') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Tags Widget -->
                            <div class="sidebar-widget mb-30">
                                <h5 class="sidebar-widget-title">Popular Tags</h5>
                                <div class="sidebar-widget-content tagcloud">
                                    <a href="#">Agency</a>
                                    <a href="#">Creative</a>
                                    <a href="#">Digital</a>
                                    <a href="#">Marketing</a>
                                    <a href="#">Startup</a>
                                </div>
                            </div>

                            <!-- Social Widget -->
                            <div class="sidebar-widget">
                                <h5 class="sidebar-widget-title">Social</h5>
                                <div class="sidebar-social">
                                    <div class="theme-social is-white is-radius">
                                        <a href="#"><i class="ri-twitter-x-line"></i></a>
                                        <a href="#"><i class="ri-facebook-fill"></i></a>
                                        <a href="#"><i class="ri-linkedin-fill"></i></a>
                                        <a href="#"><i class="ri-instagram-line"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- postbox area end -->

@endsection