@extends('layouts.v2.frontend')

@section('title', '| Blogs')
@section('content')
<div class="blog-banner-section d-none">
  <div class="container-defaults">
      <div class="blogo-banner-area">
      <h3>Blog</h3>
      <p>The latest news on how we are revolutionizing the Will and Trust industry</p>
      <ul>
          {{-- <li><button class="active" data-category="all">Featured</button></li> --}}
          <li><button class="filter-button" data-category="will">WILL <span></span></button></li>
          <li><button class="filter-button" data-category="trust">TRUST <span></span></button></li>
      </ul>

  </div>
  </div>
</div>
@if($last)
<div class="featured-section-blog">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-6">
              <div class="left-img-blog">
                <a href="{{ route('blog.show', $last['slug']) }}">
                    <div class="shine-effect">
                        <img src="{{ url($last['cover']) }}" alt="{{ $last['title'] }}">
                    </div>
                </a>
              </div>
          </div>
          <div class="col-lg-6">
              <div class="right-content-blog">
              {{-- <small>Featured</small> --}}
              <a href="{{ route('blog.show', $last['slug']) }}">
                <h2>{{ $last['title'] }}</h2>
                <p>{{ $last['short_content'] }}</p>
                {{-- <span>{{ $last['created_at'] }}</span>  --}}
              </a>
          {{-- <ul> <li class="text-upper">{{ rand(1, 60) }} mins read</li></ul> --}}
          <button onclick="window.location.href='{{ route('blog.show', $last['slug']) }}'">Read article</button>
      </div>
          </div>
      </div>
     
  </div>
</div>
@endif

<div id="featured-article"></div>
<div class="blog-sss  new-probate blog-det">
  <div class="container">
      <div class="heading-section capitalize-text">
       
         <span>Featured articles</span>
      </div>
  
      
      <div class="articles-area blog-articles">
  
          <div class="swiper articlesSlidermain swiper-initialized swiper-horizontal swiper-backface-hidden">
              <!-- Swiper Wrapper -->
              <div class="swiper-wrapper" id="swiper-wrapper-f29cbd2f1b882cc1" aria-live="off" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); transition-delay: 0ms;">
                  <!-- Swiper Slide 1 -->
                  @foreach($blogs as $blog)
                    <div class="clss swiper-slide item-post swiper-slide-active" role="group" aria-label="1 / 3" style="width: 412px; margin-right: 30px;" data-category="{{ $blog['category'] }}">
                      <a href="{{ route('blog.show', $blog['slug']) }}">
                        <div class="image-container shine-effect">
                        <img src="{{ url($blog['cover']) }}" alt="{{ $blog['title'] }}">
                        </div>
                        <div class="details-excerpt">
                            <h5>{{ $blog['title'] }}</h5>
                        </div>
                        {{-- <div class="details-post mb-0">
                            <span>{{ $blog['created_at'] }}</span>
                            <li class="text-upper">{{ rand(1, 60) }} mins read</li>
                        </div> --}}
                        <div class="post-button">
                              <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                      </a>
                    </div>
                  @endforeach
              </div>
              <!-- Pagination -->
              <div class="pagination-reviews archive-dots swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal swiper-pagination-lock"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span></div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
      </div>
  </div>
  </div>

 
  @if($latest)
  <div class="featured-section-blog ensure-bg">
      <div class="container">
          <div class="row ">
              <div class="col-lg-6">
                  <div class="left-img-blog">
                    <a href="{{ route('blog.show', $latest['slug']) }}">
                        <div class="shine-effect">
                            <img src="{{ url($latest['cover']) }}" alt="{{ $latest['title'] }}">
                        </div>
                    </a>
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="right-content-blog">
                  {{-- <small>Report</small> --}}
                  <a href="{{ route('blog.show', $latest['slug']) }}">
                    <h2>{{ $latest['title'] }}</h2>
                    <p>{{ $latest['short_content'] }}</p>
                    {{-- <span>{{ $latest['created_at'] }}</span> --}}
                  </a>
              {{-- <ul> <li class="text-upper">{{ rand(1, 60) }} mins read</li></ul> --}}
              <button onclick="window.location.href='{{ route('blog.show', $latest['slug']) }}'">Read article</button>
          </div>
              </div>
          </div>
         
      </div>
  </div>
@endif

<div class="case-study-section blog-case d-none">
  <div class="container">
      <div class="row">
          <div class="col-lg-5">
              <div class="left-study">
                  <span>Case Study</span>
              </div>
          </div>
          <div class="col-lg-7">
              <div class="right-study">
                  <img src="{{url('v2/images/quot-icon.png') }}" alt="">
                  <p>"Implementing a comprehensive estate plan transformed our peace of mind. The process was straightforward, and the team was incredibly supportive."</p>
                  <ul>
                      <li><img src="{{url('v2/images/Star 1.png') }}" alt=""></li>
                      <li><img src="{{url('v2/images/Star 1.png') }}" alt=""></li>
                      <li><img src="{{url('v2/images/Star 1.png') }}" alt=""></li>
                      <li><img src="{{url('v2/images/Star 1.png') }}" alt=""></li>
                      <li><img src="{{url('v2/images/Star 1.png') }}" alt=""></li>

                  </ul>
                  <div class="img-se-flex">
                      <div class="img-section-study">
                          <img src="{{url('v2/images/demo-img-case-study.png') }}" alt="">
                      </div>
                      <div class="details-right-case-study text-uppers">
                          <button>Case STudy</button>
                          <h5>The Smith family faced the challenge of managing their diverse assets while ensuring their children's future. </h5>
                          <span>26 Oct 2024</span> 
                          {{-- <ul> <li>{{ rand(1, 60) }} mins read</li></ul> --}}
                          <div class="red-icon-dtn">
                              <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>


