<%- include('../systemFinance/assets.ejs') %>
<%
  const audienceOptions = ['admin_all', 'user_all', 'user_active', 'user_notActive', 'user_block', 'provider_all', 'provider_active', 'provider_notActive', 'provider_block'];
  const prefillAudience = archive?.userType || '';
%>
<main class="kt-ops kt-finance" data-ops-page data-finance-page
  data-ops-required-message="<%= i18n.__('systemFinance.required') %>"
  data-ops-arabic-message="<%= i18n.__('common.arabicOnly') %>"
  data-ops-english-message="<%= i18n.__('common.englishOnly') %>"
  data-ops-action-success="<%= i18n.__('notifications.sendNotificationSuccessfully') %>"
  data-ops-action-error="<%= i18n.__('common.returnDeveloper') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('notifications.notifications'),
      description: i18n.__('systemFinance.notificationsDescription'),
      icon: 'ti-bell-plus',
      count: 0,
      showCount: false,
      primaryUrl: '/dashboard/notifications/showNotifications',
      primaryLabel: i18n.__('notifications.showNotifications'),
      primaryIcon: 'ti-inbox',
      backUrl: null
    }) %>

    <form id="finance-notification-form" class="kt-ops-form-surface kt-finance-composer" action="/dashboard/notifications/send"
      method="post" data-ops-form novalidate>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <header class="kt-ops-form-surface__header"><span class="kt-ops-section-icon"><i class="ti ti-send"></i></span><div><h2><%= i18n.__('systemFinance.notificationComposer') %></h2><p><%= i18n.__('systemFinance.composerHint') %></p></div></header>
      <div class="kt-ops-form__body">
        <fieldset class="kt-finance-channel-switch">
          <legend class="visually-hidden"><%= i18n.__('systemFinance.notificationChannel') %></legend>
          <label><input type="radio" name="type" value="notify" checked data-finance-channel><i class="ti ti-bell"></i><span><%= i18n.__('systemFinance.pushNotification') %></span></label>
          <label><input type="radio" name="type" value="sms" data-finance-channel><i class="ti ti-message"></i><span><%= i18n.__('systemFinance.smsMessage') %></span></label>
        </fieldset>

        <div class="kt-ops-form-grid kt-ops-details-grid--spaced">
          <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
            <label for="notification-audience"><%= i18n.__('systemFinance.recipientScope') %></label>
            <div data-ops-select>
              <select id="notification-audience" name="userType" required data-ops-native-select>
                <option value="" disabled <%= prefillAudience ? '' : 'selected' %>><%= i18n.__('notifications.chooseSenders') %></option>
                <% audienceOptions.forEach((value) => { %><option value="<%= value %>" <%= prefillAudience === value ? 'selected' : '' %>><%= i18n.__('notifications.' + value) %></option><% }) %>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
          </div>
        </div>

        <section class="kt-finance-form-panel kt-ops-details-grid--spaced" data-finance-channel-panel="notify">
          <div class="kt-ops-form-grid">
            <article class="kt-ops-language-card">
              <div class="kt-ops-language-card__head"><strong><%= i18n.__('systemFinance.titleArabic') %></strong><span class="kt-ops-language-chip kt-ops-language-chip--ar">AR · عربي</span></div>
              <div class="kt-ops-field" data-ops-field><label for="notification-title-ar"><%= i18n.__('systemFinance.titleArabic') %></label><input class="kt-ops-control" id="notification-title-ar" name="titleAr" type="text" value="<%= archive?.title?.ar || '' %>" minlength="2" maxlength="120" required data-finance-required="true" data-ops-script="arabic" dir="rtl" lang="ar" placeholder="اكتب عنوان الإشعار بالعربية"><p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p></div>
              <div class="kt-ops-field" data-ops-field><label for="notification-message-ar"><%= i18n.__('systemFinance.messageArabic') %></label><textarea class="kt-ops-control" id="notification-message-ar" name="messageAr" minlength="2" maxlength="1000" required data-finance-required="true" dir="rtl" lang="ar" placeholder="اكتب نص الإشعار بالعربية"><%= archive?.message?.ar || '' %></textarea><p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p></div>
            </article>
            <article class="kt-ops-language-card">
              <div class="kt-ops-language-card__head"><strong><%= i18n.__('systemFinance.titleEnglish') %></strong><span class="kt-ops-language-chip">EN · English</span></div>
              <div class="kt-ops-field" data-ops-field><label for="notification-title-en"><%= i18n.__('systemFinance.titleEnglish') %></label><input class="kt-ops-control" id="notification-title-en" name="titleEn" type="text" value="<%= archive?.title?.en || '' %>" minlength="2" maxlength="120" required data-finance-required="true" data-ops-script="latin" dir="ltr" lang="en" placeholder="Enter the notification title in English"><p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p></div>
              <div class="kt-ops-field" data-ops-field><label for="notification-message-en"><%= i18n.__('systemFinance.messageEnglish') %></label><textarea class="kt-ops-control" id="notification-message-en" name="messageEn" minlength="2" maxlength="1000" required data-finance-required="true" dir="ltr" lang="en" placeholder="Enter the notification message in English"><%= archive?.message?.en || '' %></textarea><p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p></div>
            </article>
          </div>
        </section>

        <section class="kt-finance-form-panel kt-ops-details-grid--spaced" data-finance-channel-panel="sms" hidden>
          <div class="kt-ops-field" data-ops-field><label for="sms-message"><%= i18n.__('systemFinance.message') %></label><textarea class="kt-ops-control" id="sms-message" name="message" maxlength="1000" data-finance-required="true" disabled dir="auto" placeholder="<%= i18n.__('notifications.messageText') %>"></textarea><p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p></div>
        </section>
      </div>
      <footer class="kt-ops-form__footer">
        <a class="kt-ops-btn" href="/dashboard/notifications/showNotifications"><%= i18n.__('notifications.showNotifications') %></a>
        <button class="kt-ops-btn kt-ops-btn--primary" type="button" data-finance-send-review><i class="ti ti-send"></i><%= archive ? i18n.__('common.sendAgain') : i18n.__('systemFinance.send') %></button>
      </footer>
    </form>

    <div class="kt-ops-modal" id="finance-send-confirmation" data-ops-modal role="dialog" aria-modal="true"
      aria-labelledby="finance-send-title" aria-hidden="true" tabindex="-1" hidden>
      <section class="kt-ops-modal__dialog">
        <header class="kt-ops-modal__header"><div><span class="kt-ops-eyebrow"><%= i18n.__('systemFinance.recipientScope') %></span><h2 id="finance-send-title"><%= i18n.__('systemFinance.confirmSend') %></h2><p><%= i18n.__('systemFinance.confirmSendDescription') %></p></div><button class="kt-ops-modal__close" type="button" data-ops-modal-close aria-label="<%= i18n.__('systemFinance.close') %>"><i class="ti ti-x"></i></button></header>
        <div class="kt-ops-modal__body"><div class="kt-ops-details-grid"><div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('systemFinance.recipientScope') %></span><strong class="kt-ops-detail__value" data-finance-confirm-scope></strong></div><div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('systemFinance.notificationChannel') %></span><strong class="kt-ops-detail__value" data-finance-confirm-channel></strong></div></div></div>
        <footer class="kt-ops-modal__actions"><button class="kt-ops-btn" type="button" data-ops-modal-close><%= i18n.__('systemFinance.cancel') %></button><button class="kt-ops-btn kt-ops-btn--primary" type="button" data-finance-send-confirm><i class="ti ti-send"></i><%= i18n.__('systemFinance.send') %></button></footer>
      </section>
    </div>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
