<!-- start bus notes - Nick -->
<style>
#preNotesLink  {
  color: #195f7d;
  cursor: pointer;
  text-align: center;
  padding: 10px;
}
#preNotesDiv {
  max-width: 879px;
  display: none;
  height: 200px;
  overflow: auto;
}
#todayNotesDiv {
  margin: 6px 19px 10px;
  display: inline-block;
  min-width: 425px !important;
  width: 425px;
  vertical-align: top;
}
#todayNotesDiv table tr td {
  vertical-align: middle;
}
#newNoteDiv {
  margin: 6px 19px 10px;
  text-align: center;
}
#permNoteDiv {
  margin: 6px 9px 10px;
  display: inline-block;
  width: 360px;
  vertical-align: top;
}
#permNoteInner {
  text-align:center;
  margin:10px;
}
</style>
~[if#bus.pref.busnotes_admin~(schoolid)=hide][else#bus]

~[if#s.~(gpv.changesSaved)=true]
<div class="feedback-confirm" style="max-width: 400px;">
  ~[text:nicktech.busnotes.admin.transportpage.Note_Saved]
</div>
[/if#s]
~[if#d.~(gpv.changesSaved)=delete]
<div class="feedback-confirm" style="max-width: 400px;">
  ~[text:nicktech.busnotes.admin.transportpage.Note_Deleted]
</div>
[/if#d]
<div class="box-round" id="todayNotesDiv">
  <h3 style="margin-bottom:0">~[text:nicktech.busnotes.admin.transportpage.Todays_Daily_Bus_Notes]</h3>
  <!-- begin daily bus notes one-many -->
  ~[if#new.pref.busnotes_admin~(schoolid)=read][else#new]
  <div id="newNoteDiv">
    <a class="dialog dockedDialog button" title="~[text:nicktech.busnotes.admin.transportpage.New_Daily_Bus_Note]" href="editBusNote.html?frn=~(frn)&authId=-1&no-store-lp=1">~[text:nicktech.busnotes.admin.transportpage.New]</a>
  </div>
  [/if#new]
  <table class="linkDescList">
    ~[tlist_sql;
    SELECT
    '~[if#new.pref.busnotes_admin~(schoolid)=read]hidden[else#new]normalTD[/if#new]' AS rowClass,
    studentsdcid AS studentsdcid,
    id AS id,
    note AS note
    FROM U_BUS_NOTES
    WHERE studentsdcid = ~(rn)
    AND trunc(sysdate) BETWEEN start_date AND end_date
    ;]
    <tr>
      <td class="~(rowClass)"><a href="editBusNote.html?frn=001~(studentsdcid)&authId=~(id)&no-store-lp=1" class="dialog dockedDialog button" title="~[text:nicktech.busnotes.admin.transportpage.Edit]">~[text:nicktech.busnotes.admin.transportpage.Edit]</a></td>
      <td>~(note;ReplaceCRLFWithBR)</td>
    </tr>
    [/tlist_sql]
  </table>
  <div id="preNotesLink" role="button" tabindex="0" aria-expanded="false" aria-controls="preNotesDiv">
    <span class="preNotesShow">~[text:nicktech.busnotes.admin.transportpage.View_Previous_Notes]</span>
    <span class="preNotesHide" style="display:none;">~[text:nicktech.busnotes.admin.transportpage.Hide_Previous_Notes]</span>
  </div>
</div> <!-- end todayNotesDiv -->
[/if#bus]

<div class="box-round" id="permNoteDiv">
  <h3 style="margin-bottom:0">~[text:nicktech.busnotes.admin.transportpage.Permanent_Bus_Notes]</h3>
  <form action="/~[self.page]?frn=~(frn)&changesSaved=true" method="POST">
      <div id="permNoteInner">
        <!-- Do NOT add maxlength here. PowerSchool's maxlength script takes the textarea
             over (it assigns its own __maxlength_textarea id) and that silently breaks the
             extension-field (EF-) save - the post goes through, no error, value never
             stored. Verified on the sandbox 09/05/2026. Perm_Note is String(400); the
             server enforces the limit. -->
        <textarea name="[students.U_BUS]Perm_Note" cols="45" rows="4"></textarea>
      </div>
      <div class="button-row"><input type="hidden" name="ac" value="prim">
        ~[submitbutton]
      </div>
  </form>
</div><!-- end permNoteDiv -->

<div class="clearfix"></div>

~[if#bus.pref.busnotes_admin~(schoolid)=hide][else#bus]
<div id="preNotesDiv" class="box-round">
  <table class="linkDescList">
    <thead>
      <tr>
        <th class="~[if#new.pref.busnotes_admin~(schoolid)=read]hidden[else#new]normalTH[/if#new]">&nbsp;</th>
        <th>~[text:nicktech.busnotes.admin.transportpage.Start_Date]</th>
        <th>~[text:nicktech.busnotes.admin.transportpage.End_Date]</th>
        <th>~[text:nicktech.busnotes.admin.transportpage.Note]</th>
        <th>~[text:nicktech.busnotes.admin.transportpage.Author]</th>
      </tr>
    </thead>
    <tbody>
      ~[tlist_sql;
      SELECT
      '~[if#new.pref.busnotes_admin~(schoolid)=read]hidden[else#new]normalTD[/if#new]' AS rowClass,
      studentsdcid AS studentsdcid,
      id AS id,
      to_char(start_date,'mm/dd/yyyy') AS start_date,
      to_char(end_date,'mm/dd/yyyy') AS end_date,
      note AS note,
      user_entered AS user_entered
      FROM U_BUS_NOTES
      WHERE studentsdcid = ~(rn)
      ORDER BY start_date desc
      ;nonemessage=<tr><td colspan="100%"><div class="noMessage">~[text:nicktech.busnotes.admin.transportpage.No_Previous_Notes]</div></td></tr>]
        <tr>
          <td class="~(rowClass)"><a href="editBusNote.html?frn=001~(studentsdcid)&authId=~(id)&no-store-lp=1" class="dialog dockedDialog button" title="~[text:nicktech.busnotes.admin.transportpage.Edit]">~[text:nicktech.busnotes.admin.transportpage.Edit]</a></td>
          <td>~(start_date)</td>
          <td>~(end_date)</td>
          <td>~(note;ReplaceCRLFWithBR)</td>
          <td>~(user_entered)</td>
        </tr>
      [/tlist_sql]
    </tbody>
  </table>
</div><!-- end preNotesDiv -->

<script>
  // Labels are rendered as markup and toggled - never build a translated string in JS,
  // an apostrophe in a translation would terminate the literal.
  function togglePreNotes() {
    var nextDiv = $j("div#preNotesDiv");
    nextDiv.slideToggle(400, function() {
      var isOpen = nextDiv.is(':visible');
      $j('#preNotesLink').attr('aria-expanded', isOpen ? 'true' : 'false');
      $j('#preNotesLink .preNotesShow').toggle(!isOpen);
      $j('#preNotesLink .preNotesHide').toggle(isOpen);
    });
  }
  $j('#preNotesLink').on('click', togglePreNotes);
  $j('#preNotesLink').on('keydown', function(e) {
    if (e.which === 13 || e.which === 32) {
      e.preventDefault();
      togglePreNotes();
    }
  });

  // Transient save/delete confirmations fade out. Persistent notices use
  // .feedback-note and are deliberately left alone.
  $j(function() {
    $j('.feedback-confirm').delay(5000).fadeOut(600);
  });
</script>
[/if#bus]
<!-- end bus notes -->
