{% extends "admin/base.html" %}

{% block title %}User Details - {{ user.username }} - Admin Panel{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user me-2 text-primary"></i>
        User Details: {{ user.username }}
    </h2>
    <a href="{{ url_for('admin.users') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Users
    </a>
</div>

<!-- User Information Card -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-info-circle me-2 text-primary"></i>
            User Information
        </h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label fw-bold">User ID:</label>
                    <span class="badge bg-secondary">#{{ user.id }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Username:</label>
                    <span class="text-muted">{{ user.username }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Email:</label>
                    <span class="text-muted">{{ user.email }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Company:</label>
                    <span class="text-muted">{{ user.company if user.company else 'Not specified' }}</span>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label fw-bold">Status:</label>
                    <span class="badge bg-{{ 'success' if user.is_active else 'danger' }}">
                        <i class="fas fa-{{ 'check-circle' if user.is_active else 'times-circle' }} me-1"></i>
                        {{ 'Active' if user.is_active else 'Inactive' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Role:</label>
                    <span class="badge bg-{{ 'primary' if user.is_admin else 'secondary' }}">
                        <i class="fas fa-{{ 'crown' if user.is_admin else 'user' }} me-1"></i>
                        {{ 'Admin' if user.is_admin else 'User' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Last Login:</label>
                    <span class="text-muted">
                        {{ user.last_login.strftime('%B %d, %Y at %H:%M') if user.last_login else 'Never' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Account Created:</label>
                    <span class="text-muted">{{ user.created_at.strftime('%B %d, %Y at %H:%M') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Actions Card -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-cogs me-2 text-primary"></i>
            User Actions
        </h5>
    </div>
    <div class="card-body">
        <div class="btn-group" role="group">
            <button type="button" 
                    class="btn btn-{{ 'warning' if user.is_active else 'success' }} toggle-user-btn"
                    data-user-id="{{ user.id }}"
                    data-is-active="{{ user.is_active|tojson }}"
                    title="{{ 'Deactivate' if user.is_active else 'Activate' }} User">
                <i class="fas fa-{{ 'ban' if user.is_active else 'check' }} me-2"></i>
                {{ 'Deactivate' if user.is_active else 'Activate' }} User
            </button>
            {% if user.id != current_user.id %}
            <button type="button" 
                    class="btn btn-outline-danger delete-user-btn"
                    data-user-id="{{ user.id }}"
                    title="Delete User">
                <i class="fas fa-trash me-2"></i>Delete User
            </button>
            {% endif %}
        </div>
    </div>
</div>

<!-- Quotations History Card -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-file-invoice me-2 text-primary"></i>
            Quotation History ({{ quotations|length }} total)
        </h5>
    </div>
    <div class="card-body p-0">
        {% if quotations %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="border-0">ID</th>
                        <th class="border-0">Project Name</th>
                        <th class="border-0">Mold Type</th>
                        <th class="border-0">Country</th>
                        <th class="border-0">Total Cost</th>
                        <th class="border-0">Created</th>
                        <th class="border-0 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for quotation in quotations %}
                    <tr>
                        <td>
                            <span class="badge bg-info">#{{ quotation.id }}</span>
                        </td>
                        <td>
                            <span class="fw-medium">{{ quotation.project_name or 'Unnamed Project' }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ quotation.mold_main_type or 'Not specified' }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ quotation.mold_shop_country or 'Not specified' }}</span>
                        </td>
                        <td>
                            <span class="fw-bold text-success">
                                ${{ "{:,.2f}".format(quotation.total_cost) if quotation.total_cost else 'N/A' }}
                            </span>
                        </td>
                        <td>
                            <small class="text-muted">
                                {{ quotation.created_at.strftime('%m/%d/%Y %H:%M') }}
                            </small>
                        </td>
                        <td class="text-center">
                            <a href="{{ url_for('admin.quotation_detail', id=quotation.id) }}" 
                               class="btn btn-outline-info btn-sm" 
                               title="View Quotation Details">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-file-invoice fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No quotations found</h5>
            <p class="text-muted">This user hasn't created any quotations yet.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle user status
    document.querySelectorAll('.toggle-user-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const isActive = this.dataset.isActive === 'true';
            const action = isActive ? 'deactivate' : 'activate';
            
            if (!confirm(`Are you sure you want to ${action} this user?`)) {
                return;
            }
            
            fetch(`/admin/user/${userId}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating user status');
            });
        });
    });
    
    // Delete user
    document.querySelectorAll('.delete-user-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            
            if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
                return;
            }
            
            fetch('/admin/delete_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ user_id: parseInt(userId) })
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    alert('User deleted successfully');
                    window.location.href = '/admin/users';
                } else {
                    alert('Error: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while deleting the user');
            });
        });
    });
});
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.card-title {
    font-size: 1.1rem;
}

.btn-group .btn {
    margin-right: 0.5rem;
}

.table th {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
}
</style>
{% endblock %}