@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">{{ __('Edit User') }}: {{ $user->full_name }}</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a href="{{ route('admin.manage.users.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> {{ __('Back to Users') }}
                    </a>
                </div>
            </div>

            <!-- User Edit Form -->
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('User Information') }}</h6>
                </div>
                <div class="card-body">
                    <form id="userEditForm" method="POST" action="{{ route('admin.manage.users.update', array_merge(['user' => $user->id], ['locale' => app()->getLocale()])) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Tabbed Interface -->
                        <ul class="nav nav-tabs" id="userEditTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button" role="tab" aria-controls="personal" aria-selected="true">
                                    <i class="fas fa-user"></i> {{ __('Personal Info') }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab" aria-controls="account" aria-selected="false">
                                    <i class="fas fa-cog"></i> {{ __('Account Settings') }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false">
                                    <i class="fas fa-shield-alt"></i> {{ __('Security') }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="permissions-tab" data-bs-toggle="tab" data-bs-target="#permissions" type="button" role="tab" aria-controls="permissions" aria-selected="false">
                                    <i class="fas fa-key"></i> {{ __('Permissions') }}
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content mt-4" id="userEditTabContent">
                            <!-- Personal Info Tab -->
                            <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="first_name" class="form-label">{{ __('First Name') }}</label>
                                            <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name', $user->first_name) }}" required>
                                            @error('first_name')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="last_name" class="form-label">{{ __('Last Name') }}</label>
                                            <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('last_name', $user->last_name) }}" required>
                                            @error('last_name')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="full_name" class="form-label">{{ __('Full Name') }}</label>
                                    <input type="text" class="form-control" id="full_name" name="full_name" value="{{ old('full_name', $user->full_name) }}" required>
                                    @error('full_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">{{ __('Email Address') }}</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user->email) }}" required>
                                    @error('email')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">{{ __('Phone Number') }}</label>
                                    <input type="tel" class="form-control" id="phone" name="phone" value="{{ old('phone', $user->phone) }}">
                                    @error('phone')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="avatar" class="form-label">{{ __('Profile Picture') }}</label>
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            @if($user->avatar)
                                                <img src="{{ asset($user->avatar) }}" alt="Current Avatar" class="rounded-circle" width="80" height="80" id="currentAvatar">
                                            @else
                                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;" id="currentAvatar">
                                                    <i class="fas fa-user text-white fa-2x"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
                                            <small class="text-muted">{{ __('Supported formats: JPG, PNG, GIF. Max size: 2MB') }}</small>
                                            @error('avatar')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Account Settings Tab -->
                            <div class="tab-pane fade" id="account" role="tabpanel" aria-labelledby="account-tab">
                                <div class="mb-3">
                                    <label for="username" class="form-label">{{ __('Username') }}</label>
                                    <input type="text" class="form-control" id="username" name="username" value="{{ old('username', $user->username) }}" required>
                                    @error('username')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="language" class="form-label">{{ __('Preferred Language') }}</label>
                                    <select class="form-select" id="language" name="language">
                                        <option value="en" {{ old('language', $user->language) == 'en' ? 'selected' : '' }}>{{ __('English') }}</option>
                                        <option value="ar" {{ old('language', $user->language) == 'ar' ? 'selected' : '' }}>{{ __('Arabic') }}</option>
                                    </select>
                                    @error('language')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="timezone" class="form-label">{{ __('Timezone') }}</label>
                                    <select class="form-select" id="timezone" name="timezone">
                                        <option value="UTC" {{ old('timezone', $user->timezone) == 'UTC' ? 'selected' : '' }}>UTC</option>
                                        <option value="Asia/Riyadh" {{ old('timezone', $user->timezone) == 'Asia/Riyadh' ? 'selected' : '' }}>Asia/Riyadh (UTC+3)</option>
                                        <option value="Europe/London" {{ old('timezone', $user->timezone) == 'Europe/London' ? 'selected' : '' }}>Europe/London (UTC+0)</option>
                                        <option value="America/New_York" {{ old('timezone', $user->timezone) == 'America/New_York' ? 'selected' : '' }}>America/New_York (UTC-5)</option>
                                    </select>
                                    @error('timezone')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $user->is_active) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">
                                            {{ __('Account Active') }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Security Tab -->
                            <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i> {{ __('Leave password fields empty if you don\'t want to change the current password.') }}
                                </div>
                                <div class="mb-3">
                                    <label for="current_password" class="form-label">{{ __('Current Password') }}</label>
                                    <input type="password" class="form-control" id="current_password" name="current_password">
                                    <small class="text-muted">{{ __('Required to change password') }}</small>
                                    @error('current_password')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="password" class="form-label">{{ __('New Password') }}</label>
                                    <input type="password" class="form-control" id="password" name="password">
                                    <div class="password-strength mt-2" id="passwordStrength">
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar" id="passwordStrengthBar" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <small class="text-muted" id="passwordStrengthText">{{ __('Password strength') }}</small>
                                    </div>
                                    @error('password')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">{{ __('Confirm New Password') }}</label>
                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation">
                                    @error('password_confirmation')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="two_factor_enabled" name="two_factor_enabled" value="1" {{ old('two_factor_enabled', $user->two_factor_enabled) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="two_factor_enabled">
                                            {{ __('Enable Two-Factor Authentication') }}
                                        </label>
                                    </div>
                                    <small class="text-muted">{{ __('Two-factor authentication adds an extra layer of security to your account.') }}</small>
                                </div>
                            </div>

                            <!-- Permissions Tab -->
                            <div class="tab-pane fade" id="permissions" role="tabpanel" aria-labelledby="permissions-tab">
                                <div class="mb-3">
                                    <label for="role_id" class="form-label">{{ __('User Role') }}</label>
                                    <select class="form-select" id="role_id" name="role_id" required>
                                        <option value="">{{ __('Select a role...') }}</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}" {{ old('role_id', $user->role_id) == $role->id ? 'selected' : '' }}>
                                                {{ $role->name }} - {{ $role->description }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('role_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div id="rolePermissions" class="mb-3">
                                    <!-- Role permissions will be loaded here via AJAX -->
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{{ route('admin.manage.users.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> {{ __('Cancel') }}
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-save"></i> {{ __('Update User') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Password strength checker
    $('#password').on('input', function() {
        checkPasswordStrength($(this).val());
    });

    // Role change handler
    $('#role_id').on('change', function() {
        loadRolePermissions($(this).val());
    });

    // Load initial role permissions
    loadRolePermissions($('#role_id').val());

    // Real-time validation for username and email
    $('#username').on('blur', function() {
        validateField('username', $(this).val());
    });

    $('#email').on('blur', function() {
        validateField('email', $(this).val());
    });

    // Avatar preview
    $('#avatar').on('change', function() {
        previewAvatar(this);
    });

    // Form submission
    $('#userEditForm').on('submit', function(e) {
        $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> {{ __("Updating...") }}');
    });
});

function checkPasswordStrength(password) {
    let strength = 0;
    let feedback = [];

    if (password.length >= 8) strength += 25;
    else feedback.push('{{ __("At least 8 characters") }}');

    if (/[a-z]/.test(password)) strength += 25;
    else feedback.push('{{ __("Lowercase letter") }}');

    if (/[A-Z]/.test(password)) strength += 25;
    else feedback.push('{{ __("Uppercase letter") }}');

    if (/[0-9]/.test(password)) strength += 25;
    else feedback.push('{{ __("Number") }}');

    $('#passwordStrengthBar').css('width', strength + '%');

    let strengthClass = 'bg-danger';
    let strengthText = '{{ __("Weak") }}';

    if (strength >= 75) {
        strengthClass = 'bg-success';
        strengthText = '{{ __("Strong") }}';
    } else if (strength >= 50) {
        strengthClass = 'bg-warning';
        strengthText = '{{ __("Medium") }}';
    }

    $('#passwordStrengthBar').removeClass('bg-danger bg-warning bg-success').addClass(strengthClass);
    $('#passwordStrengthText').text(strengthText + (feedback.length > 0 ? ' - ' + feedback.join(', ') : ''));
}

function loadRolePermissions(roleId) {
    if (!roleId) {
        $('#rolePermissions').html('<div class="alert alert-info">{{ __("Select a role to view permissions") }}</div>');
        return;
    }

    $.ajax({
        url: `{{ url(app()->getLocale()) }}/admin/manage/users/get-role-permissions/${roleId}`,
        method: 'GET',
        success: function(response) {
            if (response.success) {
                let permissionsHtml = '<h6>{{ __("Role Permissions") }}</h6><div class="row">';
                response.permissions.forEach(function(permission) {
                    permissionsHtml += `
                        <div class="col-md-4 mb-2">
                            <div class="badge bg-primary">${permission}</div>
                        </div>
                    `;
                });
                permissionsHtml += '</div>';
                $('#rolePermissions').html(permissionsHtml);
            }
        },
        error: function() {
            $('#rolePermissions').html('<div class="alert alert-danger">{{ __("Failed to load role permissions") }}</div>');
        }
    });
}

function validateField(field, value) {
    if (!value) return;

    $.ajax({
        url: `{{ url(app()->getLocale()) }}/admin/manage/users/validate-field`,
        method: 'POST',
        data: {
            field: field,
            value: value,
            user_id: {{ $user->id }},
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            const input = $('#' + field);
            input.removeClass('is-valid is-invalid');

            if (response.valid) {
                input.addClass('is-valid');
            } else {
                input.addClass('is-invalid');
                if (input.next('.invalid-feedback').length === 0) {
                    input.after(`<div class="invalid-feedback">${response.message}</div>`);
                } else {
                    input.next('.invalid-feedback').text(response.message);
                }
            }
        }
    });
}

function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            $('#currentAvatar').html(`<img src="${e.target.result}" alt="Preview" class="rounded-circle" width="80" height="80">`);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush