<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Patient Billing</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-light">
<?php include '../../dripend/statpages/sidebar.php'; ?>

<div class="container-fluid py-4 min-vh-100">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bolder text-dark mb-1">
                <i class="fa-solid fa-money-check-dollar text-primary me-2"></i> Patient Billing
            </h3>
        </div>
        <div class="bg-white px-4 py-2 rounded-pill shadow-sm border">
            <i class="fa-regular fa-calendar text-primary me-2"></i> 
            <span class="fw-bold text-dark"><?php echo date('l, F jS, Y'); ?></span>
        </div>
    </div>

    <!-- Hidden Filter Form for Date Defaults -->
    <form id="frmFilters" class="d-none">
        <input type="date" id="flt_start" value="<?php echo date('Y-m-d'); ?>">
        <input type="date" id="flt_end" value="<?php echo date('Y-m-d'); ?>">
    </form>

    <!-- KPI Cards Row -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white h-100 border-0 shadow-sm rounded-4">
                <div class="card-body">
                    <h6 class="text-uppercase fw-bold opacity-75 mb-1" style="font-size: 11px;">Today's Collection</h6>
                    <h3 class="fw-bolder mb-0" id="kpi_collected_cash"><i class="fa fa-spinner fa-spin fs-4"></i></h3>
                    <div class="mt-3 small fw-bold"><i class="fa-solid fa-arrow-trend-up me-1"></i> Cash & Digital</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white h-100 border-0 shadow-sm rounded-4">
                <div class="card-body">
                    <h6 class="text-uppercase fw-bold opacity-75 mb-1" style="font-size: 11px;">Pending Receivables</h6>
                    <h3 class="fw-bolder mb-0" id="kpi_expected_cash"><i class="fa fa-spinner fa-spin fs-4"></i></h3>
                    <div class="mt-3 small fw-bold"><i class="fa-solid fa-triangle-exclamation me-1"></i> Unpaid & Partial Bills</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white h-100 border-0 shadow-sm rounded-4">
                <div class="card-body">
                    <h6 class="text-uppercase fw-bold opacity-75 mb-1" style="font-size: 11px;">Invoices Generated Today</h6>
                    <h3 class="fw-bolder mb-0" id="kpi_pending_count"><i class="fa fa-spinner fa-spin fs-4"></i></h3>
                    <div class="mt-3 small fw-bold"><i class="fa-solid fa-layer-group me-1"></i> Total Encounters Billed</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-dark text-white h-100 border-0 shadow-sm rounded-4">
                <div class="card-body">
                    <h6 class="text-uppercase fw-bold opacity-75 mb-1" style="font-size: 11px;">System Status</h6>
                    <h3 class="fw-bolder mb-0 fs-4 text-success"><i class="fa-solid fa-circle-check"></i> Live Sync</h3>
                    <div class="mt-3 small fw-bold"><i class="fa-solid fa-database me-1"></i> Database Connected</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="row g-4">
        <!-- Billing Ledger Table -->
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-bottom pt-4 pb-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <h6 class="fw-bold text-dark mb-0"><i class="fa-solid fa-list text-primary me-2"></i> BILLING LEDGER & PATIENT SEARCH</h6>
                    
                    <!-- Search Bar -->
                    <div class="input-group" style="width: 350px;">
                        <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-search text-muted"></i></span>
                        <input type="text" id="flt_search" class="form-control border-start-0 bg-light" placeholder="Search patient name, ID, or invoice..." autocomplete="off">
                        <button class="btn btn-outline-secondary" type="button" id="btnClearSearch" title="Clear Search"><i class="fa-solid fa-times"></i></button>
                    </div>

                    <button class="btn btn-sm btn-light border shadow-sm" id="btnRefresh"><i class="fa-solid fa-rotate-right me-1"></i> Refresh Data</button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light text-muted small text-uppercase">
                                <tr>
                                    <th class="ps-4">Invoice / Date</th>
                                    <th>Patient Details</th>
                                    <th>Status</th>
                                    <th class="text-end">Total Amount</th>
                                    <th class="text-end">Balance Due</th>
                                    <th class="text-center pe-4">Action</th>
                                </tr>
                            </thead>
                            <tbody id="billingTbody">
                                <!-- Dynamic Rows Injected Here via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="/rimax/application/assets/js/patientBillng.js"></script>

</body>
</html>