{% extends "base.html" %}

{% block title %}{% if request.session.is_password_reset %}Password Reset Successfully{% else %}User Created Successfully{% endif %} - AsapLoads POS{% endblock %}

{% block header_title %}{% if request.session.is_password_reset %}Password Reset Successfully{% else %}User Created Successfully{% endif %}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">{% if request.session.is_password_reset %}Password Reset{% else %}User Account Created{% endif %}</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-success">
            <p class="mb-0"><i class="fas fa-check-circle me-2"></i> 
                {% if request.session.is_password_reset %}
                    Password has been reset successfully for {{ user_name }}!
                {% else %}
                    User account has been created successfully!
                {% endif %}
            </p>
        </div>
        
        <div class="user-credentials-box p-4 mb-4 border rounded bg-light">
            <div class="mb-3">
                <h6 class="fw-bold">Login Credentials</h6>
                <p class="text-muted small">Please securely share these credentials with the user.</p>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="fw-bold">Name:</label>
                        <div>{{ user_name }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="fw-bold">Role:</label>
                        <div>{{ user_role }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="fw-bold">Branch:</label>
                        <div>{{ user_branch }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="fw-bold">Email (Username):</label>
                        <div>{{ user_email }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="fw-bold">Temporary Password:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="{{ user_password }}" readonly id="passwordField">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyPassword()">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <small class="form-text text-muted">User should change this temporary password after first login.</small>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <button class="btn btn-outline-primary" onclick="printCredentials()">
                    <i class="fas fa-print me-2"></i> Print Credentials
                </button>
            </div>
        </div>
        
        <div class="user-instructions mb-4">
            <h6 class="fw-bold">Instructions for New User</h6>
            <ol>
                <li>Share the credentials above with the user securely (printed document, encrypted email, etc.)</li>
                <li>The user should log in at: <code>{{ request.scheme }}://{{ request.get_host }}/accounts/login/</code></li>
                <li>After first login, the user should change their temporary password from their profile page</li>
                <li>If the user forgets their password, an admin can reset it from the user management section</li>
            </ol>
        </div>
        
        <div class="d-flex justify-content-between">
            {% if request.session.is_password_reset %}
                <a href="{% url 'user_list' %}" class="btn btn-primary">
                    <i class="fas fa-list me-2"></i> Return to User List
                </a>
                <button onclick="window.history.back()" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i> Go Back
                </button>
            {% else %}
                <a href="{% url 'user_add' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i> Add Another User
                </a>
                <a href="{% url 'user_list' %}" class="btn btn-secondary">
                    <i class="fas fa-list me-2"></i> Return to User List
                </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copyPassword() {
    var passwordField = document.getElementById("passwordField");
    passwordField.select();
    document.execCommand("copy");
    alert("Password copied to clipboard!");
}

function printCredentials() {
    var printContents = document.querySelector('.user-credentials-box').innerHTML;
    var originalContents = document.body.innerHTML;
    
    document.body.innerHTML = `
        <div style="padding: 20px;">
            <h2 style="text-align: center; margin-bottom: 20px;">AsapLoads POS - User Credentials</h2>
            ${printContents}
        </div>
    `;
    
    window.print();
    document.body.innerHTML = originalContents;
    location.reload();
}
</script>
{% endblock %}