@extends('layouts.dashboard')

@section('page_title', 'Expert Consultations')

@section('dashboard_content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2">
        <div class="glass-panel rounded-3xl overflow-hidden">
            <div class="px-8 py-8 border-b border-white/5 flex items-center justify-between">
                <h3 class="font-bold text-white text-lg">Scheduled Sessions</h3>
                <div class="text-xs text-white/40 italic">Managed by your case officer</div>
            </div>
            
            <div class="divide-y divide-white/5">
                @forelse($consultations ?? [] as $consult)
                    <div class="px-8 py-6 group hover:bg-white/[0.02] transition-colors flex items-center justify-between">
                        <div class="flex items-center gap-6">
                            <div class="w-16 h-16 rounded-2xl bg-white/5 flex flex-col items-center justify-center border border-white/10 group-hover:border-emerald/30 group-hover:bg-emerald/5 transition-all">
                                <span class="text-xs font-black text-white/40 uppercase">{{ $consult->slot->date->format('M') }}</span>
                                <span class="text-2xl font-black text-white">{{ $consult->slot->date->format('d') }}</span>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-white">Compliance Strategy Session</div>
                                <div class="text-sm text-white/40">{{ $consult->slot->start_time->format('H:i') }} - {{ $consult->slot->end_time->format('H:i') }} (GMT+5)</div>
                                <div class="mt-2 flex items-center gap-2">
                                    <span class="w-2 h-2 rounded-full bg-emerald shadow-[0_0_10px_rgba(16,185,129,0.5)]"></span>
                                    <span class="text-[10px] uppercase font-black tracking-widest text-emerald">Active Link</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="#" class="px-6 py-3 bg-white/5 border border-white/10 text-white font-black text-[10px] uppercase tracking-widest rounded-xl hover:bg-white hover:text-navy transition-all">
                                Join Room
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="px-8 py-20 text-center text-white/20 italic">No scheduled consultations yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Booking CTA -->
    <div class="space-y-6">
        <div class="glass-panel rounded-3xl p-8 bg-gradient-to-br from-emerald/20 to-transparent border-emerald/20">
            <h3 class="text-2xl font-black text-white mb-4">Book Next Briefing</h3>
            <p class="text-white/60 text-sm leading-relaxed mb-8">
                Need a progress update or specific tax advice? Book a high-priority session with our senior consultants.
            </p>
            <a href="{{ route('consultation') }}" class="flex items-center justify-center gap-2 w-full py-4 bg-emerald text-white font-black text-xs uppercase tracking-[0.2em] rounded-xl shadow-glow hover:scale-[1.02] transition-all">
                Check Availability
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>
    </div>
</div>
@endsection