{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        {% include 'extension/alsendo/admin/view/template/partials/info_modal.twig' %}
        <div class="container-fluid">
            <div class="float-end">
                <button type="button" id="button-bulk-cancel-shipments" data-bs-toggle="tooltip" title="{{ text_button_bulk_cancel_shipments }}" class="btn btn-danger">
                    <i class="fa-solid fa-times-circle"></i>
                </button>
            </div>
            <h1>{{ heading_title }}</h1>
            <ol class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
            </ol>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="card">
                <div class="card-header"><i class="fa-solid fa-list"></i> {{ alsendo_shipment_list_text }}</div>
                <div id="order" class="card-body">{{ list }}</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        function getOrderIds() {
            return $('.bulk-shipment-checkbox:checked').map(function() {
                return $(this).data('order-id');
            }).get();
        }

        $('#button-bulk-cancel-shipments').on('click', function () {
            const btn = $(this);
            const ids = getOrderIds();

            if (!ids || !ids.length) {
                showInfoModal('{{ text_no_shipments_selected|e('js') }}');
                return;
            }

            btn.prop('disabled', true);
            $.post(
                'index.php?route=extension/alsendo/alsendo_order.bulkCancel&user_token={{ user_token|e('js') }}',
                { ids: ids },
                function (response) {
                    let msg = response.message;

                    if (!msg || msg === '') {
                        if (typeof response.error === 'string' && response.error) {
                            msg = response.error;
                        } else if (response.errors) {
                            if (Array.isArray(response.errors)) {
                                msg = response.errors.filter(e => typeof e === 'string').join(', ');
                            } else if (typeof response.errors === 'object') {
                                msg = Object.values(response.errors).filter(e => typeof e === 'string').join(', ');
                            }
                        }
                    }

                    if (msg) {
                        showInfoModal(msg);
                    }


                    setTimeout(() => btn.prop('disabled', false), 500);
                },
                'json'
            );
        });

        $('.cancel-submitted-order-button').on('click', function () {
            const btn = $(this);
            const orderId = btn.data('order-id');
            btn.prop('disabled', true);

            $.post(
                'index.php?route=extension/alsendo/alsendo_order.cancel&user_token={{ user_token|e('js') }}',
                { alsendo_order_id: orderId },
                function(response) {
                    if (response.success === true) {
                        location.reload();
                    }
                    if (response.success === false) {
                        const e = response;
                        let errorMsg = Array.isArray(e.errors)
                            ? e.errors.join(', ')
                            : (e.errors ? Object.values(e.errors).join(', ') : (e.error || e.message || ''));

                        if (!errorMsg) errorMsg = 'Unknown error';

                        console.log(errorMsg);
                        location.reload();
                    }

                    setTimeout(() => btn.prop('disabled', false), 500);
                },
                'json'
            );
        });
    });
</script>
{{ footer }}
