@extends('layouts.app')
@section('title', 'Noticia')
@section('content')
    <div class="bg-custom-back-activities sm:bg-custom-back-posts h-custom sm:px-20 bg-cover">
        <div class="h-1/4 relative flex items-center justify-center mb-2">
            <h1
                class="sm:w-auto pt-5/100 sm:h-33/100 sm:mb-10 lg:text-4xl font-dunkin-sans-book text-coffee-custom absolute flex items-center justify-center w-1/2 text-center">
                <span class="font-dunkin-sans-display mr-4">Explora nuestras </span>
                <span>buenas nocitias</span>
            </h1>
        </div>
        <div class="h-3/5 sm:flex relative items-center justify-between hidden">
            <img src="{{ asset('/images/2026/assets/news.png') }}" alt="" class="absolute w-full h-full">
            <button id="prev"
                class="bg-purple-custom z-20 px-4 pb-3 text-5xl text-white transform -translate-x-6 rounded-full cursor-pointer">
                &lt;
            </button>
            <div class=" absolute w-full overflow-hidden">
                <div class="font-dunkin-sans-book md:w-1/3 flex text-sm transition-transform duration-500"
                    id="carousel-items">
                    @forelse($posts as $item)
                        <a href="{{ $item->is_internal_url ? asset('storage/' . $item->pdf) : $item->url }}" target="_blank"
                            class="justify-items-center flex-none w-full">
                            <div class="pb-50/100 w-50/100 relative">
                                <img src="/storage/{{ $item->image }}" class="absolute object-cover w-full h-full"
                                    alt="">
                            </div>
                            <div class="w-59/100 flex items-center justify-center">
                                <button
                                    class="font-dunkin-sans-extrabold bg-purple-custom rounded-3xl w-full py-1 text-2xl text-white">
                                    ver Noticia
                                </button>
                            </div>
                        </a>
                    @empty
                        <div class="flex flex-col space-y-4 text-center">
                            <img src="{{ asset(config('constants.logo_image_path')) }}" class="img-fluid" width="300"
                                alt="">
                            <h3 class="title-orange">No hay noticias activas</h3>
                            <p class="description">En el momento no hay noticias activas pero puedes
                                volver más tarde cuando se activen nuevas noticias.</p>
                        </div>
                    @endforelse
                </div>
            </div>
            <button id="next"
                class="bg-purple-custom z-20 px-4 pb-3 text-5xl text-white transform translate-x-6 rounded-full cursor-pointer">
                &gt;
            </button>
        </div>
        <div class="h-3/4 sm:hidden grid grid-cols-2 gap-4 px-4 pt-16 overflow-y-auto">
            @forelse($posts as $item)
                <a href="{{ $item->is_internal_url ? asset('storage/' . $item->pdf) : $item->url }}" target="_blank"
                    class="h-1/3 flex flex-col items-center justify-center w-full">
                    <div class="pb-100 w-86/100 relative">
                        <img src="/storage/{{ $item->image }}" class="absolute object-cover w-full h-full" alt="">
                    </div>
                    <button class="font-dunkin-sans-extrabold bg-purple-custom rounded-3xl w-full py-1 text-white">
                        ver Noticia
                    </button>
                </a>
            @empty
                <div class="flex flex-col space-y-4 text-center">
                    <img src="{{ asset(config('constants.logo_image_path')) }}" class="img-fluid" width="300"
                        alt="">
                    <h3 class="title-orange">No hay noticias activas</h3>
                    <p class="description">En el momento no hay noticias activas pero puedes
                        volver más tarde cuando se activen nuevas noticias.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection