@section('title', $blog->title)
@extends('frontend.layout.main')
@section('main-section')
    {{-- Preloader --}}
    <x-frontend.preloader></x-frontend.preloader>

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>


    <x-frontend.navbar></x-frontend.navbar>
    <!-- Breadcrumb Section Start -->
    <x-frontend.bread-crumb>
        <x-slot name="image">images/br-bg-3.jpg</x-slot>
        <x-slot name="title">Blogs</x-slot>
        <li class="position-relative fs-xx-14 d-inline-block">
            <a href="{{ route('blogs') }}">Blogs</a>
        </li>
        <li class="position-relative fs-xx-14 d-inline-block">Blog Details</li>
    </x-frontend.bread-crumb>
    <!-- Breadcrumb Section End -->

    <!-- Blog Details Section Start -->
    <div class="container style-one ptb-120">
        <div class="row">
            <div class="col-xl-12 pe-xxl-4">
                <div class="blog-desc">
                    <div class="single-img mb-30 position-relative round-20">
                        <img src="{{ asset('storage/blogs/' . $blog->featured_image) }}" alt="Single Blog" class="round-20">
                        <a href="#"
                            class="blog-date text-center d-flex flex-column align-items-center justify-content-center round-10 fs-14 font-secondary bg_secondary text-white"><span
                                class="fs-18  fw-bold ">{{ Carbon\Carbon::parse($blog->created_at)->format('d') }}</span>
                            {{ Carbon\Carbon::parse($blog->created_at)->format('M') }}</a>
                    </div>
                    
                    <div class="single-para">
                        <h1 class="fw-extrabold">{{ $blog->title }}</h1>
                        <p>{!! $blog->content !!}</p>
                    </div>
                    
                </div>
                
                

                    
            </div>
            
        </div>
    </div>
    <!-- Blog Details Section End -->

    <!-- Footer Start -->
    <x-frontend.footer></x-frontend.footer>
    <!-- Footer End -->

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection