@extends('layouts.app')
@section('title', 'Blog')
@section('body')
<div class="bg-gradient-to-r from-primary-200 to-primary-900 relative">
    <h3 style="color: #fff;" class="max-w-[1184px] mx-auto p-6 my-4o text-xl md:text-2xl font-bold mb-4 text-start">
        Blog
    </h3>
</div>

<x-highlights-blog :blogs="$blogs['tags']" />

<div class="max-w-[1184px] mx-auto px-6">
    <div class="w-full">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-4 mt-5 md:mt-0">
            <!-- Left column -->
            <div class="h-[350px] md:h-auto col-span-full lg:col-span-9 rounded-[40px]">
                <div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div style="max-height: 400px;" class="overflow-hidden lg:block lg:w-full lg:col-span-2 relative rounded-[40px]">
                            <a href="{{ route('blogDetail',  $blogs['blogs'][0]['slug']) }}">
                                <!-- gradiente-->
                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); border-radius: inherit; z-index: 1;">
                                </div>
                                <img src="{{ env('CDN_URL') }}/public/images/blog/{{ $blogs['blogs'][0]['poster'] }}" alt="Article Image" class="h-[350px] md:h-auto w-full object-cover rounded-[40px] z-0">
                                <!-- Contenido de la imagen -->
                                <div class="absolute bottom-4 text-white z-10 pl-2">
                                    <div class="flex flex-col items-start">
                                        <div class="flex justify-start gap-3">
                                            @foreach ($blogs['blogs'][0]['tags'] as $btag)
                                                <a href="{{ route('blogTag', $btag['slug']) }}" style="background: #fff;" class="text-black text-sm md:text-base py-1 px-2 md:py-2 md:px-4 rounded-full mb-2">{{ $btag['name'] }}</a>
                                            @endforeach
                                        </div>
                                        <h3 class="text-sm md:text-base font-semibold mb-1 ml-4">{{ $blogs['blogs'][0]['title'] }}</h3>
                                        <p class="text-sm md:text-base ml-4">{{ \Carbon\Carbon::parse($blogs['blogs'][0]['published_at'])->translatedFormat('d \d\e F') }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Right column -->
            <div class="col-span-full lg:col-span-3">
                <div>
                    <div class="grid grid-cols-1 lg:grid-cols-2">
                        <div style="max-height: 400px;" class="hidden lg:block lg:w-full lg:col-span-2 my-0 mx-auto">
                            <a href="/crear-evento">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/create-event-vertical.png' }}" alt="Event Image" class="h-full object-cover rounded-lg">
                            </a>
                        </div>
                        <div class="block lg:hidden">
                            <a href="/crear-evento">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/create-event-lg.png'}}" alt="Event Image" class="w-full object-cover rounded-lg">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6">
            Lo más reciente
        </h3>
    </div>
    <div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @foreach (array_slice($blogs['blogs'], 0, 2) as $blog)
                <div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div class="h-[320px] md:h-[400px] overflow-hidden lg:block lg:w-full lg:col-span-2 rounded-[40px] relative">
                            <a href="{{ route('blogDetail',  $blog['slug']) }}">
                                <!-- Contenedor para el gradiente -->
                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); border-radius: inherit; z-index: 1;">
                                </div>
                                <img src="{{ env('CDN_URL') }}/public/images/blog/{{ $blog['poster'] }}" alt="Event Image" class="h-[320px] md:h-[400px] w-full object-cover object-center rounded-[40px] z-0">
                                <!-- Contenido de la imagen -->
                                <div class="absolute bottom-4 text-white z-10">
                                    <div class="flex flex-col items-start">
                                        <div class="flex justify-start gap-3">
                                            @foreach ($blog['tags'] as $btag)
                                                <a href="{{ route('blogTag', $btag['slug']) }}" style="background: #fff;" class="text-black text-sm py-1 px-2 md:py-2 md:px-4 rounded-full mb-2">{{ $btag['name'] }}</a>
                                            @endforeach
                                        </div>
                                        <h3 class="text-base font-semibold mb-1 ml-4">{{ $blog['title'] }}</h3>
                                        <p class="text-sm md:text-base ml-4">{{ \Carbon\Carbon::parse($blog['published_at'])->translatedFormat('d \d\e F') }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="pt-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 ">
            @foreach (array_slice($blogs['blogs'], 2, 4) as $blog)
                <x-card2>
                    <a href="{{ route('blogDetail', $blog['slug']) }}"><img class="w-full object-cover" src="{{ env('CDN_URL') }}/public/images/blog/{{ $blog['poster'] }}" alt="Event Image" style="height: 140px"></a>

                    <div class="px-3 md:pt-4">
                        <div class="flex flex-col items-start sm:items-start gap-y-2 gap-x-2">
                            <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/blog/calendar_today.svg' }}" />
                                <span class="text-yellow-600 text-xs md:text-clip-sm">{{ \Carbon\Carbon::parse($blog['published_at'])->translatedFormat('d \d\e F') }}</span>
                            </div>
                            <div>
                                @foreach ($blog['tags'] as $btag)
                                    <div class="inline-flex border-neutral-100 border-2 rounded-lg">
                                        <a href="{{ route('blogTag', $btag['slug']) }}"><span class="text-neutral-400 text-xs px-1 py-1 mr-1">{{ $btag['name'] }}</span></a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="font-bold my-2 text-sm text-neutral-500 truncate">{{ $blog['title'] }}</div>
                        <p class="text-neutral-300 text-sm mb-2">
                        {{ \Illuminate\Support\Str::limit($blog['lead'], 80) }}
                        </p>
                    </div>
                </x-card2>
            @endforeach
        </div>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6">
            Lo más leído
        </h3>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        @foreach (array_slice($blogs['blogMostView'], 0, 8) as $blog)
            <x-card2>
                <a href="{{ route('blogDetail', $blog['slug']) }}"><img class="w-full object-cover" src="{{ env('CDN_URL') }}/public/images/blog/{{ $blog['poster'] }}" alt="Event Image" style="height: 140px"></a>

                <div class="px-3 md:pt-4">
                    <div class="flex flex-col items-start sm:items-start gap-y-2 gap-x-2">
                        <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                            <img src="{{  env('VITE_CDN_URL_ASSETS').'/blog/calendar_today.svg' }}" />
                            <span class="text-yellow-600 text-xs md:text-clip-sm">{{ \Carbon\Carbon::parse($blog['published_at'])->translatedFormat('d \d\e F') }}</span>
                        </div>
                        <div>
                            @foreach ($blog['tags'] as $btag)
                                <div class="inline-flex border-neutral-100 border-2 rounded-lg">
                                    <a href="{{ route('blogTag', $btag['slug']) }}"><span class="text-neutral-400 text-xs px-1 py-1 mr-1">{{ $btag['name'] }}</span></a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="font-bold my-2 text-sm text-neutral-500 truncate">{{ $blog['title'] }}</div>
                    <p class="text-neutral-300 text-sm mb-2">
                    {{ \Illuminate\Support\Str::limit($blog['lead'], 80) }}
                    </p>
                </div>
            </x-card2>
        @endforeach
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6">
            Prensa
        </h3>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <x-card2>
            <a href="#"><img class="w-full" src="{{  env('VITE_CDN_URL_ASSETS').'/blog/photo-4.png' }}" alt="Event Image"></a>

            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{  env('VITE_CDN_URL_ASSETS').'/blog/calendar_today.svg' }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-neutral-100 border-2 rounded-lg">
                        <a href="#"><span class="text-neutral-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-neutral-100 border-2 rounded-lg">
                        <a href="#"><span class="text-neutral-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-neutral-100 border-2 rounded-lg">
                        <a href="#"><span class="text-neutral-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-neutral-500 truncate">Las Obras de Teatro Más Aclamadas del Año y por Qué No Puedes Perdértelas</div>
                    <p class="text-neutral-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
    </div>
</div>



@endsection