{#
    Check-In Modal

    Confirms customer check-in for remote buys.

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

{% block modal_title %}
<i class="fa fa-sign-in text-success"></i>
Check In - {{ item.firstName }} {{ item.lastName }}
{% endblock %}

{% block modal_body %}
<div class="text-center py-4">
    <div class="mb-4">
        <i class="fa fa-user-check fa-3x text-success"></i>
    </div>
    <h5>Confirm Customer Check-In</h5>
    <p class="text-muted">
        <strong>{{ item.firstName }} {{ item.lastName }}</strong> has arrived and is ready to be processed.
    </p>

    <div class="card bg-light mt-4">
        <div class="card-body">
            <div class="row text-start">
                <div class="col-6">
                    <small class="text-muted">Containers</small>
                    <p class="mb-0 fw-bold">{{ item.numContainers }}</p>
                </div>
                <div class="col-6">
                    <small class="text-muted">Phone</small>
                    <p class="mb-0 fw-bold">{{ item.phone|default('N/A') }}</p>
                </div>
            </div>
        </div>
    </div>
</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-success btn-lg" id="checkInBtn" data-buy-id="{{ item.buyID }}">
    <i class="fa fa-check"></i> Confirm Check-In
</button>
{% endblock %}

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

    var typeNum = '{{ typeNum }}';

    document.getElementById('checkInBtn').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> Checking In...';

        $.ajax({
            url: '/api/socket.php',
            type: 'POST',
            data: {
                buyID: buyId,
                action: 'checkIn',
                store: typeNum
            },
            success: function(response) {
                console.log('[QueueModal] checkIn success:', response);
                closeModal();
            },
            error: function(xhr, status, error) {
                console.error('[QueueModal] checkIn error:', error);
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-check"></i> Try Again';
                showToast('Check-in failed. 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 %}