@extends('front.layouts.app')

@section('title', $astrologer->name . ' - Professional Astrologer')

@section('content')
    <div class="max-w-7xl mx-auto px-6 py-8">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-8">
            <a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
            <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
            <a href="{{ route('front.astrologers.index') }}" class="hover:text-white transition-colors">Browse Astrologers</a>
            <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
            <span class="text-slate-300">{{ $astrologer->name }}</span>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Left Column: Primary Content -->
            <div class="lg:col-span-8 space-y-8">
                <!-- Profile Header Card -->
                <div class="glass rounded-[2.5rem] p-8 relative overflow-hidden group">
                    <!-- Background Glow -->
                    <div
                        class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-blue-500/10 blur-[100px] rounded-full group-hover:bg-blue-500/15 transition-colors">
                    </div>

                    <div class="relative z-10 flex flex-col md:flex-row gap-8 items-start">
                        <!-- Profile Image -->
                        <div class="relative flex-shrink-0">
                            <div class="w-40 h-40 rounded-3xl overflow-hidden border-4 border-white/5 shadow-2xl">
                                @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->profile_pic)
                                    <img src="{{ asset('storage/' . $astrologer->astrologerDetail->profile_pic) }}"
                                        alt="{{ $astrologer->name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                        <i data-lucide="user" class="w-16 h-16 text-slate-600"></i>
                                    </div>
                                @endif
                            </div>
                            @if($astrologer->isOnline())
                                <div
                                    class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-emerald-500 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest shadow-lg shadow-emerald-500/20">
                                    Online
                                </div>
                            @else
                                <div
                                    class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-slate-500 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest shadow-lg shadow-slate-500/20">
                                    Offline
                                </div>
                            @endif
                        </div>

                        <!-- Basic Info -->
                        <div class="flex-1 space-y-4">
                            <div class="flex flex-wrap items-center justify-between gap-4">
                                <div>
                                    <h1 class="text-3xl font-bold text-white mb-1">{{ $astrologer->name }}</h1>
                                    <div class="space-y-1.5 mt-1">
                                        @if($astrologer->scategories->count() > 0)
                                            <div class="flex items-center gap-2 text-slate-300 text-sm font-medium">
                                                <i data-lucide="award" class="w-4 h-4 text-yellow-500"></i>
                                                {{ $astrologer->scategories->pluck('name')->implode(' • ') }}
                                            </div>
                                        @endif

                                        @if($astrologer->skills->count() > 0)
                                            <div class="flex items-center gap-2 text-slate-400 text-xs font-medium">
                                                <i data-lucide="sparkles" class="w-3.5 h-3.5 text-blue-400"></i>
                                                {{ $astrologer->skills->pluck('name')->implode(' • ') }}
                                            </div>
                                        @endif

                                        @if($astrologer->scategories->isEmpty() && $astrologer->skills->isEmpty())
                                            <div class="flex items-center gap-2 text-slate-300 text-sm font-medium">
                                                <i data-lucide="award" class="w-4 h-4 text-yellow-500"></i>
                                                Vedic Astrology
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex items-center gap-3">
                                    <button
                                        onclick="initiateChat({{ $astrologer->id }}, '{{ addslashes($astrologer->name) }}', {{ $astrologer->astrologerDetail->price_chat ?? 10 }})"
                                        class="h-10 px-6 rounded-xl bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold text-sm tracking-wide transition-colors flex items-center gap-2">
                                        <i data-lucide="message-square" class="w-4 h-4"></i>
                                        Chat (₹{{ $astrologer->astrologerDetail->price_chat ?? 10 }}/min)
                                    </button>
                                    <button
                                        class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors">
                                        <i data-lucide="share-2" class="w-5 h-5 text-slate-400"></i>
                                    </button>
                                    @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->website_url)
                                        <a href="{{ $astrologer->astrologerDetail->website_url }}" target="_blank"
                                            class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors"
                                            title="Visit Website">
                                            <i data-lucide="globe"
                                                class="w-5 h-5 text-slate-400 opacity-80 hover:text-white hover:opacity-100 transition-all"></i>
                                        </a>
                                    @endif
                                    <button onclick="toggleFavourite({{ $astrologer->id }})"
                                        id="fav-btn-{{ $astrologer->id }}"
                                        class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors">
                                        <i data-lucide="heart"
                                            class="w-5 h-5 {{ $isFavourite ? 'text-red-500 fill-red-500' : 'text-slate-400' }}"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 py-6 border-y border-white/5">
                                <div class="text-center sm:text-left">
                                    <p class="text-[10px] text-slate-500 uppercase font-bold tracking-widest mb-1">Rating
                                    </p>
                                    <div class="flex items-center justify-center sm:justify-start gap-1">
                                        <span
                                            class="text-lg font-bold text-white">{{ number_format($astrologer->average_rating, 1) }}</span>
                                        <i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
                                    </div>
                                </div>
                                <div class="text-center sm:text-left">
                                    <p class="text-[10px] text-slate-500 uppercase font-bold tracking-widest mb-1">
                                        Experience</p>
                                    <p class="text-lg font-bold text-white">
                                        {{ $astrologer->astrologerDetail->experience_years ?? 0 }}+ Yrs
                                    </p>
                                </div>
                                <div class="text-center sm:text-left">
                                    <p class="text-[10px] text-slate-500 uppercase font-bold tracking-widest mb-1">Location
                                    </p>
                                    <p class="text-lg font-bold text-white truncate">
                                        {{ $astrologer->astrologerDetail->city ?? 'India' }}@if($astrologer->astrologerDetail->state),
                                        {{ $astrologer->astrologerDetail->state->name }}@endif
                                    </p>
                                </div>
                                <div class="text-center sm:text-left">
                                    <p class="text-[10px] text-slate-500 uppercase font-bold tracking-widest mb-1">Language
                                    </p>
                                    <p class="text-lg font-bold text-white truncate">
                                        {{ $astrologer->languages->pluck('name')->implode(', ') ?: 'Hindi' }}
                                    </p>
                                </div>
                            </div>

                            <div class="flex flex-wrap gap-4 pt-4">
                                <button
                                    class="flex-1 min-w-[140px] flex flex-col items-center justify-center gap-1 bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold py-3 rounded-2xl transition-all shadow-xl shadow-yellow-500/20 group">
                                    <div class="flex items-center gap-2">
                                        <i data-lucide="message-circle"
                                            class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                                        <span>Chat Now</span>
                                    </div>
                                    <span
                                        class="text-xs opacity-75">₹{{ $astrologer->astrologerDetail->price_chat ?? 0 }}/min</span>
                                </button>
                                <button
                                    class="flex-1 min-w-[140px] flex flex-col items-center justify-center gap-1 bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 rounded-2xl transition-all shadow-xl shadow-blue-600/20 group">
                                    <div class="flex items-center gap-2">
                                        <i data-lucide="phone"
                                            class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                                        <span>Call Now</span>
                                    </div>
                                    <span
                                        class="text-xs opacity-75">₹{{ $astrologer->astrologerDetail->price_call ?? 0 }}/min</span>
                                </button>
                                <button
                                    class="w-14 min-w-[56px] flex items-center justify-center border border-white/10 hover:bg-white/5 text-white rounded-2xl transition-colors">
                                    <i data-lucide="video" class="w-6 h-6"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- About & Details Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- About Me -->
                    <div class="glass rounded-[2rem] p-10">
                        <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                            <i data-lucide="user" class="w-6 h-6 text-yellow-500"></i>
                            About Me
                        </h2>
                        <div class="prose prose-invert max-w-none text-slate-400 leading-relaxed font-medium">
                            {!! nl2br(e($astrologer->astrologerDetail->bio)) ?: 'No bio available yet.' !!}
                        </div>
                    </div>

                    <!-- Education & Awards -->
                    <div class="glass rounded-[2rem] p-10 space-y-8">
                        <div>
                            <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                                <i data-lucide="graduation-cap" class="w-6 h-6 text-blue-500"></i>
                                Education
                            </h2>
                            <ul class="space-y-4">
                                @php
                                    $educationRaw = is_string($astrologer->astrologerDetail->education)
                                        ? json_decode($astrologer->astrologerDetail->education, true)
                                        : ($astrologer->astrologerDetail->education ?? []);

                                    // If education is a list of IDs, try to resolve names
                                    if (!empty($educationRaw) && is_numeric($educationRaw[0] ?? null)) {
                                        $education = \App\Models\Qualification::whereIn('id', $educationRaw)->pluck('name')->toArray();
                                    } else {
                                        $education = $educationRaw;
                                    }
                                @endphp
                                @forelse($education as $edu)
                                    <li class="flex items-start gap-3 text-slate-400">
                                        <div class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2"></div>
                                        <span class="font-medium">
                                            @if(is_array($edu))
                                                {{ $edu['degree'] ?? ($edu['title'] ?? 'N/A') }}
                                            @else
                                                {{ $edu }}
                                            @endif
                                        </span>
                                    </li>
                                @empty
                                    <li class="text-slate-500 italic">No education details listed.</li>
                                @endforelse
                            </ul>
                        </div>

                        <div>
                            <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                                <i data-lucide="award" class="w-6 h-6 text-purple-500"></i>
                                Awards & Achievements
                            </h2>
                            <ul class="space-y-4">
                                @php
                                    $awards = is_string($astrologer->astrologerDetail->awards)
                                        ? json_decode($astrologer->astrologerDetail->awards, true)
                                        : ($astrologer->astrologerDetail->awards ?? []);
                                @endphp
                                @forelse($awards as $award)
                                    <li class="flex items-start gap-3 text-slate-400">
                                        <div class="w-1.5 h-1.5 rounded-full bg-purple-500 mt-2"></div>
                                        <span class="font-medium">
                                            @if(is_array($award))
                                                {{ $award['title'] ?? ($award['name'] ?? 'Award') }}
                                            @else
                                                {{ $award }}
                                            @endif
                                        </span>
                                    </li>
                                @empty
                                    <li class="text-slate-500 italic">No awards listed.</li>
                                @endforelse
                            </ul>
                        </div>

                        <div>
                            <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                                <i data-lucide="file-text" class="w-6 h-6 text-emerald-500"></i>
                                Certifications
                            </h2>
                            <ul class="space-y-4">
                                @php
                                    $certifications = is_string($astrologer->astrologerDetail->certifications)
                                        ? json_decode($astrologer->astrologerDetail->certifications, true)
                                        : ($astrologer->astrologerDetail->certifications ?? []);
                                @endphp
                                @forelse($certifications as $cert)
                                    <li class="flex items-start gap-3 text-slate-400">
                                        <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-2"></div>
                                        <span class="font-medium">{{ $cert }}</span>
                                    </li>
                                @empty
                                    <li class="text-slate-500 italic">No certifications listed.</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Pooja Services Section -->
                @if($astrologer->poojaServices->where('status', true)->count() > 0)
                    <div class="glass rounded-[2rem] p-10">
                        <h2 class="text-2xl font-bold text-white mb-8 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <i data-lucide="sparkles" class="w-6 h-6 text-yellow-500"></i>
                                Pooja Services offered by {{ $astrologer->name }}
                            </div>
                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] bg-white/5 px-4 py-1.5 rounded-full border border-white/5">
                                {{ $astrologer->poojaServices->where('status', true)->count() }} Services
                            </span>
                        </h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($astrologer->poojaServices->where('status', true) as $assignedService)
                                @php 
                                    $service = $assignedService->poojaService;
                                    $name = $assignedService->custom_name ?: ($service ? $service->name : 'Unknown Ritual');
                                    $img = $assignedService->custom_image ? asset('storage/' . $assignedService->custom_image) : ($service && $service->image ? asset('storage/' . $service->image) : null);
                                    $price = $assignedService->price;
                                @endphp
                                <div class="bg-slate-800/30 rounded-3xl overflow-hidden border border-white/5 hover:border-yellow-500/30 transition-all group flex flex-col h-full">
                                    <!-- Service Image -->
                                    <div class="h-44 relative overflow-hidden">
                                        @if($img)
                                            <img src="{{ $img }}" class="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700">
                                        @else
                                            <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                                <i data-lucide="sparkles" class="w-10 h-10 text-slate-700"></i>
                                            </div>
                                        @endif
                                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-60"></div>
                                        <div class="absolute bottom-4 left-4">
                                            <span class="bg-yellow-500 text-slate-900 px-3 py-1 rounded-lg text-[10px] font-black shadow-lg uppercase tracking-tight">₹{{ number_format($price, 2) }}</span>
                                        </div>
                                    </div>
                                    
                                    <!-- Content -->
                                    <div class="p-6 flex-1 flex flex-col">
                                        <h3 class="text-lg font-bold text-white mb-2 line-clamp-1 group-hover:text-yellow-500 transition-colors">
                                            {{ $name }}
                                        </h3>
                                        <div class="text-slate-400 text-xs line-clamp-2 mb-6 leading-relaxed font-medium">
                                            {!! strip_tags($assignedService->description ?: ($service ? $service->description : 'Experience this sacred ritual performed by expert astrologers.')) !!}
                                        </div>
                                        
                                        <div class="mt-auto">
                                            <form action="{{ route('cart.add-pooja') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="astrologer_pooja_service_id" value="{{ $assignedService->id }}">
                                                <button type="submit" class="w-full bg-white/5 hover:bg-yellow-500 hover:text-slate-900 text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border border-white/5 hover:border-yellow-500 active:scale-95 flex items-center justify-center gap-2">
                                                    <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                                                    Book Now
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif


                <!-- Video section -->
                @if($astrologer->astrologerDetail->intro_video_path)
                    <div class="glass rounded-[2rem] p-10 overflow-hidden relative">
                        <h2 class="text-2xl font-bold text-white mb-6">Introduction Video</h2>
                        <div
                            class="aspect-video rounded-3xl overflow-hidden bg-slate-900 border border-white/10 shadow-2xl relative group">
                            <!-- Simulated Video Player -->
                            <div
                                class="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-black/20 transition-colors">
                                <button
                                    class="w-20 h-20 rounded-full bg-yellow-500 flex items-center justify-center shadow-2xl transform active:scale-95 transition-all">
                                    <i data-lucide="play" class="w-8 h-8 text-slate-900 ml-1"></i>
                                </button>
                            </div>
                            <!-- If it's a youtube/vimeo ID we'd iframe here, for now just a placeholder of the path -->
                            <p class="absolute bottom-4 left-4 text-[10px] text-slate-500">Source:
                                {{ $astrologer->astrologerDetail->intro_video_path }}
                            </p>
                        </div>
                    </div>
                @endif

                <!-- Rating & Reviews Section -->
                <div class="glass rounded-[2rem] p-10">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-12">
                        <h2 class="text-2xl font-bold text-white">Rating & Reviews</h2>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
                        <!-- Rating Stats -->
                        <div class="md:col-span-4 text-center space-y-4">
                            <div class="inline-block px-8 py-6 bg-slate-800/50 rounded-3xl border border-white/5">
                                <div class="text-5xl font-black text-white mb-2">
                                    {{ number_format($astrologer->average_rating, 1) }}
                                </div>
                                <div class="flex justify-center gap-1 mb-2">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i data-lucide="star"
                                            class="w-5 h-5 {{ $i <= floor($astrologer->average_rating) ? 'text-yellow-500 fill-yellow-500' : 'text-slate-600' }}"></i>
                                    @endfor
                                </div>
                                <div class="text-sm font-bold text-slate-500">{{ $astrologer->total_reviews }} Total Reviews
                                </div>
                            </div>
                        </div>

                        <!-- Progress Bars -->
                        <div class="md:col-span-8 space-y-4">
                            @php
                                $reviewCounts = $astrologer->reviews()->approved()
                                    ->selectRaw('rating, count(*) as total')
                                    ->groupBy('rating')
                                    ->pluck('total', 'rating')
                                    ->toArray();

                                $totalReviews = $astrologer->total_reviews ?: 1; // Avoid division by zero
                            @endphp
                            @foreach(range(5, 1) as $star)
                                @php
                                    $count = $reviewCounts[$star] ?? 0;
                                    $pct = ($count / $totalReviews) * 100;
                                @endphp
                                <div class="flex items-center gap-4 group">
                                    <div class="w-8 text-sm font-bold text-slate-400 group-hover:text-white transition-colors">
                                        {{ $star }} ★
                                    </div>
                                    <div class="flex-1 h-3 bg-slate-800 rounded-full overflow-hidden">
                                        <div class="h-full bg-yellow-500 rounded-full transition-all duration-1000"
                                            style="width: {{ $pct }}%"></div>
                                    </div>
                                    <div class="w-10 text-right text-xs font-bold text-slate-500">{{ round($pct) }}%</div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Reviews List -->
                    <div class="mt-16 space-y-8">
                        @forelse($astrologer->reviews()->approved()->with('user')->latest()->get() as $review)
                            <div
                                class="p-8 bg-slate-800/30 rounded-[2rem] border border-white/5 hover:border-white/10 transition-all group">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="flex items-center gap-4">
                                        <div
                                            class="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-500 font-bold border border-blue-500/10">
                                            {{ substr($review->user->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-white">{{ $review->user->name }}</h4>
                                            <div class="flex items-center gap-2">
                                                <div class="flex gap-0.5">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        <i data-lucide="star"
                                                            class="w-3 h-3 {{ $i <= $review->rating ? 'text-yellow-500 fill-yellow-500' : 'text-slate-700' }}"></i>
                                                    @endfor
                                                </div>
                                                <span
                                                    class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">{{ $review->created_at->diffForHumans() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @if($review->review)
                                    <p class="text-slate-400 font-medium leading-relaxed mb-4">
                                        {{ $review->review }}
                                    </p>
                                @endif

                                @if($review->tags && count($review->tags) > 0)
                                    <div class="flex flex-wrap gap-2 mb-4">
                                        @foreach($review->tags as $tagKey)
                                            @php
                                                $tagLabel = \App\Models\AstrologerReview::getAvailableTags()[$tagKey] ?? $tagKey;
                                            @endphp
                                            <span
                                                class="px-3 py-1 bg-purple-500/10 text-purple-400 text-[10px] font-bold rounded-full border border-purple-500/20">
                                                {{ $tagLabel }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif

                                @if($review->reply)
                                    <div class="mt-4 ml-6 border-l-2 border-yellow-500/30 pl-6 py-2">
                                        <div class="flex items-center gap-2 mb-2">
                                            <i data-lucide="reply" class="w-3.5 h-3.5 text-yellow-500"></i>
                                            <span class="text-xs font-bold text-yellow-500 uppercase tracking-widest">Astrologer's
                                                Response</span>
                                        </div>
                                        <p class="text-slate-400 font-medium leading-relaxed">
                                            {{ $review->reply }}
                                        </p>
                                    </div>
                                @endif
                            </div>
                        @empty
                            <div class="text-center py-12">
                                <i data-lucide="message-square" class="w-12 h-12 text-slate-700 mx-auto mb-4"></i>
                                <p class="text-slate-500 font-medium">No reviews yet. Be the first to share your experience!</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Right Column: Sidebar -->
            <div class="lg:col-span-4 space-y-8">
                <!-- Check Similar Consultants Card -->
                <div class="glass rounded-[2rem] p-8 border-white/5">
                    <div class="flex items-center justify-between mb-8">
                        <h3 class="text-xl font-bold text-white">Similar Consultants</h3>
                        <i data-lucide="info" class="w-4 h-4 text-slate-500"></i>
                    </div>

                    <div class="space-y-6">
                        @foreach($similarAstrologers as $similar)
                            <a href="{{ route('astrologer.public_profile', $similar->slug ?? 'slug') }}"
                                class="flex items-center gap-4 group p-3 rounded-2xl hover:bg-white/5 transition-all">
                                <div class="w-16 h-16 rounded-xl overflow-hidden border border-white/10">
                                    @if($similar->astrologerDetail && $similar->astrologerDetail->profile_pic)
                                        <img src="{{ asset('storage/' . $similar->astrologerDetail->profile_pic) }}"
                                            alt="{{ $similar->name }}" class="w-full h-full object-cover">
                                    @else
                                        <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                            <i data-lucide="user" class="w-6 h-6 text-slate-600"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-bold text-white group-hover:text-yellow-500 transition-colors truncate">
                                        {{ $similar->name }}
                                    </h4>
                                    <div class="flex items-center gap-2 mt-1">
                                        <div class="flex items-center gap-1.5">
                                            <div class="flex items-center gap-0.5">
                                                <i data-lucide="star" class="w-3 h-3 text-yellow-500 fill-yellow-500"></i>
                                                <span class="text-xs font-bold text-slate-300">
                                                    {{ $similar->total_reviews > 0 ? number_format($similar->average_rating, 1) : 'New' }}
                                                </span>
                                            </div>
                                            @if($similar->total_reviews > 0)
                                                <span
                                                    class="text-[10px] text-slate-500 font-medium">({{ $similar->total_reviews }})</span>
                                            @endif
                                        </div>
                                        <span class="text-[10px] {{ $similar->isOnline() ? 'text-emerald-500' : 'text-slate-600' }} font-black uppercase tracking-widest">•
                                            {{ $similar->isOnline() ? 'Online' : 'Offline' }}</span>
                                    </div>
                                </div>
                                <i data-lucide="arrow-right"
                                    class="w-5 h-5 text-slate-700 group-hover:text-white group-hover:translate-x-1 transition-all"></i>
                            </a>
                        @endforeach
                    </div>

                    <button
                        class="w-full mt-8 py-4 rounded-2xl border border-white/10 text-sm font-bold text-slate-300 hover:text-white hover:bg-white/5 transition-all">
                        View All Consultants
                    </button>
                </div>

                <!-- Chat with Assistant? -->
                <div
                    class="glass rounded-[2rem] p-8 relative overflow-hidden bg-gradient-to-br from-indigo-600/20 to-indigo-900/20 border-indigo-500/20 group cursor-pointer">
                    <div
                        class="absolute -right-6 -bottom-6 w-32 h-32 bg-indigo-500/10 blur-[40px] rounded-full group-hover:scale-150 transition-transform duration-700">
                    </div>
                    <div class="relative z-10 flex items-center gap-4">
                        <div
                            class="w-14 h-14 rounded-2xl bg-indigo-600 flex items-center justify-center shadow-2xl shadow-indigo-600/30">
                            <i data-lucide="help-circle" class="w-7 h-7 text-white"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-white text-lg">Chat with Assistant?</h3>
                            <p class="text-indigo-300/60 text-xs font-medium">Need help picking an astrologer?</p>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity/Stats -->
                <div class="glass rounded-[2rem] p-8 border-white/5">
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                                <i data-lucide="trending-up" class="w-5 h-5 text-emerald-500"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-500 uppercase tracking-widest">Available Today</p>
                                <p class="text-sm font-bold text-white">10 AM - 10 PM IST</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
                                <i data-lucide="zap" class="w-5 h-5 text-amber-500"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-500 uppercase tracking-widest">Fast Connection</p>
                                <p class="text-sm font-bold text-white">Avg. response < 2 mins</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .prose p {
            margin-bottom: 1.5rem;
        }
    </style>
@endpush

@push('scripts')
    @vite(['resources/js/app.js'])
    <script>
        let chatRequestInterval;

        function toggleFavourite(astrologerId) {
            @guest
                window.location.href = "{{ route('login') }}";
                return;
            @endguest

            fetch(`{{ url('user/favourites') }}/${astrologerId}/toggle`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const btn = document.getElementById(`fav-btn-${astrologerId}`);
                        // Lucide converts <i> to <svg>, so we look for the svg or the class
                        const icon = btn.querySelector('.lucide-heart') || btn.querySelector('svg');

                        if (data.isFavourite) {
                            icon.classList.remove('text-slate-400');
                            icon.classList.add('text-red-500', 'fill-red-500');
                        } else {
                            icon.classList.remove('text-red-500', 'fill-red-500');
                            icon.classList.add('text-slate-400');
                        }
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        function initiateChat(astrologerId, astrologerName, price) {
            @guest
                window.location.href = "{{ route('login') }}";
                return;
            @endguest

                                                if (!confirm(`Start chat with ${astrologerName} for ₹${price}/min?`)) return;

            // Show Modal
            const modal = document.getElementById('chatRequestModal');
            modal.classList.remove('hidden');
            document.getElementById('chatStatusText').innerText = 'Sending Request...';

            // Send Request
            fetch("{{ route('chat.request.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: JSON.stringify({ astrologer_id: astrologerId })
            })
                .then(res => res.json())
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                        modal.classList.add('hidden');
                        return;
                    }

                    document.getElementById('chatStatusText').innerText = 'Waiting for Astrologer to Accept...';
                    // Start Polling or Listening
                    pollStatus(data.request_id);
                })
                .catch(err => {
                    console.error(err);
                    modal.classList.add('hidden');
                    alert('Something went wrong.');
                });
        }

        function pollStatus(requestId) {
            // Listen using Echo if available, else poll
            if (window.Echo) {
                window.Echo.private(`user.{{ auth()->id() }}`)
                    .listen('ChatRequestUpdated', (e) => {
                        handleChatStatus(e.chatRequest);
                    });
            }

            // Backup Polling
            chatRequestInterval = setInterval(() => {
                fetch(`/chat/request/${requestId}/status`)
                    .then(res => res.json())
                    .then(data => {
                        handleChatStatus(data);
                    });
            }, 3000);
        }

        function handleChatStatus(data) {
            if (data.status === 'accepted') {
                clearInterval(chatRequestInterval);
                document.getElementById('chatStatusText').innerText = 'Request Accepted! Redirecting...';
                setTimeout(() => {
                    window.location.href = `/user/chat/${data.session_id || data.session.id}`;
                }, 1000);
            } else if (data.status === 'rejected') {
                clearInterval(chatRequestInterval);
                document.getElementById('chatStatusText').innerText = 'Request Rejected: ' + (data.rejection_reason || 'Busy');
                setTimeout(() => {
                    document.getElementById('chatRequestModal').classList.add('hidden');
                }, 3000);
            }
        }
    </script>
@endpush

<!-- Chat Request Modal -->
<div id="chatRequestModal"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm hidden">
    <div class="bg-slate-900 border border-white/10 p-8 rounded-3xl max-w-sm w-full text-center">
        <div
            class="w-16 h-16 bg-yellow-500/10 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
            <i data-lucide="loader-2" class="w-8 h-8 text-yellow-500 animate-spin"></i>
        </div>
        <h3 class="text-xl font-bold text-white mb-2">Connecting...</h3>
        <p id="chatStatusText" class="text-slate-400">Please wait while we connect you.</p>
        <button onclick="location.reload()" class="mt-8 text-sm text-red-400 hover:text-red-300">Cancel Request</button>
    </div>
</div>