{% extends '../layout/admin.html' %}

{% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">
  {% set smessage = req.flash('successMessage') %}
  {% if smessage.length %}
  <div class="alert alert-success">
    {{ smessage }}
  </div>
  {% endif %}

  {% set emessage = req.flash('errorMessage') %}
  {% if emessage.length %}
  <div class="alert alert-danger">
    {{ emessage }}
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'notification'} %}
    </div>

    <div class="col-md-9">
      <a href="/admin/notification#global-notification" class="btn btn-default">
        <i class="icon-fw ti-arrow-left" aria-hidden="true"></i>
        {{ t('notification_setting.back_to_list') }}
      </a>

      {% if setting %}
        {% set actionPath = '/admin/global-notification/' + setting.id + '/update' %}
      {% else %}
        {% set actionPath = '/admin/global-notification/new' %}
      {% endif %}

      <div class="row">
        <div class="m-t-20 form-box col-md-12">
          <legend>{{ t('notification_setting.notification_detail') }}</legend>

          <form action="{{ actionPath }}" method="post" class="form-horizontal" role="form">
            <fieldset class="col-sm-4">
              <div class="form-group">
                <h3 for="triggerPath">{{ t('notification_setting.trigger_path') }} <small>{{ t('notification_setting.trigger_path_help', '<code>*</code>') }}</small></h3>
                <input class="form-control" type="text" name="notificationGlobal[triggerPath]" value="{{ setting.triggerPath || '' }}" required>
              </div>

              <div class="form-group form-inline">
                <h3>{{ t('notification_setting.notify_to') }}</h3>
                <div class="radio radio-primary">
                  <input type="radio" id="mail" name="notificationGlobal[notifyToType]" value="mail" {% if setting.__t == 'mail' %}checked{% endif %}>
                  <label for="mail">
                    <p class="font-weight-bold">Email</p>
                  </label>
                </div>
                <div class="radio radio-primary">
                  <input type="radio" id="slack" name="notificationGlobal[notifyToType]" value="slack" {% if setting.__t == 'slack' %}checked{% endif %}>
                  <label for="slack">
                    <p class="font-weight-bold">Slack</p>
                  </label>
                </div>
              </div>

              <div class="form-group notify-to-option {% if setting.__t != 'mail' %}d-none{% endif %}" id="mail-input">
                <input class="form-control" type="text" name="notificationGlobal[toEmail]" placeholder="Email" value="{{ setting.toEmail || '' }}">
                <p class="help">
                  <b>Hint: </b>
                  <a href="https://ifttt.com/create" target="_blank">{{ t('notification_setting.email.ifttt_link') }} <i class="icon-share-alt"></i></a>
                </p>
              </div>

              <div class="form-group notify-to-option {% if setting.__t != 'slack' %}d-none{% endif %}" id="slack-input">
                <input class="form-control" type="text" name="notificationGlobal[slackChannels]" placeholder="Slack Channel" value="{{ setting.slackChannels || '' }}">
              </div>
            </fieldset>

            <fieldset class="col-sm-offset-1 col-sm-5">
              <div class="form-group">
                <h3>{{ t('notification_setting.trigger_events') }}</h3>
                <div class="checkbox checkbox-inverse">
                  <input type="checkbox" id="trigger-event-pageCreate" name="notificationGlobal[triggerEvent:pageCreate]" value="pageCreate"
                    {% if setting && (setting.triggerEvents.indexOf('pageCreate') != -1) %}checked{% endif %} />
                  <label for="trigger-event-pageCreate">
                    <span class="label label-success"><i class="icon-doc"></i> CREATE</span> - {{ t('notification_setting.event_pageCreate') }}
                  </label>
                </div>
                <div class="checkbox checkbox-inverse">
                  <input type="checkbox" id="trigger-event-pageEdit" name="notificationGlobal[triggerEvent:pageEdit]" value="pageEdit"
                    {% if setting && (setting.triggerEvents.indexOf('pageEdit') != -1) %}checked{% endif %} />
                  <label for="trigger-event-pageEdit">
                    <span class="label label-warning"><i class="icon-pencil"></i> EDIT</span> - {{ t('notification_setting.event_pageEdit') }}
                  </label>
                </div>
                <div class="checkbox checkbox-inverse">
                  <input type="checkbox" id="trigger-event-pageMove" name="notificationGlobal[triggerEvent:pageMove]" value="pageMove"
                    {% if setting && (setting.triggerEvents.indexOf('pageMove') != -1) %}checked{% endif %} />
                  <label for="trigger-event-pageMove">
                    <span class="label label-warning"><i class="icon-action-redo"></i> MOVE</span> - {{ t('notification_setting.event_pageMove') }}
                  </label>
                </div>
                <div class="checkbox checkbox-inverse">
                  <input type="checkbox" id="trigger-event-pageDelete" name="notificationGlobal[triggerEvent:pageDelete]" value="pageDelete"
                    {% if setting && (setting.triggerEvents.indexOf('pageDelete') != -1) %}checked{% endif %} />
                  <label for="trigger-event-pageDelete">
                    <span class="label label-danger"><i class="icon-fire"></i> DELETE</span> - {{ t('notification_setting.event_pageDelete') }}
                  </label>
                </div>
                <div class="checkbox checkbox-inverse">
                    <input type="checkbox" id="trigger-event-pageLike" name="notificationGlobal[triggerEvent:pageLike]" value="pageLike"
                      {% if setting && (setting.triggerEvents.indexOf('pageLike') != -1) %}checked{% endif %} />
                    <label for="trigger-event-pageLike">
                      <span class="label label-info"><i class="icon-like"></i> LIKE</span> - {{ t('notification_setting.event_pageLike') }}
                    </label>
                  </div>
                <div class="checkbox checkbox-inverse">
                  <input type="checkbox" id="trigger-event-comment" name="notificationGlobal[triggerEvent:comment]" value="comment"
                    {% if setting && (setting.triggerEvents.indexOf('comment') != -1) %}checked{% endif %} />
                  <label for="trigger-event-comment">
                    <span class="label label-default"><i class="icon-fw icon-bubble"></i> POST</span> - {{ t('notification_setting.event_comment') }}
                  </label>
                </div>
              </div>
            </fieldset>

            <div class="col-sm-offset-5 col-sm-12 m-t-20">
              <input type="hidden" name="notificationGlobal[id]" value="{{ setting.id }}">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-primary">
                {% if setting %}
                  {{ t('Update') }}
                {% else %}
                  {{ t('Create') }}
                {% endif %}
              </button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
  $('input[name="notificationGlobal[notifyToType]"]').change(function() {
    var val = $(this).val();
    $('.notify-to-option').addClass('d-none');
    $('#' + val + '-input').removeClass('d-none');
  });

  $('button#global-notificatin-delete').submit(function() {
    alert(123)
  });
</script>
{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}