@extends('front.layouts.app')

@section('title', $service->name . ' - Astrotalk')

@section('content')
    <div class="pt-32 pb-20 px-6">
        <div class="max-w-7xl mx-auto">
            <!-- 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('pooja-services.index') }}" class="hover:text-white transition-colors">Ritual & Pooja Services</a>
                <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
                <span class="text-slate-300">{{ $service->name }}</span>
            </nav>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 mb-20">
                <!-- Left: Content -->
                <div class="lg:col-span-2 space-y-10">
                    <div class="relative rounded-[40px] overflow-hidden aspect-video border border-white/10 group shadow-2xl">
                        @if($service->image)
                            <img src="{{ asset('storage/' . $service->image) }}" alt="{{ $service->name }}"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                        @else
                            <div class="w-full h-full bg-slate-900 flex items-center justify-center">
                                <i data-lucide="sparkles" class="w-20 h-20 text-slate-800"></i>
                            </div>
                        @endif
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent opacity-90">
                        </div>
                        <div class="absolute bottom-10 left-10 right-10">
                            <h1 class="text-4xl md:text-5xl font-black text-white mb-4 tracking-tighter">
                                {{ $service->name }}</h1>
                            <div class="flex items-center gap-4">
                                <span class="bg-purple-500/20 backdrop-blur-md text-purple-400 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border border-purple-500/30">
                                    Vedic Ritual
                                </span>
                                <p class="text-slate-300 text-sm Leading-relaxed max-w-lg border-l border-white/10 pl-4">Connect with the divine through our masterfully performed rituals.</p>
                            </div>
                        </div>
                    </div>

                    <div class="glass rounded-[32px] p-10 border border-white/5 relative overflow-hidden">
                        <div class="absolute top-0 right-0 p-10 opacity-[0.02] pointer-events-none">
                            <i data-lucide="scroll" class="w-40 h-40"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                            <span class="w-2 h-8 bg-purple-500 rounded-full"></span>
                            Service Details
                        </h2>
                        <div class="prose prose-invert prose-purple max-w-none text-slate-400 leading-relaxed">
                            {!! $service->description !!}
                        </div>
                    </div>
                </div>

                <!-- Right: Stats & Guidelines -->
                <div class="lg:col-span-1">
                    <div class="sticky top-32 space-y-6">
                        <!-- Quick Stats -->
                        <div class="glass rounded-[32px] p-8 border border-white/5 bg-gradient-to-br from-white/[0.02] to-transparent">
                            <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                                <i data-lucide="info" class="w-5 h-5 text-purple-500"></i>
                                Booking Information
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/5">
                                    <div class="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center">
                                        <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-black uppercase text-slate-500 tracking-widest">Verified</p>
                                        <p class="text-sm font-bold text-white">100% Secure</p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/5">
                                    <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
                                        <i data-lucide="video" class="w-5 h-5 text-blue-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-black uppercase text-slate-500 tracking-widest">Ritual Mode</p>
                                        <p class="text-sm font-bold text-white">Live via Video Call</p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/5">
                                    <div class="w-10 h-10 rounded-xl bg-yellow-500/10 flex items-center justify-center">
                                        <i data-lucide="calendar" class="w-5 h-5 text-yellow-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-black uppercase text-slate-500 tracking-widest">Scheduling</p>
                                        <p class="text-sm font-bold text-white">Flexible Timing</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Mini -->
                        <div class="glass rounded-[32px] p-8 border border-white/5">
                            <h3 class="text-sm font-black uppercase text-slate-500 tracking-[0.2em] mb-4">How it works</h3>
                            <ul class="space-y-4">
                                <li class="flex gap-3 text-sm text-slate-400">
                                    <span class="text-purple-500 font-bold">01.</span>
                                    Choose your preferred expert below.
                                </li>
                                <li class="flex gap-3 text-sm text-slate-400">
                                    <span class="text-purple-500 font-bold">02.</span>
                                    Book a convenient slot.
                                </li>
                                <li class="flex gap-3 text-sm text-slate-400">
                                    <span class="text-purple-500 font-bold">03.</span>
                                    Receive ritual updates & raw video.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom: Experts Grid -->
            <div class="space-y-10">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
                    <div>
                        <h2 class="text-3xl font-black text-white tracking-tight mb-2">Select Your Expert</h2>
                        <p class="text-slate-500 text-sm">Choose from our panel of {{ count($astrologers) }} specialized experts for this ritual.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @forelse($astrologers as $offer)
                        <div class="glass rounded-[32px] p-6 border border-white/5 group hover:border-purple-500/30 transition-all duration-500 flex flex-col">
                            <div class="flex items-center gap-4 mb-6">
                                <a href="{{ $offer->user->slug ? route('astrologer.public_profile', $offer->user->slug) : '#' }}" class="w-16 h-16 rounded-2xl overflow-hidden border border-white/10 group-hover:border-purple-500/50 transition-colors relative block">
                                    @if($offer->user->astrologerDetail && $offer->user->astrologerDetail->profile_pic)
                                        <img src="{{ asset('storage/' . $offer->user->astrologerDetail->profile_pic) }}"
                                            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-8 h-8 text-slate-600"></i>
                                        </div>
                                    @endif
                                    <div class="absolute inset-0 bg-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                                </a>
                                <div class="flex-1 min-w-0">
                                    <a href="{{ $offer->user->slug ? route('astrologer.public_profile', $offer->user->slug) : '#' }}" class="block group/name">
                                        <h4 class="font-bold text-white group-hover/name:text-purple-400 transition-colors truncate">
                                            {{ $offer->user->name }}
                                        </h4>
                                    </a>
                                    <div class="flex items-center gap-1.5 mt-1">
                                        <div class="flex items-center gap-0.5" title="{{ number_format($offer->user->reviews_avg_rating ?: 0, 1) }} Rating">
                                            <i data-lucide="star" class="w-3 h-3 text-yellow-500 fill-yellow-500"></i>
                                            <span class="text-[10px] font-bold text-white">{{ number_format($offer->user->reviews_avg_rating ?: 0, 1) }}</span>
                                        </div>
                                        <span class="text-[10px] text-slate-500 font-bold uppercase tracking-tighter">
                                            {{ ($offer->user->chat_sessions_count ?: 0) + ($offer->user->astrologerDetail->extra_bookings ?? 0) }}+ Bookings
                                        </span>
                                    </div>
                                </div>
                            </div>

                            @if($offer->description)
                                <div class="relative mb-6">
                                    <i data-lucide="quote" class="w-4 h-4 text-purple-500/20 absolute -top-2 -left-2 rotate-180"></i>
                                    <p class="text-[11px] text-slate-400 line-clamp-3 italic leading-relaxed pl-4">
                                        {{ strip_tags($offer->description) }}
                                    </p>
                                </div>
                            @endif

                            <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between gap-4">
                                <div>
                                    <p class="text-[9px] font-black uppercase text-slate-500 tracking-widest mb-1">Ritual Fee</p>
                                    <div class="text-xl font-black text-white">₹{{ number_format($offer->price, 0) }}</div>
                                </div>
                                
                                <form action="{{ route('cart.add-pooja') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="astrologer_pooja_service_id" value="{{ $offer->id }}">
                                    @auth
                                        <button type="submit"
                                            class="px-6 py-3 rounded-xl bg-purple-500 hover:bg-purple-400 text-white text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-purple-500/20 group-hover:scale-105">
                                            Select
                                        </button>
                                    @else
                                        <a href="{{ route('login') }}"
                                            class="px-6 py-3 rounded-xl bg-purple-500 hover:bg-purple-400 text-white text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-purple-500/20 group-hover:scale-105 inline-block text-center">
                                            Select
                                        </a>
                                    @endauth
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-full text-center py-20 bg-white/[0.01] border-2 border-dashed border-white/5 rounded-[40px]">
                            <div class="w-20 h-20 bg-slate-900 rounded-full flex items-center justify-center mx-auto mb-6">
                                <i data-lucide="users" class="w-10 h-10 text-slate-700"></i>
                            </div>
                            <h4 class="text-xl font-bold text-slate-400 mb-2">No specialized experts found</h4>
                            <p class="text-slate-600 text-sm max-w-sm mx-auto italic">Currently, no experts have listed specific rates for this ritual. Please contact support for assistance.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection