<%
  const ordersLocale = (
    typeof lang === 'string'
      ? lang
      : (
        typeof user !== 'undefined'
        && user
        && typeof user.lang === 'string'
          ? user.lang
          : 'ar'
      )
  );
  const ordersIsEnglish = String(ordersLocale).toLowerCase().startsWith('en');
  const ordersSettings = (
    typeof setting !== 'undefined'
    && setting
    && typeof setting === 'object'
  ) ? setting : {};
  const ordersValue = (value) => (
    value === undefined || value === null ? '' : value
  );
  const ordersCancelReason = (
    ordersSettings.cancelOrderReason
    && typeof ordersSettings.cancelOrderReason === 'object'
  ) ? ordersSettings.cancelOrderReason : {};
  const ordersCopy = ordersIsEnglish
    ? {
      cycleTitle: 'Order lifecycle windows',
      cycleHelper: 'Define operational response, settlement, and payment deadlines.',
      cancelTitle: 'Cancellation policy',
      cancelHelper: 'The message shown when an order is cancelled after a payment window expires.',
      summaryTitle: 'Configuration logic',
      summaryHelper: 'Each duration combines one positive value with its own time unit.',
      confirm: 'Order receipt confirmation',
      settlement: 'Order settlement window',
      unpaid: 'Unpaid order timeout',
      providerResponse: 'Store response window',
      payment: 'Payment after acceptance',
      returnWindow: 'Order return allowance',
      reasonAr: 'Arabic cancellation reason',
      reasonEn: 'English cancellation reason',
      reasonArPlaceholder: 'Write the Arabic cancellation reason',
      reasonEnPlaceholder: 'Write the English cancellation reason',
      durationPlaceholder: 'Duration',
      unit: 'Time unit',
      minutes: 'Minutes',
      hours: 'Hours',
      days: 'Days',
      saved: 'Saved',
      dirty: 'Unsaved changes',
      saveTitle: 'Order policy is ready',
      saveHelper: 'The current lifecycle policy is saved.',
      dirtyHelper: 'Review the changed deadlines before saving.',
      save: 'Save changes',
      saving: 'Saving...',
      saveSuccess: 'Order settings were saved',
      saveError: 'Order settings could not be saved',
      required: 'Enter a value greater than zero',
      selectRequired: 'Choose a time unit',
      textRequired: 'This field is required',
    }
    : {
      cycleTitle: 'مدد دورة الطلب',
      cycleHelper: 'حدّد مهل الاستجابة والتسوية والدفع لكل مرحلة تشغيلية.',
      cancelTitle: 'سياسة الإلغاء',
      cancelHelper: 'الرسالة الظاهرة عند إلغاء الطلب بعد انتهاء مهلة الدفع.',
      summaryTitle: 'منطق التهيئة',
      summaryHelper: 'كل مدة تتكوّن من قيمة موجبة ووحدة زمن مستقلة.',
      confirm: 'تأكيد استلام الطلب',
      settlement: 'تسوية الطلبات',
      unpaid: 'مهلة الطلب غير المدفوع',
      providerResponse: 'مدة استجابة المتجر',
      payment: 'الدفع بعد قبول الطلب',
      returnWindow: 'عدد أيام سماح إرجاع الطلب',
      reasonAr: 'سبب الإلغاء بالعربية',
      reasonEn: 'سبب الإلغاء بالإنجليزية',
      reasonArPlaceholder: 'اكتب سبب الإلغاء بالعربية',
      reasonEnPlaceholder: 'Write the cancellation reason in English',
      durationPlaceholder: 'المدة',
      unit: 'وحدة الزمن',
      minutes: 'دقائق',
      hours: 'ساعات',
      days: 'أيام',
      saved: 'محفوظ',
      dirty: 'توجد تغييرات غير محفوظة',
      saveTitle: 'سياسة الطلبات جاهزة',
      saveHelper: 'سياسة دورة الطلب الحالية محفوظة.',
      dirtyHelper: 'راجع المهل المعدّلة قبل الحفظ.',
      save: 'حفظ التغييرات',
      saving: 'جاري الحفظ...',
      saveSuccess: 'تم حفظ إعدادات الطلبات',
      saveError: 'تعذر حفظ إعدادات الطلبات',
      required: 'أدخل قيمة أكبر من صفر',
      selectRequired: 'اختر وحدة زمن',
      textRequired: 'هذا الحقل مطلوب',
    };
  const orderUnitOptions = [
    { value: 'minutes', label: ordersCopy.minutes, icon: 'ti-clock-minute' },
    { value: 'hours', label: ordersCopy.hours, icon: 'ti-clock-hour-4' },
    { value: 'days', label: ordersCopy.days, icon: 'ti-calendar-event' },
  ];
  const orderDurations = [
    {
      key: 'providerResponse',
      icon: 'ti-store',
      label: ordersCopy.providerResponse,
      valueName: 'providerResponseTime',
      unitName: 'providerResponseTimeUnit',
      value: ordersValue(ordersSettings.providerResponseTime),
      unit: ordersValue(ordersSettings.providerResponseTimeUnit) || 'hours',
    },
    {
      key: 'confirm',
      icon: 'ti-package-import',
      label: ordersCopy.confirm,
      valueName: 'confirmReceiveOrderTime',
      unitName: 'confirmReceiveOrderTimeUnit',
      value: ordersValue(ordersSettings.confirmReceiveOrderTime),
      unit: ordersValue(ordersSettings.confirmReceiveOrderTimeUnit) || 'minutes',
    },
    {
      key: 'settlement',
      icon: 'ti-receipt-2',
      label: ordersCopy.settlement,
      valueName: 'settlementOrdersTime',
      unitName: 'settlementOrdersTimeUnit',
      value: ordersValue(ordersSettings.settlementOrdersTime),
      unit: ordersValue(ordersSettings.settlementOrdersTimeUnit) || 'hours',
    },
    {
      key: 'unpaid',
      icon: 'ti-hourglass-empty',
      label: ordersCopy.unpaid,
      valueName: 'nonePaymentOrderTime',
      unitName: 'nonePaymentOrderTimeUnit',
      value: ordersValue(ordersSettings.nonePaymentOrderTime),
      unit: ordersValue(ordersSettings.nonePaymentOrderTimeUnit) || 'minutes',
    },
    {
      key: 'payment',
      icon: 'ti-credit-card-pay',
      label: ordersCopy.payment,
      valueName: 'paymentAfterAcceptTime',
      unitName: 'paymentAfterAcceptTimeUnit',
      value: ordersValue(ordersSettings.paymentAfterAcceptTime),
      unit: ordersValue(ordersSettings.paymentAfterAcceptTimeUnit) || 'minutes',
    },
    {
      key: 'return-window',
      icon: 'ti-package-export',
      label: ordersCopy.returnWindow,
      valueName: 'returnRequestAllowedDays',
      value: ordersValue(ordersSettings.returnRequestAllowedDays || 5),
      fixedUnitLabel: ordersCopy.days,
    },
  ];
