@extends('vcards.vcard11.app')
@section('title')
    blog single
@endsection
@section('page_css')
    <link href="{{ asset('assets/css/blog.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/blog-single.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('page_name')
    blog single
@endsection
@section('content')
    <div class="tab-content p-sm-4 p-3" id="v-pills-tabContent">
        <div class="blog-single-tab tab-pane fade show active" id="nav-blog-single" role="tabpanel"
             aria-labelledby="nav-blog-single-tab">
            <section class="blog-section">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="blog-post mb-4">
                            <div class="section-heading mb-4">
                                <h2 class="fs-22 text-white ps-4 mb-1">BLOG POST TITLE</h2>
                                <div class="ps-4">
                                    <span class="fs-14 "><i class="fa-regular fa-calendar"></i></span>
                                    <span class="fs-12 text-white">15 MARCH 2022</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div id="carouselExampleIndicators1" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-indicators ">
                                        <button type="button" data-bs-target="#carouselExampleIndicators1"
                                                data-bs-slide-to="0" class="active" aria-current="true"
                                                aria-label="Slide 1"></button>
                                        <button type="button" data-bs-target="#carouselExampleIndicators1"
                                                data-bs-slide-to="1" aria-label="Slide 2"></button>
                                        <button type="button" data-bs-target="#carouselExampleIndicators1"
                                                data-bs-slide-to="2" aria-label="Slide 3"></button>
                                    </div>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <img src="{{ asset('assets/img/vcard11/blog-post1.jpeg') }}"
                                                 class="w-100 h-100 object-fit-cover">
                                            <div class="search" onclick="openModalBox2();currentSlide(1)">
                                                <a href="#!"
                                                   class="search d-flex justify-content-center align-items-center ">
                                                    <i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ asset('assets/img/vcard11/blog-post2.jpeg') }}"
                                                 class="w-100 h-100 object-fit-cover">
                                            <div class="search" onclick="openModalBox2();currentSlide(2)">
                                                <a href="#!"
                                                   class="search d-flex justify-content-center align-items-center ">
                                                    <i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ asset('assets/img/vcard11/blog-post3.jpeg') }}"
                                                 class="w-100 h-100 object-fit-cover">
                                            <div class="search" onclick="openModalBox2();currentSlide(3)">
                                                <a href="#!"
                                                   class="search d-flex justify-content-center align-items-center ">
                                                    <i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    {{--                                    <div class="d-none d-md-block">--}}
                                    {{--                                        <button class=" carousel-control-prev" type="button"--}}
                                    {{--                                                data-bs-target="#carouselExampleIndicators1" data-bs-slide="prev">--}}
                                    {{--                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>--}}
                                    {{--                                            <span class="visually-hidden">Previous</span>--}}
                                    {{--                                        </button>--}}
                                    {{--                                        <button class=" carousel-control-next" type="button"--}}
                                    {{--                                                data-bs-target="#carouselExampleIndicators1" data-bs-slide="next">--}}
                                    {{--                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>--}}
                                    {{--                                            <span class="visually-hidden">Next</span>--}}
                                    {{--                                        </button>--}}
                                    {{--                                    </div>--}}
                                </div>
                            </div>
                            <div id="myModalbox2" class="modalbox2">
                                <span class="close cursor" onclick="closeModalBox2()">&times;</span>
                                <div class="modal-content">
                                    <div class="mySlidesbox2">
                                        <img src="{{ asset('assets/img/vcard11/blog-post1.jpeg') }}" style="width:100%">
                                    </div>
                                    {{--                                    <div class="mySlidesbox2">--}}
                                    {{--                                        <img src="{{ asset('assets/img/vcard11/blog-post2.jpeg') }}" style="width:100%">--}}
                                    {{--                                    </div>--}}
                                    {{--                                    <div class="mySlidesbox2">--}}
                                    {{--                                        <img src="{{ asset('assets/img/vcard11/blog-post3.jpeg') }}" style="width:100%">--}}
                                    {{--                                    </div>--}}
                                    {{--                                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>--}}
                                    {{--                                    <a class="next" onclick="plusSlides(1)">&#10095;</a>--}}
                                </div>
                            </div>
                            <div class="blog-post-desc ">
                                <div class="desc d-flex flex-wrap align-items-center mb-4 pt-2">
                                    <div class="me-4">
                                        <span class="fs-14 me-2"><i class="fa-regular fa-eye"></i></span>
                                        <span class="fs-12 text-white"> 164 views</span>
                                    </div>
                                    <div class="">
                                        <span class="fs-14 me-2"><i class="fa-regular fa-message"></i></span>
                                        <span class="fs-12 text-white">6 commnets</span>
                                    </div>
                                </div>
                                <p class="fs-14 text-white mb-4">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam
                                    tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate
                                    vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius
                                    eros ac purus dignissim. Proin eu ultrices libero. Curabitur vulputate vestibulum
                                    elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus
                                    dignissim.
                                </p>
                                <div class="tags d-flex flex-wrap ">
                                    <div class="me-2 mb-2">
                                        <a href="#!" class="fs-12 d-inline-block">Design</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Video</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Photo</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- start comment-section -->
                        <div class="comment-section p-4 mb-4">
                            <h3 class="fs-6 text-white mb-4">Comments</h3>
                            <div class="comment d-flex">
                                <div class="comment-img d-sm-block d-none">
                                    <img src="{{ asset('assets/img/vcard11/comment.jpeg') }}"
                                         class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="comment-desc p-4 ms-sm-4 position-relative">
                                    <div class="tag d-flex justify-content-center align-items-center">
                                        <a href="#!" class="fs-14 text-white">01</a>
                                    </div>
                                    <div class="comment-img d-sm-none d-block position-relative">
                                        <img src="{{ asset('assets/img/vcard11/comment.jpeg') }}"
                                             class="w-100 h-100 object-fit-cover">
                                    </div>
                                    <h5 class="fs-6 text-white mb-sm-4 ps-sm-0 ps-5 ms-sm-0 ms-2">Kevin Antony</h5>
                                    <p class="text-white fs-12 mb-0 mt-sm-0 mt-3">
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.
                                        Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id,
                                        mattis vel, nisi. .</p>
                                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fs-12 me-3 mt-sm-4 mt-3">JANUARY 02, 2022</span>
                                        <a class="btn btn-primary fs-12 mt-sm-4 mt-3" href="#"><i
                                                    class="fas fa-reply me-2"></i> Reply</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end comment-section -->

                        <!-- start leave-comment section -->
                        <div class="leave-comment-section mb-4">
                            <div class="section-heading mb-4">
                                <h2 class="fs-22 text-white ps-4 mb-1">Leave A Comment</h2>
                            </div>
                            <form>
                                <div class="form-group mb-4">
                                    <div class="input-icon">
                                        <i class="fas fa-user-plus"></i>
                                    </div>
                                    <input type="name" class="form-control fs-12 text-white"
                                           id="exampleFormControlInput1" placeholder="Your Name *" required="">
                                </div>
                                <div class="form-group mb-4">
                                    <div class="input-icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <input type="email" class="form-control fs-12 text-white"
                                           id="exampleFormControlInput1" placeholder="Email Address*" required="">
                                </div>
                                <div class="form-group mb-4 text-area">
                                    <div class="input-icon">
                                        <i class="fas fa-message"></i>
                                    </div>
                                    <textarea name="comments" id="comments"
                                              class="text-area form-control pt-2 fs-12 text-white" rows="5"
                                              placeholder="Your Message:"></textarea>
                                </div>
                                <button class="btn btn-primary fs-14">Add Comment</button>
                            </form>
                        </div>
                        <!-- end leave-comment section -->
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-right-section">
                        {{--                            <div class="search-section mb-4">--}}
                        {{--                                <div class="search-box ">--}}
                        {{--                                    <form action="#">--}}
                        {{--                                        <input type="text" class="search" placeholder="Search..." value="">--}}
                        {{--                                        <button class="search-icon"><i class="fa fa-search transition"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                    </form>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        <!-- start tags-section -->
                            <div class="tags-section">
                                <div class="section-heading mb-4">
                                    <h2 class="fs-22 text-white ps-4">Tags</h2>
                                </div>
                                <div class="tags d-flex flex-wrap mb-4">
                                    <div class="me-2 mb-2">
                                        <a href="#!" class="fs-12 d-inline-block">Paint</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Construction</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Build</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Poster</a>
                                    </div>
                                    <div class="me-2 mb-2">
                                        <a href="#" class="fs-12 d-inline-block">Trends</a>
                                    </div>
                                </div>
                            </div>
                            <!-- end tags-section -->

                            <!-- start categories-section -->
                            <div class="categories-section mb-4">
                                <div class="section-heading mb-4">
                                    <h2 class="fs-22 text-white ps-4">Categories</h2>
                                </div>
                                <div class="category-box p-4">
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <a href="#" class="fs-14">Standard</a>
                                        <span>3</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <a href="#" class="fs-14">Video</a>
                                        <span>6</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <a href="#" class="fs-14">Gallery</a>
                                        <span>12</span>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <a href="#" class="fs-14">Quotes</a>
                                        <span>4</span>
                                    </div>
                                </div>
                            </div>

                            <!-- end categories-section -->

                            <!-- start last-post-section -->
                            <div class="last-post-section mb-4">
                                <div class="section-heading mb-4">
                                    <h2 class="fs-22 text-white ps-4">Last Posts</h2>
                                </div>
                                <div class="last-posts d-flex ">
                                    <a href="#!" class="post d-block">
                                        <img src="{{ asset('assets/img/vcard11/last-post1.jpeg') }}"
                                             class="w-100 h-100 object-fit-cover">
                                    </a>
                                    <div class="last-post-desc ps-3">
                                        <a href="#!" class="fs-14 text-white">Vivamus dapibus rutrum</a>
                                        <span class="d-flex align-items-center fs-12 text-white"><i
                                                    class="fas fa-calendar me-2"></i> 27 Mar 2021 </span>
                                    </div>
                                </div>
                                <div class="last-posts d-flex ">
                                    <a href="#!" class="post d-block">
                                        <img src="{{ asset('assets/img/vcard11/last-post2.jpeg') }}"
                                             class="w-100 h-100 object-fit-cover">
                                    </a>
                                    <div class="last-post-desc ps-3">
                                        <a href="#!" class="fs-14 text-white">Integer sagittis</a>
                                        <span class="d-flex align-items-center fs-12 text-white"><i
                                                    class="fas fa-calendar me-2"></i> 12 May 2021 </span>
                                    </div>
                                </div>
                                <div class="last-posts d-flex ">
                                    <a href="#!" class="post d-block">
                                        <img src="{{ asset('assets/img/vcard11/last-post3.jpeg') }}"
                                             class="w-100 h-100 object-fit-cover">
                                    </a>
                                    <div class="last-post-desc ps-3">
                                        <a href="#!" class="fs-14 text-white">Snowy Mountains Trip</a>
                                        <span class="d-flex align-items-center fs-12 text-white"><i
                                                    class="fas fa-calendar me-2"></i> 22 Feb 2021 </span>
                                    </div>
                                </div>
                            </div>
                            <!-- end last-post-section -->
                            <!-- start subscribe-section -->
                            <div class="subscribe-section">
                                <div class="section-heading mb-4">
                                    <h2 class="fs-22 text-white ps-4">Subscribe</h2>
                                </div>
                                <form>
                                    <input class="email fs-12 mb-3" name="email" placeholder="Your Email"
                                           spellcheck="false" type="text" required/>
                                    <button type="submit" class="btn btn-primary fs-12 w-100">Submit</button>
                                </form>
                            </div>
                            <!-- end subscribe-section -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection