@extends('layouts.default')

@section('title', 'Portfolios Archive | SYNΛMEN®')
@section('description', 'Portfolios Archive')
@section('keywords', 'Portfolios')
@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/portfolio.css') }}">
<section class="bg-[url('/assets/img/portfolio/portfolio-innerbg.webp')] bg-no-repeat h-40 bg-fixed bg-[center_top_-6rem] bg-center">
    <div class="container">
        <div class="text-center">
            <h3 class="text-4xl	font-medium	pt-14 sm:py-12 md:py-16 lg:py-16 text-white aligncenter wow fadeInUp" data-wow-delay="0.1s">Portfolio</h3>
        </div>
    </div>
</section>
<section class="my-12">
    <div class="container">
        <div id="myBtnContainer" class="text-center mb-5">
            <ul class="w-full flex justify-center">
                <li class="lg:mr-8"><button class="font-medium btn active" onclick="filterSelection('all')"> All</button><div class="arrow-down"></div></li>
                @foreach($brandCat as $cat) 
                    <li class="lg:mr-8"><button class="font-medium btn" onclick="filterSelection('{{ $cat->slug }}')"> {{ $cat->name}}</button><div class="arrow-down"></div></li>
                @endforeach
            </ul>
            
            
        </div>
        <div class="flex flex-wrap justify-center wow fadeInUp" data-wow-delay="0.2s"> 
        @foreach($portfolio as $post) 
            <div class="filterDiv {{ $post->portfolioCategory[0]->slug }} max-w-sm sm:w-1/2 md:w-1/2 lg:w-1/3">
                <div class="team-item">
                    <div class="team-img relative">
                        <img class="img-fluid" src="{{ asset('images/portfoliobrand-img/'.$post->featured_image) }}" width="360" height="205" alt="{{ $post->slug }}">
                        <div class="team-overlay w-full flex justify-around">
                            <div class="text-left px-5">
                                <h2 class="text-[15px] font-semibold mb-2">{{ $post->portfolioCategory[0]->name }}</h2>
                                <p class="text-[14px]">{{ $post->name }}</p>
                            </div>
                            <ul class="flex justify-center px-5">
                                <li class="mx-1">
                                    <a href="{{ url('portfolio/'.$post->portfolioCategory[0]->slug.'/'.$post->slug) }}" class="social-link hover:bg-[#abd315]">
                                        <i class="lni lni-paperclip" aria-hidden="true"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="text-center px-5 py-3">
                      <a href="{{ url('portfolio/'.$post->portfolioCategory[0]->slug.'/'.$post->slug) }}">
                        <h3 class="team-name">{{ Str::limit($post->name,27) }}</h3>
                      </a>
                    </div>
                </div>
            </div>
        @endforeach    
        </div>
    </div>
</section>
<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
  }
}

function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

@endsection