@extends('layouts.front.master')
@section('contant')
    <main>
        <!-- Banner area start here -->
        <section class="banner-inner-area sub-bg bg-image" data-background="{{ url('assets/images/bg/banner-inner-bg.png') }}">
            <div class="banner-inner__shape1">
                <img class="animation__sunMove" src="{{ url('assets/images/shape/banner-inner-shape1.png') }}" alt="image">
            </div>
            <div class="banner-inner__shape2">
                <img src="{{ url('assets/images/shape/banner-inner-shape2.png') }}" alt="image">
            </div>
            <div class="banner-inner__shape3">
                <img class="animation__arryLeftRight" src="{{ url('assets/images/shape/banner-inner-shape3.png') }}" alt="image">
            </div>
            <div class="banner-inner__shape4">
                <img class="animation__arryUpDown" src="{{ url('assets/images/shape/banner-inner-shape4.png') }}" alt="image">
            </div>
            <div class="banner-inner__shape5">
                <img src="{{ url('assets/images/shape/banner-inner-shape5.png') }}" alt="image">
            </div>
            <div class="banner-inner__circle">
                <img class="slide-effect1" src="{{ url('assets/images/shape/banner-inner-circle.png') }}" alt="image">
            </div>
            <div class="banner-inner__circle2">
                <img class="slide-effect2" src="{{ url('assets/images/shape/banner-inner-circle2.png') }}" alt="image">
            </div>
            <div class="banner-inner__dots">
                <img class="pxl-image-zoom" src="{{ url('assets/images/shape/banner-inner-dots.png') }}" alt="image">
            </div>
            <div class="container">
                <div class="banner-inner__content">
                    <h1>
                        Blog Details
                    </h1>
                    <ul>
                        <li><a href="{{ route('/'); }}">Home</a></li>
                        <li><i class="fa-regular fa-angle-right"></i></li>
                        <li>Blog Details</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- Banner area end here -->

        <!-- Blog area start here -->
        <section class="blog-detals-area pt-120 pb-120">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-8 order-2 order-lg-1">
                        <div class="blog-details__item-left">
                            <div class="image">
                                <img src="{{url('uploads/blogImages').'/'.$blogdetail->image}}" alt="image">
                            </div>
                            <ul class="info mt-40 pb-20 bor-bottom">

                                <li>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6.66406 4.79102C6.3224 4.79102 6.03906 4.50768 6.03906 4.16602V1.66602C6.03906 1.32435 6.3224 1.04102 6.66406 1.04102C7.00573 1.04102 7.28906 1.32435 7.28906 1.66602V4.16602C7.28906 4.50768 7.00573 4.79102 6.66406 4.79102ZM13.3307 4.79102C12.9891 4.79102 12.7057 4.50768 12.7057 4.16602V1.66602C12.7057 1.32435 12.9891 1.04102 13.3307 1.04102C13.6724 1.04102 13.9557 1.32435 13.9557 1.66602V4.16602C13.9557 4.50768 13.6724 4.79102 13.3307 4.79102ZM7.08073 12.0827C6.9724 12.0827 6.86406 12.0577 6.76406 12.016C6.65573 11.9743 6.5724 11.916 6.48906 11.841C6.33906 11.6827 6.2474 11.4743 6.2474 11.2493C6.2474 11.141 6.2724 11.0327 6.31406 10.9327C6.35573 10.8327 6.41406 10.741 6.48906 10.6577C6.5724 10.5827 6.65573 10.5243 6.76406 10.4827C7.06406 10.3577 7.43906 10.4243 7.6724 10.6577C7.8224 10.816 7.91406 11.0327 7.91406 11.2493C7.91406 11.2993 7.90573 11.3577 7.8974 11.416C7.88906 11.466 7.8724 11.516 7.8474 11.566C7.83073 11.616 7.80573 11.666 7.7724 11.716C7.7474 11.7577 7.70573 11.7993 7.6724 11.841C7.51406 11.991 7.2974 12.0827 7.08073 12.0827ZM9.9974 12.0827C9.88906 12.0827 9.78073 12.0577 9.68073 12.016C9.5724 11.9743 9.48906 11.916 9.40573 11.841C9.25573 11.6827 9.16406 11.4743 9.16406 11.2493C9.16406 11.141 9.18906 11.0327 9.23073 10.9327C9.2724 10.8327 9.33073 10.741 9.40573 10.6577C9.48906 10.5827 9.5724 10.5243 9.68073 10.4827C9.98073 10.3493 10.3557 10.4243 10.5891 10.6577C10.7391 10.816 10.8307 11.0327 10.8307 11.2493C10.8307 11.2993 10.8224 11.3577 10.8141 11.416C10.8057 11.466 10.7891 11.516 10.7641 11.566C10.7474 11.616 10.7224 11.666 10.6891 11.716C10.6641 11.7577 10.6224 11.7993 10.5891 11.841C10.4307 11.991 10.2141 12.0827 9.9974 12.0827ZM12.9141 12.0827C12.8057 12.0827 12.6974 12.0577 12.5974 12.016C12.4891 11.9743 12.4057 11.916 12.3224 11.841L12.2224 11.716C12.1908 11.6696 12.1656 11.6191 12.1474 11.566C12.1233 11.5188 12.1065 11.4682 12.0974 11.416C12.0891 11.3577 12.0807 11.2993 12.0807 11.2493C12.0807 11.0327 12.1724 10.816 12.3224 10.6577C12.4057 10.5827 12.4891 10.5243 12.5974 10.4827C12.9057 10.3493 13.2724 10.4243 13.5057 10.6577C13.6557 10.816 13.7474 11.0327 13.7474 11.2493C13.7474 11.2993 13.7391 11.3577 13.7307 11.416C13.7224 11.466 13.7057 11.516 13.6807 11.566C13.6641 11.616 13.6391 11.666 13.6057 11.716C13.5807 11.7577 13.5391 11.7993 13.5057 11.841C13.3474 11.991 13.1307 12.0827 12.9141 12.0827ZM7.08073 14.9993C6.9724 14.9993 6.86406 14.9743 6.76406 14.9327C6.66406 14.891 6.5724 14.8327 6.48906 14.7577C6.33906 14.5993 6.2474 14.3827 6.2474 14.166C6.2474 14.0577 6.2724 13.9494 6.31406 13.8493C6.35573 13.741 6.41406 13.6494 6.48906 13.5744C6.7974 13.266 7.36406 13.266 7.6724 13.5744C7.8224 13.7327 7.91406 13.9493 7.91406 14.166C7.91406 14.3827 7.8224 14.5993 7.6724 14.7577C7.51406 14.9077 7.2974 14.9993 7.08073 14.9993ZM9.9974 14.9993C9.78073 14.9993 9.56406 14.9077 9.40573 14.7577C9.25573 14.5993 9.16406 14.3827 9.16406 14.166C9.16406 14.0577 9.18906 13.9494 9.23073 13.8493C9.2724 13.741 9.33073 13.6494 9.40573 13.5744C9.71406 13.266 10.2807 13.266 10.5891 13.5744C10.6641 13.6494 10.7224 13.741 10.7641 13.8493C10.8057 13.9494 10.8307 14.0577 10.8307 14.166C10.8307 14.3827 10.7391 14.5993 10.5891 14.7577C10.4307 14.9077 10.2141 14.9993 9.9974 14.9993ZM12.9141 14.9993C12.6974 14.9993 12.4807 14.9077 12.3224 14.7577C12.2453 14.6794 12.1856 14.5857 12.1474 14.4827C12.1057 14.3827 12.0807 14.2743 12.0807 14.166C12.0807 14.0577 12.1057 13.9494 12.1474 13.8493C12.1891 13.741 12.2474 13.6494 12.3224 13.5744C12.5141 13.3827 12.8057 13.291 13.0724 13.3493C13.1307 13.3577 13.1807 13.3743 13.2307 13.3993C13.2807 13.416 13.3307 13.441 13.3807 13.4743C13.4224 13.4993 13.4641 13.541 13.5057 13.5744C13.6557 13.7327 13.7474 13.9493 13.7474 14.166C13.7474 14.3827 13.6557 14.5993 13.5057 14.7577C13.3474 14.9077 13.1307 14.9993 12.9141 14.9993ZM17.0807 8.19935H2.91406C2.5724 8.19935 2.28906 7.91602 2.28906 7.57435C2.28906 7.23268 2.5724 6.94935 2.91406 6.94935H17.0807C17.4224 6.94935 17.7057 7.23268 17.7057 7.57435C17.7057 7.91602 17.4224 8.19935 17.0807 8.19935Z"
                                            fill="#2EB97E" />
                                        <path
                                            d="M13.3333 18.9577H6.66667C3.625 18.9577 1.875 17.2077 1.875 14.166V7.08268C1.875 4.04102 3.625 2.29102 6.66667 2.29102H13.3333C16.375 2.29102 18.125 4.04102 18.125 7.08268V14.166C18.125 17.2077 16.375 18.9577 13.3333 18.9577ZM6.66667 3.54102C4.28333 3.54102 3.125 4.69935 3.125 7.08268V14.166C3.125 16.5493 4.28333 17.7077 6.66667 17.7077H13.3333C15.7167 17.7077 16.875 16.5493 16.875 14.166V7.08268C16.875 4.69935 15.7167 3.54102 13.3333 3.54102H6.66667Z"
                                            fill="#2EB97E" />
                                    </svg>
                                    <a href="#0">01-01-1970</a>
                                </li>
                                <li>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_1437_2711)">
                                            <path
                                                d="M8.05666 18.75H8.05504C7.46832 18.7495 6.91657 18.5207 6.50187 18.1052L0.660341 12.2553C-0.194072 11.3994 -0.194072 10.0065 0.660341 9.15058L8.53478 1.26102C9.3463 0.44792 10.426 0 11.575 0H16.5709C17.7824 0 18.7682 0.985546 18.7682 2.19726V7.17785C18.7682 8.32602 18.3208 9.40532 17.5084 10.2167L9.60951 18.1074C9.19455 18.5218 8.64306 18.75 8.05666 18.75ZM11.575 1.46484C10.8179 1.46484 10.1064 1.75998 9.57163 2.29579L1.69707 10.1853C1.41222 10.4708 1.41222 10.9349 1.69707 11.2203L7.53857 17.0702C7.6767 17.2086 7.86051 17.285 8.05619 17.2851H8.05677C8.1529 17.2854 8.24812 17.2666 8.33694 17.2299C8.42577 17.1931 8.50643 17.1391 8.57427 17.071L16.4732 9.18046C17.0086 8.6458 17.3034 7.93447 17.3034 7.17788V2.19726C17.3034 1.79341 16.9748 1.46484 16.5709 1.46484H11.575ZM13.458 7.43408C12.2465 7.43408 11.2608 6.44853 11.2608 5.23681C11.2608 4.0251 12.2465 3.03955 13.458 3.03955C14.6696 3.03955 15.6553 4.0251 15.6553 5.23681C15.6553 6.44853 14.6696 7.43408 13.458 7.43408ZM13.458 4.50439C13.0542 4.50439 12.7256 4.83296 12.7256 5.23681C12.7256 5.64067 13.0542 5.96924 13.458 5.96924C13.862 5.96924 14.1905 5.64067 14.1905 5.23681C14.1905 4.83296 13.862 4.50439 13.458 4.50439Z"
                                                fill="#2EB97E" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_1437_2711">
                                                <rect width="20" height="20" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>

                                    <a href="#0" class="fw-500">{{ $blogdetail->category ?? '' }}</a>
                                </li>
                            </ul>
                            <h3 class="fs-30 mt-20 mb-20">{{ $blogdetail->title ?? '' }}</h3>
                            <p class="mb-20">{!! $blogdetail->description ?? '' !!} </p>
                        </div>
                    </div>
                    <div class="col-lg-4 order-1 order-lg-2">
                        <div class="blog-details__item-right">

                            <div class="item category mb-4">
                                <h3>Categories</h3>
                                <ul>
                                    @if(count($blog_categories) > 0)
                                        @foreach ($blog_categories as $cat)
                                            <li>
                                                <a href="{{route('blog.category',$cat->slug)}}" class="">
                                                    <span>{{ $cat->name }}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div> 
                            <div class="item resent-post mb-4">
                                <h3>Resent Post</h3>
                                <ul>
                                @foreach ($recents as $recent)
                                    <li>
                                        <img src="{{url('uploads/blogImages').'/'.$recent->image}}" alt="{{ $recent->title ?? '' }}" width="100px;">
                                        <div>
                                            <span class="fs-14">
                                                <svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.66797 3.79102C5.3263 3.79102 5.04297 3.50768 5.04297 3.16602V0.666016C5.04297 0.324349 5.3263 0.0410156 5.66797 0.0410156C6.00964 0.0410156 6.29297 0.324349 6.29297 0.666016V3.16602C6.29297 3.50768 6.00964 3.79102 5.66797 3.79102ZM12.3346 3.79102C11.993 3.79102 11.7096 3.50768 11.7096 3.16602V0.666016C11.7096 0.324349 11.993 0.0410156 12.3346 0.0410156C12.6763 0.0410156 12.9596 0.324349 12.9596 0.666016V3.16602C12.9596 3.50768 12.6763 3.79102 12.3346 3.79102ZM6.08464 11.0827C5.9763 11.0827 5.86797 11.0577 5.76797 11.016C5.65964 10.9743 5.5763 10.916 5.49297 10.841C5.34297 10.6827 5.2513 10.4743 5.2513 10.2493C5.2513 10.141 5.2763 10.0327 5.31797 9.93268C5.35964 9.83268 5.41797 9.74102 5.49297 9.65768C5.5763 9.58268 5.65964 9.52435 5.76797 9.48268C6.06797 9.35768 6.44297 9.42435 6.6763 9.65768C6.8263 9.81602 6.91797 10.0327 6.91797 10.2493C6.91797 10.2993 6.90964 10.3577 6.9013 10.416C6.89297 10.466 6.8763 10.516 6.8513 10.566C6.83464 10.616 6.80964 10.666 6.7763 10.716C6.7513 10.7577 6.70964 10.7993 6.6763 10.841C6.51797 10.991 6.3013 11.0827 6.08464 11.0827ZM9.0013 11.0827C8.89297 11.0827 8.78464 11.0577 8.68464 11.016C8.5763 10.9743 8.49297 10.916 8.40964 10.841C8.25964 10.6827 8.16797 10.4743 8.16797 10.2493C8.16797 10.141 8.19297 10.0327 8.23464 9.93268C8.2763 9.83268 8.33464 9.74102 8.40964 9.65768C8.49297 9.58268 8.5763 9.52435 8.68464 9.48268C8.98464 9.34935 9.35964 9.42435 9.59297 9.65768C9.74297 9.81602 9.83464 10.0327 9.83464 10.2493C9.83464 10.2993 9.8263 10.3577 9.81797 10.416C9.80964 10.466 9.79297 10.516 9.76797 10.566C9.7513 10.616 9.7263 10.666 9.69297 10.716C9.66797 10.7577 9.6263 10.7993 9.59297 10.841C9.43464 10.991 9.21797 11.0827 9.0013 11.0827ZM11.918 11.0827C11.8096 11.0827 11.7013 11.0577 11.6013 11.016C11.493 10.9743 11.4096 10.916 11.3263 10.841L11.2263 10.716C11.1947 10.6696 11.1695 10.6191 11.1513 10.566C11.1272 10.5188 11.1104 10.4682 11.1013 10.416C11.093 10.3577 11.0846 10.2993 11.0846 10.2493C11.0846 10.0327 11.1763 9.81602 11.3263 9.65768C11.4096 9.58268 11.493 9.52435 11.6013 9.48268C11.9096 9.34935 12.2763 9.42435 12.5096 9.65768C12.6596 9.81602 12.7513 10.0327 12.7513 10.2493C12.7513 10.2993 12.743 10.3577 12.7346 10.416C12.7263 10.466 12.7096 10.516 12.6846 10.566C12.668 10.616 12.643 10.666 12.6096 10.716C12.5846 10.7577 12.543 10.7993 12.5096 10.841C12.3513 10.991 12.1346 11.0827 11.918 11.0827ZM6.08464 13.9993C5.9763 13.9993 5.86797 13.9743 5.76797 13.9327C5.66797 13.891 5.5763 13.8327 5.49297 13.7577C5.34297 13.5993 5.2513 13.3827 5.2513 13.166C5.2513 13.0577 5.2763 12.9494 5.31797 12.8493C5.35964 12.741 5.41797 12.6494 5.49297 12.5744C5.8013 12.266 6.36797 12.266 6.6763 12.5744C6.8263 12.7327 6.91797 12.9493 6.91797 13.166C6.91797 13.3827 6.8263 13.5993 6.6763 13.7577C6.51797 13.9077 6.3013 13.9993 6.08464 13.9993ZM9.0013 13.9993C8.78464 13.9993 8.56797 13.9077 8.40964 13.7577C8.25964 13.5993 8.16797 13.3827 8.16797 13.166C8.16797 13.0577 8.19297 12.9494 8.23464 12.8493C8.2763 12.741 8.33464 12.6494 8.40964 12.5744C8.71797 12.266 9.28464 12.266 9.59297 12.5744C9.66797 12.6494 9.7263 12.741 9.76797 12.8493C9.80964 12.9494 9.83464 13.0577 9.83464 13.166C9.83464 13.3827 9.74297 13.5993 9.59297 13.7577C9.43464 13.9077 9.21797 13.9993 9.0013 13.9993ZM11.918 13.9993C11.7013 13.9993 11.4846 13.9077 11.3263 13.7577C11.2492 13.6794 11.1895 13.5857 11.1513 13.4827C11.1096 13.3827 11.0846 13.2743 11.0846 13.166C11.0846 13.0577 11.1096 12.9494 11.1513 12.8493C11.193 12.741 11.2513 12.6494 11.3263 12.5744C11.518 12.3827 11.8096 12.291 12.0763 12.3493C12.1346 12.3577 12.1846 12.3743 12.2346 12.3993C12.2846 12.416 12.3346 12.441 12.3846 12.4743C12.4263 12.4993 12.468 12.541 12.5096 12.5744C12.6596 12.7327 12.7513 12.9493 12.7513 13.166C12.7513 13.3827 12.6596 13.5993 12.5096 13.7577C12.3513 13.9077 12.1346 13.9993 11.918 13.9993ZM16.0846 7.19935H1.91797C1.5763 7.19935 1.29297 6.91602 1.29297 6.57435C1.29297 6.23268 1.5763 5.94935 1.91797 5.94935H16.0846C16.4263 5.94935 16.7096 6.23268 16.7096 6.57435C16.7096 6.91602 16.4263 7.19935 16.0846 7.19935Z"
                                                        fill="#2EB97E" />
                                                    <path
                                                        d="M12.3333 17.9577H5.66667C2.625 17.9577 0.875 16.2077 0.875 13.166V6.08268C0.875 3.04102 2.625 1.29102 5.66667 1.29102H12.3333C15.375 1.29102 17.125 3.04102 17.125 6.08268V13.166C17.125 16.2077 15.375 17.9577 12.3333 17.9577ZM5.66667 2.54102C3.28333 2.54102 2.125 3.69935 2.125 6.08268V13.166C2.125 15.5493 3.28333 16.7077 5.66667 16.7077H12.3333C14.7167 16.7077 15.875 15.5493 15.875 13.166V6.08268C15.875 3.69935 14.7167 2.54102 12.3333 2.54102H5.66667Z"
                                                        fill="#2EB97E" />
                                                </svg>
                                                {{ date('d M, Y', strtotime($recent->posted_date)) }}

                                            </span>
                                            <h5><a href="{{ route('blogDetails', ['slug' => $recent->slug]) }}" class="primary-hover">
                                                    {{ $recent->title ?? '' }}
                                                </a></h5>
                                        </div>
                                    </li>
                                @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Blog area end here -->
    </main>
@endsection