@extends('front.layouts.main')
@section('content')

  <div class="container blog-page-container">
        <nav aria-label="breadcrumb " class="page-breadcrumb wow  fadeInUp" data-wow-delay="0.2s">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('front.index')}}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Blog</li>
          </ol>
        </nav>
        <div class="blog-page-wrapper">
            <div class="blog-part">
                @if(count($blogs) > 0)
                 @foreach($blogs as $i => $blog)
                 @php
                    $title = str_replace('<p><br></p>', '', $blog->title);
                    $description = str_replace('<p><br></p>', '', $blog->description);
                 @endphp
                    <div class="blog-ninth blog wow  fadeInUp" data-wow-delay="0.2s">
                        <div class="blog-img wow  fadeInUp" data-wow-delay="0.2s">
                            <h2>{{formatDateHelper($blog->date, 'M d, Y')}}</h2>
                        </div>
                         <div class="blog-content wow  fadeInUp" data-wow-delay="0.4s">
                            <h1 class="blog-heading wow  fadeInUp" data-wow-delay="0.6s">{!! $title !!} </h1>
                            <div class="blog-description wow  fadeInUp" data-wow-delay="0.8s">{!! $description !!}</div>
                            <a target="_blank" href="{{$blog->redirect_link}}" class="blog-btn wow  fadeInUp" data-wow-delay="1s"><span class="qodef-m-text">Read More</span></a>
                        </div>
                    </div>
                  @endforeach
                @else
                      <h4 class="text-white text-center mt-5">No records found</h4>    
                @endif
            </div>
            <div class="blog-sidebar">
                <div class="search-div wow  fadeInUp" data-wow-delay="0.4s">
                    <form action="">
                    <input type="text" name="search" placeholder="Search" value="{{request()->search}}" required>
                    <button type="submit">
                        <svg class="qodef-svg--search" xmlns="http://www.w3.org/2000/svg" width="14.255" height="14.255"><g fill="none" stroke="#fff" stroke-miterlimit="10"><path d="M5.838.5a5.338 5.338 0 1 0 5.338 5.338A5.338 5.338 0 0 0 5.838.5Z" data-name="Path 512"></path><path stroke-linecap="round" d="m9.82 9.82 3.728 3.728" data-name="Path 513"></path></g></svg>
                    </button>
                    </form>
                </div>
                <div class="side-category wow  fadeInUp" data-wow-delay="0.2s">
                    <h4 class="sidebar-heading wow  fadeInUp" data-wow-delay="0.2s">Category</h4>
                    <ul class="category-list wow  fadeInUp" data-wow-delay="0.4s">
                        @foreach($categoryList as $category) 
                             <li> <a href="{{route('front.news', ['category_id' => $category->id])}}">{{$category->name}}</a></li>
                       @endforeach 
                    </ul>
                </div>
             <!--    <div class="sidebar-related-post">
                    <h4 class="sidebar-heading wow  fadeInUp" data-wow-delay="0.2s">RELATED POSTS</h4>
                    <div class="related-post wow  fadeInUp" data-wow-delay="0.4s">
                        
                        <h6 >
                            <a href="#" >
                                1. &nbsp;mar &nbsp;2023
                            </a>
                        </h6>
                        <h5 >
                            <a href="#">
                                The Forgot: Howard Hawks “Tiger Shark” (1932)
                            </a>
                        </h5>
                    </div>
                     <div class="related-post wow  fadeInUp" data-wow-delay="0.6s">
                       
                        <h6>
                            <a href="#" >
                                1. &nbsp;mar &nbsp;2023
                            </a>
                        </h6>
                        <h5 >
                            <a href="#">
                                ‘Creed III’ Likely Will Open to $40 Million (2023)
                            </a>
                        </h5>
                    </div>
                </div> -->
                 <div class="sidebar-tags ">
                    <h4 class="sidebar-heading wow  fadeInUp" data-wow-delay="0.2s">Tags</h4>
                    <p class="mb-0 wow  fadeInUp" data-wow-delay="0.4s">
                       @foreach($tags as $i => $tag)
                            <a href="{{route('front.news', ['tag' => $tag])}}" class="me-5 mb-3">{{$tag}}</a>
                       @endforeach
                    </p>
                 </div>
                 <div class="sidebar-banner wow  fadeInUp" data-wow-delay="0.2s">
                    <!-- <img src="images/sidebar-blog-banner-600x749.jpg" alt=""> -->
                 </div>
                
            </div>
        </div>
        <div class="pagination-inner wow  fadeInUp" data-wow-delay="0.4s">
            <nav class="pagination-items">
                <!-- Previous Link -->
                @if ($blogs->onFirstPage())
                    <a class="pagination-item prev hide" href="#" style="display: none;">
                        <svg class="svg--pagination-arrow-left" xmlns="http://www.w3.org/2000/svg" width="19.227" height="19.303" viewBox="0 0 19.227 19.303">
                            <g>
                                <path data-name="Path 329" d="M10.358 18.596 1.414 9.652 10.358.708"></path>
                                <path data-name="Path 330" d="M1.97 9.652h17.257"></path>
                            </g>
                            <g>
                                <path data-name="Path 329" d="M10.358 18.596 1.414 9.652 10.358.708"></path>
                                <path data-name="Path 330" d="M1.97 9.652h17.257"></path>
                            </g>
                        </svg>        
                    </a>
                @else
                    <a class="pagination-item prev" href="{{ $blogs->previousPageUrl() }}" data-paged="{{ $blogs->currentPage() - 1 }}">
                        <svg class="svg--pagination-arrow-left" xmlns="http://www.w3.org/2000/svg" width="19.227" height="19.303" viewBox="0 0 19.227 19.303">
                            <g>
                                <path data-name="Path 329" d="M10.358 18.596 1.414 9.652 10.358.708"></path>
                                <path data-name="Path 330" d="M1.97 9.652h17.257"></path>
                            </g>
                            <g>
                                <path data-name="Path 329" d="M10.358 18.596 1.414 9.652 10.358.708"></path>
                                <path data-name="Path 330" d="M1.97 9.652h17.257"></path>
                            </g>
                        </svg>        
                    </a>
                @endif

                <!-- Page Numbers -->
                @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                    <a class="pagination-item number {{ $page == $blogs->currentPage() ? 'active' : '' }}" href="{{ $url }}" data-paged="{{ $page }}">
                        {{ str_pad($page, 2, '0', STR_PAD_LEFT) }}
                    </a>
                @endforeach

                <!-- Next Link -->
                @if ($blogs->hasMorePages())
                    <a class="pagination-item next" href="{{ $blogs->nextPageUrl() }}" data-paged="{{ $blogs->currentPage() + 1 }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg--pagination-arrow-right" viewBox="0 0 256 256" id="Flat">
                            <path d="M218.82812,130.82812l-72,72a3.99957,3.99957,0,0,1-5.65625-5.65625L206.34326,132H40a4,4,0,0,1,0-8H206.34326L141.17187,58.82812a3.99957,3.99957,0,0,1,5.65625-5.65625l72,72A3.99854,3.99854,0,0,1,218.82812,130.82812Z"/>
                            <path d="M218.82812,130.82812l-72,72a3.99957,3.99957,0,0,1-5.65625-5.65625L206.34326,132H40a4,4,0,0,1,0-8H206.34326L141.17187,58.82812a3.99957,3.99957,0,0,1,5.65625-5.65625l72,72A3.99854,3.99854,0,0,1,218.82812,130.82812Z"/>
                        </svg>      
                    </a>
                @else
                    <a class="pagination-item next hide" href="#" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg--pagination-arrow-right" viewBox="0 0 256 256" id="Flat">
                            <path d="M218.82812,130.82812l-72,72a3.99957,3.99957,0,0,1-5.65625-5.65625L206.34326,132H40a4,4,0,0,1,0-8H206.34326L141.17187,58.82812a3.99957,3.99957,0,0,1,5.65625-5.65625l72,72A3.99854,3.99854,0,0,1,218.82812,130.82812Z"/>
                            <path d="M218.82812,130.82812l-72,72a3.99957,3.99957,0,0,1-5.65625-5.65625L206.34326,132H40a4,4,0,0,1,0-8H206.34326L141.17187,58.82812a3.99957,3.99957,0,0,1,5.65625-5.65625l72,72A3.99854,3.99854,0,0,1,218.82812,130.82812Z"/>
                        </svg>      
                    </a>
                @endif
            </nav>

    </div>
  </div>

@endsection