#? stdtmpl(subsChar = '$', metaChar = '#')
#import "../helpers/global", "../helpers/form", "../helpers/auth", "../models/reminder"
#import "main_template_top.nimf", "main_template_bottom.nimf"
#proc reminderCreateTemplate*(csrfToken: string, fr: FormResult): string =
#let pageTitle = "Create a Reminder"
# result = ""
  ${mainTemplateTop(pageTitle, csrfToken)}
      <h1 class="text-xl">${pageTitle}</h1>
       #if fr.message.len > 0:
          <h2 id="form_message" class="${fr.messageClass}">${fr.message}</h2>
       #end if
      <form id="reminder-create" method="POST" action="${APP_URL}/reminder/create" accept-charset="utf-8">
          <input type="hidden" name="csrf_token" value="${csrfToken}" form="reminder-create"/>
          <label>${fErrorMsg(fr, "title")}
              <span class="text-2xl text-red-500">*</span><span class="help-text" title="This will be used to generate your reminder's url and meta-title and is very important for SEO, so it should ideally start with your main search target phrase for this reminder, and not have more than one search target phrase, nor be any longer than necessary.">Title</span>:
              <input type="text" id="title" name="title" value="${fOldInput(fr, "title")}" form="reminder-create" class="w-2/5" required>
          </label>
          <div class="mt-4">
                <label>${fErrorMsg(fr, "message")}
                    <span class="text-2xl text-red-500">*</span><span class="help-text" title="This will be the body of the notification email, or the XMPP message.">Message</span>:<br>
                    <textarea name="message" form="reminder-create" rows="2" class="w-3/4" required>${fOldInput(fr, "message")}</textarea>
                </label>
            </div>
          <div class="mt-4">
              <span class="text-2xl text-red-500">*</span><label for="notify_via">Notify Via:</label>
              ${fErrorMsg(fr, "notify_via")}
              <label class="ml-1">
                    <input type="radio" name="notify_via" value="email" ${checked(fr, "notify_via", "email")}>
              Email Only</label>
              <label class="ml-1">
                    <input type="radio" name="notify_via" value="xmpp" ${checked(fr, "notify_via", "xmpp")}>
              XMPP Only</label>
              <label class="ml-1">
                    <input type="radio" name="notify_via" value="both" ${checked(fr, "notify_via", "both")}>
              Both</label>
          </div>
          <div class="mt-4">
                <label>${fErrorMsg(fr, "send_date")}
                    <span class="text-2xl text-red-500">*</span>Send Date:&nbsp;
                    <input type="date" id="send_date" name="send_date" value="${fOldInput(fr, "send_date")}">
                </label>
            </div>
            <div class="mt-4">
                ${fErrorMsg(fr, "send_time_hr")}
                ${fErrorMsg(fr, "send_time_min")}
                ${fErrorMsg(fr, "send_time_am_pm")}
                <span class="text-2xl text-red-500">*</span>Send Time:&nbsp;
                <select name="send_time_hr">
                    <option value="" ${selected(fr, "send_time_hr", "")}>hr</option>
                    <option value="1" ${selected(fr, "send_time_hr", "1")}>1</option>
                    <option value="2" ${selected(fr, "send_time_hr", "2")}>2</option>
                    <option value="3" ${selected(fr, "send_time_hr", "3")}>3</option>
                    <option value="4" ${selected(fr, "send_time_hr", "4")}>4</option>
                    <option value="5" ${selected(fr, "send_time_hr", "5")}>5</option>
                    <option value="6" ${selected(fr, "send_time_hr", "6")}>6</option>
                    <option value="7" ${selected(fr, "send_time_hr", "7")}>7</option>
                    <option value="8" ${selected(fr, "send_time_hr", "8")}>8</option>
                    <option value="9" ${selected(fr, "send_time_hr", "9")}>9</option>
                    <option value="10" ${selected(fr, "send_time_hr", "10")}>10</option>
                    <option value="11" ${selected(fr, "send_time_hr", "11")}>11</option>
                    <option value="12" ${selected(fr, "send_time_hr", "12")}>12</option>
                </select>
                <select name="send_time_min">
                    <option value="" ${selected(fr, "send_time_min", "")}>min</option>
                    <option value="0" ${selected(fr, "send_time_min", "0")}>00</option>
                    <option value="15" ${selected(fr, "send_time_min", "15")}>15</option>
                    <option value="30" ${selected(fr, "send_time_min", "30")}>30</option>
                    <option value="45" ${selected(fr, "send_time_min", "45")}>45</option>
                </select>
                <select name="send_time_am_pm">
                    <option value="" ${selected(fr, "send_time_am_pm", "")}>AM/PM</option>
                    <option value="am" ${selected(fr, "send_time_am_pm", "am")}>am</option>
                    <option value="pm" ${selected(fr, "send_time_am_pm", "pm")}>pm</option>
                </select>
            </div>
            <div class="mt-4">
                <label>${fErrorMsg(fr, "repeats")}
                    <span class="text-2xl text-red-500">*</span><span class="help-text" title="Reminders set to repeat will do so at their first opportunity, based on your Repeat settings. If the day of the Repeat hasn't occurred yet for any given (relevant) Repeat increment (week, month, year), you will get a notification on the Send Date and the Repeat Date. If you don't want two notifications during that first increment, you will want to set your Send Date to be what the first Repeat Date would be. For instance, if repeating 'weekly on Thursday' set your Send Date to the upcoming Thursday instead of 'Wednesday', as 'Wednesday' will result in a notification being sent on Wednesday and Thursday'.">Repeats?</span>
                    <input type="checkbox" id="repeats" name="repeats" value="1" ${checked(fr, "repeats", "1")} onclick="showDivIfChecked('repeat_freq', 'repeats')">
                </label>
            </div>
            <div class="mt-4 hidden" id="repeat_freq">
            ${fErrorMsg(fr, "repeat_freq")}
            Every&nbsp;
                <label><input type="radio" id="repeat_freq_day" name="repeat_freq" value="day" ${checked(fr, "repeat_freq", "day")} onclick="hideAllInClassGroup('conditional_divs')"> Day</label>
                <label><input type="radio" id="repeat_freq_week" name="repeat_freq" value="week" ${checked(fr, "repeat_freq", "week")} onclick="showDivFromClassGroupIfChecked('weekly_on', 'repeat_freq_week', 'conditional_divs')"> Week</label>
                <label><input type="radio" id="repeat_freq_month" name="repeat_freq" value="month" ${checked(fr, "repeat_freq", "month")} onclick="showDivFromClassGroupIfChecked('monthly_on', 'repeat_freq_month', 'conditional_divs')"> Month</label>
                <label><input type="radio" id="repeat_freq_year" name="repeat_freq" value="year" ${checked(fr, "repeat_freq", "year")} onclick="showDivFromClassGroupIfChecked('yearly_on', 'repeat_freq_year', 'conditional_divs')"> Year</label>
            </div>
            <div class="mt-4 hidden conditional_divs" id="weekly_on">
            ${fErrorMsg(fr, "weekly_on")}
                <label>On:
                    <select name="weekly_on">
                        <option value="" ${selected(fr, "weekly_on", "")}>? Weekday</option>
                        <option value="Monday" ${selected(fr, "weekly_on", "Monday")}>Monday</option>
                        <option value="Tuesday" ${selected(fr, "weekly_on", "Tuesday")}>Tuesday</option>
                        <option value="Wednesday" ${selected(fr, "weekly_on", "Wednesday")}>Wednesday</option>
                        <option value="Thursday" ${selected(fr, "weekly_on", "Thursday")}>Thursday</option>
                        <option value="Friday" ${selected(fr, "weekly_on", "Friday")}>Friday</option>
                        <option value="Saturday" ${selected(fr, "weekly_on", "Saturday")}>Saturday</option>
                        <option value="Sunday" ${selected(fr, "weekly_on", "Sunday")}>Sunday</option>
                    </select>
                </label>
            </div>
            <div class="mt-4 hidden conditional_divs" id="monthly_on">
            ${fErrorMsg(fr, "monthly_on_day")}
                <label>On the:
                    <select id="monthly_on_day" name="monthly_on_day" onchange="clear2ndMonthlyInputs()">
                        <option value="" ${selected(fr, "monthly_on_day", "")}>? Day of Month</option>
                        <option value="1" ${selected(fr, "monthly_on_day", "1")}>1rst</option>
                        <option value="2" ${selected(fr, "monthly_on_day", "2")}>2nd</option>
                        <option value="3" ${selected(fr, "monthly_on_day", "3")}>3rd</option>
                        <option value="4" ${selected(fr, "monthly_on_day", "4")}>4th</option>
                        <option value="5" ${selected(fr, "monthly_on_day", "5")}>5th</option>
                        <option value="6" ${selected(fr, "monthly_on_day", "6")}>6th</option>
                        <option value="7" ${selected(fr, "monthly_on_day", "7")}>7th</option>
                        <option value="8" ${selected(fr, "monthly_on_day", "8")}>8th</option>
                        <option value="9" ${selected(fr, "monthly_on_day", "9")}>9th</option>
                        <option value="10" ${selected(fr, "monthly_on_day", "10")}>10th</option>
                        <option value="11" ${selected(fr, "monthly_on_day", "11")}>11th</option>
                        <option value="12" ${selected(fr, "monthly_on_day", "12")}>12th</option>
                        <option value="13" ${selected(fr, "monthly_on_day", "13")}>13th</option>
                        <option value="14" ${selected(fr, "monthly_on_day", "14")}>14th</option>
                        <option value="15" ${selected(fr, "monthly_on_day", "15")}>15th</option>
                        <option value="16" ${selected(fr, "monthly_on_day", "16")}>16th</option>
                        <option value="17" ${selected(fr, "monthly_on_day", "17")}>17th</option>
                        <option value="18" ${selected(fr, "monthly_on_day", "18")}>18th</option>
                        <option value="19" ${selected(fr, "monthly_on_day", "19")}>19th</option>
                        <option value="20" ${selected(fr, "monthly_on_day", "20")}>20th</option>
                        <option value="21" ${selected(fr, "monthly_on_day", "21")}>21rst</option>
                        <option value="22" ${selected(fr, "monthly_on_day", "22")}>22nd</option>
                        <option value="23" ${selected(fr, "monthly_on_day", "23")}>23rd</option>
                        <option value="24" ${selected(fr, "monthly_on_day", "24")}>24th</option>
                        <option value="25" ${selected(fr, "monthly_on_day", "25")}>25th</option>
                        <option value="26" ${selected(fr, "monthly_on_day", "26")}>26th</option>
                        <option value="27" ${selected(fr, "monthly_on_day", "27")}>27th</option>
                        <option value="28" ${selected(fr, "monthly_on_day", "28")}>28th</option>
                        <option value="29" ${selected(fr, "monthly_on_day", "29")}>29th</option>
                        <option value="30" ${selected(fr, "monthly_on_day", "30")}>30th</option>
                        <option value="31" ${selected(fr, "monthly_on_day", "31")}>31rst</option>
                    </select> day
                </label>
                <div class="mt-3.5">Or...</div>
                ${fErrorMsg(fr, "monthly_on_week")}
                ${fErrorMsg(fr, "monthly_on_weekday")}
                <label>On the:
                     <select id="monthly_on_week" name="monthly_on_week" onchange="clear1rstMonthlyInputs()">
                        <option value="" ${selected(fr, "monthly_on_week", "")}>? Week</option>
                        <option value="1" ${selected(fr, "monthly_on_week", "1")}>1rst</option>
                        <option value="2" ${selected(fr, "monthly_on_week", "2")}>2nd</option>
                        <option value="3" ${selected(fr, "monthly_on_week", "3")}>3rd</option>
                        <option value="last" ${selected(fr, "monthly_on_week", "last")}>Last</option>
                     </select>&nbsp;
                     <select id="monthly_on_weekday" name="monthly_on_weekday" onchange="clear1rstMonthlyInputs()">
                        <option value="" ${selected(fr, "monthly_on_weekday", "")}>? Weekday</option>
                        <option value="Monday" ${selected(fr, "monthly_on_weekday", "Monday")}>Monday</option>
                        <option value="Tuesday" ${selected(fr, "monthly_on_weekday", "Tuesday")}>Tuesday</option>
                        <option value="Wednesday" ${selected(fr, "monthly_on_weekday", "Wednesday")}>Wednesday</option>
                        <option value="Thursday" ${selected(fr, "monthly_on_weekday", "Thursday")}>Thursday</option>
                        <option value="Friday" ${selected(fr, "monthly_on_weekday", "Friday")}>Friday</option>
                        <option value="Saturday" ${selected(fr, "monthly_on_weekday", "Saturday")}>Saturday</option>
                        <option value="Sunday" ${selected(fr, "monthly_on_weekday", "Sunday")}>Sunday</option>
                     </select>
                </label>
            </div>
            <div class="mt-4 hidden conditional_divs" id="yearly_on">
            ${fErrorMsg(fr, "yearly_on_month")}
            ${fErrorMsg(fr, "yearly_on_day")}
                <label>On:
                    <select id="yearly_on_month" name="yearly_on_month" onchange="clear2ndYearlyInputs()">
                    <option value="" ${selected(fr, "yearly_on_month", "")}>? Month</option>
                    <option value="January" ${selected(fr, "yearly_on_month", "January")}>January</option>
                    <option value="Febuary" ${selected(fr, "yearly_on_month", "Febuary")}>Febuary</option>
                    <option value="March" ${selected(fr, "yearly_on_month", "March")}>March</option>
                    <option value="April" ${selected(fr, "yearly_on_month", "April")}>April</option>
                    <option value="May" ${selected(fr, "yearly_on_month", "May")}>May</option>
                    <option value="June" ${selected(fr, "yearly_on_month", "June")}>June</option>
                    <option value="July" ${selected(fr, "yearly_on_month", "July")}>July</option>
                    <option value="August" ${selected(fr, "yearly_on_month", "August")}>August</option>
                    <option value="September" ${selected(fr, "yearly_on_month", "September")}>September</option>
                    <option value="October" ${selected(fr, "yearly_on_month", "October")}>October</option>
                    <option value="November" ${selected(fr, "yearly_on_month", "November")}>November</option>
                    <option value="December" ${selected(fr, "yearly_on_month", "December")}>December</option>
                    </select>&nbsp;
                    <select id="yearly_on_day" name="yearly_on_day" onchange="clear2ndYearlyInputs()">
                        <option value="" ${selected(fr, "yearly_on_day", "")}>? Day</option>
                        <option value="1" ${selected(fr, "yearly_on_day", "1")}>1rst</option>
                        <option value="2" ${selected(fr, "yearly_on_day", "2")}>2nd</option>
                        <option value="3" ${selected(fr, "yearly_on_day", "3")}>3rd</option>
                        <option value="4" ${selected(fr, "yearly_on_day", "4")}>4th</option>
                        <option value="5" ${selected(fr, "yearly_on_day", "5")}>5th</option>
                        <option value="6" ${selected(fr, "yearly_on_day", "6")}>6th</option>
                        <option value="7" ${selected(fr, "yearly_on_day", "7")}>7th</option>
                        <option value="8" ${selected(fr, "yearly_on_day", "8")}>8th</option>
                        <option value="9" ${selected(fr, "yearly_on_day", "9")}>9th</option>
                        <option value="10" ${selected(fr, "yearly_on_day", "10")}>10th</option>
                        <option value="11" ${selected(fr, "yearly_on_day", "11")}>11th</option>
                        <option value="12" ${selected(fr, "yearly_on_day", "12")}>12th</option>
                        <option value="13" ${selected(fr, "yearly_on_day", "13")}>13th</option>
                        <option value="14" ${selected(fr, "yearly_on_day", "14")}>14th</option>
                        <option value="15" ${selected(fr, "yearly_on_day", "15")}>15th</option>
                        <option value="16" ${selected(fr, "yearly_on_day", "16")}>16th</option>
                        <option value="17" ${selected(fr, "yearly_on_day", "17")}>17th</option>
                        <option value="18" ${selected(fr, "yearly_on_day", "18")}>18th</option>
                        <option value="19" ${selected(fr, "yearly_on_day", "19")}>19th</option>
                        <option value="20" ${selected(fr, "yearly_on_day", "20")}>20th</option>
                        <option value="21" ${selected(fr, "yearly_on_day", "21")}>21rst</option>
                        <option value="22" ${selected(fr, "yearly_on_day", "22")}>22nd</option>
                        <option value="23" ${selected(fr, "yearly_on_day", "23")}>23rd</option>
                        <option value="24" ${selected(fr, "yearly_on_day", "24")}>24th</option>
                        <option value="25" ${selected(fr, "yearly_on_day", "25")}>25th</option>
                        <option value="26" ${selected(fr, "yearly_on_day", "26")}>26th</option>
                        <option value="27" ${selected(fr, "yearly_on_day", "27")}>27th</option>
                        <option value="28" ${selected(fr, "yearly_on_day", "28")}>28th</option>
                        <option value="29" ${selected(fr, "yearly_on_day", "29")}>29th</option>
                        <option value="30" ${selected(fr, "yearly_on_day", "30")}>30th</option>
                        <option value="31" ${selected(fr, "yearly_on_day", "31")}>31rst</option>
                    </select>
                </label>
                <div class="mt-3.5">or...</div>
                ${fErrorMsg(fr, "yearly_on_week")}
                ${fErrorMsg(fr, "yearly_on_weekday")}
                ${fErrorMsg(fr, "yearly_on_month2")}
                <label>On the:
                    <select id="yearly_on_week" name="yearly_on_week" onchange="clear1rstYearlyInputs()">
                        <option value="" ${selected(fr, "yearly_on_week", "")}>? Week</option>
                        <option value="1" ${selected(fr, "yearly_on_week", "1")}>1rst</option>
                        <option value="2" ${selected(fr, "yearly_on_week", "2")}>2nd</option>
                        <option value="3" ${selected(fr, "yearly_on_week", "3")}>3rd</option>
                        <option value="last" ${selected(fr, "yearly_on_week", "last")}>Last</option>
                    </select>
                    <select id="yearly_on_weekday" name="yearly_on_weekday" onchange="clear1rstYearlyInputs()">
                        <option value="" ${selected(fr, "yearly_on_weekday", "")}>? Weekday</option>
                        <option value="Monday" ${selected(fr, "yearly_on_weekday", "Monday")}>Monday</option>
                        <option value="Tuesday" ${selected(fr, "yearly_on_weekday", "Tuesday")}>Tuesday</option>
                        <option value="Wednesday" ${selected(fr, "yearly_on_weekday", "Wednesday")}>Wednesday</option>
                        <option value="Thursday" ${selected(fr, "yearly_on_weekday", "Thursday")}>Thursday</option>
                        <option value="Friday" ${selected(fr, "yearly_on_weekday", "Friday")}>Friday</option>
                        <option value="Saturday" ${selected(fr, "yearly_on_weekday", "Saturday")}>Saturday</option>
                        <option value="Sunday" ${selected(fr, "yearly_on_weekday", "Sunday")}>Sunday</option>
                    </select>
                    <span> of </span>
                    <select id="yearly_on_month2" name="yearly_on_month2" onchange="clear1rstYearlyInputs()">
                        <option value="" ${selected(fr, "yearly_on_month2", "")}>? Month</option>
                        <option value="January" ${selected(fr, "yearly_on_month2", "January")}>January</option>
                        <option value="Febuary" ${selected(fr, "yearly_on_month2", "Febuary")}>Febuary</option>
                        <option value="March" ${selected(fr, "yearly_on_month2", "March")}>March</option>
                        <option value="April" ${selected(fr, "yearly_on_month2", "April")}>April</option>
                        <option value="May" ${selected(fr, "yearly_on_month2", "May")}>May</option>
                        <option value="June" ${selected(fr, "yearly_on_month2", "June")}>June</option>
                        <option value="July" ${selected(fr, "yearly_on_month2", "July")}>July</option>
                        <option value="August" ${selected(fr, "yearly_on_month2", "August")}>August</option>
                        <option value="September" ${selected(fr, "yearly_on_month2", "September")}>September</option>
                        <option value="October" ${selected(fr, "yearly_on_month2", "October")}>October</option>
                        <option value="November" ${selected(fr, "yearly_on_month2", "November")}>November</option>
                        <option value="December" ${selected(fr, "yearly_on_month2", "December")}>December</option>
                    </select>
                </label>
            </div>
          <br>
          <div class="text-end">
              <button class="btn-grn mt-3 mr-4" type="submit" form="reminder-create">Save</button>
          </div>
      </form><br>
       <br>
  ${mainTemplateBottom()}
  <div class="page-js">
  <script>
  
  var monthlyOnDay = document.getElementById("monthly_on_day")
  var monthlyOnWeek = document.getElementById("monthly_on_week")
  var monthlyOnWeekday = document.getElementById("monthly_on_weekday")
  
  function clear2ndMonthlyInputs() {  
        if (monthlyOnDay.value != "") {
              monthlyOnWeek.value = ""
              monthlyOnWeekday.value = ""
        }  
  }
  
  function clear1rstMonthlyInputs() {  
        if ((monthlyOnWeek.value != "") || (monthlyOnWeekday.value != "")) {
              monthlyOnDay.value = ""
        }  
  }
  
  var yearlyOnMonth = document.getElementById("yearly_on_month") 
  var yearlyOnDay = document.getElementById("yearly_on_day")
  var yearlyOnWeek = document.getElementById("yearly_on_week")
  var yearlyOnWeekday = document.getElementById("yearly_on_weekday")
  var yearlyOnMonth2 = document.getElementById("yearly_on_month2")  
  
  function clear2ndYearlyInputs() {  
        if ((yearlyOnMonth.value != "") || (yearlyOnDay.value != "")) {
              yearlyOnWeek.value = ""
              yearlyOnWeekday.value = ""
              yearlyOnMonth2.value = ""            
        }  
  }
  
  function clear1rstYearlyInputs() {  
        if ((yearlyOnWeek.value != "") || (yearlyOnWeekday.value != "") || (yearlyOnMonth2.value != "")) {
              yearlyOnMonth.value = ""
              yearlyOnDay.value = ""
        }  
  }

