@section('title', 'PYPA - Blogs')
@extends('frontend.layout.main')
@section('main-section')
    <!--  Preloader Start -->
    <x-frontend.preloader></x-frontend.preloader>

    <!--  Preloader End -->

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <x-frontend.navbar></x-frontend.navbar>

    <!-- Breadcrumb Section Start -->
    <x-frontend.bread-crumb>
        <x-slot name="image">images/br-bg-3.jpg</x-slot>
        <x-slot name="title"> Blogs</x-slot>
        <li class="position-relative fs-xx-14 d-inline-block">Blog</li>
    </x-frontend.bread-crumb>
    <!-- Breadcrumb Section End -->

    <!-- Blog Section Start -->
    <div class="container style-one ptb-120">
        <div class="row">
            <div class="col-xl-4 order-xl-1 order-2">
                <aside class="sidebar">
                    <div class="sidebar-widget search-widget round-20">
                        <h3 class="sidebar-widget-title fs-24 fw-extrabold text-title mb-18">Search Here</h3>
                        <form action="#" class="search-form position-relative form-wrapper">
                            <input type="search" class="bg-ash w-100 border-0 text-para round-10" placeholder="Search">
                            <button type="submit"
                                class="position-absolute top-0 end-0 border-0 d-flex flex-column align-items-center justify-content-center h-100 transition text-white"><i
                                    class="ri-search-line"></i></button>
                        </form>
                    </div>
                    
                    <div class="sidebar-widget category-widget round-20">
                        <h3 class="sidebar-widget-title fs-24 fw-extrabold text-title mb-18">Categories</h3>
                        <ul class="list-unstyled mb-0">
                            @forelse ($categories as $category)
                                <li><a href="">{{ $category->name }}
                                        <img src="{{ asset('images/right-arrow-2.svg') }}" alt="Icon">
                                    </a>
                                </li>
                            @empty
                                <li>No Category Found.</li>
                            @endforelse
                        </ul>
                    </div>
                </aside>
            </div>
            <div class="col-xl-8 order-xl--2 order-1 ps-xxl-4">
                <div class="row justify-content-center">
                    @forelse ($blogs as $blog)
                        <div class="col-md-6">
                            <div class="blog-card style-four round-20 mb-30 transition">
                                <div class="blog-img position-relative img-hover overflow-hidden round-20">
                                    <img src="{{ asset('storage/blogs/' . $blog->featured_image) }}" alt="Image"
                                        class="round-20 transition">
                                    <a href=""
                                        class="blog-date text-center d-flex flex-column align-items-center justify-content-center round-10 fs-14 font-secondary bg_secondary text-white"><span
                                            class="fs-18  fw-bold ">{{ Carbon\Carbon::parse($blog->created_at)->format('d') }}</span>
                                        {{ Carbon\Carbon::parse($blog->created_at)->format('M') }}</a>
                                </div>
                                <div class="blog-info">
                                    <h3 class="fs-24 fw-extrabold mb-15"><a href="{{ route('singleBlog', ['slug' => $blog->slug]) }}"
                                            class="text-title link-hover-primary hover-text-primary">
                                            {{ $blog->title }}</a>
                                    </h3>
                                    <a href="{{ route('singleBlog', ['slug' => $blog->slug]) }}"
                                        class="btn style-three font-secondary fw-semibold position-relative z-1 round-10">
                                        <span>Read More
                                            <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                                class="transition icon-left">
                                        </span>
                                        <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                            class="transition icon-right">
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>No Blogs Found.</p>
                    @endforelse
                </div>
                {{$blogs->links()}}
            </div>
        </div>
    </div>
    <!-- Blog Details Section End -->

    <x-frontend.footer></x-frontend.footer>

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>

    <!-- Link of JS files -->
@endsection