@extends('layouts.app')
@section('title', 'Inicio')
@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>

<section class="max-w-[1184px] mx-auto px-6">
    <div class="flex items-center ms-2 mb-3 hover:cursor-pointer">
        <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_back.svg' }}" alt="Volver">
        <a href="/blog">
            <p class="text-neutral-600">Volver</p>
        </a>
    </div>

    <a href="/blog"><span class="text-neutral-400">Blog /</span></a>
    <span class="text-primary-200"> {{ $blogTag['slug'] }}</span>
</section>

<x-highlights-blogtag :blogTag="$blogTag['tags']" :slugTag="$blogTag['slug']" />

<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="col-span-full lg:col-span-9 rounded-[20px] lg:rounded-[32px]">
                <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 relative rounded-[20px] lg:rounded-[32px]">
                            <a href="{{ route('blogDetail',  $blogTag['blogtag'][0]) }}">
                                <!-- 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/{{ $blogTag['blogtag'][0]['poster'] }}" alt="Event Image" class="h-[320px] md:h-[400px] w-full object-cover rounded-[20px] lg:rounded-[32px] 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 ($blogTag['blogtag'][0]['tags'] as $btag)
                                                <a href="{{ route('blogTag', $btag['slug']) }}" style="background: #fff;" class="text-black text-sm py-2 px-4 rounded-full mb-2">{{ $btag['name'] }}</a>
                                            @endforeach
                                        </div>
                                        <h3 class="text-base font-semibold mb-1 ml-4">{{ $blogTag['blogtag'][0]['title'] }}</h3>
                                        <p class="text-sm md:text-base ml-4">{{ \Carbon\Carbon::parse($blogTag['blogtag'][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">
            {{ ucfirst($blogTag['slug']) }}
        </h3>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach ($blogTag['blogtag'] 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>
@endsection