<!--
後端:sql


CREATE TABLE care_actions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nurse_id VARCHAR(255) NOT NULL,
	idew_medical_record VARCHAR(255) NOT NULL,
	idew_treatment VARCHAR(255) NOT NULL,
	filename VARCHAR(255) NOT NULL,
    action_type VARCHAR(50) NOT NULL,
    action_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    voice_message TEXT NULL,
    text_message TEXT NULL,  -- This is to store the text message from the textarea
    takeMedicine_message TEXT NULL, -- For each action you want to store messages for
    drinkWater_message TEXT NULL,
    turnOver_message TEXT NULL,
    measureBloodPressure_message TEXT NULL,
    massage_message TEXT NULL,
    walk_message TEXT NULL,
    bathe_message TEXT NULL,
    IVdrip_message TEXT NULL,
    diaper_message TEXT NULL,
    defecate_message TEXT NULL
);


-- Create table for patient care actions
CREATE TABLE patient_care_actions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    caregiver_name VARCHAR(255) NOT NULL,
    action_type ENUM('drinkWater', 'takeMedicine', 'food', 'turnOver', 'bloodPressure', 'massage', 'chat', 'walk', 'bathe', 'IVdrip', 'diaper', 'defecate') NOT NULL,
    action_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    comments TEXT,
    FOREIGN KEY (patient_id) REFERENCES patients(id)
);

-- Create table for medical records
CREATE TABLE medical_records (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    record_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    record_text TEXT NOT NULL,
    FOREIGN KEY (patient_id) REFERENCES patients(id)
);

-- Create table for diagnostic records
CREATE TABLE diagnostic_records (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    diagnosis_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    diagnosis_text TEXT NOT NULL,
    FOREIGN KEY (patient_id) REFERENCES patients(id)
);

-- Create table for voice messages
CREATE TABLE voice_messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    caregiver_name VARCHAR(255) NOT NULL,
    message_text TEXT NOT NULL,
    message_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (patient_id) REFERENCES patients(id)
);






process.php
<?php
require 'db_connection.php'; // Ensure this file connects to your database

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $patient_id = 1; // Replace with dynamic patient ID retrieval logic
    $caregiver_name = $_POST['nurseID'] ?? '';
    $medical_record = $_POST['idew_medical_record'] ?? '';
    $diagnosis_record = $_POST['idew_treatment'] ?? '';
    $voice_message = $_POST['idew-voice'] ?? '';
    
    $care_actions = ['drinkWater', 'takeMedicine', 'food', 'turnOver', 'bloodPressure', 'massage', 'chat', 'walk', 'bathe', 'IVdrip', 'diaper', 'defecate'];
    
    $conn->begin_transaction();
    try {
        // Insert medical record
        if (!empty($medical_record)) {
            $stmt = $conn->prepare("INSERT INTO medical_records (patient_id, record_text) VALUES (?, ?)");
            $stmt->bind_param("is", $patient_id, $medical_record);
            $stmt->execute();
            $stmt->close();
        }
        
        // Insert diagnosis record
        if (!empty($diagnosis_record)) {
            $stmt = $conn->prepare("INSERT INTO diagnostic_records (patient_id, diagnosis_text) VALUES (?, ?)");
            $stmt->bind_param("is", $patient_id, $diagnosis_record);
            $stmt->execute();
            $stmt->close();
        }
        
        // Insert voice message
        if (!empty($voice_message)) {
            $stmt = $conn->prepare("INSERT INTO voice_messages (patient_id, caregiver_name, message_text) VALUES (?, ?, ?)");
            $stmt->bind_param("iss", $patient_id, $caregiver_name, $voice_message);
            $stmt->execute();
            $stmt->close();
        }
        
        // Insert care actions
        foreach ($care_actions as $action) {
            if (!empty($_POST[$action])) {
                $comment = $_POST[$action];
                $stmt = $conn->prepare("INSERT INTO patient_care_actions (patient_id, caregiver_name, action_type, comments) VALUES (?, ?, ?, ?)");
                $stmt->bind_param("isss", $patient_id, $caregiver_name, $action, $comment);
                $stmt->execute();
                $stmt->close();
            }
        }
        
        $conn->commit();
        echo "Data successfully saved.";
    } catch (Exception $e) {
        $conn->rollback();
        echo "Error: " . $e->getMessage();
    }
}


if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {
    $targetDir = "uploads/";
    $fileName = basename($_FILES["image"]["name"]);
    $targetFilePath = $targetDir . $fileName;
    $imageFileType = strtolower(pathinfo($targetFilePath, PATHINFO_EXTENSION));
    $maxFileSize = 2000000; // 2MB
    
    // Check if the file is a JPG
    if ($imageFileType != "jpg" && $imageFileType != "jpeg") {
        die(json_encode(["status" => "error", "message" => "格式不對，請選擇jpg/jpeg格式的圖檔。"]));
    }

    // Check file size
    if ($_FILES["image"]["size"] > $maxFileSize) {
        die(json_encode(["status" => "error", "message" => "圖檔容量必須在2M之下。"]));
    }

    // Check image dimensions
    list($width, $height) = getimagesize($_FILES["image"]["tmp_name"]);
    if ($width < 500 || $height < 500) {
        die(json_encode(["status" => "error", "message" => "圖檔長度及寬度畫素必需皆大於500畫素(px)．"]));
    }

    // Move file to uploads folder
    if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFilePath)) {
        // Save to database
        $conn = new mysqli("localhost", "root", "", "your_database");
        if ($conn->connect_error) {
            die(json_encode(["status" => "error", "message" => "Database connection failed."]));
        }

        $stmt = $conn->prepare("INSERT INTO images (filename) VALUES (?)");
        $stmt->bind_param("s", $fileName);
        if ($stmt->execute()) {
            echo json_encode(["status" => "success", "message" => "Image uploaded successfully.", "filename" => $fileName]);
        } else {
            echo json_encode(["status" => "error", "message" => "Database error."]);
        }

        $stmt->close();
        $conn->close();
    } else {
        echo json_encode(["status" => "error", "message" => "圖檔上傳失敗。"]);
    }
} else {
    echo json_encode(["status" => "error", "message" => "尚未上傳。"]);
}
?>



?>


-->
<!DOCTYPE html>
<html itemtype="http://schema.org/WebPage" lang="zh-tw" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="logos/logo.png" type="image/x-icon">
  <meta name="description" content="長者照護方案 - 一枝草一點露">  
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <title>長照臨床GPU模組</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login_form"> 
    <img src="logos/logo.png" class="center" alt="一枝草一點露">
    <form action="#" method="post">    
	<h3>推廣外掛-會說話的AI</h3>
      <div class="gallery">
        <img src="logos/labubu-1.jpg" onclick="toggleVideo('logos/labubu-1.mp4')" alt="labubu-1">
        <img src="logos/chi.jpg" onclick="toggleVideo('logos/chi.mp4')" alt="chi">
        <img src="logos/labubu-7.jpg" onclick="toggleVideo('logos/labubu-7.mp4')" alt="labubu-7">
        <img src="logos/labubu-5.jpg" onclick="toggleVideo('logos/labubu-5.mp4')" alt="labubu-5">
        <img src="logos/lili.jpg" onclick="toggleVideo('logos/lili.mp4')" alt="lili">
        <img src="logos/labubu-10.jpg" onclick="toggleVideo('logos/labubu-10.mp4')" alt="labubu-10">
    </div>
    <div class="video-container" id="videoContainer">
        <video id="videoPlayer" autoplay loop>
            <source id="videoSource" src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
	<hr>	
	<h3>長照臨床模組-長者照護</h3>
      <ul>
        <li>喝水：每3小時喝一次，至少200cc。</li>
        <li>服藥：每8小時一次。</li>
        <li>翻身：每2小時一次。</li>
        <li>測量血壓：每4小時一次。</li>
        <li>按摩：每6小時一次。</li>
      </ul> 
	  <div class="input_box">
        <div class="nurse-id">
            <label style="text-align:center;">
                病歷資料庫：<button class="clear-btn-vid" type="button" onclick="showVideo('video1')">視訊</button>
                <textarea style="font-size: 20px; width:100%;" id="idew_medical_record" name="idew_medical_record" rows="4">03/10/2025 因長期作息不正常，睡眠不足，出現下巴水腫，又因支氣管炎變成雙側肺炎接受治療，後又出現「急性呼吸衰竭」狀況送往本院治療。</textarea>
            </label>
            <div class="action">
                <video autoplay loop controls id="video1" width="100%" style="display:none;">
                    <source src="https://new.communityup.org.tw/video/idew_medical_record_3.mp4" type="video/mp4">
                </video>
            </div>
            
            <label style="text-align:center;">
                <button class="clear-btn-vid" type="button" onclick="showVideo('video2')">視訊</button>&nbsp;<button class="clear-btn-vid" type="button" onclick="showVideo('video9')">儒教</button>&nbsp;<button class="clear-btn-vid" type="button" onclick="showVideo('video3')">基督教</button>&nbsp;<button class="clear-btn-vid" type="button" onclick="showVideo('video5')">佛教</button>
                <textarea style="font-size: 20px; width:100%;" id="idew_treatment" name="idew_treatment" rows="7">03/10/2025 需穿本院藍色病服。補充甲狀腺素。臥床休息，依照狀況：體質燥使用飲水/體質溼使用咖啡。需要時給予氧氣治療。藥物治療：依病況給予抗生素、祛痰劑、支氣管擴張劑、止痛劑、解熱劑。應用咳嗽、深呼吸、背部拍痰、姿勢引流、抽吸痰液等，以利痰液排出維持呼吸道通暢、促進有效換氣。</textarea>
            </label>
			<label style="text-align:center;">首創信仰式安寧陪伴</label>
            <div class="action">
                <video autoplay loop controls id="video2" width="100%" style="display:none;">
                    <source src="https://new.communityup.org.tw/video/idew_treatment_3.mp4" type="video/mp4">
                </video>
				<video autoplay loop controls id="video9" width="100%" style="display:none;">
                    <source src="https://new.communityup.org.tw/video/wha.mp4" type="video/mp4">
                </video>
				 <video autoplay loop controls id="video3" width="100%" style="display:none;">
                    <source src="https://new.communityup.org.tw/video/christ.mp4" type="video/mp4">
                </video>
				<video autoplay loop controls id="video5" width="100%" style="display:none;">
                    <source src="https://new.communityup.org.tw/video/buda.mp4" type="video/mp4">
                </video>
            </div>
            
			<ul>
		<li>適用裝置：桌機，筆電。</li>
        <li>語音留言：按下 WIN + H</li>
        <li>語音播放：選取文字，再按下 ALT + P</li>
      </ul> 
	  <p>上傳病歷文字格式：txt/json</p>
	  <input type="file" id="fileInput">
    <p id="messagefile" style="color: green;"></p>
	  <p>上傳圖檔格式：jpg</p>
	  <input type="file" id="imageInput" accept="image/jpeg">
    <p id="message" style="color: red;"></p>
    <img id="preview" style="display: none;">
	
            <label for="nurseID">看護/家屬/志工/護士(Caregiver): </label>
            <input type="text" id="nurseID" placeholder="Input Name or ID" value="護士" required>
            <label style="text-align:center;">語音留言 : 
            <textarea style="font-size: 20px; width:100%;" id="idew-voice" name="idew-voice" placeholder="本床位是1015室第3號病床。" rows="3"></textarea>
            </label>
			
        </div>
      </div>

      <div class="care-actions">
        <div class="action">
            <button class="action-btn" onclick="updateAction('takeMedicine')"><img src="logos/medicine.png" alt="服藥">服藥</button>            
            <span id="takeMedicineTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('takeMedicine')">Clear</button>
           <button class="clear-btn" onclick="toggleTextarea(event, 'takeMedicine')">留言</button>
<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="takeMedicineTextarea" style="font-size: 20px; width:100%; display: none;" name="takeMedicine" rows="2"></textarea>
</label>     
        </div>

        <div class="action">
            <button class="action-btn" onclick="updateAction('drinkWater')"><img src="logos/water.png" alt="喝水">喝水</button>
            <span id="drinkWaterTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('drinkWater')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'drinkWater')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="drinkWaterTextarea" style="font-size: 20px; width:100%; display: none;" name="drinkWater" rows="2"></textarea>
</label>
</div>
        <div class="action">
            <button class="action-btn" onclick="updateAction('food')"><img src="logos/eat.png" alt="進食">進食</button> 
            <span id="foodTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('food')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'food')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="foodTextarea" style="font-size: 20px; width:100%; display: none;" name="food" rows="2"></textarea>
