<% title = trans.cruds.MODULE.SHIPPING_SETTING + ' - ' + companyInfo.NAME %>
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6 col-12">
                <h2><%= trans.cruds.MODULE.SHIPPING_SETTING %></h2>
            </div>
            <div class="col-sm-6 col-12">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="<%= '/admin/dashboard' %>"><i class="iconly-Home icli svg-color"></i> <%= trans.global.home %></a></li>
                  <li class="breadcrumb-item"><a href="<%= '/admin/shipping-settings' %>"><%= trans.cruds.MODULE.SHIPPING_SETTING %></a></li>
                  <li class="breadcrumb-item active"><%= trans.global.list %></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header card-no-border d-flex justify-content-between align-items-center">
          <div>
            <h3><%= trans.cruds.SHIPPING_SETTING.heading.order_shipping_list || 'order_list' %></h3>
          </div>

          <div>
            <button 
              type="button" 
              class="btn btn-primary text-nowrap"
              id="openShippingTimeModalBtn"
            >
              <i class="fa fa-plus me-1"></i><%= trans.cruds.SHIPPING_SETTING.fields.set_shipping_time %>
            </button>
          </div>

        </div>
        <div class="card-body pt-0"> 
          <div class="filter-select">
            <div class="status-select d-flex gap-1">
              <label for="statusFilter">Status Filter:</label>
              <% const hideStatus = ['shipped', 'out_for_delivery', 'delivered', 'cancelled', 'returned']; %>
              <select id="statusFilter" class="form-select">
                <option value="" selected><%= trans.global.all %></option>
                <% orderStatus.forEach(function (status) { %>
                  <% if (!hideStatus.includes(status.key)) { %>
                    <option value="<%= status.key %>"><%= status.label %></option>
                  <% } %>
                <% }); %>
              </select>
            </div>

          </div>
          <div class="table-responsive theme-scrollbar">
            <table class="table table-lg display orderShippingTable" id=" row_create" style="width:100%">
              <thead>
                  <tr>
                    <th>#</th>
                    <th data-data="title"><%= trans.cruds.SHIPPING_SETTING.fields.title %></th>
                    <th data-data="buyer"><%= trans.cruds.SHIPPING_SETTING.fields.buyer %></th>
                    <th data-data="seller"><%= trans.cruds.SHIPPING_SETTING.fields.seller %></th>
                    <th data-data="status"><%= trans.cruds.SHIPPING_SETTING.fields.status %></th>
                    <th data-data="expectedDeliveryDays"><%= trans.cruds.SHIPPING_SETTING.fields.expected_delivery_days %></th>
                    <th data-data="createdAt"><%= trans.cruds.ORDER.fields.createdAt %></th>
                    <th data-data="action"><%= trans.cruds.ORDER.fields.action %></th>
                  </tr>
              </thead>
              <tbody>
                  <!-- Data will be loaded via AJAX -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--  -->
<div class="modal fade" id="shippingTimeModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-md rounded-4" id="modalContent">
      <!-- AJAX CONTENT WILL COME HERE -->
    </div>
  </div>
</div>
<%- include('./script') %>