@extends('admin.layouts.app')

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

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.astrologers.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 mb-2 text-xs transition-colors">
            <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
            Back to List
        </a>
        <div class="flex justify-between items-end">
            <div>
                <h1 class="text-xl font-bold text-white tracking-tight">{{ $astrologer->name }}</h1>
                <p class="text-xs text-slate-500 mt-1">Detailed profile and registration info.</p>
            </div>
            <div class="flex gap-3">
                <form action="{{ route('admin.astrologers.toggle-status', $astrologer->id) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <button type="submit"
                        class="px-4 py-2 {{ $astrologer->is_active ? 'bg-red-500/10 text-red-500 hover:bg-red-500/20' : 'bg-green-500/10 text-green-500 hover:bg-green-500/20' }} rounded-lg text-xs font-semibold transition-all">
                        {{ $astrologer->is_active ? 'Deactivate Account' : 'Activate Account' }}
                    </button>
                </form>
                <form action="{{ route('admin.astrologers.reset-password', $astrologer->id) }}" method="POST"
                    onsubmit="return confirm('Reset password and force change?')">
                    @csrf
                    <button type="submit"
                        class="px-4 py-2 bg-indigo-600 text-white hover:bg-indigo-700 rounded-lg text-xs font-semibold transition-all shadow-sm">
                        Reset & Force PW Change
                    </button>
                </form>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div
            class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-2.5 rounded-lg mb-6 text-xs font-medium flex items-center gap-2">
            <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Profile Sidebar -->
        <div class="space-y-6">
            <div class="bg-[#101828] border border-white/5 rounded-xl p-6 text-center">
                <div class="w-24 h-24 rounded-2xl bg-slate-800 mx-auto mb-4 border border-white/10 overflow-hidden">
                    @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->profile_pic)
                        <img src="{{ asset('storage/' . $astrologer->astrologerDetail->profile_pic) }}"
                            class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-slate-600">
                            <i data-lucide="user" class="w-10 h-10"></i>
                        </div>
                    @endif
                </div>
                <h2 class="text-lg font-bold text-white">{{ $astrologer->name }}</h2>
                <p class="text-xs text-indigo-400 font-medium mb-4">Elite Astrologer</p>

                <div class="grid grid-cols-3 gap-2 pt-4 border-t border-white/5">
                    <div class="text-center">
                        <p class="text-[10px] uppercase font-bold text-slate-500 tracking-wider">Status</p>
                        <span
                            class="text-xs font-semibold {{ $astrologer->is_active ? 'text-green-400' : 'text-red-400' }}">
                            {{ $astrologer->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                    <div class="text-center">
                        <p class="text-[10px] uppercase font-bold text-slate-500 tracking-wider">Enrollment</p>
                        <span
                            class="text-xs font-semibold {{ ($astrologer->astrologerDetail && $astrologer->astrologerDetail->is_enrollment_paid) ? 'text-emerald-400' : 'text-amber-400' }}">
                            {{ ($astrologer->astrologerDetail && $astrologer->astrologerDetail->is_enrollment_paid) ? 'Paid' : 'Unpaid' }}
                        </span>
                    </div>
                    <div class="text-center">
                        <p class="text-[10px] uppercase font-bold text-slate-500 tracking-wider">Joined</p>
                        <p class="text-xs font-semibold text-white">{{ $astrologer->created_at->format('M Y') }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-[#101828] border border-white/5 rounded-xl p-6">
                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Account Stats</h3>
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-slate-500">Total Logins</span>
                        <span class="text-xs font-bold text-white">{{ $astrologer->login_count ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-slate-500">Last Login</span>
                        <span
                            class="text-xs font-bold text-white">{{ $astrologer->last_login_at ? $astrologer->last_login_at->diffForHumans() : 'Never' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Personal Info -->
            <div class="bg-[#101828] border border-white/5 rounded-xl p-6">
                <div class="flex items-center gap-2 mb-6 pb-2 border-b border-white/5">
                    <i data-lucide="user-info" class="w-4 h-4 text-indigo-400"></i>
                    <h3 class="text-sm font-semibold text-white">Personal Information</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                    <div>
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Email
                            Address</label>
                        <p class="text-xs text-white">{{ $astrologer->email }}</p>
                    </div>
                    <div>
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Mobile
                            Number</label>
                        <p class="text-xs text-white">{{ $astrologer->astrologerDetail->mobile ?? 'Not provided' }}</p>
                    </div>
                    <div>
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Date of
                            Birth</label>
                        <p class="text-xs text-white">
                            {{ $astrologer->astrologerDetail && $astrologer->astrologerDetail->dob ? \Carbon\Carbon::parse($astrologer->astrologerDetail->dob)->format('d M, Y') : 'N/A' }}
                        </p>
                    </div>
                    <div>
                        <label
                            class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Gender</label>
                        <p class="text-xs text-white capitalize">{{ $astrologer->astrologerDetail->gender ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            <!-- Experience & Expertise -->
            <div class="bg-[#101828] border border-white/5 rounded-xl p-6">
                <div class="flex items-center gap-2 mb-6 pb-2 border-b border-white/5">
                    <i data-lucide="award" class="w-4 h-4 text-indigo-400"></i>
                    <h3 class="text-sm font-semibold text-white">Expertise & Skills</h3>
                </div>
                <div class="space-y-6">
                    <div>
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Languages
                            Spoken</label>
                        <div class="flex flex-wrap gap-2">
                            @forelse($astrologer->languages as $lang)
                                <span
                                    class="px-2 py-1 bg-white/5 border border-white/5 rounded text-[10px] font-medium text-slate-300">{{ $lang->name }}</span>
                            @empty
                                <span class="text-xs text-slate-600 italic">No languages selected</span>
                            @endforelse
                        </div>
                    </div>
                    <div>
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Primary
                            Skills</label>
                        <div class="flex flex-wrap gap-2">
                            @forelse($astrologer->skills as $skill)
                                <span
                                    class="px-2 py-1 bg-indigo-500/10 border border-indigo-500/10 rounded text-[10px] font-medium text-indigo-400">{{ $skill->name }}</span>
                            @empty
                                <span class="text-xs text-slate-600 italic">No skills selected</span>
                            @endforelse
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label
                                class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Experience</label>
                            <p class="text-xs text-white font-medium">
                                {{ $astrologer->astrologerDetail->experience_years ?? '0' }} Years
                            </p>
                        </div>
                        <div>
                            <label
                                class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Contribution
                                Hours</label>
                            <p class="text-xs text-white font-medium">
                                {{ $astrologer->astrologerDetail->contribution_hours ?? 'N/A' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bio / About -->
            <div class="bg-[#101828] border border-white/5 rounded-xl p-6">
                <div class="flex items-center gap-2 mb-4 pb-2 border-b border-white/5">
                    <i data-lucide="align-left" class="w-4 h-4 text-indigo-400"></i>
                    <h3 class="text-sm font-semibold text-white">Bio / Introduction</h3>
                </div>
                <p class="text-xs text-slate-400 leading-relaxed">
                    {{ $astrologer->astrologerDetail->bio ?? 'No bio provided.' }}
                </p>
            </div>
        </div>
    </div>
@endsection