from 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();
}

// Initialize filter variables with sanitization
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$gender = isset($_GET['gender']) ? trim($_GET['gender']) : '';
$min_age = isset($_GET['min_age']) ? intval($_GET['min_age']) : '';
$max_age = isset($_GET['max_age']) ? intval($_GET['max_age']) : '';
$status = isset($_GET['status']) ? trim($_GET['status']) : '';
$sort_by = isset($_GET['sort_by']) ? trim($_GET['sort_by']) : 'id'; // Default sort by ID

// Build the SQL query with filters
$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 :search OR pl.username LIKE :search OR p.id LIKE :search OR p.phone LIKE :search OR p.email LIKE :search)";
    $params[':search'] = "%$search%";
}

if ($gender) {
    $sql .= " AND p.gender = :gender";
    $params[':gender'] = $gender;
}

if ($min_age !== '') {
    $sql .= " AND p.age >= :min_age";
    $params[':min_age'] = $min_age;
}

if ($max_age !== '') {
    $sql .= " AND p.age <= :max_age";
    $params[':max_age'] = $max_age;
}

if ($status) {
    $sql .= " AND p.status = :status";
    $params[':status'] = $status;
}

// Add sorting
$allowed_sort_columns = ['id', 'name', 'age', 'registration_date_asc', 'registration_date_desc'];
if (in_array($sort_by, $allowed_sort_columns)) {
    if ($sort_by == 'registration_date_asc') {
        $sql .= " ORDER BY p.registration_date ASC";
    } elseif ($sort_by == 'registration_date_desc') {
        $sql .= " ORDER BY p.registration_date DESC";
    } else {
        $sql .= " ORDER BY p.$sort_by";
    }
} else {
    $sql .= " ORDER BY p.id"; // Default sorting
}

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

// Get all possible status options
$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'
];
?>

