@extends('front.layouts.app')
@push('user.css')
    <link rel="stylesheet" href="{{ asset('front/assets/css/custom.css') }}">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <style>

        @media(max-width: 768px) {
            .single-section {
                margin-top: -470px !important;
            }
        }
    </style>
    <link rel="stylesheet" href="{{ asset('front/assets/css/custom.css') }}">

@endpush

@section('content')


    <section class="breadcrumb-section pt-0">
        <div class="breadcrumb-content pt-0" style="background: black; padding: 20px;">
            <div>
                <h2>المدونه</h2>
                <nav aria-label="breadcrumb" class="theme-breadcrumb" style="background: transparent !important;">
                    <ol class="breadcrumb" style="background: transparent !important;">
                        <li class="breadcrumb-item"><a href="{{route('user.index')}}">الرئيسية</a></li>
                        <li class="breadcrumb-item"><a href="{{route('user.blogs.index')}}">المدونه</a></li>
                        <li class="breadcrumb-item active" aria-current="page">المدونه</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>





            <section class="single-section small-section bg-inner">
            <div class="container">
                <div class="row" dir="rtl">
                    <!-- بيانات الفندق -->
                    <div class="col-xl-9 col-lg-8">

                        <div>
                            <img style="box-shadow: 0 20px 40px hsla(0, 0%, 0%, 0.13);border-radius: 10px; width: 100%; height: 60vh; " src="{{ asset('uploads/blogs/' . $blog->image) }}"
                                            class="blur-up lazyload" alt="{{ $blog->title }}">

                            <ul class="entry-meta ct-item-meta" style="padding: 10px;
                             margin-top: 15px; border-bottom: 1px solid black;
                             font-size: 14px;
                             color: ##707070;
                             ">
                                <li class="item-date">
                                    <i class="fas fa-clock me-2"></i>
                                    {{ $blog->created_at->format('Y-m-d') }}
                                </li>

                                <li class="item-author">
                                    <i class="fas fa-user me-2"></i>
                                   admin
                                </li>
                            </ul>

                        </div>

                        <div class="hotel_title_section">
                            <div class="hotel-name">

                                <div class="left-part">

                                    <div class="top">

                                        <h2>{{ $blog->title }}</h2>
                                    </div>

                                    <p class="mt-1 mb-2">
                                    </p>
                                    <p>{!! $blog->description !!}</p>

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4">
                        <div class="sticky-cls-top">
<div style="box-shadow: 0 20px 40px hsla(0, 0%, 0%, 0.13); border-radius: 10px; padding-top: 0 !important;" class="single-sidebar">
                                <div class="selection-section">
                                    <div class="overlay-map">



                                        <section id="ct_recent_posts-1" class="widget widget_ct_recent_posts">
                                            <div class="widget-content">





                                                <h2 class="widget-title" style="margin-bottom: 20px;">
                                                    <span style="font-size:16px;">مقالات قد تهمك</span>
                                                </h2>
                                                <div class="posts-list recent">




                                                    @foreach($blogs as $blog)
                                                    <div class="row" @if($loop->first) style="padding: 10px;" @else style="margin-bottom: 20px; border-top: 1px solid #939191; padding: 10px;" @endif>

                                                        <div class="col-4">
                                                            <a href="{{ route('user.blogs.show', $blog->id) }}">
                                                                <img src="{{ asset('uploads/blogs/' . $blog->image) }}" alt="{{ $blog->title }}" class="img-fluid" style="width: 100%; height: auto;">
                                                            </a>
                                                        </div>
                                                        <div class="col-8 entry-content">
                                                            <h4 class="entry-title"><a style="font-size:15px;" href="{{ route('user.blogs.show', $blog->id) }}">{{ $blog->title }}</a></h4>
                                                            <div class="item-date">
                                                                <i class="caseicon-calendar-alt"></i>
                                                                {{ \Carbon\Carbon::parse($blog->created_at)->format('F j, Y') }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>

    <!-- breadcrumb start -->


@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.hotel_images').owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 1
                    },
                    1000: {
                        items: 1
                    }
                }
            })
        });
    </script>

    <script>
        const swiper = new Swiper('.mySwiper', {
            slidesPerView: 3,
            spaceBetween: 20,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                0: {
                    slidesPerView: 1
                },
                576: {
                    slidesPerView: 1
                },
                768: {
                    slidesPerView: 2
                },
                992: {
                    slidesPerView: 3
                },
            }
        });
    </script>
@stop