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

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

/* --------------------------------------------------------
   ✅ Helper: Generate next UHID (auto)
--------------------------------------------------------- */
function generate_next_uhid($conn) {
    $prefix = "SHPID";
    $sql = "SELECT patient_code FROM patients WHERE patient_code LIKE ? ORDER BY patient_id DESC LIMIT 1";
    $like = $prefix . '%';
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('s', $like);
    $stmt->execute();
    $res = $stmt->get_result();
    $last = $res && $res->num_rows ? $res->fetch_assoc()['patient_code'] : null;
    $stmt->close();

    $next = 1;
    if ($last && preg_match('/(\d+)$/', $last, $m)) {
        $next = (int)$m[1] + 1;
    }

    while (true) {
        $candidate = sprintf("%s%03d", $prefix, $next);
        $q = $conn->prepare("SELECT 1 FROM patients WHERE patient_code = ? LIMIT 1");
        $q->bind_param('s', $candidate);
        $q->execute();
        $r = $q->get_result();
        $exists = $r && $r->num_rows;
        $q->close();
        if (!$exists) return $candidate;
        $next++;
    }
}

/* --------------------------------------------------------
   ✅ ALERT HANDLING (SweetAlert)
--------------------------------------------------------- */
$alert = '';

if (isset($_GET['success'])) {
    $alert = "success|Patient Registered Successfully";
}

/* --------------------------------------------------------
   ✅ HANDLE FORM SUBMIT
--------------------------------------------------------- */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $patient_code = trim($_POST['patient_code']);
    $firstname    = ucwords(strtolower(trim($_POST['firstname'])));
    $gender       = trim($_POST['gender']);
    $age          = (int)$_POST['age'];
    $phone        = preg_replace('/[^0-9]/', '', $_POST['phone']);
    $referred_by  = trim($_POST['referred_by']);
    $consultant   = trim($_POST['consultant']);
    $address      = trim($_POST['address']);
    $created_by   = $_SESSION['uid'] ?? null;
    $is_active    = 1;

    // Validation
    if (empty($firstname) || empty($phone)) {
        $alert = "error|Name & Phone are required";
    }

    // Duplicate check
    if ($alert === '') {
        $check = $conn->prepare("SELECT 1 FROM patients WHERE phone = ? LIMIT 1");
        $check->bind_param("s", $phone);
        $check->execute();
        if ($check->get_result()->num_rows > 0) {
            $alert = "error|Patient already exists with this phone";
        }
        $check->close();
    }

    // Insert
    if ($alert === '') {

        $sql = "INSERT INTO patients 
        (patient_code, firstname, gender, age, phone, referred_by, consultant, address, created_by, created_at, is_active)
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, NOW(), ?)";

        $stmt = $conn->prepare($sql);

        $stmt->bind_param(
            "sssissssii",
            $patient_code,
            $firstname,
            $gender,
            $age,
            $phone,
            $referred_by,
            $consultant,
            $address,
            $created_by,
            $is_active
        );

        if ($stmt->execute()) {
            header("Location: " . $_SERVER['PHP_SELF'] . "?success=1");
            exit;
        } else {
            $alert = "error|" . $stmt->error;
        }

        $stmt->close();
    }
}

/* --------------------------------------------------------
   ✅ ALWAYS GENERATE NEW UHID
--------------------------------------------------------- */
$next_uhid = generate_next_uhid($conn);
?>
<!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">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script><!-- 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 side-menu__link--active ">
                                        <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 ">
                                        <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>
                   

<!-- BEGIN: Wizard Layout -->
                    <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 p-5 mt-0 pt-0 pb-4">
                        
                        <div class="mt-10 px-5 pt-10 sm:px-20">
                            <div class="text-center text-xl font-bold">Patient Registration</div>
                            <form id="patientForm" method="POST" autocomplete="off" enctype="multipart/form-data" action="">
                            <div class="mt-5 grid grid-cols-12 gap-4 gap-y-5">
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-1" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Patient ID</label>
                                    <input id="input-wizard-1" name="patient_code" type="text" value="<?= htmlspecialchars($next_uhid) ?>" placeholder="Patient ID" class="h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" readonly>
                                </div>
                                  <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-6" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Referred By</label>
                                   <?php
$ref = $conn->query("SELECT ref_name FROM referrers WHERE is_active = 1 ORDER BY ref_name ASC");?>
                                   <select class="tom-select w-full" name="referred_by" required>
    <option value="">-- Select Referrer --</option>
    <option value="Self">Self</option>
    <?php while($r = $ref->fetch_assoc()): ?>
        <option value="<?= htmlspecialchars($r['ref_name']) ?>">
            <?= htmlspecialchars($r['ref_name']) ?>
        </option>
    <?php endwhile; ?>
</select>
                                </div>
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-2" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Full Name</label>
                                    <input id="input-wizard-2" name="firstname" type="text" placeholder="Full Name" class="h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                                </div>
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-3" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Age</label>
                                    <input id="input-wizard-3" type="number" name="age" placeholder="Age" class="h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                                </div>
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-4" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Phone Number</label>
                                    <input id="input-wizard-4" type="number" name="phone" placeholder="Phone Number" class="h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                                </div>
                                 <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-6" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Gender</label>
                                    <select  name="gender" class="tom-select w-full" required>
    <option value="">-- Gender --</option>
                      <option value="Male">Male</option>
                      <option value="Female">Female</option>
                      <option value="Other">Other</option>
</select>
                                </div>
                              
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-5" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Address</label>
                                    <input id="input-wizard-5" type="text" name="address" required placeholder="Address" class="h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                                </div>
                                <div class="flex flex-col gap-2.5 col-span-12 sm:col-span-6"><label for="input-wizard-6" class="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Consultant</label>
                                    <select class="tom-select w-full"  name="consultant" required>
    <option value="">Select Consultant</option>
    <option value="1">Dr. A</option>
    <option value="2">Dr. B</option>
    <option value="3">Dr. C</option>
</select>
                                </div>
                               
                                <div class="col-span-12 mt-5 flex items-center justify-center sm:justify-end">
                                    <button type="submit" class="cursor-pointer inline-flex border items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-(--color)/20 border-(--color)/60 text-(--color) hover:bg-(--color)/5 [--color:var(--color-success)] h-10 px-4 py-2 ml-2 w-32">
                                        <i data-lucide="book-check" class="size-4 stroke-[1.5] [--color:currentColor] stroke-(--color) fill-(--color)/25"></i>Register
                                    </button>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                    <!-- END: Wizard Layout -->

                    <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>
    <!-- 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>
<script>
document.querySelectorAll('.tom-select').forEach((el) => {
    new TomSelect(el, {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        }
    });
});
</script>
<?php if(!empty($alert)): ?>
<script>
let data = "<?= $alert ?>".split('|');

Swal.fire({
    icon: data[0], // success / error
    title: data[0] === 'success' ? 'Success' : 'Error',
    text: data[1],
    confirmButtonColor: data[0] === 'success' ? '#16a34a' : '#dc2626'
}).then(() => {
    // Remove ?success=1 from URL after alert
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.pathname);
    }
});
</script>
<?php endif; ?>
<!-- END: Vendor JS Assets-->
    <!-- BEGIN: Pages, layouts, components JS Assets-->
    <!-- END: Pages, layouts, components JS Assets-->

</body>
</html>