<!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>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
    <!-- Custom CSS for modern design -->
    <style>
        body {
            background-color: #f4f6f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

        h1, h2 {
            font-weight: 700;
        }

        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
            font-weight: 600;
        }

        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }

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

        .filter-form .form-control, .filter-form select {
            margin-bottom: 15px;
            border-radius: 5px;
        }

        .table-responsive {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }

        th, td {
            vertical-align: middle !important;
        }

        .form-control {
            border-radius: 0.5rem;
        }

        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: #fff;
            font-weight: 600;
        }

        .btn-secondary:hover {
            background-color: #5c636a;
            border-color: #565e64;
        }

        .card {
            border: none;
            border-radius: 12px;
        }

        .card .card-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: #6c757d;
        }

        .chart-container {
            position: relative;
            height: 400px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .filter-form .form-control, .filter-form select {
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid"> 
        <div class="dashboard-header">
            <h1>Admin Dashboard</h1>
            <p>Welcome, Admin!</p>
        </div>

        <div class="d-flex mb-4">
            <a href="create_patient.php" class="btn btn-primary me-2">Create New Patient</a>
            <a href="invoice/" class="btn btn-primary me-2">Create an Invoice</a>
            <a href="admin_report.php" class="btn btn-primary me-2">Report (Data Analysis)</a>
            <a href="admin_logout.php" class="btn btn-secondary">Log Out</a>
        </div>

        <?php
        // Fetch total number of patients
        $stmt = $pdo->query("SELECT COUNT(*) FROM patients");
        $total_patients = $stmt->fetchColumn();
        // Fetch gender distribution
        $stmt = $pdo->query("SELECT gender, COUNT(*) as count FROM patients GROUP BY gender");
        $gender_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);
        // Fetch age distribution
        $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
            ORDER BY 
                CASE 
                    WHEN age_group = 'Under 18' THEN 1
                    WHEN age_group = '18-30' THEN 2
                    WHEN age_group = '31-50' THEN 3
                    WHEN age_group = '51-70' THEN 4
                    ELSE 5
                END
        ");
        $age_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);
        // Fetch status distribution
        $stmt = $pdo->query("SELECT status, COUNT(*) as count FROM patients GROUP BY status");
        $status_distribution = $stmt->fetchAll(PDO::FETCH_ASSOC);
        // Fetch recent registrations (last 30 days)
        $stmt = $pdo->query("SELECT COUNT(*) FROM patients WHERE registration_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)");
        $recent_registrations = $stmt->fetchColumn();
        // Fetch recent registrations (today)
        $stmt = $pdo->query("SELECT COUNT(*) FROM patients WHERE DATE(registration_datetime) = CURDATE()");
        $today_registrations = $stmt->fetchColumn();
        // Fetch total invoices
        $stmt = $pdo->query("SELECT COUNT(*) FROM invoices");
        $total_invoices = $stmt->fetchColumn();
        ?>

        <h2 class="mb-4">Data Analysis</h2>
        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="card text-center p-4">
                    <div class="card-body">
                        <h5 class="card-title">Total Patients</h5>
                        <p class="card-text display-6"><?= $total_patients ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center p-4">
                    <div class="card-body">
                        <h5 class="card-title">Recent Registrations (30 Days)</h5>
                        <p class="card-text display-6"><?= $recent_registrations ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center p-4">
                    <div class="card-body">
                        <h5 class="card-title">Today's Registrations</h5>
                        <p class="card-text display-6"><?= $today_registrations ?></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card text-center p-4">
                    <div class="card-body">
                        <h5 class="card-title">Total Invoices</h5>
                        <p class="card-text display-6"><?= $total_invoices ?></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4 mt-4">
            <div class="col-lg-4 col-md-6">
                <div class="card p-3">
                    <div class="card-body">
                        <h5 class="card-title">Gender Distribution</h5>
                        <div class="chart-container">
                            <canvas id="genderChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card p-3">
                    <div class="card-body">
                        <h5 class="card-title">Age Distribution</h5>
                        <div class="chart-container">
                            <canvas id="ageChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="card p-3">
                    <div class="card-body">
                        <h5 class="card-title">Status Distribution</h5>
                        <div class="chart-container">
                            <canvas id="statusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="mt-5">Patient List</h2>

        <div class="filters mb-4">
            <form action="" method="GET" class="filter-form row g-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" name="search" placeholder="Search by ID, Name, Username, Phone, or Email" value="<?= htmlspecialchars($search) ?>">
                </div>
                <div class="col-md-2">
                    <select name="gender" class="form-select">
                        <option value="">All Genders</option>
                        <option value="Male" <?= $gender == 'Male' ? 'selected' : '' ?>>Male</option>
                        <option value="Female" <?= $gender == 'Female' ? 'selected' : '' ?>>Female</option>
                        <option value="Other" <?= $gender == 'Other' ? 'selected' : '' ?>>Other</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control" name="min_age" placeholder="Min Age" value="<?= htmlspecialchars($min_age) ?>">
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control" name="max_age" placeholder="Max Age" value="<?= htmlspecialchars($max_age) ?>">
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">All Statuses</option>
                        <?php foreach ($status_options as $option): ?>
                            <option value="<?= htmlspecialchars($option) ?>" <?= $status == $option ? 'selected' : '' ?>><?= htmlspecialchars($option) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="sort_by" class="form-select">
                        <option value="id" <?= $sort_by == 'id' ? 'selected' : '' ?>>Sort by ID</option>
                        <option value="name" <?= $sort_by == 'name' ? 'selected' : '' ?>>Sort by Name</option>
                        <option value="age" <?= $sort_by == 'age' ? 'selected' : '' ?>>Sort by Age</option>
                        <option value="registration_date_asc" <?= $sort_by == 'registration_date_asc' ? 'selected' : '' ?>>Registration Date (Oldest)</option>
                        <option value="registration_date_desc" <?= $sort_by == 'registration_date_desc' ? 'selected' : '' ?>>Registration Date (Newest)</option>
                    </select>
                </div>
                <div class="col-md-12">
                    <button type="submit" class="btn btn-success me-2">Filter</button>
                    <a href="admin_dashboard.php" class="btn btn-secondary">Clear</a>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table id="patientTable" class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Patient ID</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Age</th>
                        <th>Gender</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Registration Date</th>
                        <th>Has Invoice</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if ($patients): ?>
                        <?php foreach ($patients as $patient): ?>
                            <tr>
                                <td><?= htmlspecialchars($patient['id']) ?></td>
                                <td><?= htmlspecialchars($patient['name']) ?></td>
                                <td><?= htmlspecialchars($patient['username']) ?></td>
                                <td><?= htmlspecialchars($patient['age']) ?></td>
                                <td><?= htmlspecialchars($patient['gender']) ?></td>
                                <td><?= htmlspecialchars($patient['phone']) ?></td>
                                <td><?= htmlspecialchars($patient['email']) ?></td>
                                <td><?= htmlspecialchars($patient['registration_date']) ?></td>
                                <td>
                                    <?php
                                    // Check if the patient has any invoices
                                    $stmt = $pdo->prepare("SELECT COUNT(*) FROM invoices WHERE patient_id = ?");
                                    $stmt->execute([$patient['id']]);
                                    $invoice_count = $stmt->fetchColumn();
                                    ?>
                                    <span class="<?= $invoice_count > 0 ? 'text-success fw-bold' : 'text-danger fw-bold' ?>">
                                        <?= $invoice_count > 0 ? 'Yes' : 'No' ?>
                                    </span>
                                </td>
                                <td>
                                    <form method="POST" action="update_patient_status.php" class="d-inline">
                                        <input type="hidden" name="patient_id" value="<?= htmlspecialchars($patient['id']) ?>">
                                        <select name="status" onchange="this.form.submit()" class="form-select form-select-sm">
                                            <?php foreach ($status_options as $option): ?>
                                                <option value="<?= htmlspecialchars($option) ?>" <?= $patient['status'] == $option ? 'selected' : '' ?>><?= htmlspecialchars($option) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </form>
                                </td>
                                <td>
                                    <a href="view_patient.php?id=<?= htmlspecialchars($patient['id']) ?>" class="btn btn-info btn-sm">View</a>
                                    <a href="edit_patient.php?id=<?= htmlspecialchars($patient['id']) ?>" class="btn btn-warning btn-sm">Edit</a>
                                    <a href="delete_patient.php?id=<?= htmlspecialchars($patient['id']) ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this patient?')">Delete</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="11" class="text-center">No patients found.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        
    </div>

    <!-- jQuery (required for DataTables) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- DataTables JS -->
    <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.bootstrap5.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom JS -->
    <script>
        $(document).ready(function() {
            // Initialize DataTable
            $('#patientTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "pageLength": 10,
                "searching": false, // Disable default searching since we have custom filters
                "ordering": true,
                "order": [], // Default no ordering
                "info": true,
                "autoWidth": false,
                "responsive": true
            });
        });

        // 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: [
                        '#007bff', '#dc3545', '#ffc107', '#28a745', '#17a2b8'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    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: '#0d6efd'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false,
                    },
                    title: {
                        display: true,
                        text: 'Age Distribution'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        precision:0
                    }
                }
            }
        });

        // 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: [
                        '#28a745','#dc3545','#ffc107','#17a2b8','#6f42c1','#fd7e14',
                        '#20c997','#6610f2','#e83e8c','#007bff','#6c757d','#343a40','#fd7e14'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        maxWidth: 200
                    },
                    title: {
                        display: true,
                        text: 'Status Distribution'
                    }
                }
            }
        });
    </script>