<div class="review-section blog-sss blog-education ">
  
  <div class="review-gap">
    <div class="container">
      <div class="heading-section capitalize-text">
          <span>Education</span>
       
      </div>
  
     <!-- Swiper Container -->
      <div class="swiper educationSlide common-right-tleft">
        <!-- Swiper Wrapper -->
        <div class="swiper-wrapper">
            <!-- Swiper Slide 1 -->
            <div class="swiper-slide wrap-slider">
                <div class="review-are demo-content-education">
                    <div class="user-img  blog-ssd">
                        <img src="{{url('v2/images/blog-img04.png') }}" alt="">
                        <p>Setting up your Will and Trust</p>
                        <p class="text-opacity">Trust management</p>
                        <div class="button-area-blog-ss">
                            <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                    </div>
                  
                </div>
            </div>
            <div class="swiper-slide wrap-slider ">
                <div class="review-are demo-content-education" >
                    <div class="user-img  blog-ssd">
                        <img src="{{url('v2/images/blog-img03.png') }}" alt="">
                        <p>Setting up your Will and Trust</p>
                        <p class="text-opacity">Trust management</p>
                        <div class="button-area-blog-ss">
                            <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide wrap-slider">
                <div class="review-are demo-content-education">
                    <div class="user-img  blog-ssd">
                        <img src="{{url('v2/images/blog-img02.png') }}" alt="">
                        <p>Setting up your Will and Trust</p>
                        <p class="text-opacity">Trust management</p>
                        <div class="button-area-blog-ss">
                            <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                    </div>
                  
                </div>
            </div>
            <div class="swiper-slide wrap-slider">
                <div class="review-are demo-content-education">
                    <div class="user-img  blog-ssd">
                        <img src="{{url('v2/images/blog-img01.png') }}" alt="">
                        <p>Setting up your Will and Trust</p>
                        <p class="text-opacity">Trust management</p>
                        <div class="button-area-blog-ss">
                            <button>Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                    </div>
                  
                </div>
            </div>
        </div>
        <!-- Pagination -->
        <div class="pagination-reviews"></div>
      </div>
    </div>
  </div>
</div>


<div class="archive-blog-section py-5">
  <div class="container for-web">
      <div class="row">
        <div class="col-lg-5">
          <div class="left-img-section left-study">
              <span>Archive</span>
          </div>
        </div>
        <div class="col-lg-12">
            <div class="archive-are-right mt-5">
                <div class="archive-section row gx-4 gy-4">
                    @foreach($archive as $archive_b)
                        <div class="img-se-flex margin-bts archive-box col-md-6" data-category="{{ $archive_b['category'] }}">
                            <div class="img-section-study">
                                <a href="{{ route('blog.show', $archive_b['slug']) }}">
                                    <div class="shine-effect">
                                        <img src="{{ url($archive_b['cover']) }}" alt="{{ $archive_b['title'] }}">
                                    </div>
                                </a>
                            </div>
                            <div class="details-right-case-study ss-sl">
                                <a href="{{ route('blog.show', $archive_b['slug']) }}">
                                    <button class="blog-btns">{{ $archive_b['category'] }}</button>
                                    <h5 class="blog-only-text min-h-[60px]">{{ Str::limit($archive_b['title'], 40, '...') }}</h5>
                                    {{-- <span>{{ $archive_b['created_at'] }}</span> --}}
                                </a>
                                <div class="red-icon-dtn blog-top-gap pt-4">
                                    <button onclick="window.location.href='{{ route('blog.show', $archive_b['slug']) }}'">Read article <img src="{{ url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
        <div class="col-lg-12">
            
                <!-- Load More Button -->
                <div class="load-more" id="load-more-container">
                    <button id="load-more">Load More</button>
                </div>
        </div>
      </div>
  </div>

  <div class="for-mobile">
      <div class="left-img-section left-study">
          <span>Archive</span>
      </div> 
      <div class="swiper educationSlide achiveSlider">
          <!-- Swiper Wrapper -->
          <div class="swiper-wrapper">
              <!-- Swiper Slide 1 -->
                @foreach($archive as $archive_b)
                <div class="swiper-slide wrap-slider" data-category="{{ $archive_b['category'] }}">
                    <div class="img-section-study">
                        <a href="{{ route('blog.show', $archive_b['slug']) }}">
                            <div class="shine-effect">
                                <img src="{{ url($archive_b['cover']) }}" alt="{{ $archive_b['title'] }}">
                            </div>
                        </a>
                    </div>
                    <div class="details-right-case-study ss-sl">
                        <a href="{{ route('blog.show', $archive_b['slug']) }}">
                            <button>{{ $archive_b['category'] }}</button>
                            <h5 class="mt-3">{{ $archive_b['title'] }} </h5>
                            <span>{{ $archive_b['created_at'] }}</span>
                        </a>
                         {{-- <ul> 
                                 <li>{{ rand(1, 60) }} mins read</li> 
                        </ul> --}}
                        <div class="red-icon-dtn">
                            <button onclick="window.location.href='{{ route('blog.show', $archive_b['slug']) }}'">Read article <img src="{{url('v2/images/icon-red-arrow.png') }}" alt=""></button>
                        </div>
                    </div>
                </div>
                @endforeach
          </div>
      
          <!-- Pagination -->
          <div class="pagination-reviews archive-dots"></div>
      </div>
  </div>

