{% extends "layout.html" %}

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

{% block content %}
<div class="row mt-4">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Product Management</h1>
            <a href="{{ url_for('admin.add_product') }}" 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 style="width: 15%">Product ID</th>
                    <th style="width: 25%">Name</th>
                    <th style="width: 10%">Price</th>
                    <th style="width: 20%">Image</th>
                    <th style="width: 30%">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for product_id, product_data in products.items() %}
                <tr>
                    <td>{{ product_id }}</td>
                    <td>
                        {% for field in product_data %}
                            {% if field.fieldName == '_name' %}
                                {{ field.value }}
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% for field in product_data %}
                            {% if field.fieldName == '_price' %}
                                {{ field.value }}
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% for field in product_data %}
                            {% if field.fieldName == '_image' %}
                                <div class="product-image-container">
                                    <img src="{{ field.value }}" alt="Product image" class="product-image">
                                </div>
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="{{ url_for('admin.edit_product', product_id=product_id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                            <a href="{{ url_for('admin.generate_barcode_page', 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', 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 %}