@extends('frontend.layouts.app')

@section('content')
    <!-- Breadcrumb Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">Blog Details</h4>
            <ol class="breadcrumb d-flex justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Blog</a></li>
                <li class="breadcrumb-item active text-primary">Details</li>
            </ol>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Blog Details Start -->
    <div class="container py-5">
        <div class="row g-5">
            <div class="col-lg-8 wow fadeInUp" data-wow-delay="0.2s">
                <div class="blog-details">
                    <img src="{{ asset('assets/frontend/img/blog-1.png') }}" class="img-fluid rounded mb-4" alt="">

                    <div class="d-flex justify-content-between mb-3">
                        <div class="text-muted"><i class="fa fa-user text-primary me-2"></i> Martin.C</div>
                        <div class="text-muted"><i class="fa fa-calendar text-primary me-2"></i> 30 Dec 2025</div>
                        <div class="text-muted"><i class="fa fa-comment-alt text-primary me-2"></i> 6 Comments</div>
                    </div>

                    <h1 class="mb-4">Which allows you to pay down insurance bills</h1>

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, consequatur. Vero autem harum
                        magnam? Minima, illo deserunt? Velit magni ipsa at distinctio molestias rem atque, dolores vel?
                        Magnam, impedit nulla.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec est at dolor cursus malesuada.
                        Pellentesque ac urna at libero convallis egestas. Nulla at erat viverra, scelerisque nisl a,
                        fringilla sapien.</p>

                    <blockquote class="blockquote bg-light p-4 rounded">
                        <p class="mb-0 fst-italic">"Success usually comes to those who are too busy to be looking for it."
                        </p>
                        <footer class="blockquote-footer mt-2">Henry David Thoreau</footer>
                    </blockquote>

                    <p>Curabitur fringilla arcu et urna tincidunt, in imperdiet sapien sollicitudin. Sed sagittis, diam sed
                        pulvinar eleifend, velit velit pharetra arcu, ut tincidunt mi sem eu elit. Donec vestibulum
                        tincidunt nulla, sit amet blandit justo convallis vel.</p>

                    <!-- Optional Tags/Share Section -->
                    <div class="d-flex justify-content-between mt-5">
                        <div>
                            <strong>Tags:</strong> <span class="badge bg-secondary">Business</span>
                            <span class="badge bg-secondary">Finance</span>
                        </div>
                        <div>
                            <strong>Share:</strong>
                            <a href="#" class="text-primary me-2"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="text-primary me-2"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="text-primary"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Start -->
            <div class="col-lg-4 wow fadeInUp" data-wow-delay="0.4s">
                <div class="bg-light p-4 rounded">
                    <h4 class="mb-4">Recent Posts</h4>
                    <div class="d-flex mb-3">
                        <img src="{{ asset('assets/frontend/img/blog-2.png') }}" class="flex-shrink-0 rounded me-3"
                            alt="" width="80">
                        <div>
                            <a href="#" class="h6 d-block">Leverage agile frameworks</a>
                            <small><i class="fa fa-calendar text-primary me-1"></i> 25 Dec 2025</small>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <img src="{{ asset('assets/frontend/img/blog-3.png') }}" class="flex-shrink-0 rounded me-3"
                            alt="" width="80">
                        <div>
                            <a href="#" class="h6 d-block">Streamline robust solutions</a>
                            <small><i class="fa fa-calendar text-primary me-1"></i> 20 Dec 2025</small>
                        </div>
                    </div>
                    <!-- Add more recent posts as needed -->
                </div>
            </div>
            <!-- Sidebar End -->
        </div>
    </div>
    <!-- Blog Details End -->
@endsection