<div class="page-title">
    <div class="container pt-1">
        <div class="row">
            <div class="col-md-12 text-center">
                <?php if($blog['image']!=''){ ?>
                    <img src="<?php echo base_url($blog['image']); ?>" alt="shop" style="max-width:100%;">
                <?php }else{ ?>
                    <!-- <img src="<?php //echo base_url(); ?>assets/user/img/event-detail.webp" alt="shop" class="w-100"> -->
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<?php $gallery = $this->common->getData('blog_media',array('postid'=>$blog['id'])); ?>
<div class="recipes-detail">
    <div class="container">
        <div class="row g-3">
            <div class="col-lg-2 col-md-2 col-12 mb-md-4 pb-2">
                <a href="<?php echo base_url('events'); ?>" class="go-back-two">
                    <img src="<?php echo base_url(); ?>assets/user/img/back-one.webp" alt="back" class="img-fluid me-2" width="60"> Back
                </a>
            </div>
            <div class="col-lg-8 col-md-8 col-12">
                <div class="desription mb-4 pb-4">
                    <h2 class="text-center"> <?php echo $blog['post_title']; ?> </h2>

                    <?php echo $blog['post_description']; ?>
                </div>
                <?php $ghtml=''; if(isset($gallery) && $gallery){ ?>
                    <div class="event-gallery">
                        <div class="gallery-title text-center">
                            <h2 class="title mb-4">Gallery Images:</h2>
                        </div>
                        <div class="row justify-content-center g-3">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <div class="owl-carousel owl-theme gallery-slider arrow-btm-center">
                                    <?php 
                                        $g = array_chunk($gallery, 6);
                                        $i=0;
                                        foreach ($g as $key1 => $value1){ ?>
                                        <div class="item">
                                            <div class="row justify-content-center g-3">
                                                <?php if(isset($value1) && $value1){ foreach ($value1 as $key => $value) {
                                                    $ghtml .= '<div class="carousel-item '.(($key1==0 && $key==0)?'active':'').'">
                                                                <img src="'.base_url($value['blog_image']).'" class="w-100" alt="gallery image">
                                                            </div>';
                                                ?>
                                                    <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                                        <div class="project-gallery">
                                                            <a href="javascript:void(0);" class="openImage" data-index="<?php echo $i; ?>">
                                                                <img src="<?php echo base_url($value['blog_image']); ?>" class="w-100" alt="gallery image">
                                                            </a>
                                                        </div>
                                                    </div>
                                                <?php $i++; } } ?>
                                            </div>
                                        </div>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
        <script>
            $('.openImage').on('click', function () {
                var index = parseInt($(this).attr('data-index'));
                $('#carouselExampleControls').carousel(index);
                $('#staticBackdrop1').modal('show');
            });
        </script>

        <div class="project-modal">
            <div class="modal fade" id="staticBackdrop1" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <div class="modal-body">
                            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="false">
                                <div class="carousel-inner">
                                    <?php echo $ghtml; ?>

                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                    <span aria-hidden="true"> <img src="<?php echo base_url(); ?>assets/user/img/left-icon.webp" alt="arr" width="10" style="filter: invert(1);"> </span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                    <span aria-hidden="true"> <img src="<?php echo base_url(); ?>assets/user/img/right-icon.webp" alt="arr" width="10" style="filter: invert(1);"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>