{{define "user/report_settings.html"}}
{{template "user/layout_head" .}}
<div class="ut-shell-page ut-shell-page--narrow">
{{template "user_pagehead" (dict "Icon" "bx-bar-chart-alt-2" "Title" (Tp "user_report_settings" "user_report_settings_title") "Desc" (Tp "user_report_settings" "user_report_settings_desc"))}}

<div id="reportFormErr" class="alert alert-danger alert-dismissible fade show py-2 mb-3 d-none" role="alert">
  <span id="reportFormErrText"></span>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{if index .Data "Error"}}
<div id="reportFormErrServer" class="alert alert-danger alert-dismissible fade show py-2 mb-3" role="alert">
  {{index .Data "Error"}}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{end}}

<div class="ut-section">
  <div class="ut-section__head">
    <div class="ut-section__head-icon ut-section__head-icon--sky"><i class="bx bx-bar-chart-alt-2"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{Tp "user_report_settings" "field_report_section_title"}}</h2>
      <p class="ut-section__head-sub mb-0">{{Tp "user_report_settings" "field_report_hint"}}</p>
    </div>
    <div class="ms-auto">
      <button type="button" class="btn btn-outline-secondary btn-sm" id="btnRefreshChannels" title="{{Tp "user_report_settings" "btn_report_refresh_channels"}}">
        <i class="bx bx-refresh"></i><span class="d-none d-sm-inline ms-1">{{Tp "user_report_settings" "btn_report_refresh_channels"}}</span>
      </button>
    </div>
  </div>
  <div class="ut-section__body">
    <form method="post" id="reportSettingsForm" class="ut-inline-form">
      <div class="ut-settings-period {{if eq (asInt (index .Data.Settings "report_weekly_enabled")) 1}}is-enabled{{end}}" data-period="week">
        <div class="ut-settings-period__head">
          <div class="form-check mb-0">
            <input type="checkbox" class="form-check-input js-period-enable" name="report_weekly_enabled" value="1" id="rw"
              {{if eq (asInt (index .Data.Settings "report_weekly_enabled")) 1}}checked{{end}}>
            <label class="form-check-label fw-medium" for="rw">{{Tp "user_report_settings" "field_report_weekly"}}</label>
          </div>
        </div>
        <div class="ut-settings-channel-panel" id="weekChannels">
          <div class="ut-settings-channel-panel__label">{{Tp "user_report_settings" "field_report_channels_label"}}</div>
          <div class="ut-settings-channel-list" data-period="week">
            {{range index .Data "Channels"}}
            <div class="ut-settings-channel-item {{if not .Available}}opacity-75{{end}}" data-channel-id="{{.ID}}">
              <div class="form-check mb-0 flex-shrink-0">
                <input type="checkbox" class="form-check-input js-channel-check" name="report_week_channels" value="{{.ID}}" id="wc-{{.ID}}"
                  {{if not .Available}}disabled{{end}}
                  {{if index $.Data.WeeklyChannelChecked .ID}}checked{{end}}>
              </div>
              <label class="form-check-label flex-grow-1" for="wc-{{.ID}}">
                <span class="d-inline-flex align-items-center flex-wrap gap-1">
                  <i class="bx {{.Icon}} text-primary"></i>
                  <span class="fw-medium">{{.Name}}</span>
                  {{if .Available}}<span class="badge text-bg-success-subtle border border-success-subtle text-success-emphasis">{{Tp "user_report_settings" "report_channel_status_ready"}}</span>{{else if .Configured}}<span class="badge text-bg-warning-subtle border border-warning-subtle text-warning-emphasis">{{Tp "user_report_settings" "report_channel_status_incomplete"}}</span>{{else}}<span class="badge text-bg-secondary-subtle border text-muted">{{Tp "user_report_settings" "report_channel_status_unconfigured"}}</span>{{end}}
                </span>
                {{if .Detail}}<div class="small text-muted font-monospace mt-1">{{if eq .ID "mail"}}{{privacy "email" .Detail}}{{else}}{{privacy "text" .Detail}}{{end}}</div>{{end}}
                {{if .Hint}}<div class="small {{if .Available}}text-success{{else}}text-muted{{end}} mt-1">{{.Hint}}</div>{{end}}
                {{if and (not .Available) .SettingsURL}}<a href="{{.SettingsURL}}" class="small d-inline-block mt-1">{{Tp "user_report_settings" "report_channel_go_configure"}}</a>{{end}}
              </label>
            </div>
            {{end}}
          </div>
        </div>
        <div class="ut-settings-period__actions">
          <button type="button" class="btn btn-outline-secondary btn-sm js-report-test" data-period="week"><i class="bx bx-send me-1"></i>{{Tp "user_report_settings" "btn_report_week_test"}}</button>
          <span class="small text-muted ms-2 js-report-test-msg"></span>
        </div>
      </div>

      <div class="ut-settings-period {{if eq (asInt (index .Data.Settings "report_monthly_enabled")) 1}}is-enabled{{end}}" data-period="month">
        <div class="ut-settings-period__head">
          <div class="form-check mb-0">
            <input type="checkbox" class="form-check-input js-period-enable" name="report_monthly_enabled" value="1" id="rm"
              {{if eq (asInt (index .Data.Settings "report_monthly_enabled")) 1}}checked{{end}}>
            <label class="form-check-label fw-medium" for="rm">{{Tp "user_report_settings" "field_report_monthly"}}</label>
          </div>
        </div>
        <div class="ut-settings-channel-panel" id="monthChannels">
          <div class="ut-settings-channel-panel__label">{{Tp "user_report_settings" "field_report_channels_label"}}</div>
          <div class="ut-settings-channel-list" data-period="month">
            {{range index .Data "Channels"}}
            <div class="ut-settings-channel-item {{if not .Available}}opacity-75{{end}}" data-channel-id="{{.ID}}">
              <div class="form-check mb-0 flex-shrink-0">
                <input type="checkbox" class="form-check-input js-channel-check" name="report_month_channels" value="{{.ID}}" id="mc-{{.ID}}"
                  {{if not .Available}}disabled{{end}}
                  {{if index $.Data.MonthlyChannelChecked .ID}}checked{{end}}>
              </div>
              <label class="form-check-label flex-grow-1" for="mc-{{.ID}}">
                <span class="d-inline-flex align-items-center flex-wrap gap-1">
                  <i class="bx {{.Icon}} text-primary"></i>
                  <span class="fw-medium">{{.Name}}</span>
                  {{if .Available}}<span class="badge text-bg-success-subtle border border-success-subtle text-success-emphasis">{{Tp "user_report_settings" "report_channel_status_ready"}}</span>{{else if .Configured}}<span class="badge text-bg-warning-subtle border border-warning-subtle text-warning-emphasis">{{Tp "user_report_settings" "report_channel_status_incomplete"}}</span>{{else}}<span class="badge text-bg-secondary-subtle border text-muted">{{Tp "user_report_settings" "report_channel_status_unconfigured"}}</span>{{end}}
                </span>
                {{if .Detail}}<div class="small text-muted font-monospace mt-1">{{if eq .ID "mail"}}{{privacy "email" .Detail}}{{else}}{{privacy "text" .Detail}}{{end}}</div>{{end}}
                {{if .Hint}}<div class="small {{if .Available}}text-success{{else}}text-muted{{end}} mt-1">{{.Hint}}</div>{{end}}
                {{if and (not .Available) .SettingsURL}}<a href="{{.SettingsURL}}" class="small d-inline-block mt-1">{{Tp "user_report_settings" "report_channel_go_configure"}}</a>{{end}}
              </label>
            </div>
            {{end}}
          </div>
        </div>
        <div class="ut-settings-period__actions">
          <button type="button" class="btn btn-outline-secondary btn-sm js-report-test" data-period="month"><i class="bx bx-send me-1"></i>{{Tp "user_report_settings" "btn_report_month_test"}}</button>
          <span class="small text-muted ms-2 js-report-test-msg"></span>
        </div>
      </div>

      <div class="ut-form-note mt-3 mb-0">
        <i class="bx bx-bell"></i>
        <div>
          {{Tp "user_report_settings" "field_report_alerts_link_prefix"}}
          <a href="{{index .Data "AlertsSettingsURL"}}">{{Tp "user_sidebar" "nav_alert_settings"}}</a>
          {{Tp "user_report_settings" "field_report_alerts_link_suffix"}}
        </div>
      </div>

      <div class="ut-settings-footer">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "btn_save"}}</button>
      </div>
    </form>
  </div>
