please change this codes (<?php
session_start();
require_once 'db_connect.php';

// Check if the admin is logged in
if (!isset($_SESSION['admin_id'])) {
    header("Location: admin_login.php");
    exit();
}

// Query parameters and database logic
$search = $_GET['search'] ?? '';
$gender = $_GET['gender'] ?? '';
$min_age = $_GET['min_age'] ?? '';
$max_age = $_GET['max_age'] ?? '';
$status = $_GET['status'] ?? '';
$sort_by = $_GET['sort_by'] ?? 'id';

// SQL query to retrieve patient records
$sql = "
    SELECT p.*, pl.username,
           hr.blood_pressure, hr.weight, hr.bmi, hr.cholesterol, 
           hr.prescription, hr.treatment_progress, hr.record_date
    FROM patients p
    LEFT JOIN patient_logins pl ON p.id = pl.patient_id
    LEFT JOIN (
        SELECT patient_id, blood_pressure, weight, bmi, cholesterol, 
               prescription, treatment_progress, record_date,
               ROW_NUMBER() OVER (PARTITION BY patient_id ORDER BY record_date DESC) as rn
        FROM health_records
    ) hr ON p.id = hr.patient_id AND hr.rn = 1
    WHERE 1=1
";

$params = [];

if ($search) {
    $sql .= " AND (p.name LIKE ? OR pl.username LIKE ? OR p.id LIKE ? OR p.phone LIKE ? OR p.email LIKE ?)";
    $search_param = "%$search%";
    $params = array_merge($params, [$search_param, $search_param, $search_param, $search_param, $search_param]);
}
if ($gender) {
    $sql .= " AND p.gender = ?";
    $params[] = $gender;
}
if ($min_age) {
    $sql .= " AND p.age >= ?";
    $params[] = $min_age;
}
if ($max_age) {
    $sql .= " AND p.age <= ?";
    $params[] = $max_age;
}
if ($status) {
    $sql .= " AND p.status = ?";
    $params[] = $status;
}

$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$patients = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Status options for patients
$status_options = [
    'Initial Consultation', 'Diagnostic Phase', 'Treatment in Progress', 'Improving',
    'Monitoring', 'Maintenance Phase', 'Awaiting Test Results', 'Follow-up Needed',
    'Paused', 'Completed Program', 'Relapsed', 'Discontinued', 'Inactive'
];

// Query for the number of new comments without admin replies
$new_comments_query = "
    SELECT COUNT(*) AS new_comments_count
    FROM comments c
    WHERE c.parent_id IS NULL 
      AND c.sender = 'patient' 
      AND NOT EXISTS (
          SELECT 1 FROM comments r 
          WHERE r.parent_id = c.id 
            AND r.sender = 'admin'
      )
";
$stmt = $pdo->query($new_comments_query);
$new_comments_count = $stmt->fetchColumn();

$stmt = $pdo->query("SELECT COUNT(*) FROM patients");
$total_patients = $stmt->fetchColumn();

$stmt = $pdo->query("SELECT COUNT(*) FROM patients WHERE registration_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)");
$recent_registrations = $stmt->fetchColumn();

$stmt = $pdo->query("SELECT COUNT(*) FROM patients WHERE DATE(registration_datetime) = CURDATE()");
$today_registrations = $stmt->fetchColumn();

$stmt = $pdo->query("SELECT COUNT(*) FROM invoices");
$total_invoices = $stmt->fetchColumn();

$stmt = $pdo->query("SELECT gender, COUNT(*) as count FROM patients GROUP BY gender");
$gender_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);

$stmt = $pdo->query("
    SELECT 
        CASE 
            WHEN age < 18 THEN 'Under 18'
            WHEN age BETWEEN 18 AND 30 THEN '18-30'
            WHEN age BETWEEN 31 AND 50 THEN '31-50'
            WHEN age BETWEEN 51 AND 70 THEN '51-70'
            ELSE 'Over 70'
        END AS age_group,
        COUNT(*) as count
    FROM patients
    GROUP BY age_group
");
$age_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);

