@extends('layout_web.layouts')

@section('content')
    <div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
        <div class="container">
            <div class="breadcrumb-inner">
                <div class="page-title">
                    <h1 class="title">Blog Details</h1>
                </div>
                <ul class="edu-breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="separator"><i class="icon-angle-right"></i></li>
                    <li class="breadcrumb-item"><a href="#">Pages</a></li>
                    <li class="separator"><i class="icon-angle-right"></i></li>
                    <li class="breadcrumb-item active" aria-current="page">Blog Details</li>
                </ul>
            </div>
        </div>
    </div>

    <!--=====================================-->
    <!--=       Blog Details Area Start     =-->
    <!--=====================================-->
    <div class="blog-details-area section-gap-equal">
        <div class="container">
            <div class="row row--30">
                <div class="col-lg-8">
                    @if ($blog)
                        <div class="blog-details-content">
                            <div class="entry-content">
                                <span class="category">Developer</span>
                                <h3 class="title">
                                    <a href="{{ route('blog-list', ['id' => $blog->id]) }}">{{ $blog->title_one }}</a>
                                </h3>
                                <ul class="blog-meta">
                                    <li><i class="icon-27"></i>{{ $blog->date }}</li>
                                    <li><i class="icon-28"></i>Com 09</li>
                                </ul>
                                <div class="thumbnail">
                                    <a href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">
                                        {{-- <img src="{{ asset('storage/' . $blog->image) }}" alt="Blog Images"> --}}
                                        <img src="{{ empty($blog->image) ? asset('web/assets/images/default.jpg') : asset('storage/' . $blog->image) }}"
                                            alt="Course Image">
                                    </a>
                                </div>
                            </div>
                            <p>{{ $blog->desc_one }}</p>
                            <ul>
                                {!! $blog->blog_content_one !!}
                            </ul>
                            <blockquote>
                                <p>{{ $blog->creator_desc_en }}</p>
                                <h5 class="author">{{ $blog->creator_en }}</h5>
                            </blockquote>
                            <h3 class="title">{{ $blog->title_two }}</h3>
                            <p>{{ $blog->desc_two_one }} </p>
                            <div class="features-image">
                                <div class="row g-md-5">
                                    <div class="col-6">
                                        <div class="thumb">
                                            <a href="{{ route('blog-details', ['slug' => str_slug($blog->title_one)]) }}">
                                                {{-- <img src="{{ asset('storage/' . $blog->image_two) }}" alt="Blog Images"> --}}
                                                <img src="{{ empty($blog->image_two) ? asset('web/assets/images/default.jpg') : asset('storage/' . $blog->image_two) }}"
                                                    alt="Course Image">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="title">{{ $blog->title_two }}</h3>
                            <ul>
                                {!! $blog->blog_content_two !!}
                            </ul>
                            <div class="blog-share-area">
                                <div class="row align-items-center">
                                    <div class="col-md-7">
                                        <div class="blog-tags">
                                            <h6 class="title">Tags:</h6>
                                            <div class="tag-list">
                                                <a href="#">Language</a>
                                                <a href="#">eLearn</a>
                                                <a href="#">Tips</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="blog-share">
                                            <h6 class="title">Share on:</h6>
                                            <ul class="social-share icon-transparent">
                                                <li>
                                                    <a href="#"><i class="icon-facebook"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#"><i class="icon-twitter"></i></a>
                                                </li>
                                                <li>
                                                    <a href="#"><i class="icon-instagram"></i></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <p>No blog details available.</p>
                    @endif

                    <div class="blog-author">
                        <div class="thumbnail">
                            <img src="{{ asset('web/assets/images/blog/author-01.jpg') }}" alt="Author Images">
                        </div>
                        <div class="author-content">
                            <h5 class="title">Edward Norton</h5>
                            <p>Enim ad minim veniam quis nostrud exercitation lamco laboris nisi ex commodo consequat aute
                                irure.</p>
                            <ul class="social-share icon-transparent">
                                <li>
                                    <a href="#"><i class="icon-facebook"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon-instagram"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="blog-pagination">
                        <div class="row g-5">
                            <div class="col-lg-6">
                                <div class="blog-pagination-list prev-post">
                                    <a href="#">
                                        <i class="icon-west"></i>
                                        <span>Instructional Design and Adult Learners</span>
                                    </a>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="blog-pagination-list next-post">
                                    <a href="#">
                                        <span>Qualification for Students Satisfaction Rate</span>
                                        <i class="icon-east"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Start Comment Area  -->
                    <div class="comment-area">
                        <h3 class="heading-title">Comments</h3>
                        <div class="comment-list-wrapper">
                            <!-- Start Single Comment  -->
                            <div class="comment">
                                <div class="thumbnail">
                                    <img src="{{ asset('web/assets/images/blog/comment-01.jpg') }}" alt="Comment Images">
                                </div>
                                <div class="comment-content">
                                    <h5 class="title">Haley Bennet</h5>
                                    <span class="date">Oct 10, 2024</span>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.</p>
                                    <div class="reply-btn-wrapper">
                                        <a class="reply-btn" href="#">Reply</a>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Comment  -->
                            <!-- Start Single Comment  -->
                            <div class="comment comment-reply">
                                <div class="thumbnail">
                                    <img src="{{ asset('web/assets/images/blog/comment-02.jpg') }}" alt="Comment Images">
                                </div>
                                <div class="comment-content">
                                    <h5 class="title">Simon Baker</h5>
                                    <span class="date">Oct 10, 2024</span>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.</p>
                                    <div class="reply-btn-wrapper">
                                        <a class="reply-btn" href="#">Reply</a>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Comment  -->
                            <!-- Start Single Comment  -->
                            <div class="comment">
                                <div class="thumbnail">
                                    <img src="{{ asset('web/assets/images/blog/comment-03.jpg') }}" alt="Comment Images">
                                </div>
                                <div class="comment-content">
                                    <h6 class="title">Richard Gere</h6>
                                    <span class="date">Oct 10, 2024</span>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.</p>
                                    <div class="reply-btn-wrapper">
                                        <a class="reply-btn" href="#">Reply</a>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Comment  -->
                        </div>
                    </div>
                    <!-- End Comment Area  -->
                    <div class="comment-form-area">
                        <h3 class="heading-title">Leave Your Comment Here</h3>
                        <form class="comment-form">
                            <div class="row g-5">
                                <div class="form-group col-lg-6">
                                    <input type="text" name="comm-name" id="comm-name" placeholder="Your Name*">
                                </div>
                                <div class="form-group col-lg-6">
                                    <input type="email" name="comm-email" id="comm-email" placeholder="Your Email*">
                                </div>
                                <div class="form-group col-12">
                                    <textarea name="comm-message" id="comm-message" cols="30" rows="5" placeholder="Leave A Comment"></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="edu-form-check">
                                        <input type="checkbox" id="save-info">
                                        <label for="save-info">Save my name, email, and website in this browser for the
                                            next time I comment.</label>
                                    </div>
                                </div>
                                <div class="form-group col-12">
                                    <button type="submit" class="edu-btn submit-btn">Send Message <i
                                            class="icon-4"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="col-lg-4">
                    <div class="edu-blog-sidebar">
                        <!-- Start Single Widget  -->
                        <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>
                        <!-- End Single Widget  -->
                        <!-- Start Single Widget  -->
                        <div class="edu-blog-widget widget-latest-post">
                            <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="blog-details.html">
                                                <img src="{{ asset('web/assets/images/blog/small-post-01.jpg') }}"
                                                    alt="Blog Images">
                                            </a>
                                        </div>
                                        <div class="post-content">
                                            <h6 class="title"><a href="blog-details.html">Instructional Design &amp;
                                                    Adult Learners</a></h6>
                                            <ul class="blog-meta">
                                                <li><i class="icon-27"></i>22 Nov, 2024</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="latest-post">
                                        <div class="thumbnail">
                                            <a href="blog-details.html">
                                                <img src="{{ asset('web/assets/images/blog/small-post-02.jpg') }}"
                                                    alt="Blog Images">
                                            </a>
                                        </div>
                                        <div class="post-content">
                                            <h6 class="title"><a href="blog-details.html">Believe in Yourself! Have
                                                    Faith!</a></h6>
                                            <ul class="blog-meta">
                                                <li><i class="icon-27"></i>22 Nov, 2024</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="latest-post">
                                        <div class="thumbnail">
                                            <a href="blog-details.html">
                                                <img src="{{ asset('web/assets/images/blog/small-post-03.jpg') }}"
                                                    alt="Blog Images">
                                            </a>
                                        </div>
                                        <div class="post-content">
                                            <h6 class="title"><a href="blog-details.html">Live Online Lessons &
                                                    eLearning</a></h6>
                                            <ul class="blog-meta">
                                                <li><i class="icon-27"></i>22 Nov, 2024</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Widget  -->
                        <!-- Start Single Widget  -->
                        <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>
                        <!-- End Single Widget  -->
                        <!-- Start Single Widget  -->
                        <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>
                        <!-- End Single Widget  -->
                        <!-- Start Single Widget  -->
                        <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>
                        <!-- End Single Widget  -->
                        <!-- Start Single Widget  -->
                        <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>
                        <!-- End Single Widget  -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--=====================================-->
    <!--=        CTA  Area Start            =-->
    <!--=====================================-->
    <!-- Start Ad Banner Area  -->
    <div class="edu-cta-banner-area home-one-cta-wrapper bg-image">
        <div class="container">
            <div class="edu-cta-banner">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up"
                            data-sal-duration="800">
                            <h2 class="title">Get Your Quality Skills <span class="color-secondary">Certificate</span>
                                Through mimic</h2>
                            <a href="contact-us.html" class="edu-btn">Get started now <i class="icon-4"></i></a>
                        </div>
                    </div>
                </div>
                <ul class="shape-group">
                    <li class="shape-01 scene">
                        <img data-depth="2.5" src="{{ asset('web/assets/images/cta/shape-10.png') }}" alt="shape">
                    </li>
                    <li class="shape-02 scene">
                        <img data-depth="-2.5" src="{{ asset('web/assets/images/cta/shape-09.png') }}" alt="shape">
                    </li>
                    <li class="shape-03 scene">
                        <img data-depth="-2" src="{{ asset('web/assets/images/cta/shape-08.png') }}" alt="shape">
                    </li>
                    <li class="shape-04 scene">
                        <img data-depth="2" src="{{ asset('web/assets/images/about/shape-13.png') }}" alt="shape">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Ad Banner Area  -->
    <!--=====================================-->
    <!--=        Footer Area Start       	=-->
    <!--=====================================-->
    <!-- Start Footer Area  -->



    </div>

    <div class="rn-progress-parent">
        <svg class="rn-back-circle svg-inner" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection