
<?php $__env->startSection('pageTitle', isset($pageTitle) ? $pageTitle : 'Document Title'); ?>
<?php $__env->startSection('meta_tags'); ?>
<?php echo SEO::generate(); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<div class="container-fluid p-0">
    <section class="layout-wrapper">
        <!-- Left Sidebar -->
        <aside class="left-sidebar">
            <div class="side-header text-center">
                <h3 class="text-light pt-3 pb-2">LATEST UPDATE</h3>
            </div>
            <?php if(!empty(home_latest_posts(0, 5))): ?>
            <?php $__currentLoopData = home_latest_posts(0,5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $post): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="card ms-2 responsive-card">

                <div class="card-image">
                    <img src="/images/posts/resized/resized_<?php echo e($post->featured_image); ?>" alt="WEWSS">
                </div>

                <div class="card-content ">

                    <h5 class="card-title"><a href="<?php echo e(route('read_post', $post->slug)); ?>">
                            <?php echo e($post->title); ?>

                        </a></h5>

                    <p class="card-date"><i class="mdi mdi-calendar-badge"></i><span>&nbsp; <?php echo e(date_formatter($post->created_at)); ?></span>
                    </p>
                    <p class="card-paragraph"><?php echo Str::ucfirst(words($post->content, 15)); ?> <a href="<?php echo e(route('read_post',$post->slug)); ?>">Read more</a></p>
                    <!-- <a href="<?php echo e(route('read_post',$post->slug)); ?>" class="btn btn-outline-primary"></a> -->
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>

        </aside>

        <!-- Main Content -->
        <main class="layout-main p-1 pt-0">
            <!-- <div>
                <img name="slideshow" class="slideshow-image" src="/front/images/image15.jpg" alt="Slideshow">
            </div> -->
            <div id="dynamicCarousel" class="carousel slide carousel-fade carousel-background-color" data-bs-ride="carousel" data-bs-interval="4000">
                <div class="carousel-inner">
                    <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="carousel-item <?php echo e($index === 0 ? 'active' : ''); ?>">
                        <img src="<?php echo e(asset('images/carousel/' . $image->image_path)); ?>" class="d-block w-100"
                            style="height: 800px; object-fit: contain;" alt="Carousel Image <?php echo e($index + 1); ?>" loading="lazy">
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <button class="carousel-control-prev" type="button" data-bs-target="#dynamicCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#dynamicCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>

                <div class="carousel-indicators">
                    <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <button type="button" data-bs-target="#dynamicCarousel" data-bs-slide-to="<?php echo e($index); ?>"
                        class="<?php echo e($index === 0 ? 'active' : ''); ?>"
                        <?php if($index===0): ?> aria-current="true" <?php endif; ?>
                        aria-label="Slide <?php echo e($index + 1); ?>"></button>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>



            <!-- <div class="articlebox">
          <h5 class=".text-dark"><b>ARTICLE</b></h5>
        </div> -->
            <div class="marquee-container overflow-hidden">
                <div class="marquee-content d-flex align-items-center">
                    <div class="marquee-item">ARTICLE SECTION</div>
                    <div class="marquee-item">ARTICLE SECTION</div>
                    <div class="marquee-item">ARTICLE SECTION</div>


                </div>
            </div>

            <?php if(!empty(latest_article(0, 2))): ?>
            <?php $__currentLoopData = latest_article(0,limit: 2); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="article-container ">
                <div class="article-row">
                    <div class="context">

                        <h2><?php echo e($article->title); ?></h2>
                        <img src="<?php echo e(asset( ($article->author->picture ?? 'default.png'))); ?>" alt="<?php echo e($article->author->name); ?>">
                        <h6>
                            By: <strong><?php echo e($article->author->name); ?></strong>
                        </h6>
                        <p class="card-date"><i class="mdi mdi-calendar-badge"></i><span>&nbsp; <?php echo e(date_formatter($article->created_at)); ?></span>
                            <?php echo Str::ucfirst($article->content); ?>

                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>
            <div class="marquee-container overflow-hidden">
                <div class="marquee-content d-flex align-items-center">
                    <div class="marquee-item">PREVIOUS ARTICLE</div>
                    <div class="marquee-item">PREVIOUS ARTICLE</div>
                    <div class="marquee-item">PREVIOUS ARTICLE</div>


                </div>
            </div>
            <?php if(!empty(latest_article(2, 3))): ?>
            <?php $__empty_1 = true; $__currentLoopData = latest_article(2, 3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $posts): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="article-container">
                <div class="row mb-4 align-items-stretch">
                    <!-- Image -->
                    <div class="col-md-4 d-flex p-3">
                        <img src="<?php echo e(asset($posts->author->picture)); ?>"
                            class="img-fluid rounded-3 w-100 object-fit-cover"
                            style="height: 100%; max-height: 250px; object-fit: cover;"
                            alt="<?php echo e($posts->title ?? 'Post Image'); ?>">
                    </div>

                    <!-- Content -->
                    <div class="col-md-8">
                        <div class="card-body h-100 d-flex flex-column justify-content-between">
                            <div>
                                <h5 class="card-title fw-bold">
                                    <a href="<?php echo e(route('read_post', $posts->slug)); ?>"><?php echo e($posts->title); ?></a>
                                </h5>

                                <div class="text-muted small mb-2 card-details">
                                    <i class="icofont-ui-user"></i>
                                    <a href="<?php echo e(route('author_posts', $posts->author->username)); ?>"><?php echo e($posts->author->name); ?></a> &nbsp;
                                    <i class="mdi mdi-calendar-badge"></i> <?php echo e(date_formatter($posts->created_at)); ?> &nbsp;
                                    <i class="icofont-category"></i>
                                    <a href="<?php echo e(route('category_post', $posts->post_category->slug)); ?>" class="ml-1"><?php echo e($posts->post_category->name); ?></a>
                                </div>

                                <p class="card-text">
                                    <?php echo Str::ucfirst(words($posts->content, 25)); ?>

                                </p>
                            </div>

                            <div>
                                <a href="<?php echo e(route('read_post', $posts->slug)); ?>">Read More...</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="article-container">
                <p><span class="text-dark">No previous article</span></p>
            </div>

            <?php endif; ?>
            <?php endif; ?>

        </main>

        <!-- Right Sidebar -->
        <aside class="right-sidebar">
            <div class="right-header"><b>&raquo;Academics</b></div>

            <b class="degree ms-3">&rsaquo;Degree Programs</b>
            <div class="program">
                <ul>
                    <li><a href="<?php echo e(route('bs_hospitality_management')); ?>">BS Hospital Management</a></li>
                    <li><a href="<?php echo e(route('bs_information_technology')); ?>">BS Information Technology</a></li>
                    <li><a href="<?php echo e(route('bs_radiologic_technology')); ?>">BS Radiologic Technology</a></li>
                    <li><a href="<?php echo e(route('bs_criminology')); ?>">BS Criminology</a></li>
                    <li><a href="<?php echo e(route('bs_nursing')); ?>">BS Nursing</a></li>
                </ul>
            </div>
            <br>
            <b class="degree ms-3">&rsaquo;Tesda Programs</b>
            <div class="program">
                <ul>
                    <li><a href="<?php echo e(route('house_keeping')); ?>">House Keeping NC II</a></li>
                    <li><a href="<?php echo e(route('bartending')); ?>">Bartending NC II</a></li>
                    <li><a href="<?php echo e(route('food_and_beverages')); ?>">F & B Servicing NC II</a></li>
                    <li><a href="<?php echo e(route('front_office')); ?>">Front Office NC II</a></li>
                </ul>
            </div>
            <br>
            <b class="degree ms-3">&rsaquo;Non-Degree Programs</b>
            <div class="program">
                <ul>
                    <li><a href="<?php echo e(route('d_hotel_restaurant_technology')); ?>">3 Years Hotel and Restaurant Technology</a></li>
                </ul>
            </div>
            <br>
            <b class="degree ms-3">&rsaquo;Industrial Art</b>
            <div class="program">
                <ul>
                    <li><a href="<?php echo e(route('shielded_metal_arc_welding')); ?>">SMAW(Shielded Metal Arc Welding-NC II)</a></li>
                    <li><a href="<?php echo e(route('automotive_servicing')); ?>">AS(Automotive Servicing NC II)</a></li>
                </ul>
            </div>
            <br>
            <br>
            <div class="linkage-board">
                <b class="linkage">Linkages</b>
            </div>
            <br>
            <br>
            <div class="row linkage-rows">
                <div class="col-lg-2 align-items-center">
                    <a href="https://ched.gov.ph/"><img src="/front/images/ched.png" alt="CHED Logo"></a>
                </div>
            </div>
            <div class="row linkage-rows">
                <div class="col-lg-2 align-items-center">
                    <a href="https://ched.gov.ph/"><img src="/front/images/tesda.png" alt="CHED Logo"></a>
                </div>
            </div>
            <div class="row linkage-rows">
                <div class="col-lg-2 align-items-center">
                    <a href="https://ched.gov.ph/"><img src="/front/images/deped_logo.png" alt="CHED Logo"></a>
                </div>
            </div>
        </aside>
    </section>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('stylesheets'); ?>
<style>
    .article-container {
        background-image: url('/front/images/background_pcds.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px;
        /* Adding padding for better readability */
    }

    @media screen and (max-width: 768px) {
        .article-container {
            background-image: none;
        }

    }

    


    /* #dynamicCarousel {
        max-width: 100%;
        margin: auto;
    }

    .carousel-inner img {
        width: 100%;
        height: 700px;
        display: block;
        object-fit: contain;
        border-radius: 12px;
    }

    .carousel-indicators [data-bs-target] {
        background-color: #444;
    }

    @media (min-width: 768px) {
        #dynamicCarousel {
            max-width: 450px;
        }
    } */


    #dynamicCarousel {
        max-width: 100%;

        height: 800px;

        margin: auto;
        overflow: hidden;
    }

    .carousel-inner img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .carousel-indicators [data-bs-target] {
        background-color: #444;
    }
</style>
<?php $__env->stopPush(); ?>
<?php $__env->startPush('scripts'); ?>
<script>
    // var images = ["/front/images/image15.jpg", "/front/images/image16.jpg", "/front/images/image17.jpg"];
    // var count = 0;
    // var length = images.length - 1;

    // function imageSlider(index) {
    //     var currentImage = document.slideshow;
    //     var newImageIndex = count + index;

    //     if (newImageIndex > length) {
    //         newImageIndex = 0;
    //     }

    //     if (newImageIndex < 0) {
    //         newImageIndex = length;
    //     }

    //     var newImageSrc = images[newImageIndex];

    // Fade out current image
    // currentImage.classList.remove("show");
    // setTimeout(function() {
    //     currentImage.src = newImageSrc;
    //     currentImage.classList.add("show");
    // }, 1000); // Matches the CSS transition duration

    //     count = newImageIndex;
    // }

    // function autoSlideShow() {
    //     setInterval(function() {
    //         imageSlider(1);
    //     }, 2000);
    // }

    // window.onload = function() {
    //     document.slideshow.classList.add("show");
    //     autoSlideShow();
    // };

    const imageList = [{
            src: "/front/images/image15.jpg",
            alt: "Image 1"
        },
        {
            src: "/front/images/image16.jpg",
            alt: "Image 2"
        },
        {
            src: "/front/images/image17.jpg",
            alt: "Image 3"
        }
        // Add more images here
    ];

    const inner = document.getElementById("carouselInner");
    const indicators = document.getElementById("carouselIndicators");

    imageList.forEach((img, index) => {
        // Slide
        const item = document.createElement("div");
        item.className = "carousel-item" + (index === 0 ? " active" : "");
        item.innerHTML = `<img src="${img.src}" class="d-block w-100" alt="${img.alt}" loading="lazy">`;
        inner.appendChild(item);

        // Indicator
        const dot = document.createElement("button");
        dot.type = "button";
        dot.setAttribute("data-bs-target", "#dynamicCarousel");
        dot.setAttribute("data-bs-slide-to", index);
        if (index === 0) dot.classList.add("active");
        indicators.appendChild(dot);
    });
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('front.layout.pages-layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\larablog\resources\views\front\pages\home.blade.php ENDPATH**/ ?>