@extends('layouts.base')

@section('content')

 <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
        <!-- Header -->
        @include('user.components.page-header', ['title' => 'My Hub', 'subtitle' => 'List of all celebrities you follow'])
        
        <div class="bg-white rounded-lg shadow-sm mb-6">
            <div class="border-t-4 border-blue-600 py-6 px-2">
                
                <div class="mb-12">
                    <h1 class="text-base sm:text-xl font-bold text-gray-800">Membership Lists</h1>
                </div>
                 
                 @if(!blank($myLists))
                <div class="hidden lg:block  text-gray-700 ">
                <div class="grid grid-cols-12 gap-4 px-6 py-4 text-sm font-semibold">
                <div class="col-span-3">Name</div>
                <div class="col-span-2">Category</div>
                <div class="col-span-1">Age</div>
                <div class="col-span-1">Country</div>
                <div class="col-span-1 text-center"><i class="fab fa-instagram"></i></div>
                <div class="col-span-1 text-center"><i class="fab fa-facebook"></i></div>
                <div class="col-span-1 text-center"><i class="fab fa-x-twitter"></i></div>
                <div class="col-span-1 text-center"><i class="fab fa-tiktok"></i></div>
                <div class="col-span-1"></div>
            </div>
        </div>

        <!-- Table Content -->
        <div class=" lg:rounded-t-none divide-y divide-slate-200">
            @foreach($myLists as $myList)
                                @php
                $artist = $myList->artist;
                @endphp
                @if(!blank($artist))
            <div class="p-4 md:p-6 hover:bg-slate-50 transition">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start lg:items-center">
                    <!-- Name and Category (Same row on mobile) -->
                    <div class="lg:col-span-3 flex items-center gap-3">
                        <div class="w-12 h-12  rounded-full flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
                            <img src="{{avatar_exists('celebrity/' . $artist->avatar)}}" class="w-12 h-12" />
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-sm text-slate-800"><a href="">{{$artist->name}}</a></div>
                            <div class="text-xs text-slate-500"><a href="">{{"@".$artist->slug}}</a></div>
                        </div>
                    </div>
                    
                    <div class="lg:col-span-2 -mt-2 lg:mt-0 ml-15 lg:ml-0">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border border-[#38bdf8] text-slate-500">
                            <i class="fas fa-basketball-ball mr-1"></i> {{$artist->categoryType->name}}
                        </span>
                    </div>
                    
                    <!-- Age & Country -->
                    <div class="lg:col-span-1">
                        <div class="text-xs text-slate-500 lg:hidden">Age</div>
                        <div class="text-slate-700  font-medium text-sm">{{$artist->age()}}</div>
                    </div>
                    
                    <div class="lg:col-span-1">
                        <div class="text-xs text-slate-500 lg:hidden">Country</div>
                        <div class="text-slate-700 text-sm">{{$artist->country}}</div>
                    </div>
                    
                    <!-- Social Media Stats -->
                    <div class="lg:col-span-4 grid grid-cols-4 gap-2 lg:gap-0">
                        <div class="text-center">
                            <div class="text-xs text-slate-500 lg:hidden mb-1"><i class="fab fa-instagram"></i></div>
                            <a href="#" class="text-pink-600 hover:text-pink-700 font-semibold text-sm">{{getSocialsFollowers($artist->socials , 'instagram')}}</a>
                        </div>
                        <div class="text-center">
                            <div class="text-xs text-slate-500 lg:hidden mb-1"><i class="fab fa-facebook"></i></div>
                            <div class="text-slate-400 text-sm">{{getSocialsFollowers($artist->socials , 'facebook')}}</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xs text-slate-500 lg:hidden mb-1"><i class="fab fa-x-twitter"></i></div>
                            <a href="#" class="text-slate-800 hover:text-slate-900 font-semibold text-sm"> {{getSocialsFollowers($artist->socials , 'spotify')}}</a>
                        </div>
                        <div class="text-center">
                            <div class="text-xs text-slate-500 lg:hidden mb-1"><i class="fab fa-tiktok"></i></div>
                            <div class="text-slate-400 text-sm">{{getSocialsFollowers($artist->socials , 'tiktok')}}</div>
                        </div>
                    </div>
                    <div class="lg:col-span-1">
                        <a href="{{route('user.preview.card',[$artist->slug,__the_hash($user->id)])}}" role="button" class="btn-primary" href="Javascript:void">View</a>
                    </div>
                </div>
            </div>
            @endif
                                @endforeach
        </div>
                @else
                   <p>You currently have no lists.</p>
                @endif
            </div>
        </div>

       
    </div>
@endsection