@extends('layouts.app')
@section('title', 'Noticia')
@section('content')
    <div class="bg-custom-back-posts h-custom bg-cover px-20">
        <h1
            class="h-33/100 mb-10 text-center text-4xl text-white  font-dunkin-sans-book flex flex-col justify-center items-center">
            <span class="font-dunkin-sans-display">Explora nuestro universo</span>
            <span>

                de buenas nocitias
            </span>
        </h1>
        <div class="relative h-2/4 flex justify-between items-center">
            <img src="img-2025/assets/POSTS.png" alt="" class="absolute w-full h-full">
            <button id="prev"
                class="bg-orange-custom text-white rounded-full cursor-pointer text-5xl px-4 pb-3 transform -translate-x-6 z-20">
                &lt;
            </button>
            <div class="overflow-hidden w-full absolute ">
                <div class="font-dunkin-sans-book text-sm flex transition-transform duration-500 md:w-1/3"
                    id="carousel-items">
                    @forelse($posts as $item)
                        <a href="{{ asset('storage/' . $item->pdf) }}" target="_blank"
                            class="flex-none w-full  justify-items-center">
                            <div class="pb-50/100 relative w-50/100">
                                <img src="/storage/{{ $item->image }}" class="absolute h-full w-full object-cover"
                                    alt="">
                            </div>
                            <div class="w-59/100 flex items-center justify-center">
                                <button
                                    class="font-dunkin-sans-extrabold bg-orange-custom rounded-3xl  text-white text-2xl py-1 w-full">
                                    ver Noticia
                                </button>
                            </div>
                        </a>
                    @empty
                        <div class="text-center flex flex-col space-y-4">
                            <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-orange-custom text-white rounded-full cursor-pointer text-5xl px-4 pb-3 transform translate-x-6 z-20">
                &gt;
            </button>
        </div>
    </div>
@endsection