@extends('layout_web.layouts')

@section('content')
    <style>
        .thumbnail img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
    </style>
    <div id="main-wrapper" class="main-wrapper">

        <div id="mimic-preloader">
            <div class="loading-spinner">
                <div class="preloader-spin-1"></div>
                <div class="preloader-spin-2"></div>
            </div>
            <div class="preloader-close-btn-wraper">
                <span class="btn btn-primary preloader-close-btn">
                    Cancel Preloader</span>
            </div>
        </div>

        <div class="edu-breadcrumb-area">
            <div class="container">
                <div class="breadcrumb-inner">
                    <div class="page-title">
                        <h1 class="title">Blog List</h1>
                    </div>
                    <ul class="edu-breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="separator"><i class="icon-angle-right"></i></li>
                        <li class="breadcrumb-item"><a href="{{ route('blog-list') }}">Pages</a></li>
                        <li class="separator"><i class="icon-angle-right"></i></li>
                        <li class="breadcrumb-item active" aria-current="page">Blog 3</li>
                    </ul>
                </div>
            </div>
            <ul class="shape-group">
                <li class="shape-1">
                    <span></span>
                </li>
                <li class="shape-2 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                        alt="shape"></li>
                <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-15.png') }}"
                        alt="shape"></li>
                <li class="shape-4">
                    <span></span>
                </li>
                <li class="shape-5 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                        alt="shape"></li>
            </ul>
        </div>

        <section class="section-gap-equal">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-8">
                        @foreach ($blogs as $blog)
                            <div class="edu-blog blog-style-list" data-sal-delay="150" data-sal="slide-up"
                                data-sal-duration="800">
                                <div class="inner">
                                    <div class="thumbnail">
                                        <a href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">
                                            <img src="{{ asset('storage/' . $blog->image) }}" alt="Blog Images">
                                        </a>
                                    </div>
                                    <div class="content">
                                        <h5 class="title">
                                            <a
                                                href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">{{ $blog->title_one }}</a>
                                        </h5>
                                        <ul class="blog-meta">
                                            <li><i class="icon-27"></i>{{ $blog->date }}</li>
                                            <li><i class="icon-28"></i>Com 09</li>
                                        </ul>
                                        <p>{{ substr($blog->desc_one, 0, 100) }}...</p>
                                        <div class="read-more-btn">
                                            <a class="edu-btn btn-border btn-medium"
                                                href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">{{ $blog->text_button_en }}<i
                                                    class="icon-4"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                        <ul class="edu-pagination top-space-30 justify-content-start">
                            <li><a href="#" aria-label="Previous"><i class="icon-west"></i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li class="more-next"><a href="#"></a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#" aria-label="Next"><i class="icon-east"></i></a></li>
                        </ul>

                    </div>
                    <div class="col-lg-4">
                        <div class="edu-blog-sidebar">
                            <div class="edu-blog-widget widget-search">
                                <div class="inner">
                                    <h4 class="widget-title">Search</h4>
                                    <div class="content">
                                        <form class="blog-search" action="#">
                                            <button class="search-button"><i class="icon-2"></i></button>
                                            <input type="text" placeholder="Search">
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="edu-blog-widget widget-latest-post">
                                @foreach ($blogs as $blog)
                                    <div class="inner">
                                        <h4 class="widget-title">Latest Post</h4>
                                        <div class="content latest-post-list">
                                            <div class="latest-post">
                                                <div class="thumbnail">
                                                    <a
                                                        href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">
                                                        {{-- <img src="{{ asset('storage/' . $blog->image) }}" alt="Post Images"> --}}
                                                        <img src="{{ empty($blog->image) ? asset('web/assets/images/default.jpg') : asset('storage/' . $blog->image) }}"
                                                            alt="Course Image">
                                                    </a>
                                                </div>
                                                <div class="post-content">
                                                    <h6 class="title"><a
                                                            href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">
                                                            {{ $blog->title_one }}</a></h6>
                                                    <ul class="blog-meta">
                                                        <li>{{ $blog->date }}</li>
                                                        <li>9 Comments</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="edu-blog-widget widget-categories">
                                <div class="inner">
                                    <h4 class="widget-title">Categories</h4>
                                    <div class="content">
                                        <ul class="category-list">
                                            <li><a href="#">Business Studies <span>(3)</span></a></li>
                                            <li><a href="#">Computer Engineering <span>(7)</span></a></li>
                                            <li><a href="#">Medical &amp; Health<span>(2)</span></a></li>
                                            <li><a href="#">Software <span>(1)</span></a></li>
                                            <li><a href="#">Web Development <span>(3)</span></a></li>
                                            <li><a href="#">Uncategorized <span>(9)</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="edu-blog-widget widget-action">
                                <div class="inner">
                                    <h4 class="title">Get Online Courses From <span>mimic</span></h4>
                                    <span class="shape-line"><i class="icon-19"></i></span>
                                    <p>Nostrud exer ciation laboris aliqup</p>
                                    <a href="#" class="edu-btn btn-medium">Start Now <i class="icon-4"></i></a>
                                </div>
                            </div>
                            <div class="edu-blog-widget widget-categories">
                                <div class="inner">
                                    <h4 class="widget-title">Archives</h4>
                                    <div class="content">
                                        <ul class="category-list">
                                            <li><a href="#">2017 Nevember <span>(3)</span></a></li>
                                            <li><a href="#">2018 December <span>(7)</span></a></li>
                                            <li><a href="#">2019 January<span>(2)</span></a></li>
                                            <li><a href="#">2020 February <span>(1)</span></a></li>
                                            <li><a href="#">2024 March <span>(3)</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="edu-blog-widget widget-tags">
                                <div class="inner">
                                    <h4 class="widget-title">Tags</h4>
                                    <div class="content">
                                        <div class="tag-list">
                                            <a href="#">Language</a>
                                            <a href="#">eLearn</a>
                                            <a href="#">Tips</a>
                                            <a href="#">Course</a>
                                            <a href="#">Motivation</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection