{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a>
      </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>
  {% include 'extension/alsendo/admin/view/template/partials/info_modal.twig' %}
  <div class="container-fluid">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">{{ text_order_shipment_status_mapping_main_header }}</h3>
      </div>

      <div class="card-body">
          <div class="row mb-3">
            <div class="col-12 mb-4">
              <h5>{{ text_import_to_alsendo_orders_with_selected_status_subheader }}</h5>
              <small>{{ text_label_status_to_trigger_shipment }}</small>
              <select name="shipment_trigger_status_id" id="shipment-trigger-status-id" class="form-select mt-2">
                <option value="">{{ text_select_status }}</option>
                {% for order_status in order_statuses %}
                  <option value="{{ order_status.order_status_id }}"{% if shipment_trigger_status_id == order_status.order_status_id %} selected{% endif %}>{{ order_status.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <h5>{{ text_automatic_shipment_status_mapping }}</h5>
              <small>{{ text_define_how_shipment_statuses_from_the_parcel_system_will_appear_in_your_store }}</small>

              <table class="table table-bordered table-hover">
                <thead>
                <tr>
                  <td class="text-start">{{ text_alsendo_shipment_status }}</td>
                  <td class="text-start">{{ text_store_order_status }}</td>
                </tr>
                </thead>
                <tbody>
                  {% for alsendo_shipment_status in alsendo_shipment_statuses %}
                  <tr>
                    <td class="text-start">{{ alsendo_shipment_status.name }}</td>
                    <td class="text-start">
                      <select class="form-select alsendo-shipment-status-mapping-select" data-shipment-status-id="{{ alsendo_shipment_status.id }}">
                        <option value="">{{ text_select_status }}</option>
                        {% for order_status in order_statuses %}
                          <option value="{{ order_status.order_status_id }}" {% if alsendo_shipment_status.orderStatusId == order_status.order_status_id %}selected{% endif %}>{{ order_status.name }}</option>
                        {% endfor %}
                      </select>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
      </div>

      <div class="m-3 text-end">
        <button type="button" class="btn btn-primary" id="btn-update-order-shipment-status-mapping" style="margin-left: 1em;">{{ text_save_changes }}</button>
      </div>
    </div>
  </div>
</div>

<script>
  $('#btn-update-order-shipment-status-mapping').on('click', function () {
    const shipment_trigger_status_id = $('#shipment-trigger-status-id').val() || null;

    const shipment_status_to_order_status_map = {};
    $('.alsendo-shipment-status-mapping-select').each(function () {
      const shipmentStatusId = $(this).data('shipment-status-id');
      shipment_status_to_order_status_map[shipmentStatusId] = $(this).val() || null;
    });

    $.ajax({
      url: 'index.php?route=extension/alsendo/module/alsendo.updateShipmentStatusToOrderStatusMappings&user_token={{ user_token|e('js') }}',
      type: 'POST',
      data: {
        shipment_trigger_status_id: shipment_trigger_status_id,
        shipment_status_to_order_status_map: shipment_status_to_order_status_map
      }
    });
  });
</script>

{{ footer }}