<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/Bill.php';

requireRole('branch_admin');
$pageTitle = 'Tagihan';

$db = db();

// Ambil info cabang
$currentUserId = currentUserId();
$userBranchId = null;
$userBranchName = 'Unknown';

try {
    $stmt = $db->prepare("SELECT u.branch_id, b.name as branch_name 
                          FROM users u LEFT JOIN branches b ON u.branch_id = b.id 
                          WHERE u.id = ?");
    $stmt->execute([$currentUserId]);
    $row = $stmt->fetch();
    $userBranchId = $row ? (int)$row['branch_id'] : null;
    $userBranchName = $row['branch_name'] ?? 'Unknown';
} catch (\Throwable $e) {}

if (!$userBranchId) {
    redirect('/branch/dashboard.php', '❌ Akun tidak terdaftar di cabang.', 'error');
}

// Handle actions
if (isset($_GET['action']) && isset($_GET['id']) && verifyCsrf($_GET['token'] ?? '')) {
    $action = $_GET['action'];
    $billId = (int)$_GET['id'];
    
    if (!Bill::hasAccess($billId, $userBranchId)) {
        redirect('/branch/bills.php', '❌ Tagihan bukan milik cabang Anda', 'error');
    }
    
    if ($action === 'pay') {
        $result = Bill::pay($billId);
        if ($result['success']) {
            logActivity($currentUserId, 'pay_bill', "Bayar tagihan #$billId");
            redirect('/branch/bills.php', '✅ Pembayaran berhasil');
        } else {
            redirect('/branch/bills.php', '❌ ' . $result['error'], 'error');
        }
    } elseif ($action === 'delete') {
        $result = Bill::delete($billId);
        if ($result['success']) {
            logActivity($currentUserId, 'delete_bill', "Hapus tagihan #$billId");
            redirect('/branch/bills.php', '✅ Tagihan dihapus');
        } else {
            redirect('/branch/bills.php', '❌ ' . $result['error'], 'error');
        }
    }
}

// Filter
$filterStatus = $_GET['status'] ?? '';
$filterMonth = $_GET['month'] ?? '';
$search = $_GET['search'] ?? '';

// Get bills (HANYA cabang user)
$bills = Bill::getAll($filterStatus, $userBranchId, 500);

// Filter tambahan
if ($filterMonth || $search) {
    $filtered = [];
    foreach ($bills as $b) {
        if ($filterMonth) {
            $billMonth = date('Y-m', strtotime($b['due_date']));
            if ($billMonth !== $filterMonth) continue;
        }
        if ($search && stripos($b['customer_name'] . ' ' . $b['customer_number'] . ' ' . $b['bill_number'], $search) === false) continue;
        $filtered[] = $b;
    }
    $bills = $filtered;
}

// Stats
$totalAmount = array_sum(array_column($bills, 'amount'));
$unpaidAmount = array_sum(array_map(fn($b) => in_array($b['status'], ['unpaid','overdue']) ? $b['amount'] : 0, $bills));
$paidAmount = array_sum(array_map(fn($b) => $b['status'] === 'paid' ? $b['amount'] : 0, $bills));

$totalCount = count($bills);
$unpaidCount = count(array_filter($bills, fn($b) => in_array($b['status'], ['unpaid','overdue'])));
$paidCount = count(array_filter($bills, fn($b) => $b['status'] === 'paid'));
$overdueCount = count(array_filter($bills, fn($b) => $b['status'] === 'overdue'));

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<style>
/* === NAVBAR MODERN === */
.navbar-modern {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.burger-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.burger-btn:hover,
.burger-btn:active {
    background: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

.navbar-info {
    min-width: 0;
    flex: 1;
}

.navbar-greeting {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 0;
}

.navbar-title {
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.navbar-badge {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* === MAIN CONTENT === */
.main-content {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 20px; /* jarak antar div */
}

.page-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-title i {
    font-size: 1.8rem;
    color: #0066CC;
}

.branch-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #003D7A;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* === SUMMARY CARDS === */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.summary-card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    border-left: 4px solid transparent;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
    color: inherit;
}

.summary-card.primary { border-left-color: #0066CC; }
.summary-card.success { border-left-color: #00C853; }
.summary-card.warning { border-left-color: #FF9900; }
.summary-card.danger { border-left-color: #DC3545; }

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.summary-card-title {
    color: #666;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.15rem;
}

.summary-card.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning .summary-card-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.danger .summary-card-icon { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }

.summary-card-value {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    color: #003D7A;
    line-height: 1.1;
    word-break: break-word;
}

.summary-card-footer {
    font-size: 0.78rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* === STATUS TABS === */
.status-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.status-tab {
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid #e8f4f8;
    background: white;
    color: #666;
}

.status-tab:hover {
    border-color: #0066CC;
    color: #0066CC;
}

.status-tab.active {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.status-tab.warning.active {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.status-tab.danger.active {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.status-tab.success.active {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.status-tab-count {
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-tab:not(.active) .status-tab-count {
    background: #e8f4f8;
    color: #666;
}

/* === ALERT MODERN === */
.alert-modern {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    border: 2px solid;
}

.alert-modern.success { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.alert-modern.danger { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.alert-modern.warning { background: #fff8e1; border-color: #ffe082; color: #f57c00; }
.alert-modern.info { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }

.alert-modern i {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === FILTER CARD === */
.card-modern {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
}

.card-header-modern {
    color: white;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.card-header-modern.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }

.card-header-modern .title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-modern {
    padding: 20px;
}

/* === FILTER FORM === */
.filter-form {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.form-group-filter {
    margin-bottom: 0;
}

.form-label-filter {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.form-control-filter,
.form-select-filter {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.88rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
    box-sizing: border-box;
}

.form-control-filter:focus,
.form-select-filter:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.btn-filter {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    height: 42px;
}

.btn-filter.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-filter.outline {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

/* === TABLE MODERN (TETAP TABEL) === */
.table-wrapper {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
}

.table-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.table-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.table-header-count {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    min-width: 900px;
}

.table-modern thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-modern th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    color: #003D7A;
    border-bottom: 2px solid #e8f4f8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table-modern td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background: #f8fafc;
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

/* Row status highlight */
.table-modern tbody tr.row-overdue {
    background: #fff8f8;
}

.table-modern tbody tr.row-overdue:hover {
    background: #fff0f0;
}

.table-modern tbody tr.row-unpaid {
    background: #fffdf5;
}

.table-modern tbody tr.row-unpaid:hover {
    background: #fffae8;
}

/* === BILL NUMBER === */
.bill-number {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #003D7A;
    font-size: 0.85rem;
    background: #f8fafc;
    padding: 3px 8px;
    border-radius: 6px;
    border-left: 3px solid #0066CC;
    display: inline-block;
}

/* === CUSTOMER CELL === */
.customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.customer-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.3;
}

.customer-number {
    font-size: 0.75rem;
    color: #999;
    margin-top: 1px;
}

/* === AMOUNT === */
.amount {
    font-weight: 800;
    color: #003D7A;
    font-size: 0.92rem;
}

/* === BADGE MODERN === */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-modern.paid { background: #d1e7dd; color: #0f5132; }
.badge-modern.unpaid { background: #fff3cd; color: #856404; }
.badge-modern.overdue { background: #f8d7da; color: #842029; }

.overdue-info {
    font-size: 0.72rem;
    color: #DC3545;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

/* === ACTION BUTTONS === */
.action-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.btn-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.88rem;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-action.pay { background: #d1e7dd; color: #0f5132; }
.btn-action.pay:hover { background: #00C853; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3); }

.btn-action.delete { background: #ffe5e5; color: #842029; }
.btn-action.delete:hover { background: #b02a37; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(176, 42, 55, 0.3); }

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-state-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
}

.empty-state-title {
    color: #666;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
}

.empty-state-subtitle {
    color: #999;
    font-size: 0.85rem;
    margin: 0;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-form .form-group-filter:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .navbar-modern {
        padding: 10px 15px;
    }
    
    .navbar-title {
        font-size: 1rem;
    }
    
    .navbar-greeting {
        display: none;
    }
    
    .navbar-badge {
        display: none;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-title {
        font-size: 1.3rem;
    }
    
    .page-title i {
        font-size: 1.5rem;
    }
    
    .summary-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .summary-card {
        padding: 14px;
    }
    
    .summary-card-value {
        font-size: 1.1rem;
    }
    
    .summary-card-title {
        font-size: 0.68rem;
    }
    
    .summary-card-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    
    .status-tabs {
        gap: 6px;
    }
    
    .status-tab {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    
    .card-header-modern {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
    
    .card-body-modern {
        padding: 16px;
    }
    
    .filter-form {
        grid-template-columns: 1fr;
    }
    
    .filter-form .form-group-filter {
        grid-column: 1 / -1;
    }
    
    .filter-form .btn-filter {
        flex: 1;
    }
    
    .table-header {
        padding: 14px 16px;
    }
    
    .table-header-title {
        font-size: 0.92rem;
    }
    
    .table-modern {
        font-size: 0.82rem;
    }
    
    .table-modern th,
    .table-modern td {
        padding: 10px 12px;
    }
    
    .customer-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .customer-name {
        font-size: 0.82rem;
    }
    
    .btn-action {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .navbar-modern {
        padding: 8px 12px;
    }
    
    .burger-btn {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
    
    .navbar-title {
        font-size: 0.95rem;
    }
    
    .main-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.15rem;
        gap: 8px;
    }
    
    .summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .summary-card {
        padding: 12px;
    }
    
    .summary-card-value {
        font-size: 1rem;
    }
    
    .summary-card-footer {
        font-size: 0.7rem;
    }
    
    .table-header {
        padding: 12px 14px;
    }
    
    .table-modern th,
    .table-modern td {
        padding: 8px 10px;
    }
    
    .customer-cell {
        gap: 8px;
    }
    
    .customer-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .customer-name {
        font-size: 0.78rem;
    }
    
    .badge-modern {
        font-size: 0.68rem;
        padding: 3px 8px;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }
    
    .action-buttons {
        gap: 3px;
    }
}
</style>

<!-- Navbar Modern dengan Burger Icon -->

<div class="content-wrapper">
<div class="main-content">
<div class="navbar-modern">
    <div class="navbar-left">
        <button class="burger-btn" onclick="toggleSidebar()">
            <i class="bi bi-list"></i>
        </button>
        <div class="navbar-info">
            <p class="navbar-greeting">Manajemen billing</p>
            <h1 class="navbar-title">Tagihan - <?= htmlspecialchars($userBranchName) ?></h1>
        </div>
    </div>
    <div class="navbar-right">
        <span class="navbar-badge">
            <i class="bi bi-building"></i> <?= htmlspecialchars($userBranchName) ?>
        </span>
    </div>
</div>    <!-- Page Header -->
    

    <?= flashMessage() ?>

    <!-- Summary Cards -->
    <div class="summary-row">
        <a href="/branch/bills.php" class="summary-card primary">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Total Tagihan</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-receipt"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($totalCount) ?></div>
            <div class="summary-card-footer">
                💰 Rp <?= number_format($totalAmount, 0, ',', '.') ?>
            </div>
        </a>
        
        <a href="/branch/bills.php?status=unpaid" class="summary-card warning">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Belum Bayar</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-clock-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($unpaidCount) ?></div>
            <div class="summary-card-footer">
                💰 Rp <?= number_format($unpaidAmount, 0, ',', '.') ?>
            </div>
        </a>
        
        <a href="/branch/bills.php?status=paid" class="summary-card success">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Lunas</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($paidCount) ?></div>
            <div class="summary-card-footer">
                💰 Rp <?= number_format($paidAmount, 0, ',', '.') ?>
            </div>
        </a>
        
        <a href="/branch/bills.php?status=overdue" class="summary-card danger">
            <div class="summary-card-header">
                <h6 class="summary-card-title">Overdue</h6>
                <div class="summary-card-icon">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= number_format($overdueCount) ?></div>
            <div class="summary-card-footer">
                ⚠️ Perlu ditindaklanjuti
            </div>
        </a>
    </div>

    <!-- Status Tabs -->
    <div class="status-tabs">
        <a href="/branch/bills.php" class="status-tab <?= !$filterStatus ? 'active' : '' ?>">
            <i class="bi bi-list-ul"></i> Semua
            <span class="status-tab-count"><?= $totalCount ?></span>
        </a>
        <a href="/branch/bills.php?status=unpaid" class="status-tab warning <?= $filterStatus === 'unpaid' ? 'active' : '' ?>">
            <i class="bi bi-clock"></i> Belum Bayar
            <span class="status-tab-count"><?= $unpaidCount ?></span>
        </a>
        <a href="/branch/bills.php?status=overdue" class="status-tab danger <?= $filterStatus === 'overdue' ? 'active' : '' ?>">
            <i class="bi bi-exclamation-triangle"></i> Overdue
            <span class="status-tab-count"><?= $overdueCount ?></span>
        </a>
        <a href="/branch/bills.php?status=paid" class="status-tab success <?= $filterStatus === 'paid' ? 'active' : '' ?>">
            <i class="bi bi-check-circle"></i> Lunas
            <span class="status-tab-count"><?= $paidCount ?></span>
        </a>
    </div>

    <!-- Filter Card -->
    <div class="card-modern">
        <div class="card-header-modern primary">
            <div class="title-left">
                <i class="bi bi-funnel-fill"></i>
                <span>Filter & Pencarian</span>
            </div>
        </div>
        <div class="card-body-modern">
            <form method="GET" class="filter-form">
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-search"></i> Cari
                    </label>
                    <input type="text" name="search" class="form-control-filter" 
                           value="<?= htmlspecialchars($search) ?>" 
                           placeholder="Nama, no pelanggan, no tagihan...">
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-circle"></i> Status
                    </label>
                    <select name="status" class="form-select-filter">
                        <option value="">Semua</option>
                        <option value="unpaid" <?= $filterStatus === 'unpaid' ? 'selected' : '' ?>>Belum Bayar</option>
                        <option value="paid" <?= $filterStatus === 'paid' ? 'selected' : '' ?>>Lunas</option>
                        <option value="overdue" <?= $filterStatus === 'overdue' ? 'selected' : '' ?>>Overdue</option>
                    </select>
                </div>
                <div class="form-group-filter">
                    <label class="form-label-filter">
                        <i class="bi bi-calendar3"></i> Bulan
                    </label>
                    <input type="month" name="month" class="form-control-filter" 
                           value="<?= htmlspecialchars($filterMonth) ?>">
                </div>
                <button type="submit" class="btn-filter primary">
                    <i class="bi bi-funnel"></i>
                    <span>Filter</span>
                </button>
                <a href="/branch/bills.php" class="btn-filter outline">
                    <i class="bi bi-arrow-counterclockwise"></i>
                    <span>Reset</span>
                </a>
            </form>
        </div>
    </div>

    <!-- Bills Table (TETAP TABEL) -->
    <div class="table-wrapper">
        <div class="table-header">
            <div class="table-header-title">
                <i class="bi bi-list-ul"></i>
                <span>Daftar Tagihan</span>
                <span class="table-header-count"><?= count($bills) ?> tagihan</span>
            </div>
        </div>
        
        <?php if (empty($bills)): ?>
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-inbox"></i>
                </div>
                <h5 class="empty-state-title">Tidak ada tagihan</h5>
                <p class="empty-state-subtitle">Belum ada tagihan yang sesuai filter</p>
            </div>
        <?php else: ?>
            <div class="table-scroll">
                <table class="table-modern">
                    <thead>
                        <tr>
                            <th>No. Tagihan</th>
                            <th>Pelanggan</th>
                            <th>Jatuh Tempo</th>
                            <th>Nominal</th>
                            <th>Status</th>
                            <th>Dibayar</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($bills as $b): 
                        $rowClass = '';
                        if ($b['status'] === 'overdue') $rowClass = 'row-overdue';
                        elseif ($b['status'] === 'unpaid') $rowClass = 'row-unpaid';
                    ?>
                        <tr class="<?= $rowClass ?>">
                            <td>
                                <span class="bill-number"><?= htmlspecialchars($b['bill_number']) ?></span>
                            </td>
                            <td>
                                <div class="customer-cell">
                                    <div class="customer-avatar">
                                        <?= strtoupper(substr($b['customer_name'], 0, 1)) ?>
                                    </div>
                                    <div>
                                        <div class="customer-name"><?= htmlspecialchars($b['customer_name']) ?></div>
                                        <div class="customer-number">
                                            #<?= htmlspecialchars($b['customer_number']) ?>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div style="font-weight: 600; color: #003D7A; font-size: 0.88rem;">
                                    <?= date('d/m/Y', strtotime($b['due_date'])) ?>
                                </div>
                                <?php if ($b['status'] === 'overdue'): ?>
                                    <div class="overdue-info">
                                        <i class="bi bi-exclamation-triangle-fill"></i>
                                        Terlambat <?= floor((strtotime('today') - strtotime($b['due_date'])) / 86400) ?> hari
                                    </div>
                                <?php endif; ?>
                            </td>
                            <td>
                                <div class="amount">Rp <?= number_format($b['amount'], 0, ',', '.') ?></div>
                            </td>
                            <td>
                                <?php if ($b['status'] === 'paid'): ?>
                                    <span class="badge-modern paid">
                                        <i class="bi bi-check-circle-fill"></i> Lunas
                                    </span>
                                <?php elseif ($b['status'] === 'overdue'): ?>
                                    <span class="badge-modern overdue">
                                        <i class="bi bi-exclamation-triangle-fill"></i> Overdue
                                    </span>
                                <?php else: ?>
                                    <span class="badge-modern unpaid">
                                        <i class="bi bi-clock-fill"></i> Belum Bayar
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if ($b['paid_at']): ?>
                                    <div style="font-size: 0.85rem; color: #003D7A; font-weight: 600;">
                                        <?= date('d/m/Y', strtotime($b['paid_at'])) ?>
                                    </div>
                                    <div style="font-size: 0.75rem; color: #999;">
                                        <?= date('H:i', strtotime($b['paid_at'])) ?> WIB
                                    </div>
                                <?php else: ?>
                                    <span style="color: #ccc;">-</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <div class="action-buttons" style="justify-content: center;">
                                    <?php if ($b['status'] !== 'paid'): ?>
                                        <a href="/branch/bills.php?action=pay&id=<?= $b['id'] ?>&token=<?= csrfToken() ?>" 
                                           class="btn-action pay" 
                                           onclick="return confirm('Konfirmasi pembayaran tagihan <?= htmlspecialchars($b['bill_number']) ?>?')" 
                                           title="Bayar">
                                            <i class="bi bi-cash-coin"></i>
                                        </a>
                                    <?php endif; ?>
                                    
                                    <a href="/branch/bills.php?action=delete&id=<?= $b['id'] ?>&token=<?= csrfToken() ?>" 
                                       class="btn-action delete" 
                                       onclick="return confirm('Hapus tagihan <?= htmlspecialchars($b['bill_number']) ?>?')" 
                                       title="Hapus">
                                        <i class="bi bi-trash-fill"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>
</div>
<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar && overlay) {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>