@extends('layouts.app')

@section('title', 'Edit User')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Edit User</h1>
        <p class="text-gray-700 dark:text-gray-300">Update user account and permissions</p>
    </div>

    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
        <form action="{{ route('settings.users.update', $user) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <!-- Account Information -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">Account Information</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Name *</label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 focus:border-indigo-500"
                                   placeholder="John Doe">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Email *</label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 focus:border-indigo-500"
                                   placeholder="john@example.com">
                            @error('email')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">New Password (leave blank to keep current)</label>
                            <input type="password" name="password"
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 focus:border-indigo-500"
                                   placeholder="Minimum 8 characters">
                            @error('password')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Confirm New Password</label>
                            <input type="password" name="password_confirmation"
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 focus:border-indigo-500"
                                   placeholder="Re-enter new password">
                        </div>

                        <div>
                            <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Role *</label>
                            <select name="role" id="role-select" required
                                    class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 focus:border-indigo-500"
                                    onchange="toggleWarehouseSection()">
                                <option value="">Select Role</option>
                                <option value="admin" {{ old('role', $user->role) === 'admin' ? 'selected' : '' }}>Admin - Full access to all features including user management</option>
                                <option value="manager" {{ old('role', $user->role) === 'manager' ? 'selected' : '' }}>Manager - Can view reports and manage inventory</option>
                                <option value="cashier" {{ old('role', $user->role) === 'cashier' ? 'selected' : '' }}>Cashier - POS access for assigned locations only</option>
                                <option value="staff" {{ old('role', $user->role) === 'staff' ? 'selected' : '' }}>Staff - Basic access for order processing</option>
                            </select>
                            @error('role')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex items-center">
                            <input type="checkbox" name="is_active" id="is_active" value="1"
                                   {{ old('is_active', $user->is_active) ? 'checked' : '' }}
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded">
                            <label for="is_active" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                                Account is active
                            </label>
                        </div>
                    </div>
                </div>

                <!-- POS Location Assignment (for cashier role) -->
                @php
                    $assignedWarehouseIds = old('warehouse_ids', $user->assignedWarehouses->pluck('id')->toArray());
                @endphp
                <div id="warehouse-section" class="{{ in_array(old('role', $user->role), ['cashier', 'staff']) ? '' : 'hidden' }}">
                    <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">POS Location Assignment</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Select which POS locations this cashier can access. Admin and Manager can access all locations automatically.</p>
                    <div class="space-y-3 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                        @foreach(\App\Models\Warehouse::where('type', 'pos')->where('is_active', true)->orderBy('name')->get() as $warehouse)
                        <div class="flex items-center">
                            <input type="checkbox" name="warehouse_ids[]" id="warehouse_{{ $warehouse->id }}" value="{{ $warehouse->id }}"
                                   {{ in_array($warehouse->id, $assignedWarehouseIds) ? 'checked' : '' }}
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded">
                            <label for="warehouse_{{ $warehouse->id }}" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                <span class="font-medium">{{ $warehouse->name }}</span>
                                @if($warehouse->city)
                                <span class="text-gray-500 dark:text-gray-400">- {{ $warehouse->city }}</span>
                                @endif
                            </label>
                        </div>
                        @endforeach
                        @if(\App\Models\Warehouse::where('type', 'pos')->where('is_active', true)->count() === 0)
                        <p class="text-gray-500 dark:text-gray-400 text-sm">No active POS locations found.</p>
                        @endif
                    </div>
                    @error('warehouse_ids')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('settings.users.index') }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-md hover:shadow-lg transition-all font-medium focus:ring-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Update User
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleWarehouseSection() {
    const role = document.getElementById('role-select').value;
    const warehouseSection = document.getElementById('warehouse-section');
    if (role === 'cashier' || role === 'staff') {
        warehouseSection.classList.remove('hidden');
    } else {
        warehouseSection.classList.add('hidden');
    }
}
</script>
@endsection