@extends('layouts.master')

@section('styles')

        <!-- SWIPER CSS -->
        <link rel="stylesheet" href="{{asset('build/assets/libs/swiper/swiper-bundle.min.css')}}">

@endsection

@section('content')

                    <div class="content">

                        <!-- Start::main-content -->
                        <div class="main-content">

                            <!-- Page Header -->
                            <div class="block justify-between page-header sm:flex">
                                <div>
                                    <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Blog Details</h3>
                                </div>
                                <ol class="flex items-center whitespace-nowrap min-w-0">
                                    <li class="text-sm">
                                        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate" href="javascript:void(0);">
                                        Pages
                                        <i class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
                                        </a>
                                    </li>
                                    <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
                                        Blog Details
                                    </li>
                                </ol>
                            </div>
                            <!-- Page Header Close -->

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-6">
                            <div class="col-span-12 xxl:col-span-9">
                                <div class="box">
                                <div class="p-6">
                                    <img class="w-full h-auto rounded-sm" src="{{asset('build/assets/img/gallery/8.jpg')}}" alt="Image Description">
                                    <div class="box-body px-0 pb-0">
                                    <div class="md:flex justify-between mb-5 space-y-2 md:space-y-0">
                                        <div class="sm:flex sm:space-x-4 space-y-2 sm:space-y-0 rtl:space-x-reverse">
                                        <div class="flex items-center space-x-3 rtl:space-x-reverse">
                                            <img class="avatar avatar-sm !w-8 !h-8 ring-0 rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="avatar">
                                            <div>
                                            <p class="text-slate-700 font-medium text-sm dark:text-white">
                                                Json Taylor
                                            </p>
                                            </div>
                                        </div>
                                        <div class="flex items-center space-x-3 rtl:space-x-reverse">
                                            <p class="flex space-x-2 rtl:space-x-reverse text-slate-700 dark:text-white text-sm font-medium"><i class="ri ri-calendar-line text-sm"></i><span>29 September,2022</span></p>
                                        </div>
                                        <div class="flex items-center space-x-3 rtl:space-x-reverse">
                                            <p class="flex space-x-2 rtl:space-x-reverse text-slate-700 dark:text-white text-sm font-medium"><span class="w-1.5 h-1.5 inline-block bg-primary rounded-full my-auto"></span><span>Lifestyle</span></p>
                                        </div>
                                        </div>
                                        <div class="flex items-center space-x-3 rtl:space-x-reverse">
                                        <p class="flex space-x-2 rtl:space-x-reverse text-slate-700 dark:text-white text-sm font-medium"><i class="ri ri-chat-3-line text-sm"></i><span>(20) Comments</span></p>
                                        </div>
                                    </div>
                                    <h5 class="font-semibold text-slate-700 dark:text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Elitr vero et at eirmod labore et clita invidunt lorem.</h5>
                                    <p class="mt-3 mb-3 text-gray-500 dark:text-white/70 text-sm">I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure.</p>
                                    <div class="box bg-gray-100 dark:bg-black/20 mb-5 shadow-none">
                                        <a aria-label="anchor" href="javascript:void(0);" class=""></a>
                                        <div class="box-body">
                                        <blockquote class="relative text-center max-w-2xl mx-auto">
                                            <div class="relative z-10">
                                            <p class="text-xl text-gray-800">
                                                <em class="relative">
                                                <span class="relative z-10 dark:text-white">In nature, nothing is perfect and everything is perfect. Trees can be contorted, bent in weird ways, and they're still beautiful..</span>
                                                </em>
                                            </p> <footer class="blockquote-footer mt-2 text-sm opacity-70">-Someone famous as <cite title="Source Title">-Alice Walker</cite></footer>
                                            </div>
                                        </blockquote>
                                        </div>
                                    </div>
                                    <p class="mt-3 mb-3 text-gray-500 dark:text-white/70 text-sm">but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example.</p>
                                    <div>
                                        <h5 class="font-semibold text-slate-700 dark:text-white text-sm">Shared With :-</h5>
                                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/1.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/4.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/6.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full" src="{{asset('build/assets/img/users/5.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full hidden sm:flex" src="{{asset('build/assets/img/users/7.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full hidden sm:flex" src="{{asset('build/assets/img/users/2.jpg')}}" alt="Image Description">
                                        <img class="avatar avatar-sm rounded-full hidden sm:flex" src="{{asset('build/assets/img/users/9.jpg')}}" alt="Image Description">
                                        <span class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
                                            <span class="font-medium text-gray-500 leading-none dark:text-white/70">9+</span>
                                        </span>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="box-footer bg-transparent">
                                    <div class="sm:flex items-center justify-between space-y-2 sm:space-y-0">
                                    <div class="sm:flex items-center sm:space-x-3 space-y-2 sm:space-y-0 rtl:space-x-reverse">
                                        <a href="javascript:void(0);" class="text-xs text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full flex font-normal"><i class="text-xs ri ri-heart-line"></i><span>30 Likes</span></a>
                                        <a href="javascript:void(0);" class="text-xs text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full flex font-normal"><i class="text-xs ri ri-share-line"></i><span>350 Shares</span></a>
                                    </div>
                                    <div class="space-x-2">
                                        <a href="javascript:void(0);" class="text-xs text-gray-500 dark:text-white/70 space-x-2 rtl:space-x-reverse rounded-full flex font-normal"><i class="text-xs ri ri-eye-line"></i><span>30k Views</span></a>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Leave a Reply</h5>
                                </div>
                                <div class="box-body">
                                    <label for="input-label" class="ti-form-label">Name</label>
                                    <input type="text" id="input-label" class="ti-form-input mb-5" placeholder="YourName">

                                    <label for="input-label1" class="ti-form-label">Email</label>
                                    <input type="email" id="input-label1" class="ti-form-input mb-5" placeholder="youremail@gmail.com">


                                    <label class="ti-form-label">Comment</label>
                                    <textarea class="ti-form-input mb-5" rows="10"></textarea>

                                    <div class="flex mb-5">
                                    <input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-default-checkbox">
                                    <label for="hs-default-checkbox" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">I Am Not A Robot</label>
                                    </div>

                                    <button type="submit" class="py-2 px-3 ti-btn ti-btn-primary ltr:float-right rtl:float-left">
                                    Submit Reply
                                    </button>

                                </div>
                                </div>
                            </div>
                            <div class="col-span-12 xxl:col-span-3">
                                <div class="box">
                                <div class="box-body p-0">
                                    <div class="swiper mySwiper8">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                        <div class="rtl:dir-rtl">
                                            <img src="{{asset('build/assets/img/gallery/4.jpg')}}" alt="image">
                                            <div class="blog-caption text-start">
                                            <p class="mb-2 text-xs">The agency has a diverse workforce of just under 18,000 civil servants, and
                                                works with many more U.S.</p>
                                            <h6 class="text-base font-semibold mb-2">N.A.S.A</h6>
                                            <div class="flex items-center">
                                                <img src="{{asset('build/assets/img/users/15.jpg')}}" alt="" class="shadow-none ring-transparent avatar avatar-sm !rounded-full ltr:mr-2 rtl:ml-2">
                                                <div class="font-semibold">Json Taylor - <span class="text-xs opacity-70 font-normal">12,Dec 2022 -
                                                    04:34PM</span></div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="swiper-slide">
                                        <div class="rtl:dir-rtl">
                                            <img src="{{asset('build/assets/img/gallery/5.jpg')}}" alt="image">
                                            <div class="blog-caption text-start">
                                            <p class="mb-2 text-xs">The agency has a diverse workforce of just under 18,000 civil servants, and
                                                works with many more U.S.</p>
                                            <h6 class="text-base font-semibold mb-2">N.A.S.A</h6>
                                            <div class="flex items-center">
                                                <img src="{{asset('build/assets/img/users/15.jpg')}}" alt="" class="shadow-none ring-transparent avatar avatar-sm !rounded-full ltr:mr-2 rtl:ml-2">
                                                <div class="font-semibold">Json Taylor - <span class="text-xs opacity-70 font-normal">12,Dec 2022 -
                                                    04:34PM</span></div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="swiper-slide">
                                        <div class="rtl:dir-rtl">
                                            <img src="{{asset('build/assets/img/gallery/6.jpg')}}" alt="image">
                                            <div class="blog-caption text-start">
                                            <p class="mb-2 text-xs">The agency has a diverse workforce of just under 18,000 civil servants, and
                                                works with many more U.S.</p>
                                            <h6 class="text-base font-semibold mb-2">N.A.S.A</h6>
                                            <div class="flex items-center">
                                                <img src="{{asset('build/assets/img/users/15.jpg')}}" alt="" class="shadow-none ring-transparent avatar avatar-sm !rounded-full ltr:mr-2 rtl:ml-2">
                                                <div class="font-semibold">Json Taylor - <span class="text-xs opacity-70 font-normal">12,Dec 2022 -
                                                    04:34PM</span></div>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Popular Blogs</h5>
                                </div>
                                <div class="box-body">
                                    <ul class="flex flex-col">
                                    <li class="ti-list-group pt-0 px-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/7.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-calendar-line text-xs"></i><span>Sept 29 , 2022</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/9.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-time-line text-xs"></i><span>3 hours ago</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/8.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-time-line text-xs"></i><span>30 mins ago</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/3.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-calendar-line text-xs"></i><span>l day ago</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/2.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-calendar-line text-xs"></i><span>l day ago</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    <li class="ti-list-group px-0 pb-0 border-0 text-gray-800 dark:text-white">
                                    <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
                                        <img src="{{asset('build/assets/img/gallery/8.jpg')}}" class="avatar avatar-lg rounded-sm ring-0" alt="Image Description">
                                        <div class="space-y-1 my-auto">
                                        <h3 class="font-semibold text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
                                        <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs"><i class="ri ri-time-line text-xs"></i><span>30 mins ago</span></p>
                                        </div>
                                    </a>
                                    </li>
                                    </ul>
                                </div>
                                </div>

                                <div class="box">
                                <div class="box-header">
                                    <h5 class="box-title">Categories</h5>
                                </div>
                                <div class="box-body">
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Lifestyle
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Health
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Tour
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Music
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Travel
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Nature
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Tourism
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Hotels
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Marketing
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Development
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Shopping
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Realestate
                                    </span>
                                    <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200">
                                    #Business
                                    </span>
                                </div>
                                </div>

                                <div class="box">
                                <div class="box-body">
                                    <h3 class="font-semibold text-base mb-5 text-primary">Subscribe For More Blog's</h3>
                                    <input type="email" class="ti-form-input" placeholder="you@site.com">
                                    <button type="button" class="py-2 px-3 w-full ti-btn ti-btn-primary mt-2">
                                    subscribe
                                    </button>
                                </div>
                                </div>

                            </div>
                            </div>
                            <!-- End::row-1 -->

                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

        <!-- SWIPER JS -->
        <script src="{{asset('build/assets/libs/swiper/swiper-bundle.min.js')}}"></script>
        @vite('resources/assets/js/blog.js')
        

@endsection