@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">Edit User: {{ $user->name }}</h4>
        <div class="text-secondary small mt-1">
            Update user details, role, and department assignments.
        </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.update', $user->id) }}">
            @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', $user->name) }}" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" value="{{ old('email', $user->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" minlength="8">
                    <div class="form-text">Leave blank to keep current password.</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" minlength="8">
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label">Extension</label>
                    @php $extNumbers = $extensions->pluck('number')->all(); @endphp
                    <select name="extension" class="form-select">
                        <option value="">— None —</option>
                        @if($user->extension && !in_array((string) $user->extension, $extNumbers, true))
                            <option value="{{ $user->extension }}" {{ old('extension', $user->extension) == $user->extension ? 'selected' : '' }}>{{ $user->extension }} — (current)</option>
                        @endif
                        @foreach($extensions as $ext)
                            <option value="{{ $ext->number }}" {{ old('extension', $user->extension) == $ext->number ? 'selected' : '' }}>
                                {{ $ext->number }}{{ $ext->name ? ' — '.$ext->name : '' }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Links 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', $user->role_id) == $role->id ? 'selected' : '' }}>
                                {{ $role->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Determines what sections this user can access.</div>
                </div>
                @php
                    $currentRole = $roles->firstWhere('id', old('role_id', $user->role_id));
                    $showDepts = $currentRole && $currentRole->data_scope === 'department';
                @endphp
                <div class="col-md-4" id="departmentSection" style="{{ $showDepts ? '' : '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 }}" {{ in_array($dept->id, old('departments', $userDepartmentIds)) ? 'selected' : '' }}>
                                {{ $dept->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">Hold Ctrl/Cmd to select multiple.</div>
                </div>
            </div>

            @if($user->role)
            <div class="mb-3">
                <label class="form-label text-muted small">Role Permissions</label>
                <div class="d-flex flex-wrap gap-1">
                    @foreach($user->role->permissions ?? [] as $perm)
                        <span class="badge bg-light text-dark border">{{ $perm }}</span>
                    @endforeach
                </div>
            </div>
            @endif

            <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> Save Changes
                </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