<?php $__env->startSection('title'); ?> <?php echo e($portfoliosettings->meta_title); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('meta'); ?> <?php echo e($portfoliosettings->meta_description); ?> <?php $__env->stopSection(); ?>


<?php $__env->startSection('content'); ?>
  
  
   <div class="breadcrumb-area">
       <h1 class="breadcrumb-title"><?php echo e($portfoliosettings->meta_title); ?></h1>
       <ul class="page-list">
            <li class="item-home"><a class="bread-link" href="<?php echo e(route('home')); ?>" title="Home"><?php echo e($portfoliosettings->breadcrumbs_anchor); ?></a></li>
            <li class="separator separator-home"></li>
            <li class="item-current"><?php echo e($portfoliosettings->meta_title); ?></li>
        </ul>
   </div>

   <div class="portfolio-section-filters">
      <div class="container">
        <div class="row">

            <div class="col-md-3">
                <div class="filters">
                    <h4><?php echo e(clean( trans('niva-backend.sort_by') , array('Attr.EnableID' => true))); ?></h4>
                    <span class="filter" data-filter="all"><?php echo e(clean( trans('niva-backend.all') , array('Attr.EnableID' => true))); ?></span>
                    <?php $__currentLoopData = $project_categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <span class="filter" data-filter="<?php echo e($category->name); ?>"><?php echo e($category->name); ?></span>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <div class="col-md-9">
                  <div class="projects row">

                      <?php $__currentLoopData = $projects; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $project): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <div class="project col-md-6" data-filter="<?php echo e($project->project_category->name); ?>">
                          <div class="project-thumbnail">
                              <a href="<?php echo e(URL::to('/')); ?>/project/<?php echo e($project->slug); ?>" title=""><img width="400" height="250" src="/public/img/loading-blog.gif" data-src="<?php echo e($project->photo ? '/public/images/media/' . $project->photo->file : '/public/img/200x200.png'); ?>" class="lazy img-fluid" alt="<?php echo e($project->title); ?>"></a>
                          </div>
                          <h4 class="entry-details-title"> <a href="<?php echo e(URL::to('/')); ?>/project/<?php echo e($project->slug); ?>"><?php echo e($project->title); ?></a></h4>
                          <h5 class="project-category"><?php echo e($project->project_category->name); ?></h5>
                      </div>
                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                  </div>
            </div>

        </div>
      </div>
   </div>

 

<?php $__env->stopSection(); ?>





<?php $__env->startSection('scripts'); ?>
<script>

      const filters = document.querySelectorAll('.filter');

      filters.forEach(filter => { 

      filter.addEventListener('click', function() {

        var liElements = document.querySelectorAll(".portfolio-section-filters span.filter.active");
        if (liElements.length > 0) {
            liElements[0].classList.remove("active");
        }

        filter.classList.add("active");

        let selectedFilter = filter.getAttribute('data-filter');
        
        let itemsToHide = document.querySelectorAll(`.projects .project:not([data-filter='${selectedFilter}'])`);
        let itemsToShow = document.querySelectorAll(`.projects [data-filter='${selectedFilter}']`);

        if (selectedFilter == 'all') {
          itemsToHide = [];
          itemsToShow = document.querySelectorAll('.projects [data-filter]');
        }

        itemsToHide.forEach(el => {
          el.classList.add('hide');
          el.classList.remove('show');
        });

        itemsToShow.forEach(el => {
          el.classList.remove('hide');
          el.classList.add('show'); 
        });

        });
      });
      
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/lucilzud/laravel1.lucian.host/resources/views/portfolio.blade.php ENDPATH**/ ?>