@extends('layouts.app')

@section('title', 'Add New 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">Add New User</h1>
        <p class="text-gray-700 dark:text-gray-300">Create a new user account for the production system</p>
    </div>

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

            <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') }}" 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') }}" 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">Password *</label>
                            <input type="password" name="password" 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="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 Password *</label>
                            <input type="password" name="password_confirmation" 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="Re-enter 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') === 'admin' ? 'selected' : '' }}>Admin - Full access to all features including user management</option>
                                <option value="manager" {{ old('role') === 'manager' ? 'selected' : '' }}>Manager - Can view reports and manage inventory</option>
                                <option value="cashier" {{ old('role') === 'cashier' ? 'selected' : '' }}>Cashier - POS access for assigned locations only</option>
                                <option value="staff" {{ old('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', true) ? '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) -->
                <div id="warehouse-section" class="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, old('warehouse_ids', [])) ? '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>
                    Create 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');
    }
}
// Run on page load to handle old values
document.addEventListener('DOMContentLoaded', toggleWarehouseSection);
</script>
@endsection