@extends('master')
@section('title','Blog')
@section('meta_description','Explore insightful articles from our expert team.')
@section('content')

<div class="blog-page">
   <div class="mobile-menu-container fixed mobile transparent">
      <a href="#" class="open-mobile-menu">
      <span></span>
      </a>
   </div>
   <section class="page-header header-style-1 collapse-circles">
      <div class="title">
         <h1>Upbound Studio Blog</h1>
         <h2>Our views on marketing, design and technology.</h2>
      </div>
      <ul class="social fixed desktop">
         <li>
            <a href="https://fb.me/upbound.studio" target="_blank">
            <i class="fa fa-facebook"></i>
            </a>
         </li>
         <li>
            <a href="#" target="_blank">
            <i class="fa fa-twitter"></i>
            </a>
         </li>
         <li>
            <a href="https://www.instagram.com/upbound.studio/" target="_blank">
            <i class="fa fa-instagram"></i>
            </a>
         </li>
         <li>
            <a href="https://www.behance.net/jackwisley" target="_blank">
            <i class="fa fa-behance"></i>
            </a>
         </li>
         <li>
            <a href="https://www.youtube.com/channel/UCrww2Wj4P2QVWPEfjcFAiow" target="_blank">
            <i class="fa fa-youtube-play"></i>
            </a>
         </li>
         <li>
            <a href="https://www.linkedin.com/company/upbound-studio/" target="_blank">
            <i class="fa fa-linkedin"></i>
            </a>
         </li>
      </ul>
      <a href="#" class="scroll-down"></a>
   </section>
   <section class="articles empty_carousel">
      <ul class="filters">
         <li>
            <a href="#" data-filter="" class="filter_items active">Most Recent</a>
         </li>
         @foreach($categories as $category)
         <li>
            <a href="#" data-filter="cat_{{ $category->cat_id }}" class="filter_items">
            {{ $category->des }}
            </a>
         </li>
         @endforeach
      </ul>
      <div class="articles-list">
      @foreach($blogArr as $blog)
<article class="add-fade-from-bottom filtered_items cat_{{ $blog->category_id }}" data-filter="{{ $blog->category_id }}">
    <a href="{{ url('blog-detail/' . $blog->slug) }}">
    <div>
            <span>{{ $blog->category_name }}</span>
            <h2>{{ $blog->title }}</h2>
            <p>{{ Str::limit(strip_tags($blog->des), 100) }}</p>
        </div>
        <figure style="background: url('{{ asset('assets/images/blogs/' . $blog->img) }}') no-repeat center; background-size: cover"></figure>
        
    </a>
</article>
@endforeach
      </div>
   </section>
   <section class="awards main-section">
      <div class="content">
         <div>
            <h2>Awards</h2>
            <p>We are humbled and honored by the recognition from our peers</p>
         </div>
         <ul>
            <li class="cannes">
               <figure style="background: url('assets/images/cannes-lions-1.png') no-repeat center; background-size: contain"></figure>
            </li>
            <li class="awwards">
               <figure style="background: url('assets/images/awwards.png') no-repeat center; background-size: contain"></figure>
            </li>
            <li class="adesign">
               <figure style="background: url('assets/images/adesign-award.png') no-repeat center; background-size: contain"></figure>
            </li>
         </ul>
      </div>
   </section>
</div>
<script>
   document.addEventListener('DOMContentLoaded', () => {
       const filterItems = document.querySelectorAll('.filter_items');
       const articles = document.querySelectorAll('.filtered_items');
   
       filterItems.forEach(item => {
           item.addEventListener('click', (e) => {
               e.preventDefault();
   
               const filter = item.getAttribute('data-filter');
   
               filterItems.forEach(i => i.classList.remove('active'));
               item.classList.add('active');
   
               articles.forEach(article => {
                   if (filter === '' || article.getAttribute('data-filter') === filter) {
                       article.style.display = 'block';
                   } else {
                       article.style.display = 'none';
                   }
               });
           });
       });
   });
</script>
@endsection