<style>
	.start_date {
		width:90px;
	}
	#note_end_date + img,
	#note_end_date + img + span {
		display:none;
	}
	#deleteNoteRow {
		border-top:1px solid #ddd; margin-top:20px; padding-top:15px; text-align:right;
	}
	#deleteNoteBtn {
		background:none; border:1px solid #c0392b; border-radius:3px; color:#c0392b;
		cursor:pointer; font-size:11px; font-weight:normal; margin-right:10px; padding:3px 10px;
	}
	#deleteNoteBtn:hover {
		background:#c0392b; color:#fff;
	}
</style>
~[if#hdr.~(gpv.authId)=-1]
<h2>~[text:nicktech.busnotes.admin.editpage.Daily_Bus_Note]</h2>
[else#hdr]
<h2>~[text:nicktech.busnotes.teachers.editpage.Edit_Bus_Note]</h2>
[/if#hdr]
<form action="~[if#admin.~[directory]=admin]/admin/students/transportation.html?frn=~(frn)&changesSaved=true[else#admin]busnotes.html?sectionid=~(gpv.sectionid)&changesSaved=true[/if#admin]" method="POST" id="editNoteForm">
    ~[DirectTable.Select:U_BUS_NOTES;id:~(gpv.authId)]
    <input type="hidden" name="STUDENTS.DCID" value="~(rn)">
    <div class="fluid-form">
        <div>
            <div>
                <label>~[text:nicktech.busnotes.admin.editpage.Note]</label>
                <!-- maxlength is safe here: this field saves through DirectTable (CF- names),
                     not the extension-field EF- path that it breaks on the Perm_Note textarea.
                     Verified saving on the sandbox 09/05/2026. -->
                <textarea name="[U_BUS_NOTES]note" id="note" rows="3" cols="40" maxlength="500" class="required"></textarea>
            </div>
        </div>
        <div>
            <div>
                <label>~[text:nicktech.busnotes.admin.editpage.Number_of_Days]</label>
                <select name="[U_BUS_NOTES]no_days" id="no_days" value="" onChange="changeEnd();">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                </select>
            </div>
        </div>
        <div>
            <div>
                <label>~[text:nicktech.busnotes.admin.transportpage.Start_Date]</label>
                <input type="text" name="[U_BUS_NOTES]start_date" size="12" value="" class="start_date required" id="note_start_date" onChange="changeEnd();">
            </div>
        </div>
        <div>
            <div>
                <label>~[text:nicktech.busnotes.admin.transportpage.End_Date]</label>
                <input type="text" name="[U_BUS_NOTES]end_date" size="12" value="" class="end_date" id="note_end_date" readonly>
                <input type="hidden" name="[U_BUS_NOTES]user_entered" value="" class="user_entered">
            </div>
        </div>
    </div>
    <div class="button_row">
        <input type="hidden" name="ac" value="~[if#admin.~[directory]=admin]prim[else#admin]webAsmt[/if#admin]"/>~[submitbutton]
    </div>
</form>
~[if#del.~(gpv.authId)=-1][else#del]
<div id="deleteNoteRow">
    <form action="~[if#admin.~[directory]=admin]/admin/students/transportation.html?frn=~(frn)&changesSaved=delete[else#admin]busnotes.html?sectionid=~(gpv.sectionid)&changesSaved=delete[/if#admin]" method="post">
        <input type="hidden" name="STUDENTS.DCID" value="~(rn)">
        <input type="hidden" name="ac" value="~[if#admin.~[directory]=admin]prim[else#admin]webAsmt[/if#admin]"/>
        <input type="hidden" name="DC-Students:~(rn).U_BUS.U_BUS_NOTES:~(gpv.authId)"/>
        <button id="deleteNoteBtn" class="confirm">~[text:nicktech.busnotes.admin.transportpage.Delete]</button>
    </form>
</div>
[/if#del]
<script>
	// Date order is whatever this PowerSchool instance is configured for - never assume mm/dd/yyyy.
	var busNoteDateFormat = '~[dateformat]';
	var busNoteSegments = (busNoteDateFormat.toLowerCase().match(/[a-z]+/g) || []);
	var busNoteSeparator = (busNoteDateFormat.match(/[^a-zA-Z]/) || ['/'])[0];

	if (busNoteSegments.length !== 3) {
		busNoteSegments = ['mm', 'dd', 'yyyy'];
		busNoteSeparator = '/';
	}

	function busNoteYearSegment() {
		for (var i = 0; i < busNoteSegments.length; i++) {
			if (busNoteSegments[i].charAt(0) === 'y') {
				return busNoteSegments[i];
			}
		}
		return 'yyyy';
	}

	function changeEnd() {
		var endField = document.getElementById('note_end_date');
		var nums = (document.getElementById('note_start_date').value.match(/\d+/g) || []);

		if (nums.length < 3) {
			endField.value = '';
			return;
		}

		// Map each digit group onto its segment (m / d / y) by position in the configured format.
		var parts = {};
		for (var i = 0; i < 3; i++) {
			parts[busNoteSegments[i].charAt(0)] = parseInt(nums[i], 10);
		}

		var shortYear = busNoteYearSegment().length <= 2;
		var year = parts.y;
		if (shortYear && year < 100) {
			year += (year < 70 ? 2000 : 1900);
		}

		var someDate = new Date(year, (parts.m - 1), parts.d);
		if (isNaN(someDate.getTime())) {
			endField.value = '';
			return;
		}

		someDate.setDate(someDate.getDate() + (parseInt(document.getElementById('no_days').value, 10) - 1));

		var fullYear = String(someDate.getFullYear());
		var out = {
			d: ('0' + someDate.getDate()).slice(-2),
			m: ('0' + (someDate.getMonth() + 1)).slice(-2),
			y: shortYear ? fullYear.slice(-2) : fullYear
		};

		// Rebuild in the same segment order the instance uses.
		var formatted = [];
		for (var j = 0; j < 3; j++) {
			formatted.push(out[busNoteSegments[j].charAt(0)]);
		}
		endField.value = formatted.join(busNoteSeparator);
	}

    // script to autofill values in bus note
    $j(function() {
        $j( "input.start_date,input.end_date" ).each(function( index ) {
            if(!$j.trim(this.value).length) {
                $j(this).val( '~(date.information;type=today)' );
            }
        });
        $j( "input.user_entered" ).each(function( index ) {
                $j(this).val( "~[x:username]");
        });
    });
</script>