[%# This Source Code Form is subject to the terms of the Mozilla Public
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
  #
  # This Source Code Form is "Incompatible With Secondary Licenses", as
  # defined by the Mozilla Public License, v. 2.0.
  #%]

[% PROCESS global/variables.none.tmpl %]

[% PROCESS global/header.html.tmpl
   title = "Mozilla Reps Budget Request Form"
   generate_api_token = 1
   style_urls = [ 'extensions/REMO/web/styles/moz_reps.css' ]
   javascript_urls = [ 'extensions/REMO/web/js/form_validate.js',
                       'js/field.js' ]
%]

[% IF user.in_group("mozilla-reps") %]

<p>These requests will only be visible to the person who submitted the request,
any persons designated in the CC line, and authorized members of the Mozilla
Rep team.</p>

<script [% script_nonce FILTER none %]>
function trySubmit() {
  var firstname = document.getElementById('firstname').value;
  var lastname = document.getElementById('lastname').value;
  var eventpage = document.getElementById('eventpage').value;
  var shortdesc = 'Budget Request - ' + firstname + ' ' + lastname + ' - ' + eventpage;
  document.getElementById('short_desc').value = shortdesc;
  document.getElementById('cc').value = document.getElementById('mentoremail').value;
  return true;
}

function validateAndSubmit() {
  var alert_text = '';
  if(!isFilledOut('firstname')) alert_text += "Please enter your first name\n";
  if(!isFilledOut('lastname')) alert_text += "Please enter your last name\n";
  if(!isFilledOut('profilepage')) alert_text += "Please enter a Mozilla Reps profile page.\n";
  if(!isFilledOut('eventpage')) alert_text += "Please enter an event page address.\n";
  if(!isFilledOut('cf_due_date')) alert_text += "Please enter an event date.\n";
  if(!isFilledOut('functional_goals')) alert_text += "Please list functional goals the event will be supporting.\n";
  if(!isFilledOut('event_goals')) alert_text += "Please list event goals and how it will be measured.\n";
  if(!isFilledOut('budget_reason')) alert_text += "Please enter a reason the budget is needed.\n";
  if(!isFilledOut('agenda_link')) alert_text += "Please enter a link to the agenda describing what you are doing.\n";
  if(!isFilledOut('mentoremail')) alert_text += "Please enter a valid [% terms.Bugzilla %] email for mentor.\n";
  if(!isFilledOut('country')) alert_text += "Please enter a valid value for country.\n";
  if(!isFilledOut('budgettotal')) alert_text += "Please enter the total budget for the event.\n";
  if(!isFilledOut('service1') || !isFilledOut('cost1')) alert_text += "Please enter at least one service and cost value.\n";

  //Everything required is filled out..try to submit the form!
  if(alert_text == '') {
    return trySubmit();
  }

  //alert text, stay here on the page
  alert(alert_text);
  return false;
}
</script>

<h1>Mozilla Reps - Budget Request Form</h1>

<h3>IMPORTANT: Please make sure you read and comply with the <a href="https://wiki.mozilla.org/ReMo/SOPs/Budget">Budget SOP</a>
  before filling this form. Requests not following the procedure will be automatically rejected.</h3>

<p>
  If your request is Community IT related please file it
  <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Reps;component=Community%20IT%20Requests">here</a>.
</p>

<p>
  <span class="required_star">*</span> - <span class="required_explanation">Required Fields</span>
</p>

<form method="post" action="[% basepath FILTER none %]post_bug.cgi" id="swagRequestForm" enctype="multipart/form-data"
      onSubmit="return validateAndSubmit();">

  <input type="hidden" name="filed_via" value="custom_form">
  <input type="hidden" name="format" value="remo-budget">
  <input type="hidden" name="created-format" value="remo-budget">
  <input type="hidden" name="bug_type" value="task">
  <input type="hidden" name="product" value="Mozilla Reps">
  <input type="hidden" name="component" value="Budget Requests">
  <input type="hidden" name="rep_platform" value="All">
  <input type="hidden" name="op_sys" value="Other">
  <input type="hidden" name="version" value="unspecified">
  <input type="hidden" name="short_desc" id="short_desc" value="">
  <input type="hidden" name="cc" id="cc" value="">
  <input type="hidden" name="groups" value="mozilla-reps">
  <input type="hidden" name="token" value="[% token FILTER html %]">

<table id="reps-form">

<tr class="odd">
  <th class="field_label required">First Name:</th>
  <td>
    <input type="text" name="firstname" id="firstname" value="" size="40" placeholder="John">
  </td>
</tr>

<tr class="even">
  <th class="field_label required">Last Name:</th>
  <td>
    <input type="text" name="lastname" id="lastname" value="" size="40" placeholder="Doe">
  </td>
</tr>

<tr class="odd">
  <th class="field_label required">Mozilla Reps Profile Page:</th>
  <td>
    <input type="text" name="profilepage" id="profilepage"
           value="" size="40" placeholder="https://reps.mozilla.org/u/JohnDoe">
  </td>
</tr>

<tr class="even">
  <th class="field_label required">Event Page:</th>
  <td>
    <input type="text" name="eventpage" id="eventpage"
           value="" size="40" placeholder="https://reps.mozilla.org/e/TestEvent">
  </td>
</tr>

<tr class="odd">
  <th class="field_label required">Event Date:</th>
  <td>
    <input name="cf_due_date" size="20" id="cf_due_date" value=""
           onchange="updateCalendarFromField(this)">
    <button type="button" class="calendar_button"
            id="button_calendar_cf_due_date"
            onclick="showCalendar('cf_due_date')">
      <span>Calendar</span>
    </button>
    <div id="con_calendar_cf_due_date"></div>
    <script [% script_nonce FILTER none %]>
      createCalendar('cf_due_date')
    </script>
  </td>
</tr>

<tr class="even">
  <th class="field_label required">
    Which functional area goals is this supporting and how?
  </th>
  <td>
    <textarea id="functional_goals" name="functional_goals" rows="5" cols="50"
              placeholder="Describe what specific goals from the functional area are you supporting and how this budget is helping them be successful. Contact functional area responsible if needed."></textarea>
  </td>
</tr>

<tr class="odd">
  <th class="field_label required">
    What are the event/initiative goals? What's success?<br>
    How are you going to measure it?
  </th>
  <td>
    <textarea id="event_goals" name="event_goals" rows="5" cols="50"
              placeholder="Please, detail what are the goals for this initiative and how are you going to measure their success once the initiative/event is over."></textarea>
  </td>
</tr>

<tr class="even">
  <th class="field_label required">
    Why this budget is needed for the success of the<br>initiative/event?
  </th>
  <td>
    <textarea id="budget_reason" name="budget_reason" rows="5" cols="50"
              placeholder="Explain why this specific budget is a need in order to accomplish the goals you have previously described"></textarea>
  </td>
</tr>

<tr class="odd">
  <th class="field_label required">
    Link to the detailed agenda describing what are you<br>
    doing (activities to support the goals and schedule)
  </th>
  <td>
    <input type="text" id="agenda_link" name="agenda_link" size="40"
           placeholder="https://public.etherpad.mozilla.org/p/my-event">
  </td>
</tr>

<tr class="even">
  <th class="field_label required">[% terms.Bugzilla %] Email of Your Mentor:</th>
  <td>
    [% INCLUDE global/userselect.html.tmpl
       id    => "mentoremail"
       name  => "mentoremail"
       value => ""
       size  => 40
    %]
  </td>
</tr>

<tr class="odd">
  <th class="field_label">PayPal Account Email:</th>
  <td>
    <input type="text" name="paypal" id="paypal"
           value="" size="40" placeholder=""><br>
    <span style="font-size: var(--font-size-small);">
      * Currently, you CANNOT make payments using other online payment services.</span>
  </td>
</tr>

<tr class="even">
  <th class="field_label required">Country You Reside:</th>
  <td>
    <input type="text" name="country" id="country"
           value="" size="40" placeholder="USA">
  </td>
</tr>

<tr class="odd">
  <th class="field_label">Is advance payment needed?</th>
  <td>
    <input type="checkbox" name="advancepayment" id="advancepayment" value="1">
  </td>
</tr>

<tr class="even">
  <td><!--spacer-->&nbsp;</td>
  <td><!--spacer-->&nbsp;</td>
</tr>

<tr class="odd">
  <th colspan="2" class="field_label">Budget Request:</th>
</tr>

<tr class="odd">
  <th class="field_label required">Total amount requested in $USD:</th>
  <td>
    <input type="text" name="budgettotal" id="budgettotal" value="" size="40">
  </td>
 </tr>

<tr class="odd">
  <th colspan="2" class="field_label">
    Costs per service:</th>
</tr>
<tr class="odd">
  <td colspan="2">
    Please identify which costs are optional for the success of the event by checking <strong>Optional</strong>.
  </td>
</tr>

<tr class="odd">
  <td colspan="2">
    <table>
    <tr>
      <td></td>
      <td></td>
      <th>Service</th>
      <th>Cost</th>
      <th>Optional</th>
    </tr>
    <tr>
      <th class="required">&nbsp;</th>
      <th class="field_label">1:</th>
      <td><input type="text" id="service1" name="service1" size="30"></td>
      <td><input type="text" id="cost1" name="cost1" size="30"></td>
      <td><input type="checkbox" id="service1_optional" name="service1_optional"></td>
    </tr>
    <tr>
      <td></td>
      <th class="field_label">2:</th>
      <td><input type="text" id="service2" name="service2" size="30"></td>
      <td><input type="text" id="cost2" name="cost2" size="30"></td>
      <td><input type="checkbox" id="service2_optional" name="service2_optional"></td>
    </tr>
    <tr>
      <td></td>
      <th class="field_label">3:</th>
      <td><input type="text" id="service3" name="service3" size="30"></td>
      <td><input type="text" id="cost3" name="cost3" size="30"></td>
      <td><input type="checkbox" id="service3_optional" name="service3_optional"></td>
    </tr>
    <tr>
      <td></td>
      <th class="field_lable">4:</th>
      <td><input type="text" id="service4" name="service4" size="30"></td>
      <td><input type="text" id="cost4" name="cost4" size="30"></td>
      <td><input type="checkbox" id="service4_optional" name="service4_optional"></td>
    </tr>
    <tr>
      <td></td>
      <th class="field_lable">5:</th>
      <td><input type="text" id="service5" name="service5" size="30"></td>
      <td><input type="text" id="cost5" name="cost5" size="30"></td>
      <td><input type="checkbox" id="service5_optional" name="service5_optional"></td>
    </tr>
    </table>
  </td>
</tr>

<tr class="odd">
  <th colspan="2" class="field_label">Additional costs:</th>
</tr>

<tr class="odd">
  <td colspan="2">
    <textarea id="costadditional" name="costadditional" rows="5" cols="50"></textarea><br>
    Use the <a href="https://docs.google.com/spreadsheets/u/1/d/12FDeW3Qd5M2Mfpr8e7edCfXcUtqHP3lh3xwSln8w4G4/edit?usp=drive_web">breakdown template doc</a>
    and attach/link it from this [% terms.bug  %] in order to identify all individual costs and who is this budget covering.
  </td>
</tr>

<tr class="even">
  <td>&nbsp;</td>
  <td align="right">
    <input type="submit" id="commit" value="Submit Request">
  </td>
</tr>

</table>

</form>

<p style="font-weight:bold;">
  Budget requests received less than 3 weeks before the targeted launch date of the
  event/activity in question will automatically be rejected  (exceptions can be made
  but only with council approval). This 3-week  “buffer” guarantees that each budget
  request undergoes the same thorough selection process.
</p>

<p>
  Thanks for contacting us.
</p>

[% ELSE %]
  <p>Sorry, you do not have access to this page.</p>
[% END %]

[% PROCESS global/footer.html.tmpl %]
