@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/novedades.styl'])
@endsection
@section('content')
    @if ($banners)
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_escritorio">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_url }}" alt="Hero Background" class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_movil">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_movil_url }}" alt="Hero Background"
                        class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
    @endif

    <div class="relative z-10 max-w-[1200px] mx-auto px-4 pt-16 pb-20 filters" id="catalogo"
        data-module="{{ request()->getpathInfo() }}">
        <!-- Search Bar -->
        <div class="flex max-w-[976px] mx-auto mb-12">
            <div class="relative flex-grow buscador filters-list" data-type="text" data-name="busqueda">
                <input type="text" value="{{ request()->query('busqueda') }}"
                    data-val="{{ request()->query('busqueda') ?: '' }}"
                    class="filters-list-item h-12 px-4 bg-white border border-[#bcc1ca] rounded-l-md font-advent text-[14px] outline-none focus:border-[#004b92]  {{ request()->query('busqueda') ? 'filtered' : '' }}">
                <button
                    class="bg-[#004b92] h-12 flex items-center justify-center rounded-r-md hover:bg-[#003a72] transition-colors">
                    <img src="{{ asset('images/noticias/IMG_5.svg') }}" alt="search" class="w-5 h-5">
                </button type="button">
            </div>
        </div>

        <!-- Filter Buttons -->
        @if (sizeof($categories) > 0)
            <div class="flex flex-wrap justify-center gap-6 mb-16 filtros filters-list" data-name="categoria"
                data-multiple="0">
                @foreach ($categories as $item)
                    <a data-type="list"
                        class="bg-[#a3e435] text-[#004b92] font-advent font-medium text-[18px] px-12 py-3 rounded-lg hover:opacity-90 transition-opacity min-w-[200px] listados-filtro-item filters-list-item {{ in_array($item->slug, explode(',', request()->query('categoria'))) ? 'filtered' : '' }}"
                        data-val="{{ $item->slug }}" href="javascript:;">{{ $item->name }}</a>
                @endforeach
            </div>
        @endif
        @if (sizeof($filters) > 0)
            <div class="active-filters">
                <div>
                    <span> <a href="javascript:;" class="cerrar-filtro" data-close-value="2" data-name="cerrar"
                            data-type="close">[x]</a>
                        Quitar todos los filtros</span>
                </div>
                @foreach ($filters as $key => $value)
                    <div>
                        @php
                            $aux = explode(',', $value);
                        @endphp

                        @foreach ($aux as $item)
                            <span><a href="javascript:;" class="cerrar-filtro" data-close-value="1"
                                    data-val="{{ $item }}" data-name="{{ $key }}"
                                    data-type="close">[x]</a>
                                {{ $item }}</span>
                            @if (!$loop->last)
                                +
                            @endif
                        @endforeach
                    </div>
                @endforeach
            </div>
        @endif
        {{--
          <p class="text-[#733f9b] text-lg mb-8 leading-relaxed text-center">No hay información relevante con la
                búsqueda.</p> --}}

        @if ($news)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
                @foreach ($news as $item)
                    <a href="{{ route('noticia_detalle', ['id' => $item->id, 'slug' => $item->slug]) }}"
                        class="bg-white rounded-md card-shadow flex flex-col h-[436px] overflow-hidden">
                        <div class="p-6 pb-0">
                            <img src="{{ $item->thumbnail_image_url }}" alt="{{ $item->title }}"
                                class="w-full h-[147px] object-cover rounded-lg">
                        </div>
                        <div class="p-6 flex flex-col flex-grow">
                            <h3 class="font-dm-sans text-[20px] font-semibold leading-7 mb-3 line-clamp-2">
                                {{ $item->title }}</h3>
                            <p class="font-advent text-[#5F5F5F] text-[14px] leading-5 mb-6 line-clamp-3">
                                {{ $item->excerpt }}</p>
                            <div class="mt-auto">
                                <span
                                    class="border border-[#E1E1E1] rounded-lg px-4 py-2 font-advent text-[14px] font-medium hover:bg-gray-50 transition-colors">Ver
                                    más</span>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
            {{ $news->appends(Request::capture()->except('page'))->links('vendor.pagination.default') }}
        @endif
    </div>
@endsection
@section('js')
@endsection