<?php
require_once __DIR__ . '/../../config.php';
require_once __DIR__ . '/../../auth_check.php';
require_role('Admin');

if (session_status() === PHP_SESSION_NONE) session_start();

// ✅ SweetAlert helper
function showAlert($icon, $title, $text, $redirectUrl = null, $button = 'OK') {
    $redirectJs = $redirectUrl ? "window.location.href = '$redirectUrl';" : '';
    echo "<!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='utf-8'>
      <meta name='viewport' content='width=device-width,initial-scale=1'>
      <title>$title</title>
      <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
      <style>body{font-family:Quicksand,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:linear-gradient(135deg,#f0f4f8,#d9e2ec);}</style>
    </head>
    <body>
    <script>
      Swal.fire({
        icon:'".addslashes($icon)."',
        title:'".addslashes($title)."',
        text:'".addslashes($text)."',
        confirmButtonText:'".addslashes($button)."',
        confirmButtonColor:'#3085d6',
        allowOutsideClick:false
      }).then(()=>{ $redirectJs });
    </script>
    </body></html>";
    exit();
}

// ✅ Auth check
if (!isset($_SESSION['uid'])) {
    showAlert('warning', 'Access denied', 'Please login.', '../login.php', 'Login');
}

// ✅ Fetch patient data
$sql = "SELECT p.patient_id, p.patient_code, p.firstname, p.gender, p.age, p.phone, p.address, p.is_active, p.created_at
        FROM patients p
        ORDER BY p.is_active DESC, p.created_at DESC";
$res = $conn->query($sql);
if (!$res) showAlert('error', 'Database Error', 'DB error: ' . htmlspecialchars($conn->error));
?>
<!DOCTYPE html><!--
Name: Sherya's Hospital 
Author: K Naveen
Website: http://www.innoventrics.in/
Contact: info@innoventrics.in
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><!-- BEGIN: Head -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="edjGgac9mtFsWPbrGHhItAsXhkBE8VClTqg62ZE4">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Midone admin is super flexible, powerful, clean & modern responsive tailwind admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, midone Admin Template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="LEFT4CODE">
    <link href="https://fonts.googleapis.com/" rel="preconnect">
    <link href="https://fonts.gstatic.com/" rel="preconnect" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap" rel="stylesheet">
    <title>Admin Dashboard - Innoventrics Lab</title>
    <!-- BEGIN: CSS Assets-->
    <link rel="stylesheet" href="dist/css/vendors/vector-map.css">
    <link rel="stylesheet" href="dist/css/vendors/tiny-slider.css">
    <link rel="stylesheet" href="dist/css/themes/rubick/side-menu.css">
    <link rel="stylesheet" href="dist/css/vendors/simplebar.css">
    <link rel="stylesheet" href="dist/css/vendors/tom-select.css">
    <link rel="stylesheet" href="dist/css/app.css">
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <style>
.btn{padding:6px 12px;border:none;border-radius:6px;font-size:13px;cursor:pointer;}
.btn-primary{background:#007bff;color:#fff;}
.btn-danger{background:#dc3545;color:#fff;}
.btn-success{background:#28a745;color:#fff;}
.btn:hover{opacity:0.9;}
.badge{padding:4px 8px;font-size:12px;border-radius:4px;}
h4{text-align:center;font-weight:600;font-size:19px;margin-bottom:35px;background:linear-gradient(45deg,#125069,#00bcd4);-webkit-background-clip:text;color:transparent;}
h4::after{content:'';width:80px;height:3px;background:#125069;display:block;margin:8px auto;border-radius:2px;}
</style><!-- END: CSS Assets-->
</head>
<!-- END: Head -->
<body>

    <div class="page-loader bg-background fixed inset-0 z-[100] flex items-center justify-center transition-opacity">
        <div class="loader-spinner !w-14"></div>
    </div>
    <div class="rubick min-h-screen dark:bg-background before:bg-primary dark:before:bg-foreground/[.01] before:fixed before:inset-0 before:bg-noise after:bg-accent after:bg-contain after:fixed after:inset-0 after:blur-xl dark:after:opacity-20">
        <div class="side-menu text-background dark:text-foreground xl:ml-0 transition-[margin] duration-200 fixed top-0 left-0 z-50 group before:content-[''] before:fixed before:inset-0 before:bg-black/80 dark:before:bg-foreground/5 before:backdrop-blur before:xl:hidden after:content-[''] after:absolute after:inset-0 after:bg-primary after:xl:hidden dark:after:bg-background after:bg-noise [&.side-menu--mobile-menu-open]:ml-0 [&.side-menu--mobile-menu-open]:before:block -ml-[275px] before:hidden">
            <div class="close-mobile-menu fixed ml-[275px] xl:hidden z-50 cursor-pointer [&.close-mobile-menu--mobile-menu-open]:block hidden">
                <div class="ml-5 mt-5 flex size-10 items-center justify-center">
                    <i data-lucide="x" class="[--color:currentColor] stroke-(--color) fill-(--color)/25 size-7 stroke-1"></i>
                </div>
            </div>
            <div class="side-menu__content z-20 pt-5 pb-[7.5rem] relative w-[275px] duration-200 transition-[width] group-[.side-menu--collapsed]:xl:w-[110px] group-[.side-menu--collapsed.side-menu--on-hover]:xl:w-[275px] h-screen flex flex-col">
                <div class="relative z-10 hidden h-[65px] w-[275px] flex-none items-center overflow-hidden px-6 duration-200 xl:flex group-[.side-menu--collapsed.side-menu--on-hover]:xl:w-[275px] group-[.side-menu--collapsed]:xl:w-[110px]">
                    <a class="flex items-center transition-[margin] duration-200 xl:ml-2 group-[.side-menu--collapsed.side-menu--on-hover]:xl:ml-2 group-[.side-menu--collapsed]:xl:ml-6" href="#">
                        <img class="size-5" src="dist/images/logo.svg">
                        <div class="ml-3.5 text-nowrap transition-opacity group-[.side-menu--collapsed.side-menu--on-hover]:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0">
                            <span class="text-base font-medium">Innoventrics</span>
                            <span class="text-base font-light">Lab</span>
                        </div>
                    </a>
                    <a class="toggle-compact-menu border-background/20 bg-background/10 dark:bg-foreground/[.02] dark:border-foreground/[.09] ml-auto hidden items-center justify-center rounded-md border py-0.5 pl-0.5 pr-1 opacity-70 transition-[opacity,transform] hover:opacity-100 group-[.side-menu--collapsed]:xl:rotate-180 group-[.side-menu--collapsed.side-menu--on-hover]:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0 2xl:flex" href="#">
                        <i data-lucide="chevron-left" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>
                    </a>
                </div>
                <div class="w-full h-full z-20 px-4 overflow-y-auto overflow-x-hidden pb-3 [&:-webkit-scrollbar]:w-0 scroll-smooth [&_.simplebar-scrollbar]:before:!bg-background/70 [-webkit-mask-image:_linear-gradient(to_top,_rgba(0,_0,_0,_0),_black_30px),_linear-gradient(to_bottom,_rgba(0,_0,_0,_0),_black_30px)] [-webkit-mask-composite:_destination-in]">
                    <ul class="scrollable">
                        <!-- BEGIN: First Child -->
                        <li class="side-menu__group-label">
                            Technician Dashboard
                        </li>
                        <!-- END: First Child -->
                        <!-- BEGIN: First Child -->
                        <li>
                            <a href="index.php" class="side-menu__link  ">
                                <i data-lucide="home" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                <div class="side-menu__link__title">Home</div>
                            </a>
                            <!-- BEGIN: Second Child -->
                            <!-- END: Second Child -->
                        </li>
                        
                        <!-- BEGIN: First Child -->
                        <li>
                            <a href="javascript:;" class="side-menu__link side-menu__link--active">
                                <i data-lucide="users" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                <div class="side-menu__link__title">Patient</div>
                                <i data-lucide="chevron-down" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__chevron transition"></i>
                            </a>
                            <!-- BEGIN: Second Child -->
                            <ul class="hidden">
                                <li>
                                    <a href="add_patient.php" class="side-menu__link ">
                                        <i data-lucide="user-plus" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            Add Patient
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                                <li>
                                    <a href="view_patient.php" class="side-menu__link side-menu__link--active ">
                                        <i data-lucide="user-check" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            View Patient
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                            </ul>
                            <!-- END: Second Child -->
                        </li>
                        <!-- END: First Child -->
                        <!-- BEGIN: First Child -->
                        <li>
                            <a href="javascript:;" class="side-menu__link ">
                                <i data-lucide="wallet" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                <div class="side-menu__link__title">Billing</div>
                                <i data-lucide="chevron-down" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__chevron transition"></i>
                            </a>
                            <!-- BEGIN: Second Child -->
                            <ul class="hidden">
                                <li>
                                    <a href="add_bill.php" class="side-menu__link ">
                                        <i data-lucide="file-plus" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            Add Bill
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                                <li>
                                    <a href="view_bill.php" class="side-menu__link ">
                                        <i data-lucide="file-text" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            View Bill
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                            </ul>
                            <!-- END: Second Child -->
                        </li>
                        <!-- END: First Child -->
                        <!-- BEGIN: First Child -->
                        <li>
                            <a href="javascript:;" class="side-menu__link ">
                                <i data-lucide="bar-chart-3" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                <div class="side-menu__link__title">Report</div>
                                <i data-lucide="chevron-down" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__chevron transition"></i>
                            </a>
                            <!-- BEGIN: Second Child -->
                            <ul class="hidden">
                                <li>
                                    <a href="enter_result.php" class="side-menu__link ">
                                        <i data-lucide="file-pen-line" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            Enter Result
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                                <li>
                                    <a href="view_report.php" class="side-menu__link ">
                                        <i data-lucide="printer" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            View Report
                                        </div>
                                    </a>
                                    <!-- BEGIN: Third Child -->
                                    <!-- END: Third Child -->
                                </li>
                            </ul>
                            <!-- END: Second Child -->
                        </li>
                        <!-- END: First Child -->
                        
                        
                    </ul>
                </div>
                
                <div class="side-menu__account group/profile absolute inset-x-0 bottom-0 mx-4 mb-8 transition-[width] group-[.side-menu--collapsed.side-menu--on-hover]:block group-[.side-menu--collapsed]:justify-center xl:group-[.side-menu--collapsed]:flex">
                    <div class="bg-background/10 border-background/20 dark:bg-foreground/[.02] dark:border-foreground/[.09] flex cursor-pointer items-center rounded-full border p-2.5 opacity-80 backdrop-blur-2xl transition hover:opacity-100">
                        <div class="border-background/20 dark:border-foreground/20 relative h-10 w-10 flex-none overflow-hidden rounded-full border-4">
                            <img class="absolute top-0 h-full w-full object-cover" src="dist/images/fakers/profile-14.jpg" alt="Midone - Admin Dashboard Template">
                        </div>
                        <div class="ms-3 flex w-full items-center overflow-hidden transition-opacity group-[.side-menu--collapsed.side-menu--on-hover]:ms-3 group-[.side-menu--collapsed.side-menu--on-hover]:w-full group-[.side-menu--collapsed.side-menu--on-hover]:opacity-100 xl:group-[.side-menu--collapsed]:ms-0 xl:group-[.side-menu--collapsed]:w-0 xl:group-[.side-menu--collapsed]:opacity-0">
                            <div class="w-28">
                                <div class="w-full truncate font-medium">Kevin Spacey</div>
                                <div class="w-full truncate text-xs opacity-60">Administrator</div>
                            </div>
                            <i data-lucide="move-right" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 me-4 ms-auto opacity-50"></i>
                        </div>
                    </div>
                    <div class="hidden group-hover/profile:block">
                        <div class="box p-5 before:absolute before:inset-0 before:mx-3 before:-mb-3 before:border before:border-foreground/10 before:bg-background/30 before:z-[-1] after:absolute after:inset-0 after:border after:border-foreground/10 after:bg-background after:shadow-[0px_3px_5px_#0000000b] after:z-[-1] after:backdrop-blur-md text-foreground before:shadow-foreground/5 absolute bottom-0 left-[100%] z-50 ml-2 flex w-64 flex-col gap-2.5 px-6 py-5 before:rounded-2xl before:shadow-xl before:backdrop-blur after:rounded-2xl">
                            <div class="flex flex-col gap-0.5">
                                <div class="font-medium">Kevin Spacey</div>
                                <div class="mt-0.5 text-xs opacity-70">DevOps Engineer</div>
                            </div>
                            <div class="bg-foreground/5 h-px"></div>
                            <div class="flex flex-col gap-0.5">
                                <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5" href="#">
                                    <i data-lucide="users" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>
                                    Profile
                                </a>
                                
                            </div>
                            <div class="bg-foreground/5 h-px"></div>
                            <div class="flex flex-col gap-0.5">
                                <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5" href="#">
                                    <i data-lucide="power" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>
                                    Logout
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content h-screen transition-[margin,width] duration-200 pt-8 pb-12 px-7 z-10 relative before:absolute before:inset-y-4 before:-ml-px before:right-4 before:opacity-[.07] before:left-4 xl:before:left-0 before:bg-foreground before:rounded-4xl after:absolute after:inset-y-4 after:-ml-px after:right-4 after:left-4 xl:after:left-0 after:bg-[color-mix(in_oklch,_var(--color-background),_var(--color-foreground)_2%)] after:rounded-4xl after:border after:border-foreground/[.15] dark:after:opacity-[.59] xl:ml-[275px] [&.content--compact]:xl:ml-[110px]">
            <div class="h-full overflow-x-hidden">
                <div class="content__scroll-area relative z-20 -mr-7 h-full overflow-y-auto pl-4 pr-11 transition-[margin] duration-200 xl:pl-0">
                    <div class="top-bar group -mt-2 [&.scrolled]:sticky [&.scrolled]:inset-x-0 [&.scrolled]:top-0 [&.scrolled]:z-[999] [&.scrolled]:mt-0">
                        <div class="flex h-16 items-center gap-5 border-b transition-all group-[.scrolled]:px-5 group-[.scrolled]:rounded-2xl group-[.scrolled]:bg-background group-[.scrolled]:border group-[.scrolled]:shadow-lg group-[.scrolled]:shadow-foreground/5">
                            <div class="open-mobile-menu bg-background mr-auto flex size-9 cursor-pointer items-center justify-center rounded-xl border xl:hidden">
                                <i data-lucide="chart-no-axes-column" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25 rotate-90"></i>
                            </div>
                            <ul class="truncate gap-x-6 [--color-link:var(--color-primary)] [--color-base:var(--color-foreground)] mr-auto hidden xl:flex">
                                <li class="[&:not(:last-child)&gt;a]:text-(--color-link) text-(--color-base) before:bg-(image:--background-image-chevron) relative before:absolute before:inset-y-0 before:my-auto before:-ml-4 before:size-2 before:-rotate-90 before:bg-center before:bg-no-repeat before:opacity-70 first:before:hidden">
                                    <a href="#">Sherya's Laboratory</a>
                                </li>
                            </ul>
                            
                            <div class="group/profile relative size-9 flex-none">
                                <span data-content="" class="tooltip border-(--color)/5 block relative flex-none overflow-hidden rounded-full border-3 ring-1 ring-(--color)/25 [--color:var(--color-primary)] size-full">
                                    <img class="absolute top-0 size-full object-cover" src="dist/images/fakers/profile-3.jpg" alt="Midone - Tailwind Admin Dashboard Template">
                                </span>
                                <div class="hidden group-hover/profile:block">
                                    <div class="box p-5 before:absolute before:inset-0 before:mx-3 before:-mb-3 before:border before:border-foreground/10 before:bg-background/30 before:z-[-1] after:absolute after:inset-0 after:border after:border-foreground/10 after:bg-background after:shadow-[0px_3px_5px_#0000000b] after:z-[-1] after:backdrop-blur-md before:shadow-foreground/5 absolute right-0 top-0 z-50 -mr-0.5 -mt-0.5 flex w-64 flex-col gap-2.5 px-6 py-5 before:rounded-2xl before:shadow-xl before:backdrop-blur after:rounded-2xl">
                                        <div class="flex flex-col gap-0.5">
                                            <div class="font-medium">Tom Hanks</div>
                                            <div class="mt-0.5 text-xs opacity-70">DevOps Engineer</div>
                                        </div>
                                        <div class="bg-foreground/5 h-px"></div>
                                        <div class="flex flex-col gap-0.5">
                                            <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5" href="#">
                                                <i data-lucide="users" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>
                                                Profile
                                            </a>
                                
                                        </div>
                                        <div class="bg-foreground/5 h-px"></div>
                                        <div class="flex flex-col gap-0.5">
                                            <a class="hover:bg-foreground/5 -mx-3 flex gap-2.5 rounded-lg px-4 py-1.5" href="#">
                                                <i data-lucide="power" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>
                                                Logout
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                      
                    </div>
                   
<div class="mt-8 flex flex-col items-center sm:flex-row">
    <h2 class="mr-auto text-lg font-medium">Patient Details</h2>
</div>

<!-- BEGIN: HTML Table Data -->
<div class="box relative mt-5 p-5
    before:absolute before:inset-0 before:mx-3 before:-mb-3
    before:border before:border-foreground/10 before:bg-background/30
    before:shadow-[0px_3px_5px_#0000000b] before:z-[-1] before:rounded-xl

    after:absolute after:inset-0 after:border after:border-foreground/10
    after:bg-background after:shadow-[0px_3px_5px_#0000000b]
    after:rounded-xl after:z-[-1] after:backdrop-blur-md">

    <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">

        <!-- BEGIN: Data List -->
        <div class="w-full">

            <!-- 🔥 FIXED WRAPPER -->
            <div class="w-full">

                <!-- 🔥 FIXED TABLE -->
                <table id="patientTable" class="w-full border-collapse">

                    <thead>
                        <tr class="border-b">
                            <th class="px-4 py-3 text-left">#</th>
                            <th class="px-4 py-3 text-left">Patient ID</th>
                            <th class="px-4 py-3 text-left">Patient Name</th>
                            <th class="px-4 py-3 text-center">Age/Gender</th>
                            <th class="px-4 py-3 text-left">Phone Number</th>
                            <th class="px-4 py-3 text-right">Registration Date</th>
                            <th class="px-4 py-3 text-center">Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php $i = 1; ?>

                        <?php if ($res->num_rows === 0): ?>
                            <tr>
                                <td></td>
                                <td></td>
                                <td class="text-center font-medium text-gray-500">No patients found</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        <?php else: ?>

                            <?php while ($row = $res->fetch_assoc()):
                                $fullName = trim($row['firstname']);
                                $genderShort = strtoupper(substr($row['gender'] ?? '', 0, 1));
                                $statusBadge = $row['is_active']
                                    ? "<span class='badge bg-success'>Active</span>"
                                    : "<span class='badge bg-secondary'>Inactive</span>";
                            ?>

                                <tr class="border-b hover:bg-gray-50">
                                    <td class="px-4 py-3"><?= $i++ ?></td>

                                    <td class="px-4 py-3"><?= htmlspecialchars($row['patient_code']) ?></td>

                                    <td class="px-4 py-3 font-medium"><?= htmlspecialchars($fullName) ?></td>

                                    <td class="px-4 py-3 ">
                                        <?= htmlspecialchars(($row['age'] ?: 'N/A') . ' / ' . $genderShort) ?>
                                    </td>

                                    <td class="px-4 py-3"><?= htmlspecialchars($row['phone']) ?></td>

                                    <td class="px-4 py-3 "><?= htmlspecialchars($row['created_at']) ?></td>

                                    <td class="px-4 py-3 ">
                                        <?= $statusBadge ?>

                                        <button class="btn btn-primary btn-sm ml-1"
                                            onclick="openEditModal(<?= (int)$row['patient_id'] ?>)">
                                            <i class="fa fa-pencil"></i>
                                        </button>

                                        <?php if ($row['is_active']): ?>
                                            <button class="btn btn-danger btn-sm ml-1"
                                                onclick="confirmDelete(<?= (int)$row['patient_id'] ?>)">
                                                <i class="fa fa-ban"></i>
                                            </button>
                                        <?php else: ?>
                                            <button class="btn btn-success btn-sm ml-1 reactivate-btn"
                                                data-id="<?= (int)$row['patient_id'] ?>">
                                                <i class="fa fa-undo"></i>
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                </tr>

                            <?php endwhile; ?>

                        <?php endif; ?>

                    </tbody>
                </table>

            </div>
        </div>
        <!-- END: Data List -->

    </div>

</div>
<!-- END: HTML Table Data -->
 









                    <div class="col-span-12 2xl:col-span-3">
                            <div class="h-full pb-10 -mb-10 2xl:border-l">
                                <div class="grid grid-cols-12 gap-x-6 gap-y-6 2xl:gap-x-0 2xl:pl-6">
                                    <!-- BEGIN: Daily Notes -->
                                    <div class="col-span-12 mt-3 md:col-span-6 xl:col-span-12 2xl:mt-8">
                                        
                                        <div class="mt-5">
                                            <div class="box relative p-5 before:absolute before:inset-0 before:mx-3 before:-mb-3 before:border before:border-foreground/10 before:bg-background/30 before:shadow-[0px_3px_5px_#0000000b] before:z-[-1] before:rounded-xl after:absolute after:inset-0 after:border after:border-foreground/10 after:bg-background after:shadow-[0px_3px_5px_#0000000b] after:rounded-xl after:z-[-1] after:backdrop-blur-md">
                                                <div data-config="{}" class="tiny-slider">
                                                    <div>
                                                        
                                                        <div class="mt-2 text-center opacity-70">
                                                           &copy; 2026 Developed for Shreya's Laboratory by Innoventrics
                        
                                                        </div>
                                                        
                                                    </div>
                                                    <div>
                                                        
                                                        <div class="mt-2 text-center opacity-70">
                                                           &copy; 2026 Developed for Shreya's Laboratory by Innoventrics
                        
                                                        </div>
                                        
                                                    </div>
                                                    <div>
                                                
                                                        <div class="mt-2 text-center opacity-70">
                                                           &copy; 2026 Developed for Shreya's Laboratory by Innoventrics
                        
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- END: Daily Notes -->
                                </div>
                            </div>
                        </div>







                </div>
            </div>
        </div>
    </div>
    
<!-- ✅ Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Edit Patient</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editForm" enctype="multipart/form-data">
        <div class="modal-body">
          <input type="hidden" id="edit_id" name="patient_id">
          <div class="row g-3">
            <div class="col-md-6"><label>First Name</label><input type="text" class="form-control" id="edit_firstname" name="firstname" required></div>
            <div class="col-md-6"><label>Last Name</label><input type="text" class="form-control" id="edit_lastname" name="lastname"></div>
            <div class="col-md-4"><label>Age</label><input type="number" class="form-control" id="edit_age" name="age" min="1" max="120"></div>
            <div class="col-md-4"><label>Gender</label>
              <select class="form-control" id="edit_gender" name="gender">
                <option>Male</option><option>Female</option><option>Other</option>
              </select>
            </div>
            <div class="col-md-4"><label>Phone</label><input type="text" class="form-control" id="edit_phone" name="phone"></div>
            <div class="col-md-12"><label>Address</label><input type="text" class="form-control" id="edit_address" name="address"></div>
            <div class="col-md-6"><label>Photo</label><input type="file" class="form-control" id="edit_photo" name="photo"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Save Changes</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ✅ Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">Confirm Deactivation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to deactivate this patient?
        <input type="hidden" id="delete_id">
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" id="deleteBtn">Deactivate</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

    <!-- BEGIN: Vendor JS Assets-->
    <script src="dist/js/vendors/dom.js"></script>
    <script src="dist/js/vendors/lucide.js"></script>
    <script src="dist/js/vendors/alert.js"></script>
    <script src="dist/js/vendors/tippy.js"></script>
    <script src="dist/js/vendors/popper.js"></script>
    <script src="dist/js/vendors/dropdown.js"></script>
    <script src="dist/js/vendors/chartjs.js"></script>
    <script src="dist/js/vendors/tab.js"></script>
    <script src="dist/js/vendors/vector-map.js"></script>
    <script src="dist/js/vendors/tiny-slider.js"></script>
    <script src="dist/js/vendors/simplebar.js"></script>
    <script src="dist/js/vendors/modal.js"></script>
    <script src="dist/js/components/base/page-loader.js"></script>
    <script src="dist/js/components/base/lucide.js"></script>
    <script src="dist/js/components/base/tippy.js"></script>
    <script src="dist/js/components/report-bar-chart.js"></script>
    <script src="dist/js/components/report-donut-chart.js"></script>
    <script src="dist/js/components/vector-map.js"></script>
    <script src="dist/js/components/base/tiny-slider.js"></script>
    <script src="dist/js/themes/rubick.js"></script>
    <script src="dist/js/utils/helper.js"></script>
    <script src="dist/js/components/theme-switcher.js"></script>
    <script src="dist/js/vendors/tom-select.js"></script>
<!-- 1️⃣ jQuery FIRST -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 2️⃣ DataTables -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- 3️⃣ THEN your script -->
<script>
$(document).ready(function () {
    $('#patientTable').DataTable({
        pageLength: 10,
        lengthMenu: [10, 25, 50],
        searching: true,
        paging: true,
        info: true
    });
});
</script>
<script>
function openEditModal(id) {
  $.ajax({
    url: 'patient_get.php',
    method: 'GET',
    data: { id },
    dataType: 'json',
    cache: false
  })
  .done(function(data) {
    if (data && data.patient_id) {
      $('#edit_id').val(data.patient_id);
      $('#edit_firstname').val(data.firstname);
      $('#edit_lastname').val(data.lastname);
      $('#edit_age').val(data.age);
      $('#edit_gender').val(data.gender);
      $('#edit_phone').val(data.phone);
      $('#edit_address').val(data.address);
      $('#editModal').modal('show');
    } else {
      Swal.fire({ icon: 'error', title: 'Not Found', text: data.error || 'Patient not found.' });
    }
  })
  .fail(function(xhr) {
    Swal.fire({ icon: 'error', title: 'Invalid Server Response', text: xhr.responseText || 'Request failed.' });
  });
}

$('#editForm').on('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  $.ajax({
    url: 'patient_update.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false
  })
  .done(function(resp) {
    Swal.fire({ icon: 'success', title: 'Updated', text: resp }).then(() => location.reload());
  })
  .fail(function(xhr) {
    Swal.fire({ icon: 'error', title: 'Error', text: xhr.responseText || 'Update failed.' });
  });
});

// ✅ Delete / Reactivate
function confirmDelete(id) {
  $('#delete_id').val(id);
  $('#deleteModal').modal('show');
}

$('#deleteBtn').on('click', function() {
  const id = $('#delete_id').val();
  $.post('patient_delete.php', { id })
    .done(resp => Swal.fire({ icon: 'success', title: 'Deactivated', text: resp }).then(() => location.reload()))
    .fail(xhr => Swal.fire({ icon: 'error', title: 'Error', text: xhr.responseText || 'Failed to deactivate.' }));
});

$(document).on('click', '.reactivate-btn', function() {
  const id = $(this).data('id');
  Swal.fire({
    title: "Reactivate Patient?",
    text: "This will restore the patient's active status.",
    icon: "question",
    showCancelButton: true,
    confirmButtonText: "Yes, Reactivate",
    cancelButtonText: "Cancel"
  }).then(result => {
    if (result.isConfirmed) {
      $.post('patient_reactivate.php', { id })
        .done(resp => Swal.fire("Done!", resp, "success").then(() => location.reload()))
        .fail(xhr => Swal.fire({ icon: 'error', title: 'Error', text: xhr.responseText || 'Failed to reactivate.' }));
    }
  });
});
</script>
<!-- END: Vendor JS Assets-->
    <!-- BEGIN: Pages, layouts, components JS Assets-->
    <!-- END: Pages, layouts, components JS Assets-->

</body>
</html>