</div>
</div>

<script>
$(function(){
  var saveOkMsg = '{{T "save_ok"}}';
  var errorGeneric = '{{T "error_generic"}}';
  var statusReady = '{{Tp "user_report_settings" "report_channel_status_ready"}}';
  var statusIncomplete = '{{Tp "user_report_settings" "report_channel_status_incomplete"}}';
  var statusUnconfigured = '{{Tp "user_report_settings" "report_channel_status_unconfigured"}}';
  var goConfigure = '{{Tp "user_report_settings" "report_channel_go_configure"}}';
  var alertsURL = '{{index .Data "AlertsSettingsURL"}}';

  function esc(s){
    return $('<div/>').text(s == null ? '' : s).html();
  }

  function hideFormErr() {
    $('#reportFormErr').addClass('d-none');
    $('#reportFormErrText').text('');
    $('#reportFormErrServer').remove();
  }

  function showFormErr(msg) {
    $('#reportFormErrServer').remove();
    $('#reportFormErrText').text(msg);
    $('#reportFormErr').removeClass('d-none');
  }

  function syncPeriodBlocks() {
    $('.ut-settings-period').each(function(){
      var $block = $(this);
      var enabled = $block.find('.js-period-enable').is(':checked');
      $block.toggleClass('is-enabled', enabled);
    });
  }

  function renderChannelList($list, channels, period) {
    var prefix = period === 'month' ? 'mc' : 'wc';
    var name = period === 'month' ? 'report_month_channels' : 'report_week_channels';
    var selected = {};
    $list.find('.js-channel-check:checked').each(function(){
      selected[$(this).val()] = true;
    });
    var html = '';
    channels.forEach(function(ch){
      var badge = ch.available ? statusReady : (ch.configured ? statusIncomplete : statusUnconfigured);
      var badgeCls = ch.available ? 'text-bg-success-subtle border-success-subtle text-success-emphasis'
        : (ch.configured ? 'text-bg-warning-subtle border-warning-subtle text-warning-emphasis' : 'text-bg-secondary-subtle text-muted');
      var checked = ch.available && (selected[ch.id] || Object.keys(selected).length === 0);
      html += '<div class="ut-settings-channel-item' + (ch.available ? '' : ' opacity-75') + '" data-channel-id="' + ch.id + '">';
      html += '<div class="form-check mb-0 flex-shrink-0">';
      html += '<input type="checkbox" class="form-check-input js-channel-check" name="' + name + '" value="' + ch.id + '" id="' + prefix + '-' + ch.id + '"';
      if (!ch.available) html += ' disabled';
      if (checked) html += ' checked';
      html += '></div>';
      html += '<label class="form-check-label flex-grow-1" for="' + prefix + '-' + ch.id + '">';
      html += '<span class="d-inline-flex align-items-center flex-wrap gap-1"><i class="bx ' + ch.icon + ' text-primary"></i>';
      html += '<span class="fw-medium">' + esc(ch.name) + '</span>';
      html += '<span class="badge ' + badgeCls + ' border">' + badge + '</span></span>';
      if (ch.detail) {
        var detailHtml = (window.NCPrivacy && NCPrivacy.wrapHTML)
          ? NCPrivacy.wrapHTML(ch.id === 'mail' ? 'email' : 'text', ch.detail)
          : esc(ch.detail);
        html += '<div class="small text-muted font-monospace mt-1">' + detailHtml + '</div>';
      }
      if (ch.hint) html += '<div class="small ' + (ch.available ? 'text-success' : 'text-muted') + ' mt-1">' + esc(ch.hint) + '</div>';
      if (!ch.available && ch.settings_url) html += '<a href="' + esc(ch.settings_url || alertsURL) + '" class="small d-inline-block mt-1">' + goConfigure + '</a>';
      html += '</label></div>';
    });
    $list.html(html);
    syncPeriodBlocks();
  }

  function refreshChannels() {
    var $btn = $('#btnRefreshChannels').prop('disabled', true);
    $.getJSON('/api/user/settings/reports/channels').done(function(res){
      if (res && res.success && res.data && res.data.channels) {
        renderChannelList($('.ut-settings-channel-list[data-period=week]'), res.data.channels, 'week');
        renderChannelList($('.ut-settings-channel-list[data-period=month]'), res.data.channels, 'month');
      }
    }).always(function(){
      $btn.prop('disabled', false);
    });
  }

  syncPeriodBlocks();
  $('.js-period-enable').on('change', syncPeriodBlocks);

  {{if index .Data "Ok"}}showUserToast(true, saveOkMsg);{{end}}
  try {
    var u = new URL(window.location.href);
    if (u.searchParams.has('ok')) {
      u.searchParams.delete('ok');
      var qs = u.searchParams.toString();
      history.replaceState(null, '', u.pathname + (qs ? ('?' + qs) : '') + u.hash);
    }
  } catch (e) {}

  $('#btnRefreshChannels').on('click', refreshChannels);

  $('#reportSettingsForm').on('submit', function(e){
    e.preventDefault();
    hideFormErr();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: '/api/user/settings/reports',
      type: 'POST',
      data: $form.serialize(),
      dataType: 'json'
    }).done(function(res){
      if (res && res.success) {
        showUserToast(true, (res.data && res.data.message) || saveOkMsg);
        return;
      }
      showFormErr((res && res.message) || errorGeneric);
    }).fail(function(xhr){
      var msg = errorGeneric;
      try { var j = JSON.parse(xhr.responseText); if (j.message) msg = j.message; } catch(err){}
      showFormErr(msg);
    }).always(function(){
      $btn.prop('disabled', false);
    });
  });

  $('.js-report-test').on('click', function(){
    var $btn = $(this);
    var period = $btn.data('period');
    var $msg = $btn.siblings('.js-report-test-msg');
    $('.js-report-test-msg').not($msg).text('').removeClass('text-success text-danger').addClass('text-muted');
    $msg.removeClass('text-muted text-success text-danger').addClass('text-muted').text('{{Tp "user_report_settings" "report_sending"}}');
    $btn.prop('disabled', true);
    $.ajax({
      url: '/api/user/report/send',
      type: 'POST',
      data: { period: period },
      dataType: 'json'
    }).done(function(res){
      if (res && res.success) {
        var tip = (res.data && res.data.message) || '{{Tp "user_report_settings" "report_send_ok"}}';
        $msg.removeClass('text-muted text-danger').addClass('text-success').text(tip);
      } else {
        $msg.removeClass('text-muted text-success').addClass('text-danger').text((res && res.message) || errorGeneric);
      }
    }).fail(function(xhr){
      var m = errorGeneric;
      try { var j = JSON.parse(xhr.responseText); if (j.message) m = j.message; } catch(e){}
      $msg.removeClass('text-muted text-success').addClass('text-danger').text(m);
    }).always(function(){
      $btn.prop('disabled', false);
    });
  });
});
</script>
{{template "user/layout_foot" .}}
{{end}}