please make data of col and row showing on mobile viersoin and make suitable for all devices (<?php
// longeva_health_journey_answers/index.php

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

if (!isset($_SESSION['admin_id'])) {
    header("Location: ../login.php");
    exit();
}

include '../includes/header.php';

$patients = [];

try {
    // Fetch all patients with their consultation and related details
    $sql = "
        SELECT 
            pbi.patient_id,
            pbi.name AS patient_name,
            pbi.email AS patient_email,
            pbi.phone AS patient_phone,
            pbi.gender AS patient_gender,
            pbi.age AS patient_age,
            pbi.weight AS patient_weight,
            pbi.height AS patient_height,
            pbi.address AS patient_address,
            pbi.created_at,
            pbi.updated_at,
            pc.scheduled_at,
            cons.consent,
            goals.primary_health_goals,
            goals.health_concerns,
            metrics.exercise_frequency,
            metrics.diet,
            metrics.diet_specify,
            metrics.sleep_average,
            metrics.smoking_status,
            history.chronic_conditions,
            history.chronic_conditions_specify,
            history.medications,
            history.medications_list,
            history.major_surgeries,
            history.major_surgeries_specify
        FROM 
            patient_basic_info pbi
        INNER JOIN 
            patient_consultation pc ON pbi.patient_id = pc.patient_id
        LEFT JOIN 
            patient_consent cons ON pbi.patient_id = cons.patient_id
        LEFT JOIN 
            patient_goals goals ON pbi.patient_id = goals.patient_id
        LEFT JOIN 
            patient_health_metrics metrics ON pbi.patient_id = metrics.patient_id
        LEFT JOIN 
            patient_medical_history history ON pbi.patient_id = history.patient_id
        ORDER BY 
            pbi.created_at DESC
    ";

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

} catch (PDOException $e) {
    echo "<div class='alert alert-danger'>Database Error: " . htmlspecialchars($e->getMessage()) . "</div>";
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Longeva Health Journey - Patient Dashboard</title>
    <!-- Custom Styles -->
    <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;
            --button-hover-color: #c9b458;
            --border-radius: 8px;
            --transition-speed: 0.3s;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
                          0 1px 3px rgba(0, 0, 0, 0.08);
        }

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

        .container-survey {
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
        }

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

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

        .section {
            margin-top: 20px;
            padding: 20px;
            background-color: var(--background-color);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .section:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2),
                        0 4px 6px rgba(0, 0, 0, 0.15);
        }

        .section h3 {
            font-size: 24px;
            margin-top: 0;
            color: var(--primary-color);
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 10px;
        }

        .action-buttons a {
            margin-right: 5px;
        }

        /* Responsive Enhancements */
        @media (max-width: 768px) {
            .container-survey {
                margin: 20px;
                padding: 15px;
            }

            .header h2 {
                font-size: 28px;
            }

            .section h3 {
                font-size: 22px;
            }

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

        @media (max-width: 480px) {
            .header h2 {
                font-size: 24px;
            }

            .section h3 {
                font-size: 20px;
            }

            .btn {
                font-size: 10px;
                padding: 4px 6px;
            }
        }

        /* Additional Styles */
        .card {
            border: 1px solid #e0e0e0;
            border-radius: var(--border-radius);
            padding: 15px;
            background-color: #fff;
        }

        .card-body {
            padding: 10px 0;
        }

        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
        }

        .btn-info {
            background-color: #17a2b8;
            color: #fff;
        }

        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .btn-danger {
            background-color: #dc3545;
            color: #fff;
        }

        .btn-success {
            background-color: #28a745;
            color: #fff;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: #fff;
        }

        .table thead th {
            vertical-align: middle;
        }

    </style>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap5.min.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-survey">
        <div class="header">
            <h2>Survey Information - Longeva Health Journey</h2>
        </div>

        <!-- Welcome Card -->
        <div class="section">
            <div class="card">
                <div class="card-body">
                    <h3>Welcome to the Longeva Health Journey Dashboard</h3>
                    <p>Manage patient surveys, view detailed information, and perform administrative tasks related to the health journey program all in one place.</p>
                </div>
            </div>
        </div>

        <!-- Patient Data Table -->
        <div class="section">
            <h3>Patient Data</h3>
            <!-- Add Export Buttons -->
            <div class="mb-3">
                <button id="exportCsv" class="btn btn-secondary btn-sm">Export CSV</button>
                <button id="exportExcel" class="btn btn-secondary btn-sm">Export Excel</button>
                <button id="exportPdf" class="btn btn-secondary btn-sm">Export PDF</button>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered" id="patientTable">
                    <thead>
                        <tr>
                            <!-- Removed the toggle button column -->
                            <th>Patient ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Gender</th>
                            <th>Age</th>
                            <th>Address</th>
                            <th>Consultation Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if ($patients): ?>
                            <?php foreach ($patients as $patient): ?>
                                <tr>
                                    <td><?= htmlspecialchars($patient['patient_id']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_name']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_email']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_phone']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_gender']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_age']) ?></td>
                                    <td><?= htmlspecialchars($patient['patient_address']) ?></td>
                                    <td><?= htmlspecialchars(date('Y-m-d H:i', strtotime($patient['scheduled_at']))) ?></td>
                                    <td class="action-buttons">
                                        <a href="view_patient.php?id=<?= htmlspecialchars($patient['patient_id']) ?>" class="btn btn-info btn-sm">View</a>
                                        <a href="add_appointment.php?patient_id=<?= htmlspecialchars($patient['patient_id']) ?>" class="btn btn-warning btn-sm">Add Appointment</a>
                                        <a href="edit_patient.php?id=<?= htmlspecialchars($patient['patient_id']) ?>" class="btn btn-success btn-sm">Edit</a>
                                        <a href="delete_patient.php?id=<?= htmlspecialchars($patient['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="9" class="text-center">No survey answers found.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Include necessary scripts for DataTables and Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Include DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <!-- Include DataTables Responsive JS -->
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap5.min.js"></script>
    <!-- Include jsPDF for PDF export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
    <!-- Include SheetJS for Excel export -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <!-- Initialize DataTables and Export Functionality -->
    <script>
    $(document).ready(function() {
        // Initialize DataTables
        var table = $('#patientTable').DataTable({
            "paging": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "lengthChange": true,
            "responsive": true,
            "columnDefs": [
                { "orderable": false, "targets": [8] } // Disable ordering on the Actions column
            ],
            "language": {
                "search": "Filter records:",
                "lengthMenu": "Show _MENU_ entries",
                "info": "Showing _START_ to _END_ of _TOTAL_ patients",
                "paginate": {
                    "previous": "Prev",
                    "next": "Next"
                }
            }
        });

        // Export to CSV
        $('#exportCsv').on('click', function() {
            var csvData = [];
            var headers = [];
            $('#patientTable thead th').each(function() {
                headers.push($(this).text());
            });
            csvData.push(headers.join(','));

            table.rows({ search: 'applied' }).every(function(rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                var row = [];
                for (var i = 0; i < data.length -1; i++) { // Exclude the last column (Actions)
                    row.push('"' + $(data[i]).text().replace(/"/g, '""') + '"');
                }
                csvData.push(row.join(','));
            });

            var csvString = csvData.join("\n");
            var blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
            var link = document.createElement("a");
            if (link.download !== undefined) { 
                var url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", "patient_data.csv");
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        });

        // Export to Excel
        $('#exportExcel').on('click', function() {
            var wb = XLSX.utils.book_new();
            var ws_data = [];
            var headers = [];
            $('#patientTable thead th').each(function() {
                headers.push($(this).text());
            });
            ws_data.push(headers);

            table.rows({ search: 'applied' }).every(function(rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                var row = [];
                for (var i = 0; i < data.length -1; i++) { // Exclude the last column (Actions)
                    row.push($(data[i]).text());
                }
                ws_data.push(row);
            });

            var ws = XLSX.utils.aoa_to_sheet(ws_data);
            XLSX.utils.book_append_sheet(wb, ws, "Patients");
            XLSX.writeFile(wb, "patient_data.xlsx");
        });

        // Export to PDF
        $('#exportPdf').on('click', function() {
            const { jsPDF } = window.jspdf;
            var doc = new jsPDF();

            var headers = [];
            $('#patientTable thead th').each(function() {
                headers.push($(this).text());
            });

            var data = [];
            table.rows({ search: 'applied' }).every(function(rowIdx, tableLoop, rowLoop) {
                var row = [];
                var rowData = this.data();
                for (var i = 0; i < rowData.length -1; i++) { // Exclude the last column (Actions)
                    row.push($(rowData[i]).text());
                }
                data.push(row);
            });

            doc.autoTable({
                head: [headers],
                body: data,
                startY: 20,
                styles: { fontSize: 8 },
                headStyles: { fillColor: [79, 63, 2] }
            });
            doc.text("Patient Data", 14, 15);
            doc.save("patient_data.pdf");
        });
    });
    </script>
</body>
<?php include '../includes/footer.php'; ?>
</html>) and type full cdoes