

<?php $__env->startPush('css'); ?>
<link rel="stylesheet" href="<?php echo e(asset('home')); ?>/css/index.css">
<style>
    /* Additional Blog-specific Styles */
    .blog-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 100px 0;
        text-align: center;
    }

    .blog-content {
        padding: 80px 0;
    }

    .blog-container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }

    .blog-posts {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .blog-post {
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s;
    }

    .blog-post:hover {
        transform: translateY(-5px);
    }

    .post-image {
        height: 300px;
        overflow: hidden;
    }

    .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }

    .blog-post:hover .post-image img {
        transform: scale(1.05);
    }

    .post-content {
        padding: 30px;
    }

    .search-form {
        position: relative;
    }

    .search-form input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
        padding-right: 45px;
    }

    .search-form button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: var(--primary);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 5px;
    }

    .post-meta {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 0.9rem;
        color: #666;
    }

    .post-meta i {
        color: var(--primary);
        margin-right: 5px;
    }

    .post-content h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        color: var(--dark);
    }

    .post-excerpt {
        margin-bottom: 20px;
        color: var(--text);
    }

    .read-more {
        display: inline-block;
        color: var(--primary);
        font-weight: 600;
        transition: color 0.3s;
    }

    .read-more:hover {
        color: var(--secondary);
    }

    .sidebar {
        background-color: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: var(--shadow);
        height: fit-content;
    }

    .sidebar-widget {
        margin-bottom: 40px;
    }

    .sidebar-widget:last-child {
        margin-bottom: 0;
    }

    .sidebar-widget h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light);
        color: var(--dark);
    }

    .categories-list {
        list-style: none;
    }

    .categories-list li {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .categories-list li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .categories-list a {
        color: var(--text);
        display: flex;
        justify-content: space-between;
        transition: color 0.3s;
    }

    .categories-list a:hover {
        color: var(--primary);
    }

    .recent-post {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .recent-post:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .recent-post-image {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
    }

    .recent-post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .recent-post-content h4 {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .recent-post-content span {
        font-size: 0.8rem;
        color: #666;
    }

    .tags-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tag {
        background-color: var(--light);
        color: var(--text);
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 0.9rem;
        transition: all 0.3s;
    }

    .tag:hover {
        background-color: var(--primary);
        color: white;
        cursor: pointer;
    }

    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .newsletter-form input {
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 50px;
    }

    .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        background-color: white;
        color: var(--text);
        font-weight: 600;
        transition: all 0.3s;
        box-shadow: var(--shadow);
    }

    .page-link:hover,
    .page-link.active {
        background-color: var(--primary);
        color: white;
    }

    /* Responsive Styles */
    @media (max-width: 992px) {
        .blog-container {
            grid-template-columns: 1fr;
        }

        .sidebar {
            order: -1;
        }
    }

    @media (max-width: 576px) {
        .post-image {
            height: 200px;
        }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<!-- Blog Hero Section -->
<section class="blog-hero">
    <div class="container hero-content">
        <h2>Blog & News</h2>
        <p>Stay updated with the latest health information, medical breakthroughs, and hospital news from TGP Hospital.
        </p>
    </div>
</section>

<!-- Blog Content Section -->
<section class="blog-content">
    <div class="container blog-container">
        <div class="blog-posts">

            <?php $__currentLoopData = $blogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <!-- Blog Post 1 -->
            <article class="blog-post">
                <div class="post-image">
                    <img src="<?php echo e(asset($blog->image)); ?>" alt="Breakthrough in Heart Surgery">
                </div>
                <div class="post-content">
                    <div class="post-meta">
                        <span><i class="far fa-calendar"></i> <?php echo e(date('F d, Y', strtotime($blog->created_at))); ?></span>
                        <span><i class="far fa-user"></i> <?php echo e($blog->author); ?></span>
                        <span><i class="far fa-folder"></i> <?php echo e($blog->category->name); ?></span>
                    </div>
                    <h3><?php echo e($blog->title); ?></h3>
                    <p class="post-excerpt"><?php echo \Illuminate\Support\Str::words($blog->content, 100); ?></p>
                    <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


        </div>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Search Widget -->
            <div class="sidebar-widget">
                <h3>Search</h3>
                <div class="search-form">
                    <input type="text" id="search-input" placeholder="Search articles...">
                    <button id="search-btn"><i class="fas fa-search"></i></button>
                </div>
            </div>

            <!-- Categories Widget -->
            <div class="sidebar-widget">
                <h3>Categories</h3>
                <ul class="categories-list">
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li><a href="#"><?php echo e($category->name); ?><span>(<?php echo e($category->blogs()->count()); ?>)</span></a></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>

            <!-- Recent Posts Widget -->
            <div class="sidebar-widget">
                <h3>Recent Posts</h3>
                <div class="recent-posts">

                    <?php $__currentLoopData = $recently; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="recent-post">
                        <div class="recent-post-image">
                            <img src="<?php echo e($blog->image); ?>" alt="Recent Post">
                        </div>
                        <div class="recent-post-content">
                            <h4><?php echo e($blog->title); ?></h4>
                            <span><i class="far fa-calendar"></i> <?php echo e(date('F d, Y', strtotime($blog->created_at))); ?></span>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </div>
            </div>

            <!-- Tags Widget -->
            <div class="sidebar-widget">
                <h3>Tags</h3>
                <div class="tags-cloud">
                    <?php $__currentLoopData = $tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <span class="tag"><?php echo e($tag->name); ?></span>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <!-- Newsletter Widget -->
            <div class="sidebar-widget">
                <h3>Newsletter</h3>
                <p>Subscribe to our newsletter to get the latest health news and updates.</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="Your Email Address">
                    <button class="btn btn-primary">Subscribe</button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Appointment CTA -->
<section class="appointment-cta">
    <div class="container">
        <h2>Need Medical Assistance?</h2>
        <p>Our team of healthcare professionals is ready to help you with your health concerns.</p>
        <a href="<?php echo e(route('booking')); ?>"><button class="btn btn-outline"
                style="background-color: white; color: var(--primary); margin-top: 30px;">Book an Appointment &nbsp; <i
                    class="fa-regular fa-calendar-check"></i></button></a>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('js'); ?>
<script src="<?php echo e(asset('home')); ?>/js/index.js"></script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.home', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\TGP-hospital-site\resources\views/home/blog.blade.php ENDPATH**/ ?>