<?php
session_start();
require_once '../config.php';
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'petugas') {
    header("Location: ../login.php");
    exit;
}

// Default filter bulan ini
$bulan = isset($_GET['bulan']) ? (int)$_GET['bulan'] : (int)date('m');
$tahun = isset($_GET['tahun']) ? (int)$_GET['tahun'] : (int)date('Y');

// Ambil Data Tagihan
$stmt = $pdo->prepare("
    SELECT t.*, p.nama, p.id_meteran 
    FROM tagihan t
    JOIN pelanggan p ON t.id_pelanggan = p.id
    WHERE t.bulan = ? AND t.tahun = ?
    ORDER BY p.nama ASC
");
$stmt->execute([$bulan, $tahun]);
$tagihans = $stmt->fetchAll(PDO::FETCH_ASSOC);

$total_tagihan = 0;
$total_lunas = 0;
$total_belum = 0;
$jumlah_lunas = 0;
$jumlah_belum = 0;

foreach ($tagihans as $t) {
    $total_tagihan += $t['total'];
    if ($t['status'] === 'lunas') {
        $total_lunas += $t['total'];
        $jumlah_lunas++;
    } else {
        $total_belum += $t['total'];
        $jumlah_belum++;
    }
}

$nama_bulan = date('F', mktime(0,0,0,$bulan,1));
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Tagihan - SPAM</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">
<style>
body { background:#f4f7fe; font-family:'Segoe UI'; }
.bg-header{
    background: linear-gradient(135deg, #3A7CA5 0%, #2C5F7D 100%);
    color:white;
    padding:18px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}
.card-rekap {
    background: white;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}
.rekap-item { text-align: center; border-right: 1px solid #eee; }
.rekap-item:last-child { border-right: none; }
.rekap-val { font-size: 1.1rem; font-weight: 800; color: #3A7CA5; }
.rekap-label { font-size: 0.75rem; color: #7a8190; }
.card-tagihan {
    border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);
    margin-bottom:10px; background: white; border-left: 4px solid #ccc;
}
.card-lunas { border-left-color: #2ECC71; }
.card-belum { border-left-color: #E67E22; }
.badge-status { font-size: 0.7rem; padding: 4px 8px; border-radius: 10px; }
</style>
</head>
<body>

<div class="bg-header shadow-sm">
    <div class="container d-flex justify-content-between align-items-center">
        <a href="dashboard.php" class="text-white"><i class="fa fa-arrow-left"></i></a>
        <h5 class="mb-0 fw-bold">Daftar Tagihan</h5>
        <div style="width: 20px;"></div>
    </div>
</div>

<div class="container pb-5 mt-3">
    <!-- Filter Bulan -->
    <form method="GET" class="d-flex gap-2 mb-3">
        <select name="bulan" class="form-select form-select-sm" style="border-radius:10px;">
            <?php 
            $list_bulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
            foreach($list_bulan as $i => $b): ?>
                <option value="<?= $i+1 ?>" <?= ($i+1 == $bulan) ? 'selected' : '' ?>><?= $b ?></option>
            <?php endforeach; ?>
        </select>
        <select name="tahun" class="form-select form-select-sm" style="border-radius:10px; width: 80px;">
            <option value="<?= $tahun ?>" selected><?= $tahun ?></option>
        </select>
        <button class="btn btn-sm text-white" style="background:#3A7CA5; border-radius:10px;"><i class="fa fa-filter"></i></button>
    </form>

    <!-- Rekapitulasi -->
    <div class="card-rekap">
        <div class="row">
            <div class="col-4 rekap-item">
                <div class="rekap-val"><?= $jumlah_lunas ?></div>
                <div class="rekap-label">Lunas</div>
            </div>
            <div class="col-4 rekap-item">
                <div class="rekap-val text-warning"><?= $jumlah_belum ?></div>
                <div class="rekap-label">Belum</div>
            </div>
            <div class="col-4 rekap-item">
                <div class="rekap-val"><?= count($tagihans) ?></div>
                <div class="rekap-label">Total</div>
            </div>
        </div>
        <hr class="my-2">
        <div class="row mt-2">
            <div class="col-6 text-center">
                <div class="small text-muted">Terkumpul</div>
                <div class="fw-bold text-success small"><?= format_rupiah($total_lunas) ?></div>
            </div>
            <div class="col-6 text-center">
                <div class="small text-muted">Tunggakan</div>
                <div class="fw-bold text-danger small"><?= format_rupiah($total_belum) ?></div>
            </div>
        </div>
    </div>

    <!-- List Tagihan -->
    <?php if (empty($tagihans)): ?>
        <div class="text-center text-muted py-4 small">Belum ada data tagihan untuk periode ini.</div>
    <?php else: ?>
        <?php foreach($tagihans as $t): ?>
        <div class="card card-tagihan <?= ($t['status'] === 'lunas' ? 'card-lunas' : 'card-belum') ?>">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="fw-bold small"><?= htmlspecialchars($t['nama']) ?></div>
                        <div class="text-muted" style="font-size:0.75rem;"><?= htmlspecialchars($t['id_meteran']) ?></div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold small"><?= format_rupiah($t['total']) ?></div>
                        <span class="badge-status <?= ($t['status'] === 'lunas' ? 'bg-success bg-opacity-10 text-success' : 'bg-warning bg-opacity-10 text-warning') ?>">
                            <?= ($t['status'] === 'lunas' ? 'LUNAS' : 'BELUM LUNAS') ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>