@extends('layouts.app')

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

@section('content')
<h2><i class="bi bi-person-plus"></i> Add User</h2>

<div class="card mt-4">
    <div class="card-body">
        <form method="POST" action="{{ route('users.store') }}">
            @csrf
            <div class="mb-3">
                <label class="form-label">Name</label>
                <input type="text" name="name" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Password</label>
                <input type="password" name="password" class="form-control" required minlength="6">
            </div>
            <div class="mb-3">
                <label class="form-label">Role</label>
                <select name="role" class="form-select" required>
                    <option value="">Select Role</option>
                    @foreach($roles as $role)
                    <option value="{{ $role->slug }}" {{ old('role') == $role->slug ? 'selected' : '' }}>
                        {{ $role->name }} - {{ count($role->permissionKeys()) }} permissions{{ $role->isSystem() ? ' (System)' : '' }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Phone (optional, for SMS verification)</label>
                <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="e.g. 615xxxxxx">
            </div>
            <button type="submit" class="btn btn-yellow">Create User</button>
            <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>
@endsection