@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
    <title>News | Anisabel Suites</title>
    <meta property="og:locale" content="en_US" />
    <meta property="og:url" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="News | Anisabel Suites" />
    <meta property="og:description"
        content="Experience the best of luxury and hospitality at Anisabel Suites, a boutique hotel in the heart of the city. Our spacious and well-appointed suites offer everything you need for a comfortable and relaxing stay, including plush beds, modern amenities, and stunning views. With our convenient location, you'll be close to all the major attractions, restaurants, and shopping. Book your stay today and experience the difference of Anisabel Suites." />

    <meta property="og:site_name" content="News | Anisabel Suites" />
    <meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')
    <div id="carouselExample" class="carousel slide margin-bottom" data-bs-ride="carousel">
        <div class="carousel-inner">
            @php
                $active = 0;
            @endphp
            @foreach ($banners as $banner)
                @if ($active == 0)
                    <div class="carousel-item active">
                        <!-- <div class="image"></div> -->
                        <img src="{{ asset('banners/' . $banner->image) }}" class="d-block align-middle img-fluid"
                            alt="...">
                    </div>
                @else
                    <div class="carousel-item">
                        <!-- <div class="image"></div> -->
                        <img src="{{ asset('banners/' . $banner->image) }}" class="d-block align-middle img-fluid"
                            alt="...">

                    </div>
                @endif
                @php
                    $active++;
                @endphp
            @endforeach
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>


    <div class="container mb-5">
        <div class="text-center my-5">
            <h1 class="fw-bold color-mid" data-aos="fade-down">News</h1>
        </div>
    </div>
    <div class="row">
        {{-- <div class="mb-5 col-8" style=""> --}}
        <div class="col-12 col-md-8 col-lg-8 row overflow-hidden" id="new-container">
            <div class="col-12 col-md-12 col-lg-12 my-2">
                <div class="row gy-4 justify-content-center">
                    @foreach ($blogs as $items)
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4" data-aos="flip-left">
                            <a href="{{ url('blog-single/' . $items->title) }}" class="article-link">
                                <div class="card position-relative shadow" style="">
                                    {{-- <img src="{{ asset('uploads/blogs/' . $items->thumbnail) }}" class="news-thumbnail"
                                        alt="Image"> --}}
                                    @if ($items->thumbnail != null)
                                        <img src="{{ asset('uploads/blogs/' . $items->thumbnail) }}" style="height: 250px;" class=" card-img-top"
                                        alt="Image">
                                    @else
                                        @php
                                            $url = $items->link;
                                            $videoId = getYoutubeVideoId($url);
                                        @endphp 
                                        <iframe width="100%" style="height: 250px;" class=" card-img-top"
                                        src="https://www.youtube.com/embed/{{$videoId}}">
                                        </iframe>
                                    @endif
                                    <div class="card-body text-center" style="height: 250px;">
                                        <h2 class="card-title fw-bold color-mid">{{ Str::limit($items->title, 50, '...') }}
                                        </h2>
                                        <p class="color-mid justify">
                                            {!! Str::limit($items->description, 80, '...') !!}
                                        </p>
                                    </div>
                                    <div class=" end-0 p-2"
                                        style="text-shadow: 1px 1px 2px gray; top: 57%;">
                                        <span class="text-white"><i class="fa-solid fa-calendar"></i> {{ date('F j, Y', strtotime($items->created_at)) }}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
        <div class="col-11 col-md-4 col-lg-4 ">
            <div class="d-flex justify-content-center order-lg-2 order-sm-1 my-2">
                <div class="bg-mid-light p-4 rounded" data-aos="fade-down-left" style="overflow: auto;"
                    id="news-stand">
                    <h1 class="text-white mt-2 mb-5 text-center">Featured News</h1>
                    @php
                        function getYoutubeVideoId($url) {
                            $pattern = '/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';
                            preg_match($pattern, $url, $matches);
                            return isset($matches[1]) ? $matches[1] : null;
                        }
                    @endphp
                    @foreach ($featuredBlogs as $items)
                        <a href="{{ url('blog-single/' . $items->title) }}">
                            <div class="row my-4">
                                <div class="col-md-12">
                                    @if ($items->thumbnail != null)
                                    <img src="{{ asset('uploads/blogs/' . $items->thumbnail) }}" class="featured-img"
                                    alt="Image">
                                    @else
                                    @php
                                        
                                        $url = $items->link;
                                        $videoId = getYoutubeVideoId($url);
                                    @endphp 
                                    <iframe width="100%" height="100%"
                                    src="https://www.youtube.com/embed/{{$videoId}}">
                                    </iframe>
                                    @endif
        
                                </div>
                                <div class="col-md-12 my-auto">
                                    <h3 class="text-white">{{ Str::limit($items->title, 50, '...') }}</h3>
                                    <p class="text-white"><i class="fa-solid fa-calendar"></i>
                                        {{ date('F j, Y', strtotime($items->created_at)) }}</p>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery -->

    <style>
        @media (max-width: 767px) {
            .bg-mid-light {
                text-align: center;
            }
        }

        #news-stand {
            height: 75%;
        }

        @media (max-width: 768px) {
            #news-stand {
                height: 50svh;
            }
        }

        @media only screen and (max-width:600px) {
            .featured-img {
                width: 100%;
                height: auto;
            }

            .news-thumbnail {
                width: 100%;
                height: auto;
            }
        }

        .card-body:hover,
        .card:hover {
            background-color: #d3ccbd;
        }

        .featured-img {
            width: 134.08px;
            height: 122.97px;
        }

        .news-thumbnail {
            width: 318px;
            height: 292px;
        }
    </style>
@endsection