{#
    Delete Buy Modal

    Confirmation dialog for deleting a buy from the queue.

    Variables:
    - item: Queue item with firstName, lastName, buyID
    - typeNum: Store type number
#}
{% extends 'queue/modals/_base.html' %}

{% block modal_title %}
<i class="fa fa-exclamation-triangle text-danger"></i>
Delete Buy - {{ item.firstName }} {{ item.lastName }}
{% endblock %}

{% block modal_body %}
<div class="text-center py-4">
    <div class="mb-4">
        <i class="fa fa-trash fa-3x text-danger"></i>
    </div>
    <h5>Are you sure you want to delete this buy?</h5>
    <p class="text-muted mb-0">
        Customer: <strong>{{ item.firstName }} {{ item.lastName }}</strong>
    </p>
    <p class="text-muted small mt-2">
        This action cannot be undone.
    </p>
</div>
{% endblock %}

{% block modal_footer %}
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
    <i class="fa fa-times"></i> Cancel
</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn" data-buy-id="{{ item.buyID }}">
    <i class="fa fa-trash"></i> Delete Buy
</button>
{% endblock %}

{% block modal_scripts %}
<script type="text/javascript">
(function() {
    'use strict';

    var typeNum = '{{ typeNum }}';

    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        var btn = this;
        var buyId = btn.dataset.buyId;

        // Show loading state
        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Deleting...';

        // Submit delete action
        $.ajax({
            url: '/api/socket.php',
            type: 'POST',
            data: {
                buyID: buyId,
                action: 'deleteBuy',
                store: typeNum
            },
            success: function(response) {
                console.log('[QueueModal] deleteBuy success:', response);
                closeModal();
            },
            error: function(xhr, status, error) {
                console.error('[QueueModal] deleteBuy error:', error);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-trash"></i> Try Again';
                showToast('Failed to delete buy. Please try again.', 'error');
            }
        });
    });

    function closeModal() {
        var modalEl = document.getElementById('myModal');
        var modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) {
            modal.hide();
        }
    }

    function showToast(message, type) {
        if (typeof toastr !== 'undefined') {
            toastr[type || 'info'](message);
        }
    }
})();
</script>
{% endblock %}