// ... existing code ...
$error_message = "";

// Data Arrays
$users = [];
$customers = [];
$bookings = [];
$status_data = [];
$trend_data = [];

// Analytics Counts
$total_users = 0;
$total_customers = 0;
$total_bookings = 0;
$approved_bookings = 0;
$pending_bookings = 0;
$past_approved = 0;
$upcoming_approved = 0;

try {
    $conn = new PDO("mysql:host=" . $host . ";dbname=" . $db_name, $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Fetch Data (Limited to 100 for performance on single page)
    $users = $conn->query("SELECT ID, user_login, user_email, user_registered FROM wp_users ORDER BY ID DESC LIMIT 100")->fetchAll(PDO::FETCH_ASSOC);
    $customers = $conn->query("SELECT * FROM wp_latepoint_customers ORDER BY id DESC LIMIT 100")->fetchAll(PDO::FETCH_ASSOC);
    $bookings = $conn->query("SELECT * FROM wp_latepoint_bookings ORDER BY id DESC LIMIT 100")->fetchAll(PDO::FETCH_ASSOC);
    
    // Attach Booking History to Customers Data
    foreach ($customers as &$customer) {
        // Find bookings matching the customer_id
        $customer_bookings = array_filter($bookings, function($booking) use ($customer) {
            return $booking['customer_id'] == $customer['id'];
        });
        // Store as JSON for the frontend
        $customer['booking_history'] = json_encode(array_values($customer_bookings));
    }
    unset($customer); // Break the reference

    // Fetch Counts
    $total_users = $conn->query("SELECT COUNT(*) FROM wp_users")->fetchColumn();
    $total_customers = $conn->query("SELECT COUNT(*) FROM wp_latepoint_customers")->fetchColumn();
    $total_bookings = $conn->query("SELECT COUNT(*) FROM wp_latepoint_bookings")->fetchColumn();

    // Advanced Analytics Counts
    $approved_bookings = $conn->query("SELECT COUNT(*) FROM wp_latepoint_bookings WHERE status = 'approved'")->fetchColumn();
    $pending_bookings = $conn->query("SELECT COUNT(*) FROM wp_latepoint_bookings WHERE status = 'pending'")->fetchColumn();
    
    // Past vs Upcoming Approved (Comparing start_date to today)
    $today = date('Y-m-d');
    $past_approved = $conn->query("SELECT COUNT(*) FROM wp_latepoint_bookings WHERE status = 'approved' AND start_date < '$today'")->fetchColumn();
    $upcoming_approved = $conn->query("SELECT COUNT(*) FROM wp_latepoint_bookings WHERE status = 'approved' AND start_date >= '$today'")->fetchColumn();

    // Analytics Data (Charts)
    $status_data = $conn->query("SELECT COALESCE(status, 'unknown') as status, COUNT(*) as count FROM wp_latepoint_bookings GROUP BY status")->fetchAll(PDO::FETCH_ASSOC);
    $trend_results = $conn->query("SELECT start_date, COUNT(*) as count FROM wp_latepoint_bookings WHERE start_date IS NOT NULL GROUP BY start_date ORDER BY start_date DESC LIMIT 14")->fetchAll(PDO::FETCH_ASSOC);
// ... existing code ...
            <!-- KPIs Full Width Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 w-full">
                <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4">
                    <div class="p-4 rounded-full bg-emerald-900/30 text-emerald-400"><i class="ph ph-users text-2xl"></i></div>
                    <div><p class="text-slate-400 text-sm font-medium">Total Patients</p><p class="text-2xl font-bold">0</p></div>
                </div>
                <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4">
                    <div class="p-4 rounded-full bg-purple-900/30 text-purple-400"><i class="ph ph-calendar text-2xl"></i></div>
                    <div><p class="text-slate-400 text-sm font-medium">Total Bookings</p><p class="text-2xl font-bold">0</p></div>
                </div>
                <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4">
                    <div class="p-4 rounded-full bg-amber-900/30 text-amber-400"><i class="ph ph-clock text-2xl"></i></div>
                    <div><p class="text-slate-400 text-sm font-medium">Pending Approvals</p><p class="text-2xl font-bold">0</p></div>
                </div>
                <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4">
                    <div class="p-4 rounded-full bg-teal-900/30 text-teal-400"><i class="ph ph-check-circle text-2xl"></i></div>
                    <div><p class="text-slate-400 text-sm font-medium">Total Approved</p><p class="text-2xl font-bold">0</p></div>
                </div>
            </div>

            <!-- Detailed Analytics Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full">
                 <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4 border-l-4 border-l-slate-500">
                    <div class="p-4 rounded-full bg-slate-900/30 text-slate-400"><i class="ph ph-history text-2xl"></i></div>
                    <div>
                        <p class="text-slate-400 text-sm font-medium">Past Approved</p>
                        <p class="text-2xl font-bold">0</p>
                        <p class="text-xs text-slate-500 mt-1">Appointments before today</p>
                    </div>
                </div>
                 <div class="p-6 rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl flex items-center gap-4 border-l-4 border-l-emerald-500">
                    <div class="p-4 rounded-full bg-emerald-900/30 text-emerald-400"><i class="ph ph-calendar-plus text-2xl"></i></div>
                    <div>
                        <p class="text-slate-400 text-sm font-medium">Upcoming Approved</p>
                        <p class="text-2xl font-bold">0</p>
                        <p class="text-xs text-slate-500 mt-1">Appointments today and future</p>
                    </div>
                </div>
            </div>

            <!-- Charts Full Width Grid -->
// ... existing code ...
            <div class="rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl overflow-hidden w-full table-container shadow-xl">
                <div class="overflow-x-auto w-full">
                    <table class="w-full text-left border-collapse whitespace-nowrap" id="table-patients">
                        <thead>
                            <tr class="bg-slate-900/60 text-slate-400 text-sm border-b border-slate-700/50">
                                <th class="p-4 font-medium text-emerald-400 sticky left-0 bg-slate-900 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.5)]">Actions</th>
                                                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-700/50">
// ... existing code ...
                                    <td class="p-4 sticky left-0 bg-slate-800/90 backdrop-blur-md z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.5)]">
                                        <button onclick="openModal(this, 'Patient')" data-json='null' class="flex items-center gap-2 px-3 py-1.5 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-lg text-sm transition-colors">
                                            <i class="ph ph-folder-open"></i> Open Profile
                                        </button>
                                    </td>
                                    // ... existing code ...
            <div class="rounded-2xl bg-slate-800/40 border border-slate-700/50 backdrop-blur-xl overflow-hidden w-full table-container shadow-xl">
                <div class="overflow-x-auto w-full">
                    <table class="w-full text-left border-collapse whitespace-nowrap" id="table-bookings">
                        <thead>
                            <tr class="bg-slate-900/60 text-slate-400 text-sm border-b border-slate-700/50">
                                <th class="p-4 font-medium text-purple-400 sticky left-0 bg-slate-900 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.5)]">Actions</th>
                                                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-700/50">
// ... existing code ...
            <div class="p-6 overflow-y-auto custom-scrollbar">
                <div id="modalDataGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    <!-- Data injected by JS -->
                </div>
                
                <!-- Booking History Section (Only visible for Patients) -->
                <div id="modalHistorySection" class="hidden border-t border-slate-700/50 pt-6">
                    <h4 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2">
                        <i class="ph ph-clock-counter-clockwise text-emerald-400"></i> Appointment History
                    </h4>
                    <div class="bg-slate-900/50 rounded-xl border border-slate-700/50 overflow-hidden">
                        <table class="w-full text-left text-sm" id="modalHistoryTable">
                            <thead class="bg-slate-800/80 border-b border-slate-700/50 text-slate-400">
                                <tr>
                                    <th class="p-3">ID</th>
                                    <th class="p-3">Date</th>
                                    <th class="p-3">Time</th>
                                    <th class="p-3">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-700/50 text-slate-300" id="modalHistoryBody">
                                <!-- History injected by JS -->
                            </tbody>
                        </table>
                        <div id="modalHistoryEmpty" class="hidden p-4 text-center text-slate-500 italic">
                            No appointment history found for this patient.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
// ... existing code ...
        function filterTable(tableId, query) {
            let filter = query.toLowerCase();
            let tr = document.getElementById(tableId).getElementsByTagName("tr");
            for (let i = 1; i < tr.length; i++) {
                let text = tr[i].innerText.toLowerCase();
                tr[i].style.display = text.includes(filter) ? "" : "none";
            }
        }

        // --- 2.5 Table Sorting Logic ---
        function sortTable(tableId, n) {
            let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
            table = document.getElementById(tableId);
            switching = true;
            dir = "asc"; 
            
            // Visual indicator update
            const headers = table.getElementsByTagName("th");
            for (let j = 0; j < headers.length; j++) {
                let icon = headers[j].querySelector('i');
                if(icon) icon.className = 'ph ph-caret-up text-xs opacity-0 group-hover:opacity-100 transition-opacity ml-1';
            }
            
            let clickedHeaderIcon = headers[n].querySelector('i');
            if(clickedHeaderIcon) clickedHeaderIcon.className = 'ph ph-caret-up text-xs opacity-100 ml-1 text-emerald-400';

            while (switching) {
                switching = false;
                rows = table.rows;
                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("TD")[n];
                    y = rows[i + 1].getElementsByTagName("TD")[n];
                    
                    let xContent = x.innerText.toLowerCase();
                    let yContent = y.innerText.toLowerCase();
                    
                    // Basic numeric sort if applicable
                    if(!isNaN(xContent) && !isNaN(yContent)) {
                        xContent = parseFloat(xContent);
                        yContent = parseFloat(yContent);
                    }

                    if (dir == "asc") {
                        if (xContent > yContent) { shouldSwitch = true; break; }
                    } else if (dir == "desc") {
                        if (xContent < yContent) { shouldSwitch = true; break; }
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                    switchcount ++;      
                } else {
                    if (switchcount == 0 && dir == "asc") {
                        dir = "desc";
                        if(clickedHeaderIcon) clickedHeaderIcon.className = 'ph ph-caret-down text-xs opacity-100 ml-1 text-emerald-400';
                        switching = true;
                    }
                }
            }
        }

        // --- 3. Universal Modal Logic ---
        const modal = document.getElementById('universalModal');
        const modalCard = document.getElementById('modalCard');
        
        function openModal(buttonElement, type) {
            const data = JSON.parse(buttonElement.getAttribute('data-json'));
            const dataGrid = document.getElementById('modalDataGrid');
            const modalTitle = document.getElementById('modalTitle');
            const modalIcon = document.getElementById('modalIcon');
            const historySection = document.getElementById('modalHistorySection');
            const historyBody = document.getElementById('modalHistoryBody');
            const historyEmpty = document.getElementById('modalHistoryEmpty');
            const historyTable = document.getElementById('modalHistoryTable');
            
            // Set Header Styling
// ... existing code ...
                if (key === 'status') {
                    textCol = value === 'approved' ? 'text-emerald-400' : (value === 'pending' ? 'text-amber-400' : 'text-red-400');
                }

                // Skip the hidden JSON string
                if (key === 'booking_history') continue;

                dataGrid.innerHTML += `
                    <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-700/50 hover:border-slate-600 transition-colors w-full overflow-hidden">
                        <p class="${headerCol} text-xs font-semibold mb-1 uppercase tracking-wider">${formattedKey}</p>
                        <p class="${textCol} font-medium break-words whitespace-normal">${displayValue}</p>
                    </div>
                `;
            }

            // Handle Booking History for Patients
            if (type === 'Patient') {
                historySection.classList.remove('hidden');
                historyBody.innerHTML = ''; // Clear old history
                
                let historyData = [];
                try {
                    // It should be passed as a stringified array from PHP
                    historyData = typeof data.booking_history === 'string' ? JSON.parse(data.booking_history) : data.booking_history;
                } catch(e) { console.error("Error parsing history"); }

                if (historyData && historyData.length > 0) {
                    historyTable.classList.remove('hidden');
                    historyEmpty.classList.add('hidden');
                    
                    historyData.forEach(booking => {
                        let statusColor = booking.status === 'approved' ? 'text-emerald-400' : (booking.status === 'pending' ? 'text-amber-400' : 'text-slate-400');
                        historyBody.innerHTML += `
                            <tr class="hover:bg-slate-800/50 transition-colors">
                                <td class="p-3 text-slate-400">#${booking.id || '-'}</td>
                                <td class="p-3">${booking.start_date || '-'}</td>
                                <td class="p-3">${booking.start_time ? booking.start_time.substring(0,5) : '-'}</td>
                                <td class="p-3 ${statusColor} capitalize">${booking.status || 'Unknown'}</td>
                            </tr>
                        `;
                    });
                } else {
                    historyTable.classList.add('hidden');
                    historyEmpty.classList.remove('hidden');
                }
            } else {
                historySection.classList.add('hidden');
            }

            // Animate In
// ... existing code ...