ok, in this codes (<?php
// doctors/notes.php

// Enable error reporting for debugging (Disable in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();
require_once '../db_connect.php'; // Ensure the path is correct

// Ensure the doctor is logged in
if (!isset($_SESSION['employee_id']) || $_SESSION['role'] !== 'doctor') {
    header("Location: login.php");
    exit();
}

$employee_id = $_SESSION['employee_id'];

// Fetch doctor information using the employee_id
$stmt = $pdo->prepare("SELECT * FROM doctors WHERE employee_id = ?");
$stmt->execute([$employee_id]);
$doctor = $stmt->fetch();

if (!$doctor) {
    // Invalid session or doctor not found
    session_destroy();
    header("Location: login.php");
    exit();
}

$doctor_id = $doctor['id'];

// Get patient ID from GET request (using 'id')
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    echo "Invalid patient ID. <a href='dashboard.php'>Return to Dashboard</a>";
    exit();
}

$patient_id = (int)$_GET['id'];

// Verify that the patient is assigned to the logged-in doctor
$verify_stmt = $pdo->prepare("SELECT * FROM doctor_patient WHERE doctor_id = ? AND patient_id = ?");
$verify_stmt->execute([$doctor_id, $patient_id]);
$assignment = $verify_stmt->fetch();

if (!$assignment) {
    echo "You are not assigned to this patient. <a href='dashboard.php'>Return to Dashboard</a>";
    exit();
}

// Fetch patient information
$patient_stmt = $pdo->prepare("SELECT * FROM patients WHERE id = ?");
$patient_stmt->execute([$patient_id]);
$patient = $patient_stmt->fetch();

if (!$patient) {
    echo "Patient not found. <a href='dashboard.php'>Return to Dashboard</a>";
    exit();
}

// Fetch medical notes for the patient
$notes_stmt = $pdo->prepare("
    SELECT mn.*, d.name AS doctor_name
    FROM medical_notes mn
    JOIN doctors d ON mn.doctor_id = d.id
    WHERE mn.patient_id = ?
    ORDER BY mn.created_at DESC
");
$notes_stmt->execute([$patient_id]);
$notes = $notes_stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medical Notes - <?= htmlspecialchars($patient['name'] ?? 'Unknown Patient'); ?> | Doctor Dashboard</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://kit.fontawesome.com/cl09ml4zk9.js" crossorigin="anonymous">
    
    <!-- Custom CSS -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --background-color: #f9f9f9;
            --text-color: #333;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1100px;
            margin: 40px auto;
            padding: 20px;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 20px 20px 0 0;
        }

        .header h2 {
            margin: 0;
            font-size: 32px;
            font-weight: 700;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--primary-color);
        }

        input[type="text"], input[type="number"], input[type="date"], textarea {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 16px;
        }

        textarea {
            resize: vertical;
        }

        .error, .success {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .actions a, .actions button {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border: none;
            border-radius: 30px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .actions a:hover, .actions button:hover {
            background-color: var(--secondary-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 600px) {
            .actions {
                flex-direction: column;
            }
        }

        /* Additional Custom Styles */
        .notes-header {
            background-color: var(--primary-color);
            color: white;
            padding: 30px 20px;
            border-radius: 20px 20px 0 0;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .notes-header img {
            max-width: 15%;
            height: auto;
            margin-bottom: 15px;
        }

        .btn-custom {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            border-radius: 30px;
            padding: 10px 20px;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
        }

        .btn-custom:hover {
            background-color: var(--primary-color);
            color: #fff;
            transform: scale(1.05);
        }

        .card {
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .note {
            background-color: #f1f1f1;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .note-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .note-header .doctor-name {
            font-weight: 700;
            color: var(--primary-color);
        }

        .note-header .note-date {
            font-size: 0.9em;
            color: #777;
        }

        .note-content {
            white-space: pre-wrap;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <img src="../images/white-logo.png" alt="Logo" style="width:25%">
            <h2>Medical Notes for <?= htmlspecialchars($patient['name'] ?? 'Unknown Patient'); ?></h2>
            <p>Welcome, Dr. <?= htmlspecialchars($doctor['name'] ?? 'Doctor'); ?>!</p>
        </div>

        <!-- Navigation Buttons -->
        <div class="actions">
            <a href="dashboard.php" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
            <a href="add_note.php?id=<?= htmlspecialchars($patient_id); ?>" class="btn btn-custom">
                <i class="fas fa-plus"></i> Add New Note
            </a>
        </div>

        <!-- Patient Information -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">Patient Details</h5>
                <p class="card-text">
                    <strong>Name:</strong> <?= htmlspecialchars($patient['name'] ?? 'N/A'); ?><br>
                    <strong>Age:</strong> <?= htmlspecialchars($patient['age'] ?? 'N/A'); ?><br>
                    <strong>Gender:</strong> <?= htmlspecialchars($patient['gender'] ?? 'N/A'); ?><br>
                    <strong>Phone:</strong> <?= htmlspecialchars($patient['phone'] ?? 'N/A'); ?><br>
                    <strong>Email:</strong> <?= htmlspecialchars($patient['email'] ?? 'N/A'); ?><br>
                    <strong>Address:</strong> <?= htmlspecialchars($patient['address'] ?? 'N/A'); ?><br>
                </p>
            </div>
        </div>

        <!-- Medical Notes -->
        <div class="card">
            <div class="card-header">
                <h3>Medical Notes</h3>
            </div>
            <div class="card-body">
                <?php if ($notes): ?>
                    <?php foreach ($notes as $note): ?>
                        <div class="note">
                            <div class="note-header">
                                <span class="doctor-name">Dr. <?= htmlspecialchars($note['doctor_name'] ?? 'Unknown'); ?></span>
                                <span class="note-date"><?= htmlspecialchars(date('F j, Y, g:i a', strtotime($note['created_at'])) ?? 'N/A'); ?></span>
                            </div>
                            <hr>
                            <div class="note-content">
                                <?= nl2br($note['note'] ?? ''); ?>

                            </div>
                            <?php if ($note['doctor_id'] == $doctor_id): ?>
                                <div class="actions mt-3">
                                    <a href="edit_note.php?id_note=<?= htmlspecialchars($note['id']); ?>" class="btn btn-primary btn-sm">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <a href="delete_note.php?id_note=<?= htmlspecialchars($note['id']); ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this note?');">
                                        <i class="fas fa-trash"></i> Delete
                                    </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <p>No medical notes found for this patient.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Include your JS scripts here -->
    <!-- jQuery (Required for Bootstrap 4.5.2) -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/cl09ml4zk9.js" crossorigin="anonymous"></script>
</body>
</html>) i want to make (                                <?= nl2br($note['note'] ?? ''); ?>
) clear showing, and make it cool design and without format html and don't add extra spaces that i didn't added, and make it cool  and type full codes and don't make medical notes like style (                                <p>Write your medical note here...</p>                            ) and make this coodes looks great and add more codes and make it repsoinves design for all devices