@extends('layouts.base')

@section('content')

<div class="mt-5 py-12">
    @include('user.components.page-header', ['title' => 'Browse Celebrities', 'subtitle' => 'Private Database of the Worlds Most Popular Celebrities'])
<div class="grid grid-cols-12 space-x-4">
    <div class="col-span-3">
        @include('user.components.filters', ['filters' => $filters])
    </div>
    <div class="col-span-9">
        <div>
        <div class="mb-4">
            <div class="inline-block border-b-2  border-b-[#0369a1] text-base py-2 text-slate-800 font-bold">
    Celebrities
</div>

        </div>
         <!-- Table Header (Desktop Only) -->
        <div class="hidden lg:block bg-gray-100 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-2">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>
        </div>

        <!-- Table Content -->
        <div class="divide-y divide-slate-200">
            
            <!-- Row 1 -->
            @forelse($artists as $artist)
            <div class="p-1 md:p-3 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="{{secure_url('artist/'.$artist->slug)}}">{{$artist->name}}</a></div>
                            <div class="text-xs text-slate-500"><a href="{{secure_url('artist/'.$artist->slug)}}">{{"@".$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 text-sm font-medium">{{$artist->age()}}</div>
                    </div>
                    
                    <div class="lg:col-span-2">
                        <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>
            </div>
            @empty
            
            @endforelse
            <div>
                {{ $artists->links('vendor.pagination.custom') }}
            </div>
             
        </div>
    </div>
    </div>
    
</div>

</div>

@endsection