@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">
        <img src="{{ asset('uploads/blogs/' . $blog->banner) }}" class="bg-img img-fluid blur-up lazyload" alt="">
        <div class="breadcrumb-content pt-0">
            <div>
                <h2>الأخبار</h2>
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <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">{{$blog->title}}</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 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">
                                        <i class="fas fa-calendar me-2"></i>
                                        {{ $blog->created_at->format('Y-m-d') }}
                                    </p>
                                    <p>{!! $blog->description !!}</p>

                                </div>

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

                    <div class="col-xl-3 col-lg-4">
                        <div class="sticky-cls-top">
                            <div class="single-sidebar">
                                <div class="selection-section">
                                    <div class="overlay-map">
                                        <img src="{{ asset('uploads/blogs/' . $blog->image) }}"
                                            class="img-fluid blur-up lazyload" alt="">
                                    </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