@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="bg-grey-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="{{ asset('storage/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="{{ asset('storage/centro-ayuda/mail.svg') }}" width="20px" alt="">
                    <p class="text-white">soporte@tuentrada.com</p>
                </div>
                <div class="flex gap-x-3">
                    <img src="{{ asset('storage/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="{{ asset('storage/icons/arrow_back.svg') }}" alt="Volver">
            <a href="/">
                <p class="text-grey-600">Volver</p>
            </a>
        </div>
        <h3 class="font-semibold">Resultados para “opciones de pago”</h3>
        <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