<script>
const userPermissions = `<%- JSON.stringify(userInfo.permissions) %>`;
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.orderShippingTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/shipping-settings' %>`,
            type: 'GET',
            dataType: 'json',
            data: function(d) {
                const statusFilter = $('#statusFilter').val();
                d.status = statusFilter;
            }
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'products.productSnapshot.title.content',
                render: function(data) {
                    if (!data) return `<%= trans.global.not_available %>`;
                    const words = data.split(' ');
                    return words.length > 30 ? words.slice(0, 10).join(' ') + '...' : data;
                }
            },
            {
                data: 'buyer',
                render: function(data) {
                    if (data) {
                        return `${data.first_name || ''} ${data.last_name || ''} <br> (${data.email || ''})`;
                    }
                    return `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'seller',
                render: function(data) {
                    if (data) {
                        return `${data.first_name || ''} ${data.last_name || ''} <br> (${data.email || ''})`;
                    }
                    return `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    const statusMap = {
                        pending: ['bg-warning', 'Pending'],
                        processing: ['bg-info', 'Processing'],
                        shipped: ['bg-primary', 'Shipped'],
                        out_for_delivery: ['bg-secondary', 'Out for Delivery'],
                        delivered: ['bg-success', 'Delivered'],
                        cancelled: ['bg-danger', 'Cancelled'],
                        returned: ['bg-dark', 'Returned'],
                        not_received: ['bg-danger', 'Not Received']
                    };

                    const [badgeClass, label] = statusMap[data?.toLowerCase()] || ['bg-secondary', 'Unknown'];
                    return `<span class="badge ${badgeClass}">${label}</span>`;

                }

            },
            {
                data: 'expectedDeliveryDays',
                render: function(data) {
                    if (data) {
                        return `${data + ' Days' || '0 Days'}`;
                    }
                    return `<%= trans.global.not_available %>`;
                }

            },
            {
                data: 'createdAt',
                render: function(data) {
                    return data ? new Date(data).toLocaleDateString(lang) : `<%= trans.global.not_available %>`;
                }
            },
            {
                data: '_id',
                render: function(data, type, row) {
                    const canView = userPermissions.includes('view_order');
                    const canEdit = userPermissions.includes('edit_shipping_setting');
                    return `<div class="d-flex gap-1">
                        ${createViewButton(data, canView)}
                        ${editExpectedDateButton(data, canEdit)}
                    </div>`;
                },
                orderable: false
            }

        ],
        responsive: true,
        lengthMenu: [10, 25, 50, 100],
        stateSave: false,
        order: [[6, 'desc']],
        language: languageConfig
    });

    $(document).on("change", "#statusFilter", function() {
        table.draw();
    });

    $(document).on('click', '#openShippingTimeModalBtn', function() {
        $.ajax({
            url: '/admin/settings-shipping-time',
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response?.status) {
                    const days  = Number(response.data.setting.value) || 5;
                    const title = response.data.setting.display_name || 'Shipping Time';

                    const html = `
                        <div class="modal-header">
                            <h5 class="modal-title fw-semibold" id="shippingTimeModalLabel">
                                🚚 ${title}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <form id="shippingTimeForm">
                            <div class="modal-body pt-2">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.SHIPPING_SETTING.fields.shipping_time %></label>
                                    <input
                                        type="number"
                                        name="shipping_time"
                                        class="form-control"
                                        min="1"
                                        value="${days}"
                                        placeholder="e.g. 5"
                                    >
                                </div>

                                <small class="text-muted d-block mt-1">
                                    <%= trans.cruds.SHIPPING_SETTING.fields.apply_shipping_time_buyer_place_order %>
                                </small>
                            </div>

                            <div class="modal-footer border-0 pt-0">
                                <button type="submit" class="btn btn-primary px-4">
                                    <%= trans.global.update %>
                                </button>
                            </div>
                        </form>
                    `;

                    $('#modalContent').html(html);
                    $('#shippingTimeModal').modal('show');
                } else {
                    showNotificationPopup(response.message || `<%= t(trans.messages.oops_something_went_wrong, {
                        attribute: trans.cruds.MODULE.SHIPPING_MODULE,
                    }) %>`, 'error');    
                }
            },
            error: function(xhr, status, error) {
                const message = xhr?.responseJSON?.message || `<%= t(trans.messages.oops_something_went_wrong, {
                    attribute: trans.cruds.MODULE.AUTH,
                }) %>`;
                showNotificationPopup(message, 'error');
            }
        });
    });


    $(document).on("submit", "#shippingTimeForm", function(e){
        e.preventDefault();

        const $form = $(this);
        const $input = $form.find('input[name="shipping_time"]');
        const shipping_time = Number($input.val());

        $form.find('.invalid-feedback').remove();
        $input.removeClass('is-invalid');

        if (!shipping_time || shipping_time < 1) {
            const $error = $('<span class="invalid-feedback d-block">Please enter a valid number of days (minimum 1).</span>');
            $input.addClass('is-invalid').after($error);
            return false;
        }

        const $submitBtn = $form.find('button[type="submit"]');
        $submitBtn.prop('disabled', true).text('Updating...');

        $.ajax({
            url: '/admin/settings-shipping-time/update',
            method: 'POST',
            data: { shipping_time },
            success: function(response) {
                $submitBtn.prop('disabled', false).text('Update');
                if (response.status) {
                    showNotificationPopup(response.message, 'success');
                    $('#shippingTimeModal').modal('hide');
                    $('#shippingTimeValue').text(shipping_time + ' Days');
                } else {
                    showNotificationPopup(response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                $submitBtn.prop('disabled', false).text('Update');
                const message = xhr?.responseJSON?.message || `<%= t(trans.messages.oops_something_went_wrong, {
                    attribute: trans.cruds.MODULE.SHIPPING_SETTING,
                }) %>`;
                showNotificationPopup(message, 'error');
            }
        });
    });

    $(document).on('click', '.openExpectedDateModal', function () {
        const orderId = $(this).data('order-id');

        $.ajax({
            url: `/admin/order/expected-days/${orderId}/edit`,
            method: 'GET',
            dataType: 'json',
            success: function (response) {

                if (!response.status) {
                    showNotificationPopup(response.message, 'error');
                    return;
                }

                const order = response.data.order;

                const expectedDays = order.expectedDeliveryDays ?? '';
                const isDelivered  = order.status === 'delivered';
                const isDisabled   = isDelivered ? 'disabled' : '';
                const warningText  = isDelivered
                    ? `<div class="alert alert-warning py-2">
                        Delivered orders cannot be updated.
                    </div>`
                    : '';

                const html = `
                    <div class="modal-header">
                        <h5 class="modal-title fw-semibold">
                            📦 <%= trans.cruds.SHIPPING_SETTING.fields.expected_delivery_days %>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form id="expectedDateForm">
                        <input type="hidden" name="order_id" value="${order._id}">

                        <div class="modal-body">
                            ${warningText}

                            <div class="mb-3">
                                <label class="form-label">
                                    <%= trans.cruds.SHIPPING_SETTING.fields.expected_days %>
                                </label>
                                <input
                                    type="number"
                                    name="expectedDeliveryDays"
                                    class="form-control"
                                    min="0"
                                    value="${expectedDays}"
                                    ${isDisabled}
                                    placeholder="e.g. 5"
                                >
                            </div>

                            <small class="text-muted">
                                <%= trans.cruds.SHIPPING_SETTING.fields.delivery_expected_days_after_confirmation %>
                            </small>
                        </div>

                        <div class="modal-footer border-0">
                            <button type="submit"
                                    class="btn btn-primary"
                                    ${isDisabled}>
                                <%= trans.global.update %>
                            </button>
                        </div>
                    </form>
                `;

                $('#modalContent').html(html);
                $('#shippingTimeModal').modal('show');
            },
            error: function () {
                showNotificationPopup('Something went wrong', 'error');
            }
        });
    });

    $(document).on("submit", "#expectedDateForm", function(e){
        e.preventDefault();

        const $form  = $(this);
        const $input = $form.find('input[name="expectedDeliveryDays"]');
        const days   = Number($input.val());

        $form.find('.invalid-feedback').remove();
        $input.removeClass('is-invalid');

        if (!days || days < 1) {
            const $error = $(
                '<span class="invalid-feedback d-block">' +
                'Please enter a valid number of days (minimum 1).' +
                '</span>'
            );
            $input.addClass('is-invalid').after($error);
            return false;
        }

        const $submitBtn = $form.find('button[type="submit"]');
        $submitBtn.prop('disabled', true).text('Updating...');

        $.ajax({
            url: '/admin/order/expected-days/update',
            method: 'POST',
            data: {
                order_id: $form.find('input[name="order_id"]').val(),
                expectedDeliveryDays: days
            },
            success: function (response) {
                $submitBtn.prop('disabled', false).text('Update');

                if (response.status) {
                    showNotificationPopup(response.message, 'success');
                    $('#shippingTimeModal').modal('hide');

                    $(`#expected-days-${response.data?.order_id}`)
                        .text(days + ' Days');

                } else {
                    showNotificationPopup(response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                $submitBtn.prop('disabled', false).text('Update');
                const message = xhr?.responseJSON?.message || `<%= t(trans.messages.oops_something_went_wrong, {
                    attribute: trans.cruds.MODULE.SHIPPING_SETTING,
                }) %>`;
                showNotificationPopup(message, 'error');
            }
        });
    });

});

function createViewButton(orderId, canView) {
  if (!canView) return '';
  return `<a href="/admin/order/${orderId}/view" class="btn btn-sm btn-info" title="View Order" aria-label="View Order">
            <i class="fas fa-eye"></i>
          </a>`;
}

function editExpectedDateButton(orderId, canEdit) {
  if (!canEdit) return '';
  return `<a role="button" class="btn btn-sm btn-warning openExpectedDateModal" data-order-id="${orderId}" title="<%= trans.global.edit +' '+ trans.cruds.SHIPPING_SETTING.fields.expected_delivery_days %>" aria-label="Edit Delivery Expected Date">
      <i class="fas fa-calendar-alt"></i>
    </a>
  `;
}

</script>