@extends('layouts.app')
@section('title', 'Resultados de búsqueda')
@section('body')
    <div class="bg-neutral-600">
        <div class="max-w-7xl mx-auto text-center p-2">
            <div class="flex gap-x-5 justify-center">
                <div class="flex gap-x-5">
                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/call.svg' }}" width="20px" alt="">
                    <p class="text-white">(+51) 924 411 835</p>
                </div>
                <div class="flex gap-x-3">
                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/mail.svg' }}" width="20px" alt="">
                    <p class="text-white">soporte@tuentrada.com</p>
                </div>
                <div class="flex gap-x-3">
                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/schedule.svg' }}" width="20px" alt="">
                    <p class="text-white">Lunes a Sábado:
                        09:00 pm - 06:00 pm</p>
                </div>
            </div>
        </div>
    </div>
    <section class="max-w-7xl mx-auto">
        <div class="flex items-center ms-2 mb-3 hover:cursor-pointer mt-5">
            <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/arrow_back.svg' }}" alt="Volver">
            <a href="{{ route('centro-ayuda') }}">
                <p class="text-neutral-600">Volver al centro de ayuda</p>
            </a>
        </div>

        <h3 class="font-semibold text-2xl">Resultados para "{{ $query }}"</h3>

        @if($resultadosGenerales->isEmpty() && $resultadosOrganizadores->isEmpty())
            <div class="flex flex-col items-center justify-center py-16 my-10 bg-white rounded-[24px]">
                <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-6">
                    <path d="M45 75L25 95" stroke="#9333EA" stroke-width="8" stroke-linecap="round" />
                    <circle cx="65" cy="55" r="30" fill="#F3E8FF" stroke="#9333EA" stroke-width="6" />
                    <path d="M55 45L75 65" stroke="#9333EA" stroke-width="4" stroke-linecap="round" />
                    <path d="M75 45L55 65" stroke="#9333EA" stroke-width="4" stroke-linecap="round" />
                </svg>
                <h3 class="text-xl font-bold text-neutral-500 mb-2">No se encontraron resultados</h3>
                <p class="text-neutral-400 text-center max-w-md">No hay artículos que coincidan con tu búsqueda. Intenta con otros términos o explora las categorías.</p>
                <a href="{{ route('centro-ayuda') }}"
                   class="mt-6 px-6 py-2 bg-primary-200 text-white rounded-lg hover:bg-primary-300 transition-colors">
                    Explorar categorías
                </a>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-8 gap-x-4 my-10">
                <div class="md:col-span-2">
                    <div class="bg-white p-4 rounded-[24px] mb-6">
                        <h5 class="text-neutral-300 font-semibold">Filtrar por tipo</h5>
                        <ul class="flex flex-col gap-y-1 mt-4">
                            <li class="text-sm p-3 rounded-[18px] hover:cursor-pointer hover:bg-primary-100">
                                <a href="#compradores" class="flex gap-x-2">
                                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/shopping_bag.svg' }}" alt="" width="20px">
                                    Para compradores
                                    <span class="ml-1 text-primary-300">({{ $resultadosGenerales->count() }})</span>
                                </a>
                            </li>
                            <li class="text-sm p-3 rounded-[18px] hover:cursor-pointer hover:bg-primary-100">
                                <a href="#organizadores" class="flex gap-x-2">
                                    <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/event.svg' }}" alt="" width="20px">
                                    Para organizadores
                                    <span class="ml-1 text-primary-300">({{ $resultadosOrganizadores->count() }})</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-white p-4 rounded-[24px] sticky top-4">
                        <h5 class="text-neutral-300 font-semibold">¿Necesitas más ayuda?</h5>
                        <div class="flex flex-col gap-y-4 mt-4">
                            <div class="p-4 bg-success-50 rounded-[18px]">
                                <img src="{{  env('VITE_CDN_URL_ASSETS').'/centro-ayuda/ws-icon.svg'     }}" width="36px" alt="" class="mb-2">
                                <h6 class="font-medium">Chatea con un asesor</h6>
                                <p class="text-sm text-neutral-600 my-2">Estamos disponibles para ayudarte.</p>
                                <a href="{{ env('WHATSAPP_NUMBER') }}" target="_blank">
                                    <button class="btn btn-secondary bg-white w-full text-sm">Contáctanos</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="md:col-span-6">
                    <!-- Resultados para compradores -->
                    @if($resultadosGenerales->isNotEmpty())
                        <div id="compradores" class="mb-10">
                            <h4 class="text-xl font-semibold text-neutral-700 mb-4">Resultados para compradores</h4>
                            <div class="bg-white rounded-[24px] p-4">
                                @foreach($resultadosGenerales as $resultado)
                                    <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-primary-50 hover:rounded-xl">
                                        <a href="{{ route('centro-ayuda-slug', ['slug' => $resultado->slug]) }}" class="block">
                                            <h5 class="text-base font-semibold">{{ $resultado->title }}</h5>
                                            <p class="text-sm">{{ $resultado->lead }}</p>
                                            <p class="text-xs text-neutral-400">Publicado el {{ \Carbon\Carbon::parse($resultado->published_at)->format('d/m/Y') }}</p>
                                        </a>
                                    </div>
                                    @if(!$loop->last)
                                        <div class="border-b-2 border-b-neutral-300 h-1 my-1"></div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Resultados para organizadores -->
                    @if($resultadosOrganizadores->isNotEmpty())
                        <div id="organizadores" class="mb-10">
                            <h4 class="text-xl font-semibold text-neutral-700 mb-4">Resultados para organizadores</h4>
                            <div class="bg-white rounded-[24px] p-4">
                                @foreach($resultadosOrganizadores as $resultado)
                                    <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-primary-50 hover:rounded-xl">
                                        <a href="{{ route('centro-ayuda-slug', ['slug' => $resultado->slug]) }}" class="block">
                                            <h5 class="text-base font-semibold">{{ $resultado->title }}</h5>
                                            <p class="text-sm">{{ $resultado->lead }}</p>
                                            <p class="text-xs text-neutral-400">Publicado el {{ \Carbon\Carbon::parse($resultado->published_at)->format('d/m/Y') }}</p>
                                        </a>
                                    </div>
                                    @if(!$loop->last)
                                        <div class="border-b-2 border-b-neutral-300 h-1 my-1"></div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </section>
@endsection