@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-user-edit me-2"></i>Edit User Account</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('users.update', $user) }}" method="POST" id="userEditForm">
                        @csrf
                        @method('PUT')

                        <div id="timeout">
                            @if($errors->any())
                                <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach
                                </div>
                            @endif
                            @if(session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Full Name:</strong> <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name', $user->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Email Address:</strong> <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                       id="email" name="email" value="{{ old('email', $user->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <label class="form-label"><strong>User Role:</strong> <span class="text-danger">*</span></label>
                                <select class="form-control @error('role') is-invalid @enderror" id="role" name="role" required>
                                    <option value="">Select Role</option>
                                    <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Administrator</option>
                                    <option value="loan_officer" {{ old('role', $user->role) == 'loan_officer' ? 'selected' : '' }}>Loan Officer</option>
                                    <option value="auditor" {{ old('role', $user->role) == 'auditor' ? 'selected' : '' }}>Auditor</option>
                                    <option value="user" {{ old('role', $user->role) == 'user' ? 'selected' : '' }}>User</option>
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Change Password (Optional):</strong></label>
                                <div class="card border-light mb-3">
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label">New Password</label>
                                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                                   id="password" name="password" minlength="8" placeholder="Enter new password (leave blank to keep current)">
                                            <div class="form-text">Minimum 8 characters</div>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Confirm New Password</label>
                                            <input type="password" class="form-control"
                                                   id="password_confirmation" name="password_confirmation" placeholder="Confirm new password">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <label class="form-label"><strong>User Information:</strong></label>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">User ID</label>
                                        <input type="text" class="form-control" value="{{ $user->id }}" readonly>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Account Created</label>
                                        <input type="text" class="form-control" value="{{ $user->created_at->format('Y-m-d') }}" readonly>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Last Updated</label>
                                        <input type="text" class="form-control" value="{{ $user->updated_at->format('Y-m-d') }}" readonly>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email Status</label>
                                        <input type="text" class="form-control" value="{{ $user->email_verified_at ? 'Verified' : 'Not Verified' }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-success me-2">
                                <i class="fas fa-save me-1"></i> UPDATE USER
                            </button>
                            @if(Auth::user()->hasPermission('users.delete') && $user->id !== Auth::id())
                            <button type="button" class="btn btn-danger deleteBtn"
                                    data-id="{{ $user->id }}"
                                    data-name="{{ $user->name }}">
                                <i class="fas fa-trash me-1"></i> DELETE
                            </button>
                            @endif
                            <a href="{{ route('users.index') }}" class="btn btn-outline-secondary ms-2">
                                <i class="fas fa-times me-1"></i> CANCEL
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete user <strong id="userNameDisplay"></strong>?</p>
                <p class="text-danger"><small>This action cannot be undone and will permanently remove the user account.</small></p>
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" action="" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password confirmation validation
    const password = document.getElementById('password');
    const passwordConfirmation = document.getElementById('password_confirmation');

    function validatePasswordConfirmation() {
        if (password.value && passwordConfirmation.value && password.value !== passwordConfirmation.value) {
            passwordConfirmation.classList.add('is-invalid');
            passwordConfirmation.classList.remove('is-valid');
            document.querySelector('#password_confirmation + .invalid-feedback').textContent = 'Passwords do not match.';
        } else if (passwordConfirmation.value.length > 0) {
            passwordConfirmation.classList.remove('is-invalid');
            passwordConfirmation.classList.add('is-valid');
        }
    }

    if (password && passwordConfirmation) {
        passwordConfirmation.addEventListener('input', validatePasswordConfirmation);
        password.addEventListener('input', validatePasswordConfirmation);
    }

    // Form submission confirmation
    const form = document.getElementById('userEditForm');
    form.addEventListener('submit', function(e) {
        if (!confirm('Are you sure you want to update this user account?')) {
            e.preventDefault();
        }
    });

    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        const alerts = document.querySelectorAll('#timeout .alert');
        alerts.forEach(alert => {
            const fadeEffect = setInterval(() => {
                if (!alert.style.opacity) {
                    alert.style.opacity = 1;
                }
                if (alert.style.opacity > 0) {
                    alert.style.opacity -= 0.1;
                } else {
                    clearInterval(fadeEffect);
                    alert.style.display = 'none';
                }
            }, 50);
        });
    }, 5000);

    // Delete modal functionality
    const deleteButtons = document.querySelectorAll('.deleteBtn');
    const deleteForm = document.getElementById('deleteForm');
    const userNameDisplay = document.getElementById('userNameDisplay');
    const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));

    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.getAttribute('data-id');
            const userName = this.getAttribute('data-name');
            const actionUrl = "{{ route('users.destroy', ':id') }}".replace(':id', userId);

            userNameDisplay.textContent = userName;
            deleteForm.action = actionUrl;
            modal.show();
        });
    });

    // Close modal when cancel button is clicked
    document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
        modal.hide();
    });
});
</script>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.form-control {
    border-radius: 4px;
}
.form-control:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
.invalid-feedback {
    display: block;
}
.alert {
    border-radius: 4px;
    border: none;
}
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}
.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}
.btn-success {
    padding: 0.5rem 2rem;
}
.btn-danger {
    padding: 0.5rem 2rem;
}
.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}
.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}
.border-light {
    border-color: #dee2e6 !important;
}
.form-text {
    color: #6c757d;
    font-size: 0.875rem;
}
</style>
@endsection