{% extends "layout.html" %}

{% block title %}Admin Dashboard - {{ tenant.name }} - KCAP Demo Server{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-12">
        <div class="alert alert-info">
            <strong>Current Tenant:</strong> {{ tenant.name }} (ID: {{ tenant.id }})
            <div class="mt-2">
                <a href="{{ url_for('admin.manage_credentials', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage Credentials</a>
                <a href="{{ url_for('admin.manage_ar_fields', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage AR Fields</a>
                <a href="{{ url_for('admin.view_all_barcodes', tenant_id=tenant.id) }}" class="btn btn-sm btn-success">
                    <i class="bi bi-upc-scan"></i> View All Barcodes
                </a>
                <a href="/" class="btn btn-sm btn-outline-secondary">Switch Tenant</a>
            </div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Product Management</h1>
            <a href="{{ url_for('admin.add_product', tenant_id=tenant.id) }}" class="btn btn-primary">Add New Product</a>
        </div>

        {% if products %}
        <table class="table table-striped table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th>Product ID</th>
                    {% for custom_field in custom_fields %}
                        {% if custom_field.fieldName != '_id' %}
                            <th>{{ custom_field.label }}</th>
                        {% endif %}
                    {% endfor %}
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for product_id, product_data in products.items() %}
                <tr>
                    <td>{{ product_id }}</td>
                    {% for custom_field in custom_fields %}
                        {% if custom_field.fieldName != '_id' %}
                            <td>
                                {% for field in product_data %}
                                    {% if field.fieldName == custom_field.fieldName %}
                                        {% if custom_field.fieldType == 'IMAGE_URI' %}
                                            {% if field.value %}
                                                <div class="product-image-container">
                                                    <img src="/{{ tenant.id }}{{ field.value }}" alt="{{ custom_field.label }}" class="product-image">
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            {{ field.value }}
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            </td>
                        {% endif %}
                    {% endfor %}
                    <td>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="{{ url_for('admin.edit_product', tenant_id=tenant.id, product_id=product_id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                            <a href="{{ url_for('admin.generate_barcode_page', tenant_id=tenant.id, product_id=product_id) }}" class="btn btn-sm btn-outline-success">Barcodes</a>
                            <button type="button" class="btn btn-sm btn-outline-danger"
                                    data-bs-toggle="modal" data-bs-target="#deleteModal"
                                    data-product-id="{{ product_id }}"
                                    data-product-name="{% for field in product_data %}{% if field.fieldName == '_name' %}{{ field.value }}{% endif %}{% endfor %}">
                                Delete
                            </button>
                        </div>
                        <form id="delete-form-{{ product_id }}" action="{{ url_for('admin.delete_product', tenant_id=tenant.id, product_id=product_id) }}" method="POST" style="display: none;">
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="alert alert-info">
            No products available. Click "Add New Product" to get started.
        </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the product <strong id="delete-product-name"></strong>?</p>
                <p class="text-danger"><i class="bi bi-exclamation-triangle-fill"></i> This action cannot be undone.</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="confirm-delete-btn">Delete Product</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Delete confirmation modal functionality
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.addEventListener('show.bs.modal', function (event) {
            // Button that triggered the modal
            const button = event.relatedTarget;
            
            // Extract product info from data attributes
            const productId = button.getAttribute('data-product-id');
            const productName = button.getAttribute('data-product-name');
            
            // Update modal content
            const modalProductName = document.getElementById('delete-product-name');
            modalProductName.textContent = productName + " (ID: " + productId + ")";
            
            // Setup the confirm button action
            const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
            confirmDeleteBtn.onclick = function() {
                document.getElementById('delete-form-' + productId).submit();
            };
        });
    }
</script>
{% endblock %}