<?php $category = $this->common->getData('gallery_category',array(),array(),array('field'=>'item_order','by'=>'asc')) ?>
<div class="page-banner">
    <img src="<?php echo base_url(); ?>assets/user/img/portfolio-banner.webp" class="w-100" alt="portfolio img">
    <div class="page-text">
        <h1 class="heading2">PORTFOLIO</h1>
        <ul class="d-flex justify-content-center list-unstyled">
            <li><a href="<?php echo base_url(); ?>">HOME</a></li>
            <li>></li>
            <li>PORTFOLIO</li>
        </ul>
        <div class="line"></div>
    </div>
</div>
<div class="portfolio home2 py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <ul class="nav nav-pills justify-content-center mb-0" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="<?php echo base_url(); ?>portfolio" class="nav-link <?php echo(!isset($_GET['catid']))?'active':''; ?>">All Projects</a>
                    </li>
                    <?php if(isset($category) && $category){ foreach ($category as $key => $value){ ?>
                        <li class="nav-item" role="presentation">
                            <a href="<?php echo base_url('portfolio?catid='.$value['id']); ?>" class="nav-link <?php echo(isset($_GET['catid']) && $_GET['catid']==$value['id'])?'active':''; ?>"><?php echo $value['category']; ?></a>
                        </li>
                    <?php } } ?>
                    <!-- <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-commercial-tab" data-bs-toggle="pill" data-bs-target="#pills-commercial" type="button" role="tab" aria-controls="pills-commercial" aria-selected="false">Commercial</button>
                    </li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-all-projects" role="tabpanel" aria-labelledby="pills-all-projects-tab" tabindex="0">
                        <div class="row g-0" id="portfolioList">
                            <?php if(isset($project) && $project){ foreach ($project as $key => $value){ ?>
                                <div class="col-md-4 col-sm-6">
                                    <div class="project-box">
                                      <a href="<?php echo base_url('portfolio-detail/'.url_title(strtolower($value['title'])).'/'.$value['projectid']); ?>">
                                        <?php if($value['feat_image']!=''){ ?>
                                          <img src="<?php echo base_url($value['feat_image']); ?>" class="w-100" alt="img">
                                        <?php }else{ ?>
                                          <img src="<?php echo base_url(); ?>assets/user/img/project-1.webp" class="w-100" alt="project1 img">
                                        <?php } ?>
                                        <div class="project-text">
                                          <ul class="list-unstyled d-flex">
                                            <li>
                                                <?php if($value['logo_image']!=''){ ?>
                                                    <img src="<?php echo base_url($value['logo_image']); ?>" width="50" alt="award img">
                                                <?php } ?>
                                            </li>
                                            <li style="max-width: 200px;"><?php echo $value['logo_title']; ?></li>
                                          </ul>
                                          <h6 class="project-title"><?php echo $value['title']; ?></h6>
                                          <button class="btn btn-link text-start p-0">VIEW PROJECT</button>
                                        </div>
                                        <div class="plus-icon">
                                          <i class="fa fa-plus"></i>
                                        </div>
                                      </a>
                                    </div>
                                </div>
                            <?php } } ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php if(isset($total) && $total>9){ ?>
            <div class="row">
                <div class="col-12">
                    <div class="text-center mt-lg-5 mt-4">
                        <a href="javascript:void(0);" class="btn btn-link text-decoration-underline loadMore" data-page="9" id="loadMore">Load More</a>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>
<script>
    $('.loadMore').on('click', function () {
        var catid = '<?php echo(isset($_GET['catid']) && $_GET['catid']!='')?$_GET['catid']:''; ?>';
        var page = parseInt($(this).attr('data-page'));
        var site_url = '<?php echo base_url(); ?>';
        $.ajax({
            url: site_url+"front/getMoreGalleryProject",
            type: "POST",
            data: "catid="+catid+"&page="+page,
            success: function(result){
                if(result)
                {
                    $('#portfolioList').append(result.html);
                    $('#loadMore').attr('data-page',(page+9));
                }
            }
        });
    });
</script>