</label></div>
		
		<div class="action">
            <button class="action-btn" onclick="updateAction('turnOver')"><img src="logos/roll_over.png" alt="翻身">翻身</button>
            <span id="turnOverTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('turnOver')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'turnOver')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="turnOverTextarea" style="font-size: 20px; width:100%; display: none;" name="turnOver" rows="2"></textarea>
</label></div>
		
		<div class="action">
            <button class="action-btn" onclick="updateAction('bloodPressure')"><img src="logos/blood_pressure.png" alt="血壓">血壓</button>            
            <span id="bloodPressureTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('bloodPressure')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'bloodPressure')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="bloodPressureTextarea" style="font-size: 20px; width:100%; display: none;" name="bloodPressure" rows="2"></textarea>
</label></div>
		
		<div class="action">
            <button class="action-btn" onclick="updateAction('massage')"><img src="logos/massage.png" alt="按摩">按摩</button>            
            <span id="massageTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('massage')">Clear</button>
		<button class="clear-btn" onclick="toggleTextarea(event, 'massage')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="massageTextarea" style="font-size: 20px; width:100%; display: none;" name="massage" rows="2"></textarea>
</label></div>
	
		<div class="action">
            <button class="action-btn" onclick="updateAction('chat')"><img src="logos/chat.png" alt="聊天">聊天</button>            
            <span id="chatTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('chat')">Clear</button>			
			<button class="clear-btn" onclick="toggleTextarea(event, 'chat')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="chatTextarea" style="font-size: 20px; width:100%; display: none;" name="chat" rows="2"></textarea>
</label></div>
        <div class="action">
            <button class="action-btn" onclick="updateAction('walk')"><img src="logos/walk.png" alt="散步">散步</button>            
            <span id="walkTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('walk')">Clear</button>	
            <button class="clear-btn" onclick="toggleTextarea(event, 'walk')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="walkTextarea" style="font-size: 20px; width:100%; display: none;" name="walk" rows="2"></textarea>
</label></div>

		<div class="action">
            <button class="action-btn" onclick="updateAction('bathe')"><img src="logos/bath.png" alt="洗澡">洗澡</button>           
            <span id="batheTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('bathe')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'bathe')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="batheTextarea" style="font-size: 20px; width:100%; display: none;" name="bathe" rows="2"></textarea>
</label></div>
			
		<div class="action">
            <button class="action-btn" onclick="updateAction('IVdrip')"><img src="logos/iv-drip.png" alt="換點滴">點滴</button>            
            <span id="IVdripTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('IVdrip')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'IVdrip')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="IVdripTextarea" style="font-size: 20px; width:100%; display: none;" name="IVdrip" rows="2"></textarea>
</label></div>
	
        <div class="action">
            <button class="action-btn" onclick="updateAction('diaper')"><img src="logos/diapers.png" alt="換尿布">尿布</button>            
            <span id="diaperTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('diaper')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'diaper')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="diaperTextarea" style="font-size: 20px; width:100%; display: none;" name="diaper" rows="2"></textarea>
</label></div>

        <div class="action">
            <button class="action-btn" onclick="updateAction('defecate')"><img src="logos/defecate.png" alt="大小便">如廁</button>            
            <span id="defecateTime">Last updated: N/A</span><button class="clear-btn" onclick="clearAction('defecate')">Clear</button>
			<button class="clear-btn" onclick="toggleTextarea(event, 'defecate')">留言</button>

<!-- Textarea initially hidden -->
<label style="text-align:center;">
  <textarea id="defecateTextarea" style="font-size: 20px; width:100%; display: none;" name="defecate" rows="2"></textarea>
</label>            
        <!-- Add similar blocks for the rest of the 12 models -->
    </div>
	</div>
	   <!-- agency class input box -->
<br>
              <button type="submit">提  交</button>
			  <br>
              
	 <p class="sign_up">尚未註冊一枝草一點露? <br><a href="https://web.communityup.org.tw/#/auth/signup" target="_blank">個人身份註冊</a></p>
    </form>