function useTitleForSubject() {
        let title = document.getElementById("title")
        let subject = document.getElementById("subject")
        subject.value = title.value
    }
    function showDivIfChecked(divId, elId) {
        let div = document.getElementById(divId);
        let el = document.getElementById(elId);
        if (el.checked == true) {
            div.classList.remove("hidden");
        } else {
            div.classList.add("hidden");
        }
    }
    function hideAllInClassGroup(classGroup) {
        let allDivs = document.getElementsByClassName(classGroup)
        Array.from(allDivs).forEach(allDiv => {
            allDiv.classList.add("hidden");
        });
    }
    function showDivFromClassGroupIfChecked(divId, elId, classGroup) {
        let div = document.getElementById(divId);
        let el = document.getElementById(elId);
        let allDivs = document.getElementsByClassName(classGroup)
        if (el.checked == true) {
            div.classList.remove("hidden");
            Array.from(allDivs).forEach(allDiv => {
                if (allDiv.id != divId) {
                    allDiv.classList.add("hidden");
                }
            });
        }
    }
    showDivIfChecked('repeat_freq', 'repeats')
    let dayRadio = document.getElementById("repeat_freq_day")
    if (dayRadio.checked == true) {
        hideAllInClassGroup("conditional_divs")
    }
    showDivFromClassGroupIfChecked('weekly_on', 'repeat_freq_week', 'conditional_divs')
    showDivFromClassGroupIfChecked('monthly_on', 'repeat_freq_month', 'conditional_divs')
    showDivFromClassGroupIfChecked('yearly_on', 'repeat_freq_year', 'conditional_divs')
</script>
  </div>
#end proc