<?php
session_start();
require_once __DIR__ . '/config/config.php';

if (!isset($_SESSION['login']) || $_SESSION['login'] !== true) {
    die("Akses ditolak!");
}

$role = $_SESSION['role'] ?? '';

if ($role === 'admin') {
    $stmt = $conn->prepare("SELECT * FROM kwitansi ORDER BY id_kw DESC");
} else {
    $npsn = $_SESSION['npsn'] ?? '';
    $stmt = $conn->prepare("SELECT * FROM kwitansi WHERE npsn=? ORDER BY id_kw DESC");
    $stmt->bind_param("s", $npsn);
}
$stmt->execute();
$data = $stmt->get_result();
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kwitansi Pengeluaran</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{background:#f4f6f9;font-size:11px;font-family:Arial}
.card-header{padding:5px 8px;font-size:12px}
.card-body{padding:8px}
.btn{font-size:11px;padding:3px 6px}
.form-label{font-size:11px}
.form-control-sm{font-size:11px;height:26px}
table{font-size:10.8px}
th,td{padding:3px 5px!important;vertical-align:middle}
.table-scroll{max-height:260px;overflow:auto;border:1px solid #ccc}
.table-hover tbody tr:hover{background:#e8f0ff;cursor:pointer}
.table-cetak{max-height:160px;overflow:auto;border:1px solid #999;background:#eaffff}
th.tgl, td.tgl{
    min-width: 75px;
    white-space: nowrap;
    text-align: center;
}
/* Lebarkan kolom Penerima */
th.penerima, td.penerima{
    min-width: 140px;
    white-space: nowrap;
}
/* ============================= */
/* WARNA FORM INPUT (ABU MUDA)  */
/* ============================= */

.form-control,
.form-control-sm{
    background-color: #f2f3f5;
    border: 1px solid #cfd3d7;
}

/* Saat fokus */
.form-control:focus,
.form-control-sm:focus{
    background-color: #ffffff;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.15rem rgba(110,168,254,.25);
}

/* Checkbox abu muda */
input[type="checkbox"]{
    accent-color: #adb5bd;
    transform: scale(1.05);
}

/* Label checkbox */
label{
    cursor: pointer;
}
</style>
</head>

<body>
<div class="container-fluid p-2">
<div class="card shadow">

<div class="card-header bg-primary text-white d-flex justify-content-between">
<b>CETAK BUKTI PENGELUARAN / KWITANSI</b>
<a href="list_kwitansi.php" class="btn btn-danger btn-sm">Keluar</a>
</div>

<div class="card-body">

<div class="alert alert-warning py-1 mb-2" id="uraianTerpilih">
<b>Uraian:</b> Klik data di tabel atas
</div>

<!-- ================= TABEL ATAS ================= -->
<div class="table-responsive table-scroll mb-2">
<table class="table table-bordered table-sm table-hover">
<thead class="table-light text-center">
<tr>
<th>No</th><th class="tgl">Tanggal</th><th>Kode Kegiatan</th><th>Kode Rekening</th>
<th>No Bukti</th><th>Uraian</th><th>Jml</th><th>Satuan</th><th class="penerima">Penerima</th><th>Pengeluaran</th>
</tr>
</thead>
<tbody>
<?php $no=1; while($r=$data->fetch_assoc()): ?>
<tr class="pilih-data"
 data-tanggal="<?=date('d-m-Y',strtotime($r['tanggal']))?>"
 data-kegiatan="<?=$r['kode_kegiatan']?>"
 data-rekening="<?=$r['kode_rekening']?>"
 data-nobukti="<?=$r['nobukti']?>"
 data-uraian="<?=htmlspecialchars($r['uraian'])?>"
 data-jumlah="<?=$r['jumb']?>"
 data-satuan="<?=$r['satuanb']?>"
 data-pengeluaran="<?=$r['pengeluaran']?>"
>
<td><?=$no++?></td>
<td class="tgl"><?=date('d-m-Y',strtotime($r['tanggal']))?></td>
<td><?=$r['kode_kegiatan']?></td>
<td><?=$r['kode_rekening']?></td>
<td><?=$r['nobukti']?></td>
<td><?=$r['uraian']?></td>
<td class="text-center"><?=$r['jumb']?></td>
<td class="text-center"><?=$r['satuanb']?></td>
<td class="penerima"><?=$r['yang_menerima']?></td>
<td class="text-end"><?=number_format($r['pengeluaran'],0,',','.')?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</div>

<!-- ================= PAJAK ================= -->
<div class="row g-1 mb-2">
<div class="col-md-2">
<label class="form-label">Nilai Pokok</label>
<input type="number" id="nilaiPokok" class="form-control form-control-sm">
</div>
<div class="col-md-2">
<label class="form-label">DPP Nilai Lain</label>
<input type="number" id="dppLain" class="form-control form-control-sm">
</div>
<div class="col-md-8">
<label class="form-label">Ceklis Pajak</label><br>
<label class="me-2">
<input type="checkbox" id="ppn"> PPN 12%
</label>

<label class="me-2">
<input type="checkbox" id="pph21"> PPh 21 (5%)
</label>

<label class="me-2">
<input type="checkbox" id="pph22"> PPh 22 (0.5%)
</label>

<label class="me-2">
<input type="checkbox" id="pph23"> PPh 23 (2%)
</label>

<label class="me-2">
<input type="checkbox" id="pajak_daerah"> Pajak Daerah (10%)
</label>

<button class="btn btn-success btn-sm" id="btnCetak" disabled>
🖨 Cetak Kwitansi
</button>
</div>
</div>

<hr class="my-1">
<b>Data untuk Cetak Kwitansi</b>

<!-- ================= TABEL BAWAH ================= -->
<div class="table-responsive table-cetak mt-1">
<table class="table table-bordered table-sm">
<thead class="table-info text-center">
<tr>
<th>No</th><th>Tanggal</th><th>Kegiatan</th><th>Rekening</th>
<th>No Bukti</th><th>Uraian</th><th>Jml</th><th>Satuan</th><th>Pengeluaran</th><th>Aksi</th>
</tr>
</thead>
<tbody id="tabelCetak">
<tr><td colspan="10" class="text-center text-muted">Klik data di tabel atas</td></tr>
</tbody>
</table>
</div>

</div>
</div>
</div>

<script>
let noCetak = 1;
let nobuktiAktif = '';
const tabel = document.getElementById('tabelCetak');
const btnCetak = document.getElementById('btnCetak');

document.querySelectorAll('.pilih-data').forEach(r=>{
    r.onclick = ()=>{
        if(tabel.querySelector('.text-muted')) tabel.innerHTML='';
        nobuktiAktif = r.dataset.nobukti;
        btnCetak.disabled = false;

        let tr = document.createElement('tr');
        tr.innerHTML = `
        <td>${noCetak++}</td>
        <td>${r.dataset.tanggal}</td>
        <td>${r.dataset.kegiatan}</td>
        <td>${r.dataset.rekening}</td>
        <td>${r.dataset.nobukti}</td>
        <td>${r.dataset.uraian}</td>
        <td class="text-center">${r.dataset.jumlah}</td>
        <td class="text-center">${r.dataset.satuan}</td>
        <td class="text-end">${Number(r.dataset.pengeluaran).toLocaleString('id-ID')}</td>
        <td class="text-center">
            <button class="btn btn-danger btn-sm">✖</button>
        </td>`;
        tr.querySelector('button').onclick=()=>tr.remove();
        tabel.appendChild(tr);

        document.getElementById('uraianTerpilih').innerHTML =
        '<b>Uraian:</b> '+r.dataset.uraian+
        ' | <b>No Bukti:</b> '+r.dataset.nobukti;
    };
});


btnCetak.onclick = () => {

    if(nobuktiAktif === ''){
        alert('Pilih data terlebih dahulu');
        return;
    }

    const nilaiPokok = document.getElementById('nilaiPokok').value || 0;
    const dppLain    = document.getElementById('dppLain').value || 0;

    const ppn   = document.getElementById('ppn').checked ? 1 : 0;
    const pph21 = document.getElementById('pph21').checked ? 1 : 0;
    const pph22 = document.getElementById('pph22').checked ? 1 : 0;
    const pph23 = document.getElementById('pph23').checked ? 1 : 0;
    const pajak_daerah = document.getElementById('pajak_daerah').checked ? 1 : 0;

    const url =
        'kwitansi_cetak_pajak.php?' +
        'nobukti=' + encodeURIComponent(nobuktiAktif) +
        '&nilai_pokok=' + nilaiPokok +
        '&dpp_lain=' + dppLain +
        '&ppn=' + ppn +
        '&pph21=' + pph21 +
        '&pph22=' + pph22 +
        '&pph23=' + pph23 +
        '&pajak_daerah=' + pajak_daerah;

    window.open(url, '_blank');

    // ==========================
    // RESET SETELAH CETAK
    // ==========================

    // reset textbox
    document.getElementById('nilaiPokok').value = '';
    document.getElementById('dppLain').value = '';

    // reset checkbox
    document.getElementById('ppn').checked = false;
    document.getElementById('pph21').checked = false;
    document.getElementById('pph22').checked = false;
    document.getElementById('pph23').checked = false;
    document.getElementById('pajak_daerah').checked = false;

    // reset tabel bawah
    tabel.innerHTML =
        '<tr><td colspan="10" class="text-center text-muted">Klik data di tabel atas</td></tr>';

    // reset variabel
    noCetak = 1;
    nobuktiAktif = '';

    // disable tombol cetak
    btnCetak.disabled = true;

    // reset uraian
    document.getElementById('uraianTerpilih').innerHTML =
        '<b>Uraian:</b> Klik data di tabel atas';
};
</script>

</body>
</html>
