<?php $__env->startSection('main-content'); ?>
    <style>
        /*=========================================
                    BLOG DETAILS PAGE
                    ==========================================*/

        .hero-wrap-2 {
            position: relative;
            background-size: cover;
            background-position: center;
            padding: 140px 0;
        }

        .hero-wrap-2 .overlay {
            background: rgba(31, 48, 68, .75);
        }

        .bread {
            color: #fff;
            font-size: 48px;
            font-weight: 700;
        }

        .breadcrumbs {
            color: #ddd;
        }

        .breadcrumbs a {
            color: #fff;
            text-decoration: none;
        }

        .blog-single {

            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, .08);

        }

        .blog-single h2 {

            color: #1F3044;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 20px;

        }

        .blog-single img {

            width: 100%;
            border-radius: 12px;
            margin: 25px 0;

        }

        .blog-content {

            font-size: 17px;
            line-height: 2;
            color: #555;

        }

        .blog-content p {

            margin-bottom: 20px;

        }

        /*======================
                    Sidebar
                    =======================*/

        .sidebar-box {

            background: #fff;
            padding: 30px;
            margin-bottom: 30px;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

        }

        .sidebar-box h3 {

            color: #1F3044;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 25px;

        }

        /*======================
                    Search
                    =======================*/

        .search-form {

            position: relative;

        }

        .search-form input {

            height: 55px;
            border-radius: 40px;
            padding-left: 20px;
            padding-right: 55px;
            border: 1px solid #ddd;

        }

        .search-form .icon {

            position: absolute;
            right: 22px;
            top: 18px;
            color: #1F3044;

        }

        /*======================
                    Recent Blog
                    =======================*/

        .block-21 {

            display: flex;
            gap: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 18px;
            margin-bottom: 18px;

        }

        .block-21:last-child {

            border: none;
            margin-bottom: 0;

        }

        .blog-img {

            width: 95px;
            height: 95px;
            min-width: 95px;
            border-radius: 10px;
            background-size: cover;
            background-position: center;

        }

        .block-21 .heading {

            font-size: 17px;
            font-weight: 600;
            line-height: 1.5;

        }

        .block-21 .heading a {

            color: #1F3044;
            text-decoration: none;

        }

        .block-21 .heading a:hover {

            color: #C18E3C;

        }

        .block-21 .meta {

            font-size: 13px;
            color: #888;

        }

        /*======================
                    Tags
                    =======================*/

        .tagcloud {

            display: flex;
            flex-wrap: wrap;
            gap: 10px;

        }

        .tag-cloud-link {

            padding: 10px 18px;
            background: #1F3044;
            color: #fff;
            border-radius: 30px;
            text-decoration: none;
            transition: .3s;

        }

        .tag-cloud-link:hover {

            background: #C18E3C;
            color: #fff;

        }

        /*======================
                    Author
                    =======================*/

        .about-author {

            display: flex;
            align-items: center;
            gap: 25px;
            border-radius: 12px;
            border-left: 5px solid #1F3044;
            background: #F8F9FA;

        }

        .about-author img {

            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;

        }

        .about-author h3 {

            color: #1F3044;
            margin-bottom: 10px;

        }

        /*======================
                    Responsive
                    =======================*/

        @media(max-width:991px) {

            .blog-single {

                padding: 25px;

            }

            .blog-single h2 {

                font-size: 30px;

            }

            .hero-wrap-2 {

                padding: 100px 0;

            }

            .bread {

                font-size: 34px;

            }

        }
    </style>
    <section class="hero-wrap hero-wrap-2" style="background-image: url('<?php echo e(asset('assets/images/bg-1.webp')); ?>');">

        <div class="overlay"></div>

        <div class="container">

            <div class="row no-gutters slider-text align-items-center justify-content-center">

                <div class="col-lg-10 text-center">

                    <p class="breadcrumbs">

                        <span class="me-2">

                            <a href="<?php echo e(route('home')); ?>">
                                Home
                                <i class="fa fa-chevron-right"></i>
                            </a>

                        </span>

                        <span class="me-2">

                            <a href="<?php echo e(route('blogs')); ?>">
                                Blogs
                                <i class="fa fa-chevron-right"></i>
                            </a>

                        </span>

                        <span>

                            Blog Details

                        </span>

                    </p>

                    <h1 class="mb-0 bread">
                        Blog Details
                    </h1>

                </div>

            </div>

        </div>

    </section>

    <section class="ftco-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 blog-single">

                    <h2 class="mb-3">
                        <?php echo e($blog->title); ?>

                    </h2>

                    <p>
                        <?php echo nl2br(e($blog->short_description)); ?>

                    </p>

                    <?php if($blog->image): ?>
                        <p>
                            <img src="<?php echo e(asset('uploads/blogs/' . $blog->image)); ?>" class="img-fluid"
                                alt="<?php echo e($blog->title); ?>">
                        </p>
                    <?php endif; ?>

                    <div class="blog-content">

                        <?php echo $blog->description; ?>


                    </div>

                    <div class="tag-widget post-tag-container mb-5 mt-5">

                        <div class="tagcloud">

                            <a href="#" class="tag-cloud-link">
                                Legal
                            </a>

                            <a href="#" class="tag-cloud-link">
                                Law
                            </a>

                            <a href="#" class="tag-cloud-link">
                                Blog
                            </a>

                        </div>

                    </div>


                </div> <!-- .col-md-8 -->
                <div class="col-lg-4 sidebar ps-lg-4">
                    <div class="sidebar-box bg-light rounded p-3">

                        <div class="about-author d-flex align-items-center">

                            <div class="bio me-3">

                                <img src="<?php echo e(asset('assets/images/default.png')); ?>" class="img-fluid rounded-circle"
                                    width="80" height="80" alt="Admin">

                            </div>

                            <div class="desc">

                                <h5 class="mb-1 fw-bold text-dark">
                                    Admin
                                </h5>

                                <small class="text-muted d-block">
                                    Published on
                                </small>

                                <span class="text-primary">
                                    <?php echo e($blog->created_at->format('d M Y')); ?>

                                </span>

                            </div>

                        </div>

                    </div>
                    <div class="sidebar-box">

                        <h3 class="heading-sidebar mb-4">
                            Recent Blogs
                        </h3>

                        <?php $__empty_1 = true; $__currentLoopData = $recentBlogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $recent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <div class="block-21 mb-4 d-flex">

                                <a href="<?php echo e(route('blog.details', $recent->slug)); ?>" class="blog-img me-3"
                                    style="background-image:url('<?php echo e(asset('uploads/blogs/' . $recent->image)); ?>');">
                                </a>

                                <div class="text">

                                    <h3 class="heading">

                                        <a href="<?php echo e(route('blog.details', $recent->slug)); ?>">

                                            <?php echo e($recent->title); ?>


                                        </a>

                                    </h3>

                                    <div class="meta">

                                        <div>

                                            <span class="fa fa-calendar"></span>

                                            <?php echo e($recent->created_at->format('d M Y')); ?>


                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>

                            <p>No Recent Blogs Found.</p>
                        <?php endif; ?>

                    </div>

                    <div class="sidebar-box">

                        <h3>Popular Tags</h3>

                        <div class="tagcloud">

                            <a href="#" class="tag-cloud-link">Law</a>

                            <a href="#" class="tag-cloud-link">Legal</a>

                            <a href="#" class="tag-cloud-link">Corporate</a>

                            <a href="#" class="tag-cloud-link">Business</a>

                            <a href="#" class="tag-cloud-link">Saudi Arabia</a>

                            <a href="#" class="tag-cloud-link">Investment</a>

                        </div>

                    </div>
                    <div class="sidebar-box">

                        <h3>About This Blog</h3>

                        <p>

                            Stay updated with the latest legal news, business regulations,
                            commercial laws and expert legal advice from Al Jubail Law Firm.

                        </p>

                    </div>
                </div>

            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('website.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\LAPOP CLINIC\Desktop\New folder (2)\Aljubail_web\resources\views/website/blog-details.blade.php ENDPATH**/ ?>