{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Admin Management</h2>
    
    <!-- User Management Section -->
    <div class="card mb-4">
        <div class="card-header">
            <h3 class="mb-0">User Management</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Company</th>
                            <th>Registration Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>{{ user.id }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.company }}</td>
                            <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                            <td>
                                {% if user.is_admin %}
                                <span class="badge bg-primary">Admin</span>
                                {% else %}
                                <span class="badge bg-success">User</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if not user.is_admin %}
                                <button class="btn btn-danger btn-sm" 
                                        onclick="deleteUser({{ user.id }})"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#deleteModal">
                                    Delete
                                </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quotation Management Section -->
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Quotation Management</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>User</th>
                            <th>Model</th>
                            <th>Tooling ID</th>
                            <th>Total Cost</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for quotation in quotations %}
                        <tr>
                            <td>{{ quotation.id }}</td>
                            <td>{{ quotation.user.username }}</td>
                            <td>{{ quotation.model_name }}</td>
                            <td>{{ quotation.tooling_id }}</td>
                            <td>${{ "%.2f"|format(quotation.total_cost) }}</td>
                            <td>{{ quotation.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                            <td>
                                <button class="btn btn-danger btn-sm" 
                                        onclick="deleteQuotation({{ quotation.id }})"
                                        data-bs-toggle="modal" 
                                        data-bs-target="#deleteModal">
                                    Delete
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this item?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
let itemToDelete = null;
let deleteType = null;

function deleteUser(userId) {
    itemToDelete = userId;
    deleteType = 'user';
}

function deleteQuotation(quoteId) {
    itemToDelete = quoteId;
    deleteType = 'quotation';
}

document.getElementById('confirmDelete').addEventListener('click', function() {
    if (!itemToDelete || !deleteType) return;

    const url = deleteType === 'user' ? '/admin/delete_user' : '/admin/delete_quotation';
    
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ id: itemToDelete })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            location.reload();
        } else {
            alert('Error deleting item');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error deleting item');
    })
    .finally(() => {
        const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
        modal.hide();
    });
});
</script>
{% endblock %}