@extends('admin.layouts.app')

@section('title', 'User Details - ' . $user->name)

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.users.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">{{ $user->name }}</h1>
                <p class="text-xs text-slate-500 mt-1">Detailed user profile and account information.</p>
            </div>
            <div class="flex gap-3">
                <form action="{{ route('admin.users.toggle-status', $user->id) }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <button type="submit"
                        class="px-4 py-2 {{ $user->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">
                        {{ $user->is_active ? 'Deactivate Account' : 'Activate Account' }}
                    </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($user->avatar)
                        <img src="{{ $user->avatar }}" 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">{{ $user->name }}</h2>
                <p class="text-xs text-indigo-400 font-medium mb-4">Registered User</p>

                <div class="grid grid-cols-2 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 {{ $user->is_active ? 'text-green-400' : 'text-red-400' }}">
                            {{ $user->is_active ? 'Active' : 'Inactive' }}
                        </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">{{ $user->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 Activity</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">{{ $user->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">{{ $user->last_login_at ? $user->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" 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">Full
                            Name</label>
                        <p class="text-xs text-white">{{ $user->name }}</p>
                    </div>
                    <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">{{ $user->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">{{ $user->mobile ?? 'Not provided' }}</p>
                    </div>
                    @if($user->detail)
                        <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">
                                {{ $user->detail->dob ? \Carbon\Carbon::parse($user->detail->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">{{ $user->detail->gender ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label
                                class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Location</label>
                            <p class="text-xs text-white">
                                {{ $user->detail->city ? $user->detail->city . ', ' : '' }}
                                {{ $user->detail->state ? $user->detail->state->name . ', ' : '' }}
                                {{ $user->detail->country ? $user->detail->country->name : 'N/A' }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            @if($user->detail)
                <!-- Additional Details -->
                <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="info" class="w-4 h-4 text-indigo-400"></i>
                        <h3 class="text-sm font-semibold text-white">Additional Details</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">Marital
                                Status</label>
                            <p class="text-xs text-white capitalize">{{ $user->detail->marital_status ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <label
                                class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Occupation</label>
                            <p class="text-xs text-white">{{ $user->detail->occupation ?? 'N/A' }}</p>
                        </div>
                        @if($user->detail->marital_status === 'married')
                            <div>
                                <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Spouse
                                    Name</label>
                                <p class="text-xs text-white">{{ $user->detail->spouse_name ?? 'N/A' }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection