@push('title')
    Edit User
@endpush

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<x-app-layout>
    @can('update_user_management')
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="card-title mb-0">Edit User</h5>
                </div>

                <form action="{{ route('users.update', $user->id) }}" method="POST" id="userForm">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <!-- Personal Information -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Full Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" id="name"
                                    value="{{ old('name', $user->name ?? '') }}" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address <span
                                        class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control" id="email"
                                    value="{{ old('email', $user->email ?? '') }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                                <select name="role" class="form-select" id="role" required>
                                    <option value="">Select A Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->name }}"
                                            @if ($user->roles->contains('name', $role->name)) selected @endif>
                                            {{ ucfirst($role->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Update User
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Password Section -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="card-title mb-0">Password Management</h6>
                <small class="text-muted">Leave blank to keep current password</small>
            </div>
            <div class="card-body">
                <form action="{{ route('users.resetpassword', $user->id) }}" method="POST" id="userForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">New Password</label>
                                <input type="password" name="password" class="form-control" id="password">
                                <small class="form-text text-muted">Minimum 8 characters</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password_confirmation" class="form-label">Confirm New Password</label>
                                <input type="password" name="password_confirmation" class="form-control"
                                    id="password_confirmation">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class='bx bx-key'></i> Reset Password
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endcan

    <script>
        // Auto-hide alerts after 5 seconds
        $("#success-alert, #info-alert, #warning-alert, #danger-alert, #validation-alert").fadeTo(5000, 500).slideUp(500,
            function() {
                $(this).slideUp(500);
            });

        // Auto-generate username from name
        $('input[name="name"]').on('input', function() {
            if (!$('input[name="username"]').val()) {
                let username = $(this).val()
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9\s]/g, '') // Remove special characters
                    .replace(/\s+/g, '_'); // Replace spaces with underscores
                $('input[name="username"]').val(username);
            }
        });

        // Password confirmation validation
        $('input[name="password_confirmation"]').on('input', function() {
            let password = $('input[name="password"]').val();
            let confirmPassword = $(this).val();

            if (password !== confirmPassword && confirmPassword.length > 0) {
                $(this).addClass('is-invalid');
                if (!$(this).next('.invalid-feedback').length) {
                    $(this).after('<div class="invalid-feedback">Passwords do not match</div>');
                }
            } else {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });

        // Role-based permission filtering (if needed)
        $('#role').on('change', function() {
            let selectedRole = $(this).val();
            // You can add logic here to show/hide certain permissions based on role
            // This is optional and depends on your business logic
        });
    </script>
</x-app-layout>