<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile Clinic</title>
    <link rel="stylesheet" href="/css/treatmenthistory.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="sidebar">
        <img alt="Smile Clinic Logo" src="/images/logo.png"/>
        <h2>Smile Clinic</h2>
        <ul class="menu">
            <li>
                <i class="fas fa-calendar-alt"></i>
                ตารางทำงาน
            </li>
            <li>
                <i class="fas fa-calendar-check"></i>
                นัดหมาย
            </li>
            <li class="active">
                <i class="fas fa-file-medical"></i>
                การรักษา
            </li>
        </ul>
    </div>

    <div class="content">
        <a href="/dentist/addtreatmenthis/<%= patientId %>" class="add-button">เพิ่ม</a>
    </div>

    <div class="content">
        <h1>Treatment History</h1>
        
        <% if (message) { %>
            <p><%= message %></p> <!-- แสดงข้อความหากไม่มีข้อมูล -->
        <% } else { %>
            <table class="table table-bordered">
                <tr>
                    <th>วันที่การรักษา</th>
                    <th>ประเภทการรักษา</th>
                    <th>รายละเอียดการรักษา</th>
                    <th>ชื่อแพทย์</th>
                    <th>นัดหมายครั้งถัดไป</th>
                </tr>
                <% treatmentHistory.forEach(function(history) { %> <!-- loop ผ่านข้อมูลทั้งหมด -->
                    <tr>
                        <td><%= history.treatment_date %></td>
                        <td><%= history.treatment_name %></td> 
                        <td><%= history.tm_details %></td> 
                        <td><%= history.dentist_name %></td> 
                        <td><%= history.followUpdate %></td>
                        <td>
                            <a href="/dentist/edittreatmenthis/<%= history.treatmenthistory_id %>" class="btn btn-warning" style="border: none;">แก้ไข</a>
                        </td>
                        <td>
                            
                            <form action="/dentist/deletetreatmenthis/<%= history.treatmenthistory_id %>" method="POST">
                                <button type="submit" class="btn btn-danger">ลบ</button>
                            </form>
                        </td>
                    </tr>
                <% }); %>
            </table>
        <% } %>
    </div>   
</body>
</html>