</div>
@endsection
@section('page-js')
<script>
    $(document).ready(function() {
        // Initialize Swiper
        var swiper = new Swiper(".articlesSlidermain", {
            slidesPerView: 1,
            spaceBetween: 30,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".pagination-reviews",
                clickable: true,
            },
            breakpoints: {
                360: {
                    slidesPerView: 1.2,
                },
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
        });

        var swiper = new Swiper(".achiveSlider", {
            slidesPerView: 1,
            spaceBetween: 30,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".pagination-reviews",
                clickable: true,
            },
            breakpoints: {
                360: {
                    slidesPerView: 1.2,
                },
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
        });

        $('.filter-button').click(function() {
            var category = $(this).data('category'); // Get selected category
            var isActive = $(this).hasClass('active'); // Check if the button is already active

            // If the button is already active, reset the filter and remove the 'active' class
            if (isActive) {
                $('.filter-button').removeClass('active'); // Remove 'active' class from all buttons
                $('.swiper-slide').show(); // Show all slides
            } else {
                // Remove 'active' class from all buttons
                $('.filter-button').removeClass('active');

                // Add 'active' class to the clicked button
                $(this).addClass('active');

                // Show all items if "All" is selected
                if (category === 'all') {
                    $('.swiper-slide').show(); // Show all slides
                } else {
                    // Hide all slides first
                    $('.swiper-slide').hide();

                    // Show only slides that match the selected category
                    $('.swiper-slide[data-category="' + category + '"]').show();
                }
            }

            // Reset Swiper
            swiper.update(); // Recalculate dimensions and update visible slides

            // Scroll to the #featured-article section
            $('html, body').animate({
                scrollTop: $('#featured-article').offset().top // Scroll to the top of the section
            }, 0); // Animation duration in milliseconds (1 second)
        });

    });


    
    // $(document).ready(function() {
    //     // Handle filter button click
    //     $('.filter-button').click(function() {
    //         var category = $(this).data('category'); // Get selected category
            
    //         // Show all items if "All" is selected
    //         if (category === 'all') {
    //             $('.img-se-flex').show();
    //         } else {
    //             // Hide all posts first
    //             $('.img-se-flex').hide();
                
    //             // Show only posts that match the selected category
    //             $('.img-se-flex[data-category="' + category + '"]').show();
    //         }

    //         // Add 'active' class to the clicked button
    //         $('.filter-button').removeClass('active');
    //         $(this).addClass('active');
    //     });
    // });

</script>
<script>
    let page = 1;
    document.getElementById('load-more').addEventListener('click', function () {
        page++;
        fetch(`/load-more-blogs?page=${page}`)
            .then(response => response.json())
            .then(data => {
                if (data.length === 0) {
                    document.getElementById('load-more').style.display = 'none'; // Hide button if no more blogs
                    return;
                }
                const container = document.querySelector('.archive-section');
                data.forEach(blog => {
                    // Limit the title to 40 characters and add ellipsis if necessary
                    const truncatedTitle = blog.title.length > 40 ? blog.title.slice(0, 40) + '...' : blog.title;

                    const html = `
                        <div class="img-se-flex margin-bts archive-box" data-category="${blog.category}">
                            <div class="img-section-study">
                                <a href="/blog/${blog.slug}">
                                    <div class="shine-effect">
                                        <img src="${blog.cover}" alt="${blog.title}">
                                    </div>
                                </a>
                            </div>
                            <div class="details-right-case-study ss-sl">
                                <a href="/blog/${blog.slug}">
                                    <button class="blog-btns">${blog.category}</button>
                                    <h5 class="blog-only-text">${truncatedTitle}</h5>
                                 </a>
                                <div class="red-icon-dtn blog-top-gap pt-4">
                                    <button onclick="window.location.href='/blog/${blog.slug}'">Read article <img src="/v2/images/icon-red-arrow.png" alt=""></button>
                                </div>
                            </div>
                        </div>`;
                    container.innerHTML += html;
                });
            });
    });
</script>
@endsection