@extends('layouts.admin')

@section('title', 'Edit User')
@section('page-title', 'Edit User: ' . $user->name)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm">
            <div class="p-6 border-b">
                <h2 class="text-lg font-semibold">User Information</h2>
            </div>
            
            <form action="{{ route('admin.users.update', $user) }}" method="POST" class="p-6 space-y-6">
                @csrf
                @method('PUT')

                <!-- Basic Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Username *</label>
                        <input type="text" name="username" value="{{ old('username', $user->username) }}" required
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 @error('username') border-red-500 @enderror">
                        @error('username')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror">
                        @error('email')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                        <input type="password" name="password"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror"
                            placeholder="Leave blank to keep current">
                        @error('password')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Profile Information -->
                <div class="border-t pt-6">
                    <h3 class="text-md font-medium mb-4">Profile Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Birthdate</label>
                            <input type="date" name="birthdate" value="{{ old('birthdate', $user->birthdate?->format('Y-m-d')) }}"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
                            <select name="gender" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                <option value="">Select...</option>
                                <option value="male" {{ old('gender', $user->gender) == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender', $user->gender) == 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('gender', $user->gender) == 'other' ? 'selected' : '' }}>Other</option>
                                <option value="prefer_not_to_say" {{ old('gender', $user->gender) == 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                            <input type="text" name="phone" value="{{ old('phone', $user->phone) }}"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
                            <input type="text" name="location" value="{{ old('location', $user->location) }}"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                                placeholder="City, Country">
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                        <textarea name="bio" rows="3" 
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                            placeholder="User bio...">{{ old('bio', $user->bio) }}</textarea>
                    </div>
                </div>

                <!-- Roles -->
                <div class="border-t pt-6">
                    <h3 class="text-md font-medium mb-4">Roles *</h3>
                    
                    <div class="flex flex-wrap gap-3">
                        @foreach($roles as $role)
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="roles[]" value="{{ $role->name }}"
                                    {{ in_array($role->name, old('roles', $user->roles->pluck('name')->toArray())) ? 'checked' : '' }}
                                    class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500">
                                <span class="ml-2 text-gray-700">{{ ucfirst($role->name) }}</span>
                            </label>
                        @endforeach
                    </div>
                    @error('roles')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Status & Verification -->
                <div class="border-t pt-6">
                    <h3 class="text-md font-medium mb-4">Status & Verification</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Account Status *</label>
                            <select name="status" required
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                <option value="active" {{ old('status', $user->status) == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="suspended" {{ old('status', $user->status) == 'suspended' ? 'selected' : '' }}>Suspended</option>
                                <option value="deactivated" {{ old('status', $user->status) == 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            </select>
                        </div>

                        <div class="flex items-center">
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="email_verified" value="1"
                                    {{ $user->email_verified_at ? 'checked' : '' }}
                                    class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500">
                                <span class="ml-2 text-gray-700">Email Verified</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Social Login Info (Read-only) -->
                @if($user->provider)
                <div class="border-t pt-6 bg-blue-50 p-4 rounded-lg">
                    <h3 class="text-md font-medium mb-2"><i class="fas fa-link mr-2"></i>Social Login</h3>
                    <p class="text-sm text-gray-600">
                        <strong>Provider:</strong> {{ ucfirst($user->provider) }}<br>
                        <strong>Provider ID:</strong> {{ $user->provider_id }}
                    </p>
                </div>
                @endif

                <!-- Submit Buttons -->
                <div class="border-t pt-6 flex gap-4">
                    <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>Save Changes
                    </button>
                    <a href="{{ route('admin.users.index') }}" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Sidebar Actions -->
    <div class="space-y-6">
        <!-- Quick Actions -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
            
            <div class="space-y-3">
                <form action="{{ route('admin.users.toggle-status', $user) }}" method="POST">
                    @csrf
                    <button type="submit" 
                        class="w-full py-2 px-4 rounded-lg {{ $user->status == 'active' ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200' : 'bg-green-100 text-green-700 hover:bg-green-200' }}">
                        @if($user->status == 'active')
                            <i class="fas fa-ban mr-2"></i>Suspend User
                        @else
                            <i class="fas fa-check mr-2"></i>Activate User
                        @endif
                    </button>
                </form>

                <form action="{{ route('admin.users.impersonate', $user) }}" method="POST" onsubmit="return confirm('Login as this user? You will be logged out of admin.');">
                    @csrf
                    <button type="submit" class="w-full py-2 px-4 rounded-lg bg-purple-100 text-purple-700 hover:bg-purple-200">
                        <i class="fas fa-user-secret mr-2"></i>Login as User
                    </button>
                </form>

                @if($user->id !== auth()->id())
                <form action="{{ route('admin.users.destroy', $user) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full py-2 px-4 rounded-lg bg-red-100 text-red-700 hover:bg-red-200">
                        <i class="fas fa-trash mr-2"></i>Delete User
                    </button>
                </form>
                @endif
            </div>
        </div>

        <!-- Reset Password -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-semibold mb-4">Reset Password</h3>
            
            <form action="{{ route('admin.users.reset-password', $user) }}" method="POST" class="space-y-3">
                @csrf
                
                <div>
                    <input type="password" name="password" required placeholder="New password"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                
                <div>
                    <input type="password" name="password_confirmation" required placeholder="Confirm password"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2"
003e
                </div>
                
                <button type="submit" class="w-full bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-900">
                    Reset Password
                </button>
            </form>
        </div>

        <!-- User Stats -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-semibold mb-4">User Stats</h3>
            
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Member Since:</span>
                    <span>{{ $user->created_at->format('M d, Y') }}</span>
                </div>
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Last Login:</span>
                    <span>{{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Never' }}</span>
                </div>
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Orders:</span>
                    <span>{{ $user->orders->count() }}</span>
                </div>
                
                <div class="flex justify-between">
                    <span class="text-gray-600">Reviews:</span>
                    <span>{{ $user->reviews->count() }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
