@extends('layouts.admin')

@section("header")
    Edit User: {{ $user->name }}
@endsection

@section("content")
<div class="container mx-auto px-4 py-4 sm:py-8">
    <div class="w-full max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 sm:p-6">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 sm:mb-6">Edit User: <span class="font-normal">{{ $user->name }}</span></h2>
        <form action="{{ route("admin.users.update", $user) }}" method="POST">
            @csrf
            @method("PUT")
            <!-- Name -->
            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" name="name" id="name" value="{{ old("name", $user->name) }}" required autofocus 
                       class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100">
                @error("name")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
            <!-- Email -->
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" id="email" value="{{ old("email", $user->email) }}" required
                       class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100">
                @error("email")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
            <!-- Password (Optional) -->
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Password (leave blank to keep current)</label>
                <input type="password" name="password" id="password"
                       class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100">
                @error("password")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
            <!-- Confirm Password (Optional) -->
            <div class="mb-4">
                <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm New Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation"
                       class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100">
            </div>
<!-- Role Assignment and Legacy Admin -->
            <!-- Role Assignment -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    User Roles
                </label>
                
                @php
                    $availableRoles = \App\Models\Role::orderBy('level', 'desc')->get();
                    $userRoleIds = $user->roles->pluck('id')->toArray();
                @endphp
                
                @if($availableRoles->count() > 0)
                    <div class="space-y-3">
                        @foreach($availableRoles as $role)
                            <label class="flex items-start">
                                <input type="checkbox" 
                                       name="roles[]" 
                                       value="{{ $role->id }}"
                                       {{ in_array($role->id, old('roles', $userRoleIds)) ? 'checked' : '' }}
                                       class="mt-1 rounded border-gray-300 dark:border-gray-600 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:bg-gray-700 dark:focus:ring-offset-gray-800">
                                <div class="ml-3">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $role->name }}</span>
                                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-200">
                                            Level {{ $role->level }}
                                        </span>
                                    </div>
                                    @if($role->description)
                                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $role->description }}</p>
                                    @endif
                                    @if($role->permissions->count() > 0)
                                        <div class="mt-2 flex flex-wrap gap-1">
                                            @foreach($role->permissions->take(5) as $permission)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                                    {{ $permission->name }}
                                                </span>
                                            @endforeach
                                            @if($role->permissions->count() > 5)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-200">
                                                    +{{ $role->permissions->count() - 5 }} more
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </label>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4 bg-gray-50 dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
                        <svg class="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                        </svg>
                        <p class="text-sm text-gray-500 dark:text-gray-400">No roles available</p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                            <a href="{{ route('admin.roles.create') }}" class="text-indigo-600 hover:text-indigo-500">Create roles</a> to assign to users
                        </p>
                    </div>
                @endif
                
                @error('roles')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <!-- Legacy Admin Flag (for backward compatibility) -->
            <div class="mb-6">
                <label for="is_admin" class="flex items-center">
                    <input type="checkbox" name="is_admin" id="is_admin" value="1" {{ old("is_admin", $user->is_admin) ? "checked" : "" }}
                           class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:bg-gray-700 dark:focus:ring-offset-gray-800">
                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Legacy Admin Flag</span>
                </label>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Keep for backward compatibility. Use roles above for new permission management.
                </p>
                @error("is_admin")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <!-- Flag Status -->
            <div class="mb-4">
                <label for="flag_status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Flag Status</label>
                <select name="flag_status" id="flag_status" 
                        class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100"
                        onchange="toggleFlagReason()">
                    <option value="none" {{ old("flag_status", $user->flag_status ?? 'none') === 'none' ? 'selected' : '' }}>None</option>
                    <option value="flagged" {{ old("flag_status", $user->flag_status) === 'flagged' ? 'selected' : '' }}>Flagged</option>
                    <option value="under_review" {{ old("flag_status", $user->flag_status) === 'under_review' ? 'selected' : '' }}>Under Review</option>
                    <option value="resolved" {{ old("flag_status", $user->flag_status) === 'resolved' ? 'selected' : '' }}>Resolved</option>
                </select>
                @error("flag_status")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <!-- Flag Reason -->
            <div class="mb-4" id="flag_reason_container" style="display: {{ old('flag_status', $user->flag_status) && in_array(old('flag_status', $user->flag_status), ['flagged', 'under_review']) ? 'block' : 'none' }};">
                <label for="flag_reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Flag Reason</label>
                <textarea name="flag_reason" id="flag_reason" rows="3" 
                          class="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100"
                          placeholder="Enter reason for flagging this user...">{{ old("flag_reason", $user->flag_reason) }}</textarea>
                @error("flag_reason")
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            @if($user->flagged_at)
            <!-- Flag Information -->
            <div class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
                <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-2">Flag Information</h4>
                <div class="text-sm text-yellow-700 dark:text-yellow-300">
                    <p><strong>Flagged on:</strong> {{ $user->flagged_at ? \Carbon\Carbon::parse($user->flagged_at)->format("M d, Y \a\t g:i A") : "N/A" }}</p>
                    @if($user->flaggedBy)
                        <p><strong>Flagged by:</strong> {{ $user->flaggedBy->name }}</p>
                    @endif
                    @if($user->flag_reason)
                        <p><strong>Current reason:</strong> {{ $user->flag_reason }}</p>
                    @endif
                </div>
            </div>
            @endif

            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end space-y-3 sm:space-y-0">
                <a href="{{ route("admin.users.index") }}" class="text-center sm:text-left text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white sm:mr-4 py-2 px-4 sm:py-0 sm:px-0">Cancel</a>
                <button type="submit" class="w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Update User
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

        <script>
        function toggleFlagReason() {
            const flagStatus = document.getElementById('flag_status').value;
            const flagReasonContainer = document.getElementById('flag_reason_container');
            const flagReasonField = document.getElementById('flag_reason');
            
            if (flagStatus === 'flagged' || flagStatus === 'under_review') {
                flagReasonContainer.style.display = 'block';
                flagReasonField.required = true;
            } else {
                flagReasonContainer.style.display = 'none';
                flagReasonField.required = false;
                flagReasonField.value = '';
            }
        }
        
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            toggleFlagReason();
        });
        </script>