<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session Report Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f7fa;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        label,
        textarea,
        input,
        select {
            font-size: 16px;
            margin-bottom: 10px;
            display: block;
            width: 100%;
        }

        input,
        select,
        textarea {
            padding: 8px;
            margin-top: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        h2,
        h3 {
            color: #007bff;
            font-size: 1.1em;
        }

        .section {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .program-group {
            margin-bottom: 20px;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 15px;
        }

        .program-group:last-child {
            border-bottom: none;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 12px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            display: block;
            width: 100%;
        }

        button:hover {
            background-color: #0056b3;
        }

        .checkbox-group {
            margin-top: 10px;
        }

        #output {
            background: #fff;
            padding: 15px;
            margin-top: 20px;
            border: 1px solid #ddd;
            white-space: pre-wrap;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .form-group label {
            width: 100%;
            font-size: 14px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: calc(50% - 10px);
        }

        nav {
            text-align: center;
            margin-bottom: 20px;
        }

        .tab-button {
            background-color: #007BFF;
            color: white;
            padding: 12px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            margin: 0 5px;
        }

        .tab-button:hover {
            background-color: #0056b3;
        }

        #disclaimer {
            display: none;
        }

        .space-button {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>Session Report Generator</h1>

    <!-- Navigation Tabs -->
    <nav>
        <button class="tab-button" onclick="showTab('report')">Session Report</button>
        <button class="tab-button space-button" onclick="showTab('disclaimer')">Disclaimer</button>
    </nav>

    <div id="report">
        <form id="reportForm">
            <div class="section">
                <h2>Basic Session Information</h2>
                <div class="form-group">
                    <label for="date">Date:</label>
                    <input type="date" id="date" required>
                    <label for="startTime">Start Time (HH:MM AM/PM):</label>
                    <input type="text" id="startTime" placeholder="e.g., 10:00 AM" required>
                    <label for="endTime">End Time (HH:MM AM/PM):</label>
                    <input type="text" id="endTime" placeholder="e.g., 2:30 PM" required>
                    <label for="totalPrograms">Total Programs:</label>
                    <input type="number" id="totalPrograms" required>
                    <label for="completedPrograms">Completed Programs:</label>
                    <input type="number" id="completedPrograms" required>
                    <label for="reasonNotDone">Programs Not Worked On (Reason):</label>
                    <textarea id="reasonNotDone" rows="3" required></textarea>
                </div>
            </div>

            <div class="section">
                <h2>Program Details</h2>
                <div id="programs">
                    <div class="program-group" id="program1">
                        <h3>Program 1</h3>
                        <label for="program1Name">Program Name:</label>
                        <input type="text" id="program1Name">
                        <label for="program1Last">Last Session %:</label>
                        <input type="number" id="program1Last">
                        <label for="program1Current">Current Session %:</label>
                        <input type="number" id="program1Current">
                        <label for="program1Change">Change:</label>
                        <select id="program1Change">
                            <option>Increase</option>
                            <option>Decrease</option>
                        </select>
                    </div>

                    <div class="program-group" id="program2">
                        <h3>Program 2</h3>
                        <label for="program2Name">Program Name:</label>
                        <input type="text" id="program2Name">
                        <label for="program2Last">Last Session %:</label>
                        <input type="number" id="program2Last">
                        <label for="program2Current">Current Session %:</label>
                        <input type="number" id="program2Current">
                        <label for="program2Change">Change:</label>
                        <select id="program2Change">
                            <option>Increase</option>
                            <option>Decrease</option>
                        </select>
                    </div>

                    <div class="program-group" id="program3">
                        <h3>Program 3</h3>
                        <label for="program3Name">Program Name:</label>
                        <input type="text" id="program3Name">
                        <label for="program3Last">Last Session %:</label>
                        <input type="number" id="program3Last">
                        <label for="program3Current">Current Session %:</label>
                        <input type="number" id="program3Current">
                        <label for="program3Change">Change:</label>
                        <select id="program3Change">
                            <option>Increase</option>
                            <option>Decrease</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="section">
                <h2>Content Areas</h2>
                <div class="form-group">
                    <label for="contentArea1">Content Area Targeted #1:</label>
                    <input type="text" id="contentArea1">
                    <label for="contentArea2">Content Area Targeted #2:</label>
                    <input type="text" id="contentArea2">
                    <label for="contentArea3">Content Area Targeted #3:</label>
                    <input type="text" id="contentArea3">
                </div>
            </div>

            <div class="section checkbox-group">
                <label>
                    <input type="checkbox" id="includeMaintained"> Include "Client maintained" sentence?
                </label>
                <div id="maintainedFields">
                    <label for="maintainedArea">Maintained Area:</label>
                    <input type="text" id="maintainedArea">
                    <label for="maintainedPercentage">Maintained Percentage:</label>
                    <input type="text" id="maintainedPercentage">
                </div>
            </div>

            <button type="button" onclick="generateReport()">Generate Report as BT</button>
            <div style="height: 10px;"></div>
            <button type="button" onclick="generateReportRBT()">Generate Report as RBT</button>
        </form>

        <div id="output"></div>
    </div>

    <div id="disclaimer">
        <h2><u>Disclaimer</h2></u>
        <p><b>This session note generator is designed to assist users by filling in necessary fields for session notes, offering a seamless and efficient experience. Please note that this tool does not retain, store, or process any personal, sensitive, or identifiable data beyond the immediate session in which it is used. Once the website page is closed, all entered data is discarded and cannot be accessed again.</p></b>
            <br>
        <p><b>By using this generator, you acknowledge that no personal information is saved or retained in any form. The tool operates on a temporary basis, creating notes for immediate use only.</b>
        </p>
        <br>
        <p><b>This tool is not intended to replace professional judgment or comprehensive documentation in clinical or administrative settings. While it is designed to streamline the process of generating session notes, users are advised to review and modify the generated content to ensure accuracy, completeness, and compliance with applicable standards and regulations.</b>
        </p>
    </div>

    <script>
        function showTab(tab) {
            document.getElementById('report').style.display = tab === 'report' ? 'block' : 'none';
            document.getElementById('disclaimer').style.display = tab === 'disclaimer' ? 'block' : 'none';
        }

        function calculateDuration(startTime, endTime) {
    const format = /^(\d+):(\d+) (\w+)$/;
    const startMatch = startTime.match(format);
    const endMatch = endTime.match(format);

    if (!startMatch || !endMatch) return "Invalid Time Format";

    let startHours = parseInt(startMatch[1]);
    let startMinutes = parseInt(startMatch[2]);
    const startPeriod = startMatch[3];

    let endHours = parseInt(endMatch[1]);
    let endMinutes = parseInt(endMatch[2]);
    const endPeriod = endMatch[3];

    // Convert start hours to 24-hour format
    if (startPeriod === "PM" && startHours !== 12) {
        startHours += 12;
    } else if (startPeriod === "AM" && startHours === 12) {
        startHours = 0;
    }

    // Convert end hours to 24-hour format
    if (endPeriod === "PM" && endHours !== 12) {
        endHours += 12;
    } else if (endPeriod === "AM" && endHours === 12) {
        endHours = 0;
    }

    // Calculate the total minutes for both start and end times
    const startTotalMinutes = startHours * 60 + startMinutes;
    const endTotalMinutes = endHours * 60 + endMinutes;

    // Handle overnight sessions where end time is technically "earlier" than start time
    const durationInMinutes = 
        endTotalMinutes >= startTotalMinutes
        ? endTotalMinutes - startTotalMinutes
        : 1440 - startTotalMinutes + endTotalMinutes; // 1440 = total minutes in a day

    // Convert minutes back to hours
    return (durationInMinutes / 60).toFixed(2);
}


        document.addEventListener('keydown', function(event) {
    // Check if the Alt key and 'U' key are pressed together
    if (event.altKey && event.key === 'u') {
        event.preventDefault(); // Prevent default behavior (if needed)

        // Auto-fill test data for all input fields
        document.getElementById("date").value = "2025-01-05";  // Set a test date
        document.getElementById("startTime").value = "12:00 PM";  // Start time test
        document.getElementById("endTime").value = "3:00 PM";  // End time test
        document.getElementById("totalPrograms").value = 25;  // Total programs test
        document.getElementById("completedPrograms").value = 17;  // Completed programs test
        document.getElementById("reasonNotDone").value = "lack of time and pairing process.";  // Reason for not completing all programs

        // Auto-fill program details with test data
        for (let i = 1; i <= 3; i++) {
            document.getElementById(`program${i}Name`).value = `Empathy Scenario ${i}`;  // Program name test
            document.getElementById(`program${i}Last`).value = 80 + i;  // Last session % test
            document.getElementById(`program${i}Current`).value = 85 + i;  // Current session % test
            document.getElementById(`program${i}Change`).value = "Increase";  // Program change type (Increase test)
        }

        // Auto-fill content areas
        document.getElementById("contentArea1").value = "following directions";  // Content area #1 test
        document.getElementById("contentArea2").value = "sharing";  // Content area #2 test
        document.getElementById("contentArea3").value = "sustained attention";  // Content area #3 test

        // Toggle "Include Maintained" checkbox and fill in related fields
        document.getElementById("includeMaintained").checked = true;  // Test maintained checkbox
        document.getElementById("maintainedArea").value = "Circle Time AM program";  // Maintained area test
        document.getElementById("maintainedPercentage").value = "90";  // Maintained percentage test
    }
});


function generateReport() {
    const dateInput = document.getElementById("date").value;
    const startTime = document.getElementById("startTime").value;
    const endTime = document.getElementById("endTime").value;
    const totalPrograms = document.getElementById("totalPrograms").value;
    const completedPrograms = document.getElementById("completedPrograms").value;
    const reasonNotDone = document.getElementById("reasonNotDone").value;

    // Check if any required fields are empty
    if (!dateInput || !startTime || !endTime || !totalPrograms || !completedPrograms || !reasonNotDone) {
        alert("All text fields must be completed before generating a report.");
        return;  // Prevent report generation if any required field is empty
    }

    const dateObj = new Date(dateInput + "T00:00:00");
    const dayOfWeek = dateObj.toLocaleString('en-us', { weekday: 'long' });
    const month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
    const day = ("0" + dateObj.getDate()).slice(-2);
    const year = dateObj.getFullYear();
    const formattedDate = `${month}/${day}/${year}`;

    const duration = calculateDuration(startTime, endTime);
    const programsNotDone = totalPrograms - completedPrograms;

    const programDetails = [];
    for (let i = 1; i <= 3; i++) {
        const name = document.getElementById(`program${i}Name`).value;
        const last = document.getElementById(`program${i}Last`).value;
        const current = document.getElementById(`program${i}Current`).value;
        const change = document.getElementById(`program${i}Change`).value;

        if (name && last && current) {
            const changeDetail = {
                name: name,
                lastPerformance: last,
                currentPerformance: current,
                change: change
            };
            programDetails.push(changeDetail);
        }
    }

    const includeMaintained = document.getElementById("includeMaintained").checked;
    let maintainedText = "";
    if (includeMaintained) {
        const area = document.getElementById("maintainedArea").value;
        const percentage = document.getElementById("maintainedPercentage").value;
        if (area && percentage) {
            maintainedText = `Client maintained ${percentage}% in ${area} from last session to this session.`;
        }
    }

    const contentArea1 = document.getElementById("contentArea1").value;
    const contentArea2 = document.getElementById("contentArea2").value;
    const contentArea3 = document.getElementById("contentArea3").value;

    const contentAreasText = `${contentArea1}, ${contentArea2}, and ${contentArea3}`;

    // Generate program performance section for report with conditional articles
    const programPerformanceText = programDetails.map((program, index) => {
    const article = program.change === 'Increase' ? 'An' : 'A'; // Determines the article based on change type
    return `${article} ${program.change} was seen from last session to this session in the following area: ${program.name}, ${program.lastPerformance}% correct last session to ${program.currentPerformance}% correct this session`;
    }).join(', ');


   // Calculate hours and minutes from the total duration in decimal (e.g., 2.75 hours)
const hours = Math.floor(duration);
const minutes = Math.round((duration - hours) * 60);

const report = `Session commenced today, ${dayOfWeek} (${formattedDate}), from ${startTime} to ${endTime}, ${hours} hour${hours > 1 ? 's' : ''} and ${minutes} minute${minutes !== 1 ? 's' : ''} session in the clinic, as regularly scheduled. Client transitioned into the clinic with no behaviors and unpacked his things with no prompts needed. Client appeared happy, as evidenced by initiating conversation, smiling, and greeting BT. There were no medical or safety concerns that arose during the session, and no barriers occurred during today’s session. The client was an active participant today, and the BT was able to complete ${completedPrograms}/${totalPrograms} programs. ${programsNotDone} programs were not worked on due to ${reasonNotDone}. The following content areas were targeted during the session: ${contentAreasText}.${programPerformanceText} ${maintainedText} Client had a productive session.

Areas of strong performance include: ${programDetails.map((program) => `${program.name} at ${program.currentPerformance}%`).join('. ')}. Client transitioned into the clinic with no behaviors and unpacked his things with no prompts needed. Client appeared happy, as evidenced by initiating conversation, smiling, and greeting BT. There were no medical or safety concerns that arose during the session, and no barriers occurred during today’s session. The client was an active participant today, and the BT was able to complete ${completedPrograms}/${totalPrograms} programs. ${programsNotDone} programs were not worked on due to ${reasonNotDone} Client had a productive session.

Areas of strong performance include: ${programDetails.map((program) => `${program.name} at ${program.currentPerformance}%`).join('. ')}. ${programPerformanceText}. ${maintainedText} Client had a productive session.`;

document.getElementById("output").textContent = report;

}

function generateReportRBT() {
    const dateInput = document.getElementById("date").value;
    const startTime = document.getElementById("startTime").value;
    const endTime = document.getElementById("endTime").value;
    const totalPrograms = document.getElementById("totalPrograms").value;
    const completedPrograms = document.getElementById("completedPrograms").value;
    const reasonNotDone = document.getElementById("reasonNotDone").value;

    // Check if any required fields are empty
    if (!dateInput || !startTime || !endTime || !totalPrograms || !completedPrograms || !reasonNotDone) {
        alert("All text fields must be completed before generating a report.");
        return;  // Prevent report generation if any required field is empty
    }

    const dateObj = new Date(dateInput + "T00:00:00");
    const dayOfWeek = dateObj.toLocaleString('en-us', { weekday: 'long' });
    const month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
    const day = ("0" + dateObj.getDate()).slice(-2);
    const year = dateObj.getFullYear();
    const formattedDate = `${month}/${day}/${year}`;

    const duration = calculateDuration(startTime, endTime);
    const programsNotDone = totalPrograms - completedPrograms;

    const programDetails = [];
    for (let i = 1; i <= 3; i++) {
        const name = document.getElementById(`program${i}Name`).value;
        const last = document.getElementById(`program${i}Last`).value;
        const current = document.getElementById(`program${i}Current`).value;
        const change = document.getElementById(`program${i}Change`).value;

        if (name && last && current) {
            const changeDetail = {
                name: name,
                lastPerformance: last,
                currentPerformance: current,
                change: change
            };
            programDetails.push(changeDetail);
        }
    }

    const includeMaintained = document.getElementById("includeMaintained").checked;
    let maintainedText = "";
    if (includeMaintained) {
        const area = document.getElementById("maintainedArea").value;
        const percentage = document.getElementById("maintainedPercentage").value;
        if (area && percentage) {
            maintainedText = `Client maintained ${percentage}% in ${area} from last session to this session.`;
        }
    }

    const contentArea1 = document.getElementById("contentArea1").value;
    const contentArea2 = document.getElementById("contentArea2").value;
    const contentArea3 = document.getElementById("contentArea3").value;

    const contentAreasText = `${contentArea1}, ${contentArea2}, and ${contentArea3}`;

    // Generate program performance section for report with conditional articles
    const programPerformanceText = programDetails.map((program, index) => {
    const article = program.change === 'Increase' ? 'An' : 'A'; // Determines the article based on change type
    return `${article} ${program.change} was seen from last session to this session in the following area: ${program.name}, ${program.lastPerformance}% correct last session to ${program.currentPerformance}% correct this session`;
    }).join(', ');


   // Calculate hours and minutes from the total duration in decimal (e.g., 2.75 hours)
const hours = Math.floor(duration);
const minutes = Math.round((duration - hours) * 60);

const report = `Session commenced today, ${dayOfWeek} (${formattedDate}), from ${startTime} to ${endTime}, ${hours} hour${hours > 1 ? 's' : ''} and ${minutes} minute${minutes !== 1 ? 's' : ''} session in the clinic, as regularly scheduled. Client transitioned into the clinic with no behaviors and unpacked his things with no prompts needed. Client appeared happy, as evidenced by initiating conversation, smiling, and greeting RBT. There were no medical or safety concerns that arose during the session, and no barriers occurred during today’s session. The client was an active participant today, and the RBT was able to complete ${completedPrograms}/${totalPrograms} programs. ${programsNotDone} programs were not worked on due to ${reasonNotDone}. The following content areas were targeted during the session: ${contentAreasText}.${programPerformanceText} ${maintainedText} Client had a productive session.

Areas of strong performance include: ${programDetails.map((program) => `${program.name} at ${program.currentPerformance}%`).join('. ')}. Client transitioned into the clinic with no behaviors and unpacked his things with no prompts needed. Client appeared happy, as evidenced by initiating conversation, smiling, and greeting RBT. There were no medical or safety concerns that arose during the session, and no barriers occurred during today’s session. The client was an active participant today, and the RBT was able to complete ${completedPrograms}/${totalPrograms} programs. ${programsNotDone} programs were not worked on due to ${reasonNotDone} Client had a productive session.

Areas of strong performance include: ${programDetails.map((program) => `${program.name} at ${program.currentPerformance}%`).join('. ')}. ${programPerformanceText}. ${maintainedText} Client had a productive session.`;

document.getElementById("output").textContent = report;

}

    </script>
</body>

</html>