i want to fix when press on chat button on dasbhoard for admin, doctor and accountant, and this info database (===Database u406552082_info

== Table structure for table admins

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|**username**|varchar(50)|No|
|password|varchar(255)|No|
|email|varchar(100)|No|
== Dumping data for table admins

|1|mmtawfik|$2y$10$V9jnPR/dZN0uoiHPQa038uBXCS1NC7xV.uVJxnlE6lmICqAwpSr1O|mmtawfik@example.com
|<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>
== Table structure for table budgets

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|month|varchar(7)|Yes|NULL
|budgeted_revenue|decimal(10,2)|Yes|NULL
|budgeted_expenses|decimal(10,2)|Yes|NULL
|notes|text|Yes|NULL
== Dumping data for table budgets

|1|2024-09|20000.00|1000.00| 
== Table structure for table comments

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|patient_id|int(11)|No|
|sender|enum('patient', 'doctor', 'admin')|No|
|message|text|No|
|timestamp|datetime|Yes|current_timestamp()
|parent_id|int(11)|Yes|NULL
== Dumping data for table comments

|44|16|patient|Good|2024-10-03 03:28:46|NULL
|45|16|admin|Thanks|2024-10-03 03:29:02|44
== Table structure for table doctors

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|employee_id|int(11)|No|
|name|varchar(255)|No|
|**username**|varchar(100)|No|
|password|varchar(255)|No|
|**email**|varchar(255)|No|
|specialization|varchar(255)|Yes|NULL
|phone|varchar(20)|Yes|NULL
|registration_date|date|Yes|curdate()
|profile_picture|varchar(255)|Yes|NULL
|department|varchar(100)|Yes|NULL
|date_of_joining|date|Yes|NULL
|status|enum('active', 'inactive')|Yes|active
== Dumping data for table doctors

|12|18|Dr. Engy Shahbander|drengy|$2y$10$Tx74blqFrEdOB2tOZy/Qye7ndsmS9aBMUo23mOG0a9zgfHPoNBnI2|engy.shahbander@gmail.com|CEO - Longevacare|0151315489|2024-10-03|NULL|NULL|NULL|active
== Table structure for table doctor_patient

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|**doctor_id**|int(11)|No|
|**patient_id**|int(11)|No|
== Dumping data for table doctor_patient

|14|3|13
|31|12|13
|30|12|16
== Table structure for table employees

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|name|varchar(255)|No|
|role|enum('admin', 'doctor', 'staff', 'accountant')|No|
|**email**|varchar(255)|No|
|phone|varchar(20)|Yes|NULL
|department|varchar(100)|Yes|NULL
|date_of_joining|date|Yes|NULL
|status|enum('active', 'inactive')|Yes|active
|**username**|varchar(100)|No|
|password|varchar(255)|No|
|created_at|timestamp|Yes|current_timestamp()
|updated_at|timestamp|Yes|current_timestamp()
|profile_picture|varchar(255)|Yes|NULL
|specialization|varchar(255)|Yes|NULL
== Dumping data for table employees

|<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|0105131548|Nursing|2024-10-15|active|doaa123|$2y$10$jezEFBAuvB.2J56DTgGeZ.PbpKBaHGZARBNjy5mvnR21lImE9aala|2024-10-03 01:38:20|2024-10-03 01:38:20|doaa123_1727919500.jpg|Nurse
|18|Dr. Engy <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|0151315489|Administration|2024-10-03|active|drengy|$2y$10$Tx74blqFrEdOB2tOZy/Qye7ndsmS9aBMUo23mOG0a9zgfHPoNBnI2|2024-10-03 01:51:32|2024-10-03 03:34:49|drengy_18.jpg|CEO - Longevacare
|19|Mahmoud <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|01119235049|Administration|2024-10-03|active|mahmoudtawfik|$2y$10$qciyhqx0IHsZMviAa9YceOuw8JZ2RaK2CR2b2Ny.nOT1bogVRSKoy|2024-10-03 01:54:51|2024-10-03 03:35:14|mahmoudtawfik_19.png|Developer
|20|Mohamed <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|0105134856|Accounting|2024-10-01|active|mohamed_5049|$2y$10$/RZk3a7dRiM4zSssCWK8ae7QidsQooQ5Y0U6k9KrE7d5XwN5h5IUC|2024-10-03 04:15:27|2024-10-03 04:15:40|default_profile.png|Accountant
== Table structure for table health_records

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|patient_id|int(11)|No|
|blood_pressure|varchar(20)|Yes|NULL
|weight|decimal(5,2)|Yes|NULL
|bmi|decimal(4,2)|Yes|NULL
|cholesterol|decimal(5,2)|Yes|NULL
|prescription|text|Yes|NULL
|treatment_progress|text|Yes|NULL
|record_date|date|No|
== Dumping data for table health_records

|36|12|80|80.00|80.00|5.00|STR - 32|Isn't good for this patient|2024-10-02
|37|16|80|80.00|99.99|169.00|This new precept|Hi|2024-10-03
== Table structure for table insurance_claims

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|patient_id|int(11)|Yes|NULL
|invoice_id|int(11)|Yes|NULL
|claim_amount|decimal(10,2)|Yes|NULL
|status|enum('Pending', 'Approved', 'Rejected')|Yes|NULL
|submission_date|date|Yes|NULL
|processing_date|date|Yes|NULL
|notes|text|Yes|NULL
== Dumping data for table insurance_claims

|1|16|31|1000.00|Rejected|2024-10-05|2024-10-05| 
== Table structure for table invoices

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|patient_id|int(11)|No|
|service_name|varchar(255)|No|
|service_description|text|Yes|NULL
|cost|decimal(10,2)|No|
|tax_rate|decimal(5,2)|Yes|0.00
|discount|decimal(5,2)|Yes|0.00
|total_amount|decimal(10,2)|No|
|invoice_date|date|Yes|curdate()
|notes|text|Yes|NULL
|tax|decimal(5,2)|Yes|0.00
== Dumping data for table invoices

|19|13| |NULL|0.00|0.00|300.00|1284.00|2024-09-29| |7.00
|28|15| |NULL|0.00|0.00|150.00|720.00|2024-09-30| |20.00
|31|16| | |750.00|5.00|100.00|650.00|2024-10-03| |0.00
== Table structure for table invoice_services

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|invoice_id|int(11)|No|
|service_id|int(11)|No|
|service_name|varchar(255)|No|
|cost|decimal(10,2)|No|
== Dumping data for table invoice_services

|13|19|10|Stress|750.00
|14|19|9|Depression|750.00
|36|28|10|Stress|750.00
|39|31|9|Depression|750.00
== Table structure for table patients

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|name|varchar(100)|No|
|age|int(11)|No|
|gender|enum('Male', 'Female', 'Other')|No|
|phone|varchar(20)|Yes|NULL
|email|varchar(100)|Yes|NULL
|medical_history|text|Yes|NULL
|created_at|timestamp|Yes|current_timestamp()
|updated_at|timestamp|Yes|current_timestamp()
|date_of_birth|date|Yes|NULL
|registration_datetime|datetime|Yes|current_timestamp()
|registration_date|date|Yes|NULL
|status|enum('Initial Consultation', 'Diagnostic Phase', 'Treatment in Progress', 'Improving', 'Monitoring', 'Maintenance Phase', 'Awaiting Test Results', 'Follow-up Needed', 'Paused', 'Completed Program', 'Relapsed', 'Discontinued', 'Inactive')|Yes|Initial Consultation
|doctor_id|int(11)|Yes|NULL
== Dumping data for table patients

|<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|DEP - XRA 12Mg|2024-09-28 23:15:43|2024-09-29 02:53:36|1999-09-28|2024-09-28 23:15:43|2024-09-28|Discontinued|NULL
|<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|Sr - Dep - 323Mg/d|2024-09-28 23:17:04|2024-09-29 02:53:27|1963-09-28|2024-09-28 23:17:04|2024-09-28|Awaiting Test Results|NULL
|13|Ahmed <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|Has Bad Medical History|2024-09-29 01:14:56|2024-09-29 21:59:09|1988-09-29|2024-09-29 01:14:56|2024-09-29|Relapsed|NULL
|15|Ali <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|.|2024-09-29 23:23:06|2024-09-29 23:24:12|1998-09-29|2024-09-29 23:23:06|2024-09-29|Paused|NULL
|16|Soha <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>|Doesn't have Medical History 1|2024-10-03 02:28:58|2024-10-03 02:29:52|2001-10-03|2024-10-03 02:28:58|2024-10-03|Paused|NULL
== Table structure for table patient_logins

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|**patient_id**|int(11)|No|
|**username**|varchar(50)|No|
|password|varchar(255)|No|
== Dumping data for table patient_logins

|24|11|mahmoud_507|$2y$10$aWr138nBYi1CPnOp6Zd2geqUfpAO6zhAGWh0EUtiEMNcUIEIBw4RS
|25|12|mona_630|$2y$10$YMU9RdPOpW1MIELx8W6NBel0fl7NmzGl3GiRitSCQadQYx8Ux4U8e
|26|13|ahmed_697|$2y$10$PVsNfLKdc5gVD0TxjIil8u968rEq3ixyeOKImGLJZXvT8jiOjHNwa
|28|15|ali_127|$2y$10$sNDe.Ka5.Ne9z409SKVew.Diqw6P5cFurRyU1P1pBrTZRV6.LeJFy
|29|16|soha_554|$2y$10$dZEFXbXdX8oe2CWRBFxcOek1DD7O4iiOuvxB3A3cMgdKu7GutJ39K
== Table structure for table payments

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|patient_id|int(11)|No|
|invoice_id|int(11)|No|
|amount_paid|decimal(10,2)|No|
|payment_date|date|No|
|payment_method|varchar(50)|Yes|NULL
|notes|text|Yes|NULL
== Dumping data for table payments

== Table structure for table salaries

|------
|Column|Type|Null|Default
|------
|//**id**//|int(11)|No|
|employee_id|int(11)|No|
|basic_salary|decimal(10,2)|No|
|bonuses|decimal(10,2)|Yes|0.00
|deductions|decimal(10,2)|Yes|0.00
|overtime_hours|int(11)|Yes|0
|overtime_rate|decimal(10,2)|Yes|0.00
|tax|decimal(10,2)|Yes|0.00
|payment_date|date|No|
|net_salary|decimal(10,2)|No|
|status|enum('Pending', 'Paid')|Yes|Pending
|notes|text|Yes|NULL
|payslip_path|varchar(255)|Yes|NULL
== Dumping data for table salaries

== Table structure for table services

|------
|Column|Type|Null|Default
|------
|//**service_id**//|int(11)|No|
|service_name|varchar(255)|No|
|service_price|decimal(10,2)|No|
|service_description|text|Yes|NULL
|created_at|timestamp|Yes|current_timestamp()
|updated_at|timestamp|Yes|current_timestamp()
== Dumping data for table services

|9|Depression|750.00|New Service Depression - longevacare|2024-09-28 23:19:56|2024-09-28 23:19:56
|10|Stress|750.00|New Service Stress - Longevacare|2024-09-29 10:24:07|2024-09-29 10:24:07) and this chat/index.php (<?php
session_start();
require_once '../db_connect.php';

// Check if the user is logged in
if (!isset($_SESSION['employee_id'])) {
    header("Location: ../admin_login.php"); // Redirect to login page
    exit();
}

$employee_id = $_SESSION['employee_id'];
$role = $_SESSION['role'];

// Fetch employees to chat with (excluding self)
$stmt = $pdo->prepare("SELECT id, name, role FROM employees WHERE id != ? AND role IN ('admin', 'doctor', 'accountant')");
$stmt->execute([$employee_id]);
$employees = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags & Bootstrap CSS -->
    <meta charset="UTF-8">
    <title>Chat</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Custom Styles -->
    <style>
        body {
            background-color: #f8f9fa;
        }
        .chat-container {
            display: flex;
            height: 90vh;
        }
        .user-list {
            width: 25%;
            border-right: 1px solid #ccc;
            overflow-y: scroll;
        }
        .chat-window {
            width: 75%;
            display: flex;
            flex-direction: column;
        }
        .messages {
            flex: 1;
            padding: 15px;
            overflow-y: scroll;
            background-color: #fff;
        }
        .message-input {
            padding: 15px;
            background-color: #f1f1f1;
        }
        .message {
            margin-bottom: 10px;
        }
        .message.sent {
            text-align: right;
        }
        .message.received {
            text-align: left;
        }
        .message .text {
            display: inline-block;
            padding: 10px;
            border-radius: 10px;
            max-width: 60%;
        }
        .message.sent .text {
            background-color: #D1C287;
            color: #4F3F02;
        }
        .message.received .text {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="container-fluid bg-primary text-white p-3">
        <h3>Chat Interface</h3>
        <a href="../admin_dashboard.php" class="btn btn-light">Back to Dashboard</a>
    </div>

    <!-- Chat Container -->
    <div class="container-fluid chat-container">
        <!-- User List -->
        <div class="user-list">
            <ul class="list-group">
                <?php foreach ($employees as $emp): ?>
                <li class="list-group-item user" data-user-id="<?= $emp['id'] ?>">
                    <?= htmlspecialchars($emp['name']) ?> (<?= $emp['role'] ?>)
                </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <!-- Chat Window -->
        <div class="chat-window">
            <div class="messages" id="messages">
                <!-- Messages will be loaded here -->
            </div>
            <div class="message-input">
                <form id="messageForm">
                    <div class="input-group">
                        <input type="text" name="message" id="messageInput" class="form-control" placeholder="Type a message..." autocomplete="off">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="submit">Send</button>
                        </div>
                    </div>
                    <input type="hidden" name="receiver_id" id="receiverId">
                </form>
            </div>
        </div>
    </div>

    <!-- JavaScript & jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var receiverId = null;

        $(document).ready(function(){
            // When a user is clicked
            $('.user').click(function(){
                receiverId = $(this).data('user-id');
                $('#receiverId').val(receiverId);
                loadMessages();
            });

            // Send Message
            $('#messageForm').submit(function(e){
                e.preventDefault();
                var message = $('#messageInput').val();
                if(message.trim() === '') return;

                $.post('send_message.php', $(this).serialize(), function(){
                    $('#messageInput').val('');
                    loadMessages();
                });
            });

            // Load Messages Function
            function loadMessages(){
                if(!receiverId) return;
                $.get('get_messages.php', {receiver_id: receiverId}, function(data){
                    $('#messages').html(data);
                    $('#messages').scrollTop($('#messages')[0].scrollHeight);
                });
            }

            // Refresh messages every 5 seconds
            setInterval(loadMessages, 5000);
        });
    </script>
</body>
</html>) and login admin (<?php
session_start();
require_once 'db_connect.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    // Prepare and execute the SQL statement
    $stmt = $pdo->prepare("SELECT * FROM admins WHERE username = ?");
    $stmt->execute([$username]);
    $admin = $stmt->fetch();

    // Verify the password
    if ($admin && password_verify($password, $admin['password'])) {
        $_SESSION['admin_id'] = $admin['id'];
        header("Location: admin_dashboard.php");
        exit();
    } else {
        $error = "Invalid username or password";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - Patient Health Record System</title>
    <!-- Link to the external CSS file (optional) -->
    <link rel="stylesheet" href="css/styles.css">
    <style>
        /* Import Google Fonts for modern typography */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        /* Root Variables for Colors */
        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --text-color: #FFFFFF;
            --background-color: #1A1A1A;
            --error-color: #E74C3C;
            --success-color: #2ECC71;
            --overlay-color: rgba(0, 0, 0, 0.5);
            --input-background: #333333;
            --input-border: #3A3A3A;
            --button-hover-gradient: linear-gradient(45deg, #c7b571, #403102);
        }

        /* General Body Styling */
        body {
            background-image: url('images/background-image-admin.jpg');
            background-size: cover; /* Cover the entire background */
            background-position: center; /* Center the background image */
            background-repeat: no-repeat;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh; /* Full viewport height */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center;     /* Center vertically */
            position: relative;
            overflow: hidden;
        }

        /* Gradient Overlay for enhanced visual appeal */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(79, 63, 2, 0.8), rgba(209, 194, 135, 0.8));
            z-index: 1;
            opacity: 0;
            animation: overlayFadeIn 2s forwards;
        }

        /* Fade-in animation for the overlay */
        @keyframes overlayFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Login Container Styling */
        .login-container {
            position: relative;
            background: White; /* Semi-transparent white background */
            padding: 60px 50px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 450px;
            width: 90%;
            z-index: 2; /* Above the overlay */
            transform: translateY(-50px);
            animation: slideUp 1s ease-out forwards;
        }

        /* Slide-up animation for the container */
        @keyframes slideUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        /* Header Styling */
        .login-container h1 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--primary-color);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Error Message Styling */
        .error {
            color: var(--error-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Success Message Styling (if needed) */
        .success {
            color: var(--success-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Login Form */
        .login-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
            color: #333333;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid var(--input-border);
            background-color: var(--input-background);
            color: var(--text-color);
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]::placeholder, input[type="password"]::placeholder {
            color: #888888;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        /* Submit Button Styling */
        .btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--text-color);
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            font-weight: 700;
        }

        .btn:hover {
            background: var(--button-hover-gradient);
            transform: translateY(-3px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        }

        /* Back to Home Link */
        .login-container p a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .login-container p a:hover {
            color: var(--primary-color);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .login-container {
                padding: 50px 40px;
            }

            .login-container h1 {
                font-size: 28px;
            }

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

        @media (max-width: 480px) {
            .login-container {
                padding: 40px 30px;
            }

            .login-container h1 {
                font-size: 24px;
            }

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

            .btn {
                font-size: 16px;
                padding: 12px;
            }

            .login-container p a {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="overlay"></div> <!-- Gradient Overlay -->
    <div class="login-container">
                       <img src="images/gold-logo.png" alt="Gold Logo" style="max-width: 100%; height: auto; margin-bottom: 20px;"> <!-- Logo -->

        <h1>Admin Login</h1>
        <?php if (isset($error)) echo "<p class='error'>$error</p>"; ?>
        <?php if (isset($success)) echo "<p class='success'>$success</p>"; ?>
        <form method="POST" class="login-form">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <div class="form-group">
                <input type="submit" value="Login" class="btn">
            </div>
        </form>
        <p><a href="index.php">Back to Home</a></p>
    </div>
</body>
</html>) and accounant login (<?php
session_start();
require_once '../db_connect.php';

// Enable error reporting (for development; disable in production)
ini_set('display_errors', 1);
error_reporting(E_ALL);

// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve and sanitize input
    $username = trim($_POST["username"]);
    $password = trim($_POST["password"]);

    // Basic validation
    if (empty($username) || empty($password)) {
        $error = "Please enter your username and password.";
    } else {
        try {
            // Prepare SQL statement
            $stmt = $pdo->prepare("SELECT * FROM employees WHERE username = ? AND role = 'accountant' AND status = 'active' LIMIT 1");
            $stmt->execute([$username]);

            // Fetch result
            $accountant = $stmt->fetch(PDO::FETCH_ASSOC);

            if ($accountant) {
                // Verify password
                if (password_verify($password, $accountant['password'])) {
                    // Password is correct, start session
                    $_SESSION['accountant_id'] = $accountant['id'];
                    $_SESSION['accountant_username'] = $accountant['username'];
                    // Redirect to dashboard
                    header("Location: dashboard.php");
                    exit();
                } else {
                    // Invalid password
                    $error = "Invalid username or password.";
                }
            } else {
                // Username not found or not an accountant
                $error = "Invalid username or password.";
            }
        } catch (PDOException $e) {
            $error = "Error: " . $e->getMessage();
        }
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Accountant Login</title>
    <!-- Include any required meta tags here -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Custom Styles -->
    <style>
        /* Import Google Fonts for modern typography */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        /* Root Variables for Colors */
        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --text-color: #333333;
            --background-color: #FFFFFF;
            --error-color: #E74C3C;
            --success-color: #2ECC71;
            --overlay-color: rgba(0, 0, 0, 0.5);
            --input-background: #F5F5F5;
            --input-border: #CCCCCC;
            --button-hover-gradient: linear-gradient(45deg, #c7b571, #403102);
        }

        /* General Body Styling */
        body {
            background-image: url('../images/background-image-admin.jpg'); /* Update the path as needed */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        /* Gradient Overlay for enhanced visual appeal */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(79, 63, 2, 0.8), rgba(209, 194, 135, 0.8));
            z-index: 1;
            opacity: 0;
            animation: overlayFadeIn 2s forwards;
        }

        /* Fade-in animation for the overlay */
        @keyframes overlayFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Login Container Styling */
        .login-container {
            position: relative;
            background: var(--background-color);
            padding: 60px 50px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 450px;
            width: 90%;
            z-index: 2;
            transform: translateY(-50px);
            animation: slideUp 1s ease-out forwards;
        }

        /* Slide-up animation for the container */
        @keyframes slideUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        /* Header Styling */
        .login-container h1 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--primary-color);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Error Message Styling */
        .error {
            color: var(--error-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Success Message Styling (if needed) */
        .success {
            color: var(--success-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Login Form */
        .login-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

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

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid var(--input-border);
            background-color: var(--input-background);
            color: var(--text-color);
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]::placeholder, input[type="password"]::placeholder {
            color: #888888;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        /* Submit Button Styling */
        .btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: #FFFFFF;
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            font-weight: 700;
        }

        .btn:hover {
            background: var(--button-hover-gradient);
            transform: translateY(-3px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        }

        /* Back to Home Link */
        .login-container p a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .login-container p a:hover {
            color: var(--primary-color);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .login-container {
                padding: 50px 40px;
            }

            .login-container h1 {
                font-size: 28px;
            }

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

        @media (max-width: 480px) {
            .login-container {
                padding: 40px 30px;
            }

            .login-container h1 {
                font-size: 24px;
            }

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

            .btn {
                font-size: 16px;
                padding: 12px;
            }

            .login-container p a {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="login-container">
        <h1>Accountant Login</h1>
        <?php if (isset($error)): ?>
            <div class="error">
                <?= htmlspecialchars($error) ?>
            </div>
        <?php endif; ?>
        <form action="login.php" method="POST" class="login-form">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="Enter your password" required>
            </div>
            <input type="submit" value="Login" class="btn">
        </form>
        <p><a href="../index.php">Back to Home</a></p>
    </div>
</body>
</html>) and doctor login (<?php
// File: doctors/login.php

session_start();
require_once '../db_connect.php';

$errors = [];

// Check if the form was submitted
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Collect and sanitize input
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    // Validate input
    if (empty($username)) {
        $errors[] = "Username is required.";
    }

    if (empty($password)) {
        $errors[] = "Password is required.";
    }

    // If no errors, proceed to authenticate
    if (empty($errors)) {
        // Prepare and execute the query
        $stmt = $pdo->prepare("SELECT id, password FROM doctors WHERE username = ?");
        $stmt->execute([$username]);
        $doctor = $stmt->fetch();

        // Verify password
        if ($doctor && password_verify($password, $doctor['password'])) {
            // Authentication successful
            session_regenerate_id(true); // Prevent session fixation
            $_SESSION['doctor_id'] = $doctor['id'];
            header("Location: dashboard.php");
            exit();
        } else {
            // Authentication failed
            $errors[] = "Invalid username or password.";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Doctor Login - Patient Health Record System</title>
    <!-- Link to the external CSS file (optional) -->
    <!-- <link rel="stylesheet" href="css/styles.css"> -->
    <style>
        /* Import Google Fonts for modern typography */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        /* Root Variables for Colors */
        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --text-color: #FFFFFF;
            --background-color: #1A1A1A;
            --error-color: #E74C3C;
            --success-color: #2ECC71;
            --overlay-color: rgba(0, 0, 0, 0.5);
            --input-background: #333333;
            --input-border: #3A3A3A;
            --button-hover-gradient: linear-gradient(45deg, #c7b571, #403102);
        }

        /* General Body Styling */
        body {
            background-image: url('images/background-image-admin.jpg'); /* Replace with a doctor-themed image if desired */
            background-size: cover; /* Cover the entire background */
            background-position: center; /* Center the background image */
            background-repeat: no-repeat;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh; /* Full viewport height */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center;     /* Center vertically */
            position: relative;
            overflow: hidden;
        }

        /* Gradient Overlay for enhanced visual appeal */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(79, 63, 2, 0.8), rgba(209, 194, 135, 0.8));
            z-index: 1;
            opacity: 0;
            animation: overlayFadeIn 2s forwards;
        }

        /* Fade-in animation for the overlay */
        @keyframes overlayFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Login Container Styling */
        .login-container {
            position: relative;
            background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
            padding: 60px 50px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 450px;
            width: 90%;
            z-index: 2; /* Above the overlay */
            transform: translateY(-50px);
            animation: slideUp 1s ease-out forwards;
        }

        /* Slide-up animation for the container */
        @keyframes slideUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        /* Header Styling */
        .login-container h1 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--primary-color);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Error Message Styling */
        .error {
            color: var(--error-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Success Message Styling (if needed) */
        .success {
            color: var(--success-color);
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* Login Form */
        .login-form {
            display: flex;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
            color: #333333;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid var(--input-border);
            background-color: var(--input-background);
            color: var(--text-color);
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]::placeholder, input[type="password"]::placeholder {
            color: #888888;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        /* Submit Button Styling */
        .btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--text-color);
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            font-weight: 700;
        }

        .btn:hover {
            background: var(--button-hover-gradient);
            transform: translateY(-3px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        }

        /* Back to Home Link */
        .login-container p a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .login-container p a:hover {
            color: var(--secondary-color);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .login-container {
                padding: 50px 40px;
            }

            .login-container h1 {
                font-size: 28px;
            }

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

        @media (max-width: 480px) {
            .login-container {
                padding: 40px 30px;
            }

            .login-container h1 {
                font-size: 24px;
            }

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

            .btn {
                font-size: 16px;
                padding: 12px;
            }

            .login-container p a {
                font-size: 14px;
            }
        }

    </style>
</head>
<body>
    <div class="overlay"></div> <!-- Gradient Overlay -->
    <div class="login-container">
        <img src="../images/gold-logo.png" alt="Gold Logo" style="max-width: 100%; height: auto; margin-bottom: 20px;"> <!-- Logo -->
        <h1>Doctor Login</h1>
        <?php if (!empty($error)) echo "<p class='error'>" . htmlspecialchars($error) . "</p>"; ?>
        <?php if (isset($success)) echo "<p class='success'>" . htmlspecialchars($success) . "</p>"; ?>
        <form action="login.php" method="post" class="login-form" novalidate>
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" placeholder="Enter your username" required />
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" placeholder="Enter your password" required />
            </div>
            <div class="form-group">
                <input type="submit" value="Login" class="btn" />
            </div>
        </form>
        <p><a href="../index.php">Back to Home</a></p>
    </div>
</body>
</html>) so fix this chat/index.php and tyle ful codes and make sure everhing is right