%>

<section
  class="kt-settings-module kt-settings-module--orders"
  dir="<%= ordersIsEnglish ? 'ltr' : 'rtl' %>"
  data-settings-module="orders"
  data-settings-module-saved-label="<%= ordersCopy.saved %>"
  data-settings-module-dirty-label="<%= ordersCopy.dirty %>"
  data-settings-module-saved-helper="<%= ordersCopy.saveHelper %>"
  data-settings-module-dirty-helper="<%= ordersCopy.dirtyHelper %>"
  data-settings-module-success="<%= ordersCopy.saveSuccess %>"
  data-settings-module-error="<%= ordersCopy.saveError %>"
>
  <form
    action="/dashboard/settings/editOrderSetting"
    method="post"
    novalidate
    class="kt-settings-module__form"
    data-settings-module-form
  >
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="id" value="<%= ordersValue(ordersSettings._id) %>">

    <section
      class="kt-settings-module__group kt-settings-module__group--primary"
      aria-labelledby="settings-orders-cycle-title"
    >
      <header class="kt-settings-module__group-header">
        <span class="kt-settings-module__group-icon" aria-hidden="true">
          <i class="ti ti-timeline-event"></i>
        </span>
        <div>
          <h3 id="settings-orders-cycle-title"><%= ordersCopy.cycleTitle %></h3>
          <p><%= ordersCopy.cycleHelper %></p>
        </div>
      </header>

      <div class="kt-settings-module__duration-grid">
        <% orderDurations.forEach((duration) => { %>
          <article class="kt-settings-module__duration-card">
            <header>
              <span aria-hidden="true"><i class="ti <%= duration.icon %>"></i></span>
              <strong><%= duration.label %></strong>
            </header>

            <div class="kt-settings-module__duration-controls">
              <div class="kt-settings-module__field" data-settings-module-field>
                <label
                  class="visually-hidden"
                  for="settings-orders-<%= duration.key %>-value"
                ><%= duration.label %></label>
                <div class="kt-settings-module__control">
                  <input
                    id="settings-orders-<%= duration.key %>-value"
                    name="<%= duration.valueName %>"
                    type="number"
                    inputmode="numeric"
                    min="1"
                    step="1"
                    value="<%= duration.value %>"
                    placeholder="<%= ordersCopy.durationPlaceholder %>"
                    required
                    data-settings-module-input
                    data-settings-required-message="<%= ordersCopy.required %>"
                    data-settings-number-message="<%= ordersCopy.required %>"
                    aria-describedby="settings-orders-<%= duration.key %>-value-error"
                    aria-invalid="false"
                  >
                  <i class="ti ti-clock" aria-hidden="true"></i>
                </div>
                <p
                  class="kt-settings-module__error"
                  id="settings-orders-<%= duration.key %>-value-error"
                  data-settings-module-error
                  hidden
                >
                  <i class="ti ti-alert-circle" aria-hidden="true"></i>
                  <span><%= ordersCopy.required %></span>
                </p>
              </div>

              <% if (duration.fixedUnitLabel) { %>
                <div class="kt-settings-module__field">
                  <span
                    class="kt-settings-module__select-trigger"
                    aria-label="<%= ordersCopy.unit %>: <%= duration.fixedUnitLabel %>"
                  >
                    <span class="kt-settings-module__select-value">
                      <i class="ti ti-calendar-event" aria-hidden="true"></i>
                      <span><%= duration.fixedUnitLabel %></span>
                    </span>
                  </span>
                </div>
              <% } else { %>
                <% const selectedUnit = orderUnitOptions.find((option) => option.value === duration.unit) || orderUnitOptions[0]; %>
                <div class="kt-settings-module__field" data-settings-module-field>
                <span
                  class="visually-hidden"
                  id="settings-orders-<%= duration.key %>-unit-label"
                ><%= ordersCopy.unit %></span>
                <div class="kt-settings-module__select" data-settings-module-select>
                  <select
                    class="kt-settings-module__native-select"
                    id="settings-orders-<%= duration.key %>-unit"
                    name="<%= duration.unitName %>"
                    required
                    tabindex="-1"
                    aria-hidden="true"
                    data-settings-module-native-select
                  >
                    <% orderUnitOptions.forEach((option) => { %>
                      <option
                        value="<%= option.value %>"
                        <%= option.value === selectedUnit.value ? 'selected' : '' %>
                      ><%= option.label %></option>
                    <% }) %>
                  </select>
                  <button
                    class="kt-settings-module__select-trigger"
                    id="settings-orders-<%= duration.key %>-unit-trigger"
                    type="button"
                    role="combobox"
                    aria-haspopup="listbox"
                    aria-expanded="false"
                    aria-controls="settings-orders-<%= duration.key %>-unit-listbox"
                    aria-labelledby="settings-orders-<%= duration.key %>-unit-label settings-orders-<%= duration.key %>-unit-value"
                    aria-describedby="settings-orders-<%= duration.key %>-unit-error"
                    aria-invalid="false"
                    data-settings-module-select-trigger
                  >
                    <span
                      class="kt-settings-module__select-value"
                      id="settings-orders-<%= duration.key %>-unit-value"
                      data-settings-module-select-value
                    >
                      <i class="ti <%= selectedUnit.icon %>" aria-hidden="true"></i>
                      <span><%= selectedUnit.label %></span>
                    </span>
                    <span class="kt-settings-module__select-chevron" aria-hidden="true">
                      <svg viewBox="0 0 24 24" focusable="false">
                        <path d="m7 10 5 5 5-5"></path>
                      </svg>
                    </span>
                  </button>
                  <div
                    class="kt-settings-module__select-menu"
                    id="settings-orders-<%= duration.key %>-unit-listbox"
                    role="listbox"
                    aria-labelledby="settings-orders-<%= duration.key %>-unit-label"
                    data-settings-module-select-menu
                    hidden
                  >
                    <% orderUnitOptions.forEach((option, optionIndex) => { %>
                      <button
                        class="kt-settings-module__select-option <%= option.value === selectedUnit.value ? 'is-selected' : '' %>"
                        id="settings-orders-<%= duration.key %>-unit-option-<%= optionIndex %>"
                        type="button"
                        role="option"
                        aria-selected="<%= option.value === selectedUnit.value ? 'true' : 'false' %>"
                        data-value="<%= option.value %>"
                        data-icon="<%= option.icon %>"
                        data-settings-module-select-option
                      >
                        <span>
                          <i class="ti <%= option.icon %>" aria-hidden="true"></i>
                          <strong><%= option.label %></strong>
                        </span>
                        <i class="ti ti-check" aria-hidden="true"></i>
                      </button>
                    <% }) %>
                  </div>
                  <p
                    class="kt-settings-module__error"
                    id="settings-orders-<%= duration.key %>-unit-error"
                    data-settings-module-error
                    hidden
                  >
                    <i class="ti ti-alert-circle" aria-hidden="true"></i>
                    <span><%= ordersCopy.selectRequired %></span>
                  </p>
                </div>
                </div>
              <% } %>
            </div>
          </article>
        <% }) %>
      </div>
    </section>

    <div class="kt-settings-module__orders-lower">
      <section
        class="kt-settings-module__group"
        aria-labelledby="settings-orders-cancel-title"
      >
        <header class="kt-settings-module__group-header">
          <span class="kt-settings-module__group-icon" aria-hidden="true">
            <i class="ti ti-file-description"></i>
          </span>
          <div>
            <h3 id="settings-orders-cancel-title"><%= ordersCopy.cancelTitle %></h3>
            <p><%= ordersCopy.cancelHelper %></p>
          </div>
        </header>

        <div class="kt-settings-module__field-grid">
          <div class="kt-settings-module__field" data-settings-module-field>
            <label class="kt-settings-module__label" for="settings-orders-reason-ar">
              <span><%= ordersCopy.reasonAr %></span>
              <small>AR</small>
            </label>
            <div class="kt-settings-module__editor kt-settings-module__editor--compact">
              <textarea
                id="settings-orders-reason-ar"
                name="cancelOrderReason[ar]"
                rows="4"
                placeholder="<%= ordersCopy.reasonArPlaceholder %>"
                dir="rtl"
                required
                data-settings-module-input
                data-settings-required-message="<%= ordersCopy.textRequired %>"
                aria-describedby="settings-orders-reason-ar-error"
                aria-invalid="false"
              ><%= ordersValue(ordersCancelReason.ar) %></textarea>
              <span class="kt-settings-module__editor-language">AR</span>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-orders-reason-ar-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= ordersCopy.textRequired %></span>
            </p>
          </div>

          <div class="kt-settings-module__field" data-settings-module-field>
            <label class="kt-settings-module__label" for="settings-orders-reason-en">
              <span><%= ordersCopy.reasonEn %></span>
              <small>EN</small>
            </label>
            <div class="kt-settings-module__editor kt-settings-module__editor--compact">
              <textarea
                id="settings-orders-reason-en"
                name="cancelOrderReason[en]"
                rows="4"
                placeholder="<%= ordersCopy.reasonEnPlaceholder %>"
                dir="ltr"
                required
                data-settings-module-input
                data-settings-required-message="<%= ordersCopy.textRequired %>"
                aria-describedby="settings-orders-reason-en-error"
                aria-invalid="false"
              ><%= ordersValue(ordersCancelReason.en) %></textarea>
              <span class="kt-settings-module__editor-language">EN</span>
            </div>
            <p
              class="kt-settings-module__error"
              id="settings-orders-reason-en-error"
              data-settings-module-error
              hidden
            >
              <i class="ti ti-alert-circle" aria-hidden="true"></i>
              <span><%= ordersCopy.textRequired %></span>
            </p>
          </div>
        </div>
      </section>

      <aside class="kt-settings-module__summary-card kt-settings-module__summary-card--orders">
        <span class="kt-settings-module__summary-icon" aria-hidden="true">
          <i class="ti ti-route"></i>
        </span>
        <span>
          <small><%= ordersCopy.summaryTitle %></small>
          <strong><%= orderDurations.length %> <%= ordersIsEnglish ? 'operational windows' : 'مدد تشغيلية' %></strong>
          <p><%= ordersCopy.summaryHelper %></p>
        </span>
      </aside>
    </div>

    <footer class="kt-settings-module__command" data-settings-module-command>
      <div class="kt-settings-module__command-copy">
        <span class="kt-settings-module__command-icon" aria-hidden="true">
          <i class="ti ti-clock-check"></i>
        </span>
        <span>
          <strong><%= ordersCopy.saveTitle %></strong>
          <small data-settings-module-save-helper><%= ordersCopy.saveHelper %></small>
        </span>
        <span class="kt-settings-module__status is-saved" data-settings-module-status>
          <i class="ti ti-circle-check" aria-hidden="true"></i>
          <span data-settings-module-status-label><%= ordersCopy.saved %></span>
        </span>
      </div>
      <p class="kt-settings-module__form-message" data-settings-module-form-message aria-live="polite"></p>
      <button class="kt-settings-module__submit" type="submit" data-settings-module-submit disabled>
        <span class="kt-settings-module__submit-spinner" aria-hidden="true"></span>
        <i class="ti ti-device-floppy" aria-hidden="true"></i>
        <span
          data-settings-module-submit-label
          data-idle-label="<%= ordersCopy.save %>"
          data-busy-label="<%= ordersCopy.saving %>"
        ><%= ordersCopy.save %></span>
      </button>
    </footer>
  </form>
</section>