@extends('frontend.layouts.main')
@section('main-container')
<section class="product-detail-section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="product-about-block-new">
                    <div class="breadcrumb-div">
                        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}"
                                        class="breadcrumb-item-link fs-5 text-dark fw-bloder">Home</a></li>
                                <li class="breadcrumb-item active fs-5 text-dark fw-bloder" aria-current="page">
                                    {{ $details->title }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-----footer start here -->
<section class="product-slider pb-5">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="product-head pb-3">
                    <h4 class="category_title f-24 pb-4"> {{ $details->title }}
                    </h4>
                </div>
                <div class="product_slider">
                    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
                        class="swiper mySwiper2 pb-3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img
                                    src="{{ asset($details->detail_image) }}" />
                            </div>


                        </div>
                    </div>
                </div>
                <div class="blog_person d-flex align-items-center pt-3">
                    <div class="d-flex align-items-center pe-3">
                        <div class="blog_person_img my-2">
                            <img src="{{ asset($details->author_image) }}"
                                class="img-fluid">
                        </div>
                        <h5 class="about-span text-dark ps-3 m-0"> by {{ $details->author_name }}</h5>
                    </div>
                    <h5 class="panel_title p-0 m-0">{{ Carbon\Carbon::parse($details->created_at)->format('F d Y') }}</h5>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="blog_content_new">
                            <p class="panel_title m-0">{!! $details->long_description !!}</p>
                                
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div>
                            <span class="amount-price-new"> Recent Post </span>
                            <div class="content-detail pt-3">
                                @foreach($blog_related  as $related)
                                <div class="d-flex align-items-center py-2 px-2 border_top">
                                    <div class="popular_blog_img">
                                        <img src="{{ asset($related->thumbnail) }}">
                                        </div>
                                    <span class="category_title ps-3">{{ $related->title }} </span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@endsection