<!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/treatment.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 class="profile">
            <a href="/logout"> 
                <i class="fas fa-user-circle"></i>
            </a>
        </div>
    </div>

    <div class="content">
        <h1>My treatment</h1>
        <div class="search-bar">
            <form action="/dentist/treatment" method="GET">
                <input type="text" name="search" placeholder="Search for patient name or patient code" />
                <button type="submit">search</button>
            </form>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>patient name</th>
                    <th>phone</th>
                    <th>treatment history</th>
                </tr>
            </thead>
            <tbody>
                <% queueDetails.forEach(function(detail) { %>
                    <tr>
                        <td><%= detail.id %></td>
                        <td><%= detail.patient_name %></td>
                        <td><%= detail.phone %></td>

                        <!-- เพิ่มข้อมูลการรักษา-->
                        <td>
                            <a href="/dentist/treatmenthistory/<%= detail.id %>" class="btn btn-secondary">
                                ดูประวัติการรักษา
                            </a>
                        </td>
                    </tr>
                <% }); %> 
            </tbody>
        </table>
    </div>
</body>
</html>
