{#
    Customer Info Modal

    Shows detailed customer information and provides actions like
    reprinting receipt and adjusting containers.

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

{% block modal_title %}
<div class="d-flex align-items-center gap-2">
    <i class="fa fa-user fa-lg"></i>
    <span>{{ item.firstName }} {{ item.lastName }}</span>
</div>
{% endblock %}

{% block modal_body %}
{# Customer Details #}
<div class="customer-info-details mb-4">
    <div class="customer-info-row">
        <div class="customer-info-label">
            <i class="fa fa-user-circle text-muted me-2"></i>Customer Name
        </div>
        <div class="customer-info-value fw-semibold">{{ item.firstName }} {{ item.lastName }}</div>
    </div>
    <div class="customer-info-row">
        <div class="customer-info-label">
            <i class="fa fa-phone text-muted me-2"></i>Phone
        </div>
        <div class="customer-info-value">
            {% if item.phone %}
                <span class="fw-semibold">{{ item.phone }}</span>
            {% else %}
                <span class="text-muted fst-italic">Not provided</span>
            {% endif %}
        </div>
    </div>
    <div class="customer-info-row">
        <div class="customer-info-label">
            <i class="fa fa-star text-muted me-2"></i>New Customer
        </div>
        <div class="customer-info-value">
            {% if item.isNewCustomer == 1 %}
            <span class="badge rounded-pill bg-success px-3 py-2"><i class="fa fa-check me-1"></i> Yes</span>
            {% else %}
            <span class="badge rounded-pill bg-secondary px-3 py-2"><i class="fa fa-times me-1"></i> No</span>
            {% endif %}
        </div>
    </div>
    <div class="customer-info-row">
        <div class="customer-info-label">
            <i class="fa fa-mobile-alt text-muted me-2"></i>Remote Check-in
        </div>
        <div class="customer-info-value">
            {% if item.remote == 1 %}
            <span class="badge rounded-pill bg-info text-white px-3 py-2"><i class="fa fa-wifi me-1"></i> Yes</span>
            {% else %}
            <span class="badge rounded-pill bg-secondary px-3 py-2"><i class="fa fa-times me-1"></i> No</span>
            {% endif %}
        </div>
    </div>
</div>

{# Reprint Receipt Button #}
<div class="d-grid mb-4">
    <button type="button" class="btn btn-success btn-lg" id="reprintBtn" data-buy-id="{{ item.buyID }}">
        <i class="fa fa-print me-2"></i>Reprint Receipt
    </button>
</div>

{# Container Adjustment Section #}
<div class="customer-info-container-card">
    <div class="customer-info-container-header">
        <i class="fa fa-boxes-stacked me-2"></i>Container Adjustment
    </div>
    <div class="customer-info-container-body">
        <div class="row align-items-center g-3">
            <div class="col-sm-6 text-center">
                <div class="text-muted small text-uppercase fw-semibold mb-1">Original</div>
                <div class="customer-info-container-count">{{ item.numContainers }}</div>
            </div>
            <div class="col-sm-6 text-center">
                <label for="adjustContainers" class="text-muted small text-uppercase fw-semibold mb-1 d-block">New Count</label>
                <input type="number"
                       class="form-control form-control-lg text-center mx-auto"
                       id="adjustContainers"
                       value="{{ item.numContainers }}"
                       min="1"
                       max="20"
                       style="max-width: 100px;">
            </div>
        </div>
        <div class="d-grid mt-3">
            <button type="button" class="btn btn-outline-success" id="adjustContainersBtn" data-buy-id="{{ item.buyID }}">
                <i class="fa fa-print me-2"></i>Reprint Container Labels
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block modal_footer %}
<div></div>
<button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
    <i class="fa fa-times me-1"></i> Close
</button>
{% endblock %}

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

    var typeNum = '{{ typeNum }}';

    // Reprint Receipt
    document.getElementById('reprintBtn').addEventListener('click', function() {
        var btn = this;
        var buyId = btn.dataset.buyId;

        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i>Printing...';

        $.ajax({
            url: '/api/socket.php',
            type: 'POST',
            data: {
                buyID: buyId,
                action: 'reprint',
                store: typeNum
            },
            success: function(response) {
                console.log('[QueueModal] reprint success:', response);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-check me-2"></i>Sent to Printer';
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-success');
                setTimeout(function() {
                    btn.innerHTML = '<i class="fa fa-print me-2"></i>Reprint Receipt';
                    btn.classList.remove('btn-outline-success');
                    btn.classList.add('btn-success');
                }, 2500);
            },
            error: function(xhr, status, error) {
                console.error('[QueueModal] reprint error:', error);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-print me-2"></i>Reprint Receipt';
                showToast('Print failed. Please try again.', 'error');
            }
        });
    });

    // Adjust Containers
    document.getElementById('adjustContainersBtn').addEventListener('click', function() {
        var btn = this;
        var buyId = btn.dataset.buyId;
        var containers = document.getElementById('adjustContainers').value;

        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i>Printing Labels...';

        $.ajax({
            url: '/api/socket.php',
            type: 'POST',
            data: {
                buyID: buyId,
                action: 'adjustContainers',
                containers: containers,
                store: typeNum
            },
            success: function(response) {
                console.log('[QueueModal] adjustContainers success:', response);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-check me-2"></i>Labels Printed';
                setTimeout(function() {
                    btn.innerHTML = '<i class="fa fa-print me-2"></i>Reprint Container Labels';
                }, 2500);
            },
            error: function(xhr, status, error) {
                console.error('[QueueModal] adjustContainers error:', error);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-print me-2"></i>Reprint Container Labels';
                showToast('Print failed. Please try again.', 'error');
            }
        });
    });

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