@extends('layouts.app')
@section('title', 'Add User')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li class="breadcrumb-item active">Add User</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Add User</h1>
        <p class="page-subtitle">Create a new user account for this company</p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

<form method="POST" action="{{ route('admin.users.store') }}" id="userForm">
@csrf
<div class="row g-4">
    <div class="col-12 col-xl-7">
        <div class="card">
            <div class="card-header"><i class="bi bi-person me-2 text-primary"></i>User Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Full Name <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" placeholder="e.g. John Smith" autofocus required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Username <span class="required">*</span></label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                               value="{{ old('username') }}" placeholder="e.g. jsmith" required
                               pattern="[a-z0-9_]+" title="Lowercase letters, numbers and underscores only">
                        <div class="form-text">Used to log in. Lowercase, numbers, underscores only.</div>
                        @error('username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email') }}" placeholder="user@company.com">
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Password <span class="required">*</span></label>
                        <div class="input-group">
                            <input type="password" name="password" id="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="Min 8 characters" required>
                            <button type="button" class="btn btn-outline-secondary" id="togglePw" tabindex="-1">
                                <i class="bi bi-eye" id="pwEye"></i>
                            </button>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Confirm Password <span class="required">*</span></label>
                        <input type="password" name="password_confirmation" class="form-control"
                               placeholder="Repeat password" required>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-shield me-2 text-primary"></i>Access &amp; Permissions</div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_admin" value="1"
                               id="isAdmin" {{ old('is_admin') ? 'checked':'' }}>
                        <label class="form-check-label" for="isAdmin">
                            <strong>Administrator</strong>
                            <div class="text-muted" style="font-size:12px">Full access to all modules — ignores role restrictions</div>
                        </label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="force_password_change" value="1"
                               id="forcePw" {{ old('force_password_change', '1') ? 'checked':'' }}>
                        <label class="form-check-label" for="forcePw">
                            <strong>Force password change on first login</strong>
                        </label>
                    </div>
                </div>
                <hr>
                <label class="form-label">Assign Roles</label>
                <div class="form-text mb-2">Select one or more roles to grant specific permissions.</div>
                @forelse($roles as $role)
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="roles[]"
                           value="{{ $role->id }}" id="role-{{ $role->id }}"
                           {{ in_array($role->id, old('roles', [])) ? 'checked':'' }}>
                    <label class="form-check-label" for="role-{{ $role->id }}" style="font-size:13.5px">
                        {{ $role->display_name ?? $role->name }}
                        @if($role->description)
                            <small class="text-muted d-block" style="font-size:11.5px">{{ $role->description }}</small>
                        @endif
                    </label>
                </div>
                @empty
                <div class="alert alert-info py-2 mb-0" style="font-size:13px">
                    <i class="bi bi-info-circle me-1"></i>
                    No roles created yet.
                    <a href="{{ route('admin.roles.create') }}">Create a role</a> first.
                </div>
                @endforelse
            </div>
        </div>

        <div class="d-flex gap-3 justify-content-end">
            <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                <i class="bi bi-person-plus me-1"></i>Create User
            </button>
        </div>
    </div>
</div>
</form>
@endsection

@push('scripts')
<script>
document.getElementById('togglePw').addEventListener('click', function() {
    const pw  = document.getElementById('password');
    const eye = document.getElementById('pwEye');
    pw.type = pw.type === 'password' ? 'text' : 'password';
    eye.classList.toggle('bi-eye');
    eye.classList.toggle('bi-eye-slash');
});
document.getElementById('userForm').addEventListener('submit', function() {
    const btn = document.getElementById('saveBtn');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating...';
    btn.disabled = true;
});
// Auto lowercase username
document.querySelector('[name="username"]').addEventListener('input', function() {
    this.value = this.value.toLowerCase().replace(/[^a-z0-9_]/g, '');
});
</script>
@endpush