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

  {% block head %}
  {{super()}}
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
  <meta name="theme-color" content="">
  <script src="https://cdn.tiny.cloud/1/{{MCE_API_KEY}}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script></head>
  {% endblock %}
  {% block app_content %}
<div class="card">
    <div class="card-body">
        <h1 class="h3 mb-3 fw-normal">🍪CookieMailer</h1>
        <label for="recipients">To: </label>
        <br/>
        <select class="form-control" id="recipients" name="recipients">
            <option value="admin">Test Email (SysAdmin)</option>
            <option value="org">Test Email (Organizers)</option>
            <!-- <option value="wpi">WPI Only</option> -->
            <option value="all">All Participants ({{NUM_HACKERS}})</option>
        </select>
        <br/>
        <label for="subject">Subject: </label>
        <br/>
        <input class="form-control" id="subject" name="subject" width="100%"
        type="text" value="GoatHacks -- " />
        <br/>
        <br/>
        <textarea id="content" name="content">
          Message
          <br/>
          <br/>
          Best,<br/>
          <b>GoatHacks Team</b><br/>
          <i><a href="mailto:hack@wpi.edu">hack@wpi.edu</a></i><br/>
          <img height="75px" width="75px" src="{{url_for('static', filename='img/favicon.png')}}">
        </textarea>
        <br/>
        <br/>
        <input class="btn btn-primary" type="button" onClick="send()" value="Send"/>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript">
  window.onload = function(){
    tinymce.init({
        selector: '#content',
        plugins: 'advlist,link'
    });

    setTimeout(function(){
      document.getElementById("loader").remove();
    },1000);
  };

  function send() {
    let rec = document.getElementById("recipients").value;
    let subject = document.getElementById("subject").value;
    let text = tinyMCE.activeEditor.getContent({ format: 'text' });
    let html = tinyMCE.activeEditor.getContent({ format: 'html' });

    let body = {
      "recipients": rec,
      "subject": subject,
      "text": text,
      "html": html
    }

    console.log("Sending Email:"+JSON.stringify(body))

    const headers = [
        ["Content-Type", "application/json"],
    ];

    if((rec != "all" && window.confirm("Send test email?")) || (rec == "all" && window.confirm("Send email to {{NUM_HACKERS}} recipients?"))) {
        console.log(`Sending email to ${rec}`)
      fetch('/admin/send', {method: 'POST', body: JSON.stringify(body), headers: headers}).then(async (res) => {
        window.alert(await res.text());
      }).catch((err) => {
        window.alert("Error sending message - see console for details");
        console.log(err);
      });
    } else {
      window.alert("Nothing was sent");
    }

    // fetch('/send', {method: 'POST', body: JSON.stringify(body), headers: headers}).then(async (res) => {
    //   alert("Message sent");
    //   document.body.innerHTML = await res.text()
    // }).catch((err) => {
    //   alert("Error sending message");
    //   document.body.innerHTML = err;
    // })
  }
  </script>
</div>
</div>
{% endblock %}