@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="relative w-full h-auto overflow-hidden" style="z-index: -2;">
        <!-- Unchanged blur background -->
        <div class="absolute inset-0 z-30 blur-[10px] overflow-hidden"
            style="background-image: url('{{ env('CDN_URL') }}/public/artists/{{ $artist['artist']['image_iconn'] }}'); background-size: cover; background-position: center;">
        </div>
        <div class="absolute inset-0 z-40 bg-gray-900/50">
        </div>
        <div class="w-full mx-auto md:h-full relative z-50 flex items-center justify-center p-4 md:p-6">
            <div class="relative w-auto h-[100px]">
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto relative px-2">
        <div class="w-full h-auto">
            <div class="relative">
                <div class="hidden lg:block lg:absolute lg:-top-36">
                    <p class="text-white py-14 px-12 text-xl"> {{-- desktop --}}
                        {{$artist['artist']['name'] }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- mobile --}}
    <div class="max-w-7xl mx-auto relative px-2 mb-4 lg:hidden">
        <div class="w-full h-auto">
            <div class="relative">
                <div class="flex items-end justify-between gap-4 relative min-h-[80px] pb-2">
                    <div class="absolute -top-24 sm:-top-20 pl-4 rounded-lg lg:hidden" style="height: 170px; width: 170px;">
                        <img src="{{ env('CDN_URL') }}/public/artists/{{ $artist['artist']['image_iconn'] }}"
                            alt="Artista {{ $artist['artist']['name'] }}"
                            class="max-w-[150px] rounded-lg mr-4 border border-solid border-white object-cover"
                            style="height: 170px; min-width: 170px;" />
                    </div>
                    <div class="absolute -top-[85px] sm:-top-11 lg:-top-20 ml-[200px] lg:ml-[100px] text-[20px] lg:text-2xl text-white">
                        {{ $artist['artist']['name'] }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto pt-5 pb-10">
        <!-- Tabs Navigation -->
        <div class="flex justify-start mb-6 px-10">
            <div id="eventTab"
                class="tab cursor-pointer pl-1 pr-4 text-start  transition-all duration-200 border-b-2 border-[#6F0FF0] text-[#6F0FF0] hover:text-[#a866ff] lg:hover:text-[#6F0FF0] font-medium sm:text-base">
                <span>Eventos</span>
            </div>
            <div id="aboutTab"
                class="tab cursor-pointer px-6 pl-1 pr-3 text-start  transition-all duration-200 text-gray-500 hover:text-[#a866ff] sm:text-base lg:hidden">
                <span>Sobre el artista</span>
            </div>
        </div>

        <!-- Tab Contents -->
        <div class="mt-4 px-10 lg:grid lg:grid-cols-12 lg:gap-12">
            <!-- Event Tab -->
            <div id="ticketsContent" class="space-y-4 lg:col-span-8 h-auto">
                <h3 class="text-base font-semibold text-[#454545]">{{ $artist['products']['total'] }} {{ count($artist['products']['data']) == 1 ? 'Evento' : 'Eventos' }} en total</h3>
                <div class="grid grid-cols-1 gap-2 lg:gap-4">
                    @foreach ($artist['products']['data'] as $event)
                        <a href="{{ route('detalle-evento', $event['slug']) }}">
                            <div class="flex justify-between items-center gap-6 bg-white p-4 border border-solid border-[#D2B5FA] rounded-lg shadow-sm hover:shadow-md transition-shadow">
                                <div class="flex justify-start gap-4 lg:gap-6">
                                    <div class="flex-none">
                                        <img src="{{ env('CDN_URL') . '/public/products/' . $event['id'] . '/' . $event['poster'] }}" alt="" loading="lazy" class="h-[127px] sm:h-[160px] max-w-[100px] sm:max-w-[120px] rounded-lg">
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex flex-col gap-2">
                                            <h3 class="text-base">{{ $event['title_small'] }}</h3>
                                            <div class="inline-flex items-center gap-x-2 px-2 py-1 bg-[#F1E7FE] rounded-md w-[175px] md:w-[180px]">
                                                <img src="{{ asset('storage/icons/calendar_today.svg') }}" loading="lazy" decoding="async" />
                                                <span class="text-purple-200 text-[14px] whitespace-nowrap">
                                                    {{ \Carbon\Carbon::parse($event['fecha_evento'])->format('d/m/Y') }}
                                                    •
                                                    {{ $event['hora_evento'] }}
                                                </span>
                                            </div>
                                            <p class="text-[#454545] text-base">{{ $artist['artist']['name'] }}</p>
                                            <p class="text-[#454545] text-[14px]">{{ $event['address'] }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="hidden md:block flex flex-col items-center">
                                    <a href="{{ route('detalle-evento', $event['slug']) }}" class="flex items-center justify-center text-sm btn-primary text-white px-4 p-1 rounded-full hover:opacity-90 transition-opacity">
                                        <div class="text-center">
                                            Ver entradas
                                        </div>
                                    </a>
                                    <p class="text-[#454545] text-sm mt-2 text-center">Desde S/. {{ $event['price_normal'] }}</p>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="flex justify-center gap-2 py-4">
                    @if ($artist['products']['last_page'] > 1)
                    <div class="flex justify-center gap-2 py-4">
                        @if ($artist['products']['prev_page_url'])
                            <a href="{{ $artist['products']['prev_page_url'] }}" class="px-4 py-2 text-sm border rounded-lg hover:bg-gray-50">
                                <
                            </a>
                        @endif

                        @foreach ($artist['products']['links'] as $link)
                            @if (is_numeric($link['label']))
                                <a href="{{ $link['url'] }}" class="px-4 py-2 text-sm border rounded-lg {{ $link['active'] ? 'bg-purple-200 text-white' : 'hover:bg-gray-50' }}">
                                    {{ $link['label'] }}
                                </a>
                            @endif
                        @endforeach

                        @if ($artist['products']['next_page_url'])
                            <a href="{{ $artist['products']['next_page_url'] }}" class="px-4 py-2 text-sm border rounded-lg hover:bg-gray-50">
                                >
                            </a>
                        @endif
                    </div>
                @endif
                </div>
            </div>

            {{-- card Artist --}}
            {{-- <div class="lg:relative hidden lg:block lg:col-span-4 lg:h-auto" style="top: -170px"> --}}
            <div class="lg:relative hidden lg:block lg:col-span-4 lg:h-auto" style="min-height: 680px">
                <div class="lg:absolute lg:-top-48">
                {{-- <div class="lg:-top-48"> --}}
                    <div class="lg:rounded-3xl lg:bg-white">
                        <img src="{{ env('CDN_URL') }}/public/artists/{{ $artist['artist']['image_iconn'] }}" 
                            class="bg-[#454545] w-full object-cover"
                            style="border-radius: 24px 24px 0 0; height: 250px; width: 396px;"
                            alt="Artista {{ $artist['artist']['name'] }}"
                            />
                        <div class="flex flex-col gap-4 px-4">
                            <p class="text-[#454545] sm:text-xl font-bold mt-4">{{ $artist['artist']['name'] }}</p>
                            @if (!empty($artist['artist']['description']))
                                <p class="text-sm text-[#454545] sm:text-base">
                                    {{ $artist['artist']['description'] }}
                                </p>
                            @endif
                            {!! $artist['artist']['embed_html'] !!}
                            @if (!empty($artist['artist']['rs_facebook']) || !empty($artist['artist']['rs_instagram']) || !empty($artist['artist']['rs_youtube']) || !empty($artist['artist']['rs_spotify']))
                                <p class="text-[14px] text-[#454545]">Sigue a {{ $artist['artist']['name'] }} en:</p>
                            @endif
                            <div class="flex justify-start items-center gap-4 mb-5">
                                @if (!empty($artist['artist']['rs_facebook']))
                                    <a target="_blank" href="{{ $artist['artist']['rs_facebook'] }}">
                                        <svg width="24" height="24" fill="#484848" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M24 11.9998C24 5.37236 18.6274 -0.00022316 12 -0.00022316C5.37258 -0.00022316 0 5.37236 0 11.9998C0 17.9893 4.38823 22.9538 10.125 23.854V15.4685H7.07813V11.9998H10.125V9.35603C10.125 6.34853 11.9165 4.68728 14.6576 4.68728C15.9705 4.68728 17.3438 4.92165 17.3438 4.92165V7.87478H15.8306C14.3399 7.87478 13.875 8.79979 13.875 9.74877V11.9998H17.2031L16.6711 15.4685H13.875V23.854C19.6118 22.9538 24 17.9893 24 11.9998Z" />
                                        </svg>
                                    </a>
                                @endif
                                @if (!empty($artist['artist']['rs_instagram']))
                                    <a target="_blank" href="{{ $artist['artist']['rs_instagram'] }}">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#484848" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7.0301 0.0839251C5.7533 0.144165 4.88138 0.347925 4.11914 0.647445C3.33026 0.954885 2.66162 1.36745 1.99634 2.03513C1.33106 2.70281 0.921379 3.37193 0.616099 4.16201C0.320659 4.92593 0.120499 5.79857 0.0640994 7.07609C0.00769946 8.35361 -0.00478054 8.76425 0.00145946 12.023C0.00769946 15.2817 0.0220995 15.6902 0.0840194 16.9703C0.144979 18.2469 0.348019 19.1186 0.647539 19.881C0.955459 20.6699 1.36754 21.3383 2.03546 22.0038C2.70338 22.6694 3.37202 23.0781 4.16402 23.3839C4.92722 23.6788 5.8001 23.8799 7.07738 23.9359C8.35466 23.9918 8.76578 24.0047 12.0235 23.9985C15.2813 23.9922 15.6915 23.9778 16.9714 23.9171C18.2513 23.8564 19.1184 23.6519 19.8811 23.3538C20.67 23.0452 21.3389 22.6338 22.0039 21.9657C22.669 21.2975 23.0784 20.6279 23.3835 19.8374C23.6791 19.0742 23.88 18.2013 23.9355 16.925C23.9914 15.6441 24.0046 15.2351 23.9983 11.9769C23.9921 8.71865 23.9775 8.31017 23.9167 7.03049C23.856 5.75081 23.6527 4.88177 23.3535 4.11881C23.0451 3.32993 22.6335 2.66201 21.9658 1.99601C21.2981 1.33001 20.628 0.920805 19.8377 0.616485C19.074 0.321045 18.2016 0.119685 16.9243 0.0644851C15.6471 0.00928514 15.2359 -0.00487487 11.977 0.00136513C8.71802 0.00760513 8.31002 0.0215251 7.0301 0.0839251ZM7.17026 21.777C6.00026 21.7262 5.36498 21.5318 4.94162 21.369C4.38098 21.153 3.98162 20.8919 3.5597 20.4741C3.13778 20.0562 2.87858 19.6554 2.6597 19.096C2.4953 18.6726 2.2973 18.0381 2.24258 16.8681C2.18306 15.6035 2.17058 15.2238 2.16362 12.0201C2.15666 8.81633 2.1689 8.43713 2.22434 7.17209C2.27426 6.00305 2.46986 5.36705 2.63234 4.94393C2.84834 4.38257 3.1085 3.98393 3.5273 3.56225C3.9461 3.14057 4.3457 2.88089 4.90562 2.66201C5.3285 2.49689 5.96306 2.30057 7.13258 2.24489C8.3981 2.18489 8.7773 2.17289 11.9806 2.16593C15.1839 2.15897 15.564 2.17097 16.83 2.22665C17.9991 2.27753 18.6353 2.47121 19.0579 2.63465C19.6188 2.85065 20.0179 3.11009 20.4396 3.52961C20.8613 3.94913 21.1212 4.34729 21.3401 4.90841C21.5055 5.33009 21.7018 5.96441 21.757 7.13465C21.8172 8.40017 21.8309 8.77961 21.8367 11.9826C21.8424 15.1857 21.8311 15.5661 21.7757 16.8306C21.7246 18.0006 21.5307 18.6362 21.3677 19.06C21.1517 19.6204 20.8913 20.02 20.4723 20.4414C20.0532 20.8629 19.6541 21.1226 19.0939 21.3414C18.6715 21.5063 18.0363 21.7031 16.8677 21.7588C15.6022 21.8183 15.223 21.8308 12.0185 21.8378C8.81402 21.8447 8.43602 21.8318 7.1705 21.777M16.9529 5.58641C16.9534 5.87123 17.0383 6.14952 17.1969 6.38607C17.3556 6.62262 17.5808 6.80682 17.8442 6.91535C18.1075 7.02389 18.3971 7.0519 18.6764 6.99583C18.9556 6.93976 19.212 6.80214 19.413 6.60037C19.614 6.3986 19.7507 6.14174 19.8057 5.86229C19.8608 5.58283 19.8317 5.29333 19.7222 5.03039C19.6127 4.76746 19.4277 4.5429 19.1906 4.38512C18.9534 4.22735 18.6748 4.14344 18.39 4.14401C18.0082 4.14477 17.6423 4.29715 17.3728 4.56764C17.1033 4.83813 16.9523 5.20458 16.9529 5.58641ZM5.8385 12.0119C5.84522 15.4151 8.60906 18.1677 12.0115 18.1612C15.414 18.1547 18.1685 15.3911 18.162 11.9879C18.1555 8.58473 15.391 5.83145 11.988 5.83817C8.58506 5.84489 5.83202 8.60921 5.8385 12.0119ZM7.99994 12.0076C7.99837 11.2165 8.23144 10.4426 8.66967 9.78395C9.10791 9.12528 9.73162 8.61134 10.4619 8.30714C11.1923 8.00294 11.9964 7.92213 12.7726 8.07494C13.5489 8.22775 14.2624 8.6073 14.8229 9.16562C15.3834 9.72393 15.7658 10.4359 15.9217 11.2115C16.0776 11.9872 15.9999 12.7916 15.6986 13.5231C15.3973 14.2547 14.8859 14.8804 14.2289 15.3212C13.572 15.7621 12.7991 15.9982 12.0079 15.9998C11.4826 16.0009 10.9622 15.8985 10.4765 15.6984C9.99076 15.4984 9.54918 15.2046 9.17699 14.8339C8.8048 14.4632 8.50929 14.0228 8.30733 13.5378C8.10536 13.0529 8.00091 12.5329 7.99994 12.0076Z" />
                                        </svg>
                                    </a>
                                @endif
                                @if (!empty($artist['artist']['rs_youtube']))
                                <a target="_blank" href="{{ $artist['artist']['rs_youtube'] }}">
                                    <svg width="34" height="24" viewBox="0 0 24 18" fill="#484848" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_1594_27938)">
                                            <path d="M9.54545 12.5565V5.44402L15.8182 9.00041L9.54545 12.5565ZM23.4985 3.20606C23.2225 2.17027 22.4092 1.35462 21.3766 1.0778C19.505 0.574717 12 0.574717 12 0.574717C12 0.574717 4.49499 0.574717 2.62335 1.0778C1.59076 1.35462 0.777485 2.17027 0.501509 3.20606C0 5.08337 0 9.00025 0 9.00025C0 9.00025 0 12.9171 0.501509 14.7944C0.777485 15.8302 1.59076 16.6459 2.62335 16.9228C4.49499 17.4258 12 17.4258 12 17.4258C12 17.4258 19.505 17.4258 21.3766 16.9228C22.4092 16.6459 23.2225 15.8302 23.4985 14.7944C24 12.9171 24 9.00025 24 9.00025C24 9.00025 24 5.08337 23.4985 3.20606Z" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_1594_27938">
                                                <rect width="24" height="16.8511" transform="translate(0 0.574707)"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </a>
                                @endif
                                @if (!empty($artist['artist']['rs_spotify']))
                                    <a target="_blank" href="{{ $artist['artist']['rs_spotify'] }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="24" height="24" fill="#484848">
                                            <path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/>
                                        </svg>
                                    </a>
                            @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- About Tab -->
            <div id="organizerContent" class="space-y-8" style="display: none;">
                <div class="flex flex-col gap-4 bg-white p-4 rounded-[20px]">
                    {!! $artist['artist']['embed_html'] !!}
                    <p class="text-[19px] text-[#454545] font-semibold">{{ $artist['artist']['name'] }}</p>
                    @if (!empty($artist['artist']['description']))
                        <p class="text-sm text-[#454545] sm:text-base">
                            {{ $artist['artist']['description'] }}
                        </p>
                    @endif
                    @if (!empty($artist['artist']['rs_facebook']) || !empty($artist['artist']['rs_instagram']) || !empty($artist['artist']['rs_youtube']) || !empty($artist['artist']['rs_spotify']))
                        <p class="text-xs text-[#454545]">Sigue a {{ $artist['artist']['name'] }} en:</p>
                    @endif
                    <div class="flex gap-4">
                        @if (!empty($artist['artist']['rs_facebook']))
                            <a target="_blank" href="{{ $artist['artist']['rs_facebook'] }}">
                                <svg width="20" height="20" fill="#484848" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M24 11.9998C24 5.37236 18.6274 -0.00022316 12 -0.00022316C5.37258 -0.00022316 0 5.37236 0 11.9998C0 17.9893 4.38823 22.9538 10.125 23.854V15.4685H7.07813V11.9998H10.125V9.35603C10.125 6.34853 11.9165 4.68728 14.6576 4.68728C15.9705 4.68728 17.3438 4.92165 17.3438 4.92165V7.87478H15.8306C14.3399 7.87478 13.875 8.79979 13.875 9.74877V11.9998H17.2031L16.6711 15.4685H13.875V23.854C19.6118 22.9538 24 17.9893 24 11.9998Z" />
                                </svg>
                            </a>
                        @endif
                        @if (!empty($artist['artist']['rs_instagram']))
                            <a target="_blank" href="{{ $artist['artist']['rs_instagram'] }}">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="#484848" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.0301 0.0839251C5.7533 0.144165 4.88138 0.347925 4.11914 0.647445C3.33026 0.954885 2.66162 1.36745 1.99634 2.03513C1.33106 2.70281 0.921379 3.37193 0.616099 4.16201C0.320659 4.92593 0.120499 5.79857 0.0640994 7.07609C0.00769946 8.35361 -0.00478054 8.76425 0.00145946 12.023C0.00769946 15.2817 0.0220995 15.6902 0.0840194 16.9703C0.144979 18.2469 0.348019 19.1186 0.647539 19.881C0.955459 20.6699 1.36754 21.3383 2.03546 22.0038C2.70338 22.6694 3.37202 23.0781 4.16402 23.3839C4.92722 23.6788 5.8001 23.8799 7.07738 23.9359C8.35466 23.9918 8.76578 24.0047 12.0235 23.9985C15.2813 23.9922 15.6915 23.9778 16.9714 23.9171C18.2513 23.8564 19.1184 23.6519 19.8811 23.3538C20.67 23.0452 21.3389 22.6338 22.0039 21.9657C22.669 21.2975 23.0784 20.6279 23.3835 19.8374C23.6791 19.0742 23.88 18.2013 23.9355 16.925C23.9914 15.6441 24.0046 15.2351 23.9983 11.9769C23.9921 8.71865 23.9775 8.31017 23.9167 7.03049C23.856 5.75081 23.6527 4.88177 23.3535 4.11881C23.0451 3.32993 22.6335 2.66201 21.9658 1.99601C21.2981 1.33001 20.628 0.920805 19.8377 0.616485C19.074 0.321045 18.2016 0.119685 16.9243 0.0644851C15.6471 0.00928514 15.2359 -0.00487487 11.977 0.00136513C8.71802 0.00760513 8.31002 0.0215251 7.0301 0.0839251ZM7.17026 21.777C6.00026 21.7262 5.36498 21.5318 4.94162 21.369C4.38098 21.153 3.98162 20.8919 3.5597 20.4741C3.13778 20.0562 2.87858 19.6554 2.6597 19.096C2.4953 18.6726 2.2973 18.0381 2.24258 16.8681C2.18306 15.6035 2.17058 15.2238 2.16362 12.0201C2.15666 8.81633 2.1689 8.43713 2.22434 7.17209C2.27426 6.00305 2.46986 5.36705 2.63234 4.94393C2.84834 4.38257 3.1085 3.98393 3.5273 3.56225C3.9461 3.14057 4.3457 2.88089 4.90562 2.66201C5.3285 2.49689 5.96306 2.30057 7.13258 2.24489C8.3981 2.18489 8.7773 2.17289 11.9806 2.16593C15.1839 2.15897 15.564 2.17097 16.83 2.22665C17.9991 2.27753 18.6353 2.47121 19.0579 2.63465C19.6188 2.85065 20.0179 3.11009 20.4396 3.52961C20.8613 3.94913 21.1212 4.34729 21.3401 4.90841C21.5055 5.33009 21.7018 5.96441 21.757 7.13465C21.8172 8.40017 21.8309 8.77961 21.8367 11.9826C21.8424 15.1857 21.8311 15.5661 21.7757 16.8306C21.7246 18.0006 21.5307 18.6362 21.3677 19.06C21.1517 19.6204 20.8913 20.02 20.4723 20.4414C20.0532 20.8629 19.6541 21.1226 19.0939 21.3414C18.6715 21.5063 18.0363 21.7031 16.8677 21.7588C15.6022 21.8183 15.223 21.8308 12.0185 21.8378C8.81402 21.8447 8.43602 21.8318 7.1705 21.777M16.9529 5.58641C16.9534 5.87123 17.0383 6.14952 17.1969 6.38607C17.3556 6.62262 17.5808 6.80682 17.8442 6.91535C18.1075 7.02389 18.3971 7.0519 18.6764 6.99583C18.9556 6.93976 19.212 6.80214 19.413 6.60037C19.614 6.3986 19.7507 6.14174 19.8057 5.86229C19.8608 5.58283 19.8317 5.29333 19.7222 5.03039C19.6127 4.76746 19.4277 4.5429 19.1906 4.38512C18.9534 4.22735 18.6748 4.14344 18.39 4.14401C18.0082 4.14477 17.6423 4.29715 17.3728 4.56764C17.1033 4.83813 16.9523 5.20458 16.9529 5.58641ZM5.8385 12.0119C5.84522 15.4151 8.60906 18.1677 12.0115 18.1612C15.414 18.1547 18.1685 15.3911 18.162 11.9879C18.1555 8.58473 15.391 5.83145 11.988 5.83817C8.58506 5.84489 5.83202 8.60921 5.8385 12.0119ZM7.99994 12.0076C7.99837 11.2165 8.23144 10.4426 8.66967 9.78395C9.10791 9.12528 9.73162 8.61134 10.4619 8.30714C11.1923 8.00294 11.9964 7.92213 12.7726 8.07494C13.5489 8.22775 14.2624 8.6073 14.8229 9.16562C15.3834 9.72393 15.7658 10.4359 15.9217 11.2115C16.0776 11.9872 15.9999 12.7916 15.6986 13.5231C15.3973 14.2547 14.8859 14.8804 14.2289 15.3212C13.572 15.7621 12.7991 15.9982 12.0079 15.9998C11.4826 16.0009 10.9622 15.8985 10.4765 15.6984C9.99076 15.4984 9.54918 15.2046 9.17699 14.8339C8.8048 14.4632 8.50929 14.0228 8.30733 13.5378C8.10536 13.0529 8.00091 12.5329 7.99994 12.0076Z" />
                                </svg>
                            </a>
                        @endif
                        @if (!empty($artist['artist']['rs_youtube']))
                        <a target="_blank" href="{{ $artist['artist']['rs_youtube'] }}">
                            <svg width="27" height="19" viewBox="0 0 24 18" fill="#484848" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_1594_27938)">
                                    <path d="M9.54545 12.5565V5.44402L15.8182 9.00041L9.54545 12.5565ZM23.4985 3.20606C23.2225 2.17027 22.4092 1.35462 21.3766 1.0778C19.505 0.574717 12 0.574717 12 0.574717C12 0.574717 4.49499 0.574717 2.62335 1.0778C1.59076 1.35462 0.777485 2.17027 0.501509 3.20606C0 5.08337 0 9.00025 0 9.00025C0 9.00025 0 12.9171 0.501509 14.7944C0.777485 15.8302 1.59076 16.6459 2.62335 16.9228C4.49499 17.4258 12 17.4258 12 17.4258C12 17.4258 19.505 17.4258 21.3766 16.9228C22.4092 16.6459 23.2225 15.8302 23.4985 14.7944C24 12.9171 24 9.00025 24 9.00025C24 9.00025 24 5.08337 23.4985 3.20606Z" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_1594_27938">
                                        <rect width="24" height="16.8511" transform="translate(0 0.574707)"/>
                                    </clipPath>
                                </defs>
                            </svg>
                        </a>
                        @endif
                        @if (!empty($artist['artist']['rs_spotify']))
                            <a target="_blank" href="{{ $artist['artist']['rs_spotify'] }}">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="18" height="18" fill="#484848">
                                    <path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/>
                                </svg>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="max-x-full bg-white">
        <div class="max-w-7xl mx-auto pt-5 pb-10">
            <div class=px-10>
                <h3 class="text-base font-semibold text-[#454545] sm:text-xl pt-6 ml-[30px]">Los fans de {{ $artist['artist']['name'] }} también prefieren</h3>
                <x-slider-artist :artist="$artist['artist']" :artistsRnd="$artist['artistRnd']" />
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const eventTab = document.getElementById('eventTab');
            const aboutTab = document.getElementById('aboutTab');
            const ticketsContent = document.getElementById('ticketsContent');
            const organizerContent = document.getElementById('organizerContent');

            function switchTab(activeTab, activeContent, inactiveTab, inactiveContent) {
                // Actualizar estilos de las pestañas
                activeTab.classList.add('border-b-2', 'border-[#6F0FF0]', 'text-[#6F0FF0]', 'font-medium');
                activeTab.classList.remove('text-gray-500');

                inactiveTab.classList.remove('border-b-2', 'border-[#6F0FF0]', 'text-[#6F0FF0]', 'font-medium');
                inactiveTab.classList.add('text-gray-500');

                // Mostrar/ocultar contenido con una animación suave
                activeContent.style.opacity = '0';
                activeContent.style.display = 'block';
                inactiveContent.style.display = 'none';

                // Animar la aparición del contenido activo
                setTimeout(() => {
                    activeContent.style.transition = 'opacity 300ms ease-out';
                    activeContent.style.opacity = '1';
                }, 50);
            }

            eventTab.addEventListener('click', function() {
                switchTab(eventTab, ticketsContent, aboutTab, organizerContent);
            });

            aboutTab.addEventListener('click', function() {
                switchTab(aboutTab, organizerContent, eventTab, ticketsContent);
            });                
        });
    </script>

@endsection