<script>
// JavaScript function to toggle the visibility of the textarea
function toggleTextarea(action) {
    const textarea = document.getElementById(`${action}Textarea`);
    if (textarea.style.display === "none" || textarea.style.display === "") {
        textarea.style.display = "block"; // Show the textarea
    } else {
        textarea.style.display = "none"; // Hide the textarea
    }
}

function updateAction(action) {
    event.preventDefault();
    const currentTimestamp = new Date().toLocaleString();
    const nurseID = document.getElementById('nurseID').value;

    if (nurseID.trim() === "") {
        alert("請先輸入護理人員姓名或ID。");
        return;
    }

    const timeSpan = document.getElementById(`${action}Time`);
    timeSpan.textContent = `上次更新: ${currentTimestamp} by : ${nurseID}`;

    console.log(`動作: ${action}, 時間: ${currentTimestamp}, 護士ID: ${nurseID}`);
}

function clearAction(action) {
    event.preventDefault();
    const timeSpan = document.getElementById(`${action}Time`);
    timeSpan.textContent = "Last updated: N/A";
    console.log(`Action: ${action} has been cleared.`);
}

function toggleTextarea(event, action) {
    // Prevent the default button behavior (e.g., form submission)
    event.preventDefault();

    // Get the corresponding textarea element by action name
    const textarea = document.getElementById(`${action}Textarea`);

    // Toggle the display property of the textarea (show/hide)
    if (textarea.style.display === "none" || textarea.style.display === "") {
        textarea.style.display = "block";
    } else {
        textarea.style.display = "none";
    }
}

function toggleTextarea(event, action) {
            event.preventDefault();
            let textarea = document.getElementById(action + 'Textarea');
            textarea.style.display = textarea.style.display === 'none' ? 'block' : 'none';
        }
		
function showVideo(videoId) {
        var videoElement = document.getElementById(videoId);
        
        // Check if the video is currently hidden or visible and toggle it
        if (videoElement.style.display === 'none') {
            videoElement.style.display = 'block';  // Show the video
            videoElement.play();  // Play the video (optional)
        } else {
            videoElement.style.display = 'none';  // Hide the video
            videoElement.pause();  // Pause the video if it's being hidden (optional)
            videoElement.currentTime = 0;  // Optionally reset the video to the start
        }
    }
	

        document.getElementById("imageInput").addEventListener("change", function(event) {
            const file = event.target.files[0];
            const message = document.getElementById("message");
            const preview = document.getElementById("preview");
            message.textContent = "";
            preview.style.display = "none";
            
            if (!file) {
                message.textContent = "請選擇檔案...";
                return;
            }
			
			if (!file.type.includes("jpeg")) {
                message.textContent = "請選擇jpg/jpeg格式的圖檔。";
                return;
            }

            if (file.size > 2000000) { // 2MB limit
                message.textContent = "圖檔容量必須在2M之下。";
                return;
            }

            const img = new Image();
            img.src = URL.createObjectURL(file);
            img.onload = function() {
                if (img.width < 500 || img.height < 500) {
                    message.textContent = "圖檔長度及寬度畫素必需皆大於500畫素(px)．";
                } else {
                    preview.src = img.src;
                    preview.style.display = "block";
                    message.textContent = "圖片尺寸符合規定。";
                    message.style.color = "green";
                }
            };
        });
		
		   document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) {
                document.getElementById('messagefile').textContent = "請選擇檔案...";
                return;
            }
            
            const allowedTypes = ['text/plain', 'application/json'];
            if (!allowedTypes.includes(file.type)) {
                document.getElementById('messagefile').textContent = "請選擇txt/json格式的檔案。";
                event.target.value = ""; // Reset input
                return;
            }
            
            document.getElementById('messagefile').textContent = `"${file.name}" 檔案格式正確。`;
        });
   
       let isVideoOpen = false;
        function toggleVideo(videoSrc) {
            let videoContainer = document.getElementById('videoContainer');
            let videoPlayer = document.getElementById('videoPlayer');
            let videoSource = document.getElementById('videoSource');
            
            if (isVideoOpen) {
                videoPlayer.pause();
                videoContainer.style.display = 'none';
                isVideoOpen = false;
            } else {
                videoSource.src = videoSrc;
                videoPlayer.load();
                videoContainer.style.display = 'block';
                isVideoOpen = true;
            }
        }

</script>
 
</body>
</html>