</body>
</html>
)make this codes so good and create a CSS style prompt based on this image, I'll describe the visual design elements without mentioning the specific content:

Color Scheme:

Primary color: Gold/bronze (#c9b37e or similar)
Secondary color: Dark gray/charcoal (#333333 or similar)
Text color: White for headings on dark background, gold for accents
Background: Predominantly dark with subtle gradient


Typography:

Modern sans-serif font family for headings and body text
Mixture of uppercase and sentence case text
Large, bold headings
Smaller, lighter weight for body text


Layout:

Full-width header with centered logo and navigation
Hero section with large heading and centered content
Sections separated by subtle dividers or spacing
Use of circular diagrams and icons
Three-column layout for feature highlights
Cards or boxes for categorized information


Imagery:

Subtle scientific imagery (DNA strands, molecular structures)
Overlay effects on background images
Circular icons or illustrations


UI Elements:

Rounded corners on buttons and cards
Ghost buttons with gold borders
Hover effects on interactive elements
Play button overlay on video thumbnail


Navigation:

Horizontal menu in header
Clear hierarchy with dropdown options


Responsive Design:

Fluid layout adaptable to different screen sizes
Mobile-friendly navigation


Special Effects:

Subtle shadows for depth
Possible parallax scrolling or smooth transitions between sections


Footer:

Dark background with multiple columns for site information

and type full codes