$stmt = $pdo->query("SELECT status, COUNT(*) as count FROM patients GROUP BY status");
$status_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #f8f9fa, #e9ecef);
        }

        .sidebar {
            width: 250px;
            background-color: #4F3F02;
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
            position: fixed;
            height: 100%;
            overflow-y: auto;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }

        body.show-sidebar .sidebar {
            transform: translateX(0);
        }

        .main-content {
            margin-left: 250px;
            width: calc(100% - 250px);
            padding: 20px;
            box-sizing: border-box;
            transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
        }

        .dashboard-header {
            background-color: #4F3F02;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .btn-primary {
            background-color: #D1C287;
            border-color: #D1C287;
            color: #4F3F02;
            font-weight: bold;
        }

        .btn-primary:hover {
            background-color: #4F3F02;
            border-color: #D1C287;
            color: #fff;
        }

        .btn-secondary {
            background-color: #4F3F02;
            border-color: #4F3F02;
            color: #fff;
            font-weight: bold;
        }

        .btn-secondary:hover {
            background-color: #D1C287;
            color: #4F3F02;
        }

        .filters {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .filters .form-control,
        .filters select {
            margin-bottom: 15px;
            border: 1px solid #D1C287;
            border-radius: 5px;
        }

        .filters .form-control:focus,
        .filters select:focus {
            border-color: #4F3F02;
            box-shadow: none;
        }

        .table-responsive {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 20px;
            padding: 15px;
        }

        .table thead th {
            background-color: #4F3F02;
            color: #fff;
        }

        .card {
            border: none;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .card .card-title {
            color: #4F3F02;
        }

        .dataTables_wrapper .dataTables_filter input {
            border-radius: 5px;
            border: 1px solid #D1C287;
        }

        .dataTables_wrapper .dataTables_length select {
            border-radius: 5px;
            border: 1px solid #D1C287;
        }

        /* Responsive Styles */
        @media (max-width: 991.98px) {
            .sidebar {
                position: absolute;
                width: 100%;
                height: auto;
            }

            .main-content {
                margin-left: 0;
                width: 100%;
            }

            .dashboard-header {
                margin-top: 50px;
            }
        }

        @media (max-width: 575.98px) {
            .filters, .table-responsive, .card {
                padding: 10px;
            }

            .dashboard-header {
                padding: 15px;
            }
        }

        #toggleSidebar {
            display: block;
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1100;
            background-color: #4F3F02;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <button id="toggleSidebar">Menu</button>
    <div class="sidebar">
        <img src="images/white-logo.png" alt="White Logo" style="width:100%; height: auto; margin-bottom: 20px;"> 
        <h2>Admin</h2>
        <p>Welcome, Admin!</p>
        <nav>
            <a href="create_patient.php" class="btn btn-primary mb-2 btn-block">Create New Patient</a>
            <a href="invoice/" class="btn btn-primary mb-2 btn-block">Invoices</a>
            <a href="prescription/view_prescriptions.php" class="btn btn-primary mb-2 btn-block">Prescriptions</a>
            <a href="admin_report.php" class="btn btn-primary mb-2 btn-block">Reports</a>
            <a href="manage_comments.php" class="btn btn-primary mb-2 btn-block position-relative">
                Manage Comments 
                <?php if ($new_comments_count > 0): ?>
                    <span class="badge badge-danger"><?= $new_comments_count ?></span>
                <?php endif; ?>
            </a>
            <a href="doctors/manage_doctors.php" class="btn btn-primary mb-2 btn-block">Manage Doctors</a>
            <a href="team/manage_employees.php" class="btn btn-primary mb-2 btn-block">Manage Employees</a>
            <a href="appointment/manage_appointments.php" class="btn btn-primary mb-2 btn-block">Manage Appointments</a>
            <a href="admin_logout.php" class="btn btn-secondary mb-2 btn-block">Log Out</a>
        </nav>
    </div>
    <div class="main-content">
        <h2>Data Analysis</h2>
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Total Patients</h5>
                        <p class="card-text fs-4"><?= $total_patients ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Recent Registrations (30 days)</h5>
                        <p class="card-text fs-4"><?= $recent_registrations ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Registrations Today</h5>
                        <p class="card-text fs-4"><?= $today_registrations ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Total Invoices</h5>
                        <p class="card-text fs-4"><?= $total_invoices ?></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-3 mt-3">
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="genderChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="ageChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="mt-5">Patient List</h2>
        <div class="filters">
            <form method="GET" class="row">
                <!-- Optional filters form -->
            </form>
        </div>
        <div class="table-responsive">
            <table id="patientTable" class="table table-bordered table-striped mt-3">
                <thead>
                    <tr>
                        <th>Patient ID</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Age</th>
                        <th>Gender</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Registration Date</th>
                        <th>Has Invoice</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($patients as $patient): ?>
                    <tr>
                        <td><?= $patient['id'] ?></td>
                        <td><?= htmlspecialchars($patient['name'], ENT_QUOTES) ?></td>
                        <td><?= htmlspecialchars($patient['username'], ENT_QUOTES) ?></td>
                        <td><?= $patient['age'] ?></td>
                        <td><?= $patient['gender'] ?></td>
                        <td><?= htmlspecialchars($patient['phone'], ENT_QUOTES) ?></td>
                        <td><?= htmlspecialchars($patient['email'], ENT_QUOTES) ?></td>
                        <td><?= htmlspecialchars($patient['address'], ENT_QUOTES) ?></td>
                        <td><?= $patient['registration_date'] ?></td>
                        <td>
                            <?php
                            $has_invoice_query = "SELECT COUNT(*) AS invoice_count FROM invoices WHERE patient_id = ?";
                            $stmt = $pdo->prepare($has_invoice_query);
                            $stmt->execute([$patient['id']]);
                            $invoice_result = $stmt->fetch();

                            echo $invoice_result['invoice_count'] > 0
                                ? '<span class="text-success font-weight-bold">Yes</span>'
                                : '<span class="text-danger font-weight-bold">No</span>';
                            ?>
                        </td>
                        <td>
                            <form method="POST" action="update_patient_status.php">
                                <input type="hidden" name="patient_id" value="<?= $patient['id'] ?>">
                                <select name="status" onchange="this.form.submit()" class="form-control form-control-sm">
                                    <?php foreach ($status_options as $option): ?>
                                        <option value="<?= htmlspecialchars($option, ENT_QUOTES) ?>" <?= $patient['status'] == $option ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($option, ENT_QUOTES) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </form>
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="view_patient.php?id=<?= $patient['id'] ?>" class="btn btn-info btn-sm">View</a>
                                <a href="edit_patient.php?id=<?= $patient['id'] ?>" class="btn btn-warning btn-sm">Edit</a>
                                <a href="delete_patient.php?id=<?= $patient['id'] ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this patient?')">Delete</a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script>
        $(document).ready(function() {
            $('#patientTable').DataTable({
                "order": [],
                "responsive": true
            });
        });

        // Sidebar toggle
        document.getElementById('toggleSidebar').addEventListener('click', function() {
            document.body.classList.toggle('show-sidebar');
        });

        // Gender Distribution Chart
        var genderCtx = document.getElementById('genderChart').getContext('2d');
        var genderChart = new Chart(genderCtx, {
            type: 'pie',
            data: {
                labels: <?= json_encode(array_column($gender_distribution, 'gender')) ?>,
                datasets: [{
                    data: <?= json_encode(array_column($gender_distribution, 'count')) ?>,
                    backgroundColor: ['#4F3F02', '#D1C287', '#FFCE56']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Gender Distribution'
                    }
                }
            }
        });

        // Age Distribution Chart
        var ageCtx = document.getElementById('ageChart').getContext('2d');
        var ageChart = new Chart(ageCtx, {
            type: 'bar',
            data: {
                labels: <?= json_encode(array_column($age_distribution, 'age_group')) ?>,
                datasets: [{
                    label: 'Number of Patients',
                    data: <?= json_encode(array_column($age_distribution, 'count')) ?>,
                    backgroundColor: '#D1C287'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Age Distribution'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Status Distribution Chart
        var statusCtx = document.getElementById('statusChart').getContext('2d');
        var statusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: <?= json_encode(array_column($status_distribution, 'status')) ?>,
                datasets: [{
                    data: <?= json_encode(array_column($status_distribution, 'count')) ?>,
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#8D6E63', '#7986CB', '#81C784', '#DCE775', '#FFB74D', '#BA68C8']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Status Distribution'
                    }
                }
            }
        });
    </script>
</body>
</html>) make it responisve design for all devices and type full codes, i meant don't add menu bar on desktop view and show the nav bar and on moilbe version add menu bar