@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="bg-gradient-to-r from-purple-200 to-purple-900 relative">
        <div class="max-w-7xl mx-auto text-center pt-5 pb-10">
            <section id="search">
                <h2 class="text-white font-semibold">Centro de Ayuda</h2>
                <p class="text-white pb-3">Encuentra respuestas rápidas a tus preguntas y obtén soporte personalizado.</p>
            </section>
        </div>
    </div>
    <section class="max-w-7xl mx-auto">
        <div class="grid grid-cols-8 gap-x-4 my-10">
            <div class="col-span-2">
                <div class="bg-white p-4 rounded-[24px]">
                    <h5 class="text-grey-300 font-semibold">¿En qué podemos ayudarte?</h5>
                    <ul class="flex flex-col gap-y-1 mt-4">
                        <li
                            class="text-sm p-3 rounded-[18px] hover:cursor-pointer {{ request()->is('dashboard') ? 'bg-[#D2B5FA]' : 'hover:bg-[#D2B5FA]' }}">
                            <a href="/dashboard" class="flex gap-x-2">
                                <img src="{{ asset('storage/icons/confirmation_number.svg') }}" alt=""
                                    width="20px">
                                Todos
                            </a>
                        </li>
                        <li
                            class="text-sm p-3 rounded-[18px] hover:cursor-pointer {{ request()->is('favoritos') ? 'bg-[#D2B5FA]' : 'hover:bg-[#D2B5FA]' }}">
                            <a href="/favoritos" class="flex gap-x-2">
                                <img src="{{ asset('storage/icons/favorite.svg') }}" alt="" width="20px">
                                ¿Cómo comprar mis entradas?
                            </a>
                        </li>
                        <li
                            class="text-sm p-3 rounded-[18px] hover:cursor-pointer {{ request()->is('ajustes-cuenta') ? 'bg-[#D2B5FA]' : 'hover:bg-[#D2B5FA]' }}">
                            <a href="/ajustes-cuenta" class="flex gap-x-2">
                                <img src="{{ asset('storage/icons/settings.svg') }}" width="20px" alt="">
                                Ajustes de la cuenta
                            </a>
                        </li>
                        <li class="flex text-sm hover:bg-[#D2B5FA] p-3 rounded-[18px] hover:cursor-pointer">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="flex gap-x-2">
                                    <img src="{{ asset('storage/icons/logout.svg') }}" width="20px" alt="">
                                    Cerrar sesión
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-span-6 rounded-[24px] bg-white p-4">
                <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-purple-50 hover:rounded-xl">
                    <h5 class="text-base font-semibold">¿Cómo compro mis boletos en la plataforma?</h5>
                    <p class="text-sm">Paso a paso para adquirir boletos fácilmente.</p>
                    <p class="text-xs">Publicado el 15/02/2024</p>
                </div>
                <div class=" border-b-2 border-b-gray-300 h-1 my-1"></div>
                <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-purple-50 hover:rounded-xl">
                    <h5 class="text-base font-semibold">¿Cómo compro mis boletos en la plataforma?</h5>
                    <p class="text-sm">Paso a paso para adquirir boletos fácilmente.</p>
                    <p class="text-xs">Publicado el 15/02/2024</p>
                </div>
                <div class=" border-b-2 border-b-gray-300 h-1 my-1"></div>
                <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-purple-50 hover:rounded-xl">
                    <h5 class="text-base font-semibold">¿Cómo compro mis boletos en la plataforma?</h5>
                    <p class="text-sm">Paso a paso para adquirir boletos fácilmente.</p>
                    <p class="text-xs">Publicado el 15/02/2024</p>
                </div>
                <div class=" border-b-2 border-b-gray-300 h-1 my-1"></div>
                <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-purple-50 hover:rounded-xl">
                    <h5 class="text-base font-semibold">¿Cómo compro mis boletos en la plataforma?</h5>
                    <p class="text-sm">Paso a paso para adquirir boletos fácilmente.</p>
                    <p class="text-xs">Publicado el 15/02/2024</p>
                </div>
                <div class=" border-b-2 border-b-gray-300 h-1 my-1"></div>
                <div class="flex flex-col p-4 gap-y-2 cursor-pointer hover:bg-purple-50 hover:rounded-xl">
                    <h5 class="text-base font-semibold">¿Cómo compro mis boletos en la plataforma?</h5>
                    <p class="text-sm">Paso a paso para adquirir boletos fácilmente.</p>
                    <p class="text-xs">Publicado el 15/02/2024</p>
                </div>
                <div class=" border-b-2 border-b-gray-300 h-1 my-1"></div>
            </div>
        </div>
    </section>
@endsection