@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Add New User</h4>
        <div class="text-secondary small mt-1">
            Create a new GUI user account and assign a role.
        </div>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <a href="{{ route('users.index') }}" class="btn btn-outline-secondary btn-sm">
            <i data-lucide="arrow-left" class="me-1" style="width:14px;height:14px;"></i> Back to Users
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('users.store') }}">
            @csrf

            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label">Name</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control" required autofocus>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control" required>
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" required minlength="8">
                    <div class="form-text">Minimum 8 characters.</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" required minlength="8">
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label">Extension</label>
                    <select name="extension" class="form-select">
                        <option value="">— None —</option>
                        @foreach($extensions as $ext)
                            <option value="{{ $ext->number }}" {{ old('extension') == $ext->number ? 'selected' : '' }}>
                                {{ $ext->number }}{{ $ext->name ? ' — '.$ext->name : '' }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Link this user to a PBX extension for data scoping.</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Role</label>
                    <select name="role_id" id="roleSelect" class="form-select">
                        <option value="">— No Role (Super Admin) —</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}" data-scope="{{ $role->data_scope }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                {{ $role->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Determines what sections this user can access.</div>
                </div>
                <div class="col-md-4" id="departmentSection" style="{{ old('role_id') && $roles->firstWhere('id', old('role_id'))?->data_scope === 'department' ? '' : 'display:none;' }}">
                    <label class="form-label">Departments</label>
                    <select name="departments[]" multiple class="form-select" size="4">
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('departments') && in_array($dept->id, old('departments')) ? 'selected' : '' }}>
                                {{ $dept->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Hold Ctrl/Cmd to select multiple. Required for department-scoped roles.</div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <i data-lucide="save" class="me-1" style="width:14px;height:14px;"></i> Create User
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.getElementById('roleSelect');
    const deptSection = document.getElementById('departmentSection');

    roleSelect.addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const scope = selected.getAttribute('data-scope');
        deptSection.style.display = (scope === 'department') ? '' : 'none';
    });
});
</script>
@endsection