<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laporan Kas Keluar</title>
    <link href="<?= FCPATH; ?>assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
      /* ======== Kertas & Tipografi ======== */
      @page { width:21cm; height:14.8cm; margin: 0.6cm 0.5cm 0.1cm 0.5cm; }
      * { box-sizing: border-box; }
      body { font-family:'Helvetica Neue','Helvetica',Helvetica,Arial,sans-serif; color:#444; }
      .invoice-box {
        width:100%;
        margin:auto;
        padding:8px 10px;
        box-shadow: 0 0 8px rgba(0,0,0,.12);
        font-size:9px;              /* diperkecil agar muat & rapi */
        line-height:13px;
      }

      /* ======== Tabel umum ======== */
      table{ width:100%; border-collapse:collapse; }
      th, td{ padding:6px 6px; vertical-align:top; }
      .text-right{ text-align:right; }
      .text-center{ text-align:center; }
      .text-left{ text-align:left; }
      .nowrap{ white-space:nowrap; }
      .break-word{ word-break:break-word; overflow-wrap:anywhere; }

      .w-4  { width:4%!important; }
      .w-10 { width:10%!important; }
      .w-12 { width:12%!important; }   /* kolom No. Transaksi diperkecil */
      .w-15 { width:15%!important; }
      .w-18 { width:18%!important; }
      .w-20 { width:20%!important; }
      .w-22 { width:22%!important; }
      .w-25 { width:25%!important; }
      .w-30 { width:30%!important; }

      /* ======== Header Box ======== */
      .tgl{ border-bottom:1px dotted #000; font-weight:bold; }
      .tkepada{ background:<?=$info['warna_lunas'];?>; width:12%!important; color:#fff; }
      .kepada .bawah{ color:#000; width:30%!important; }
      .sosmed{ font-weight:bold; }

      /* ======== Tabel utama ======== */
      .table-main th, .table-main td{ border:1px solid #2a6ea3; } /* biru lembut */
      .table-main thead th{
        background:#1e6fa5; color:#fff; font-weight:700; font-size:11px;
      }
      .table-main tbody tr:nth-child(even){ background:#f6fbff; }
      .table-main tbody td{ font-size:10.5px; } /* sedikit lebih kecil */

      /* ======== Nested table (Rincian) ======== */
      .nested-wrap{ padding:0; }
      .nested{
        width:100%;
        border-collapse:collapse;
        margin:0;
        table-layout:fixed; /* stabil untuk banyak baris */
        font-size:7px;     /* lebih kecil agar muat */
        line-height:12px;
      }
      .nested th, .nested td{
        border:1px solid #c9d9e8;
        padding:4px 6px;          /* pad lebih kecil agar ringkas */
        vertical-align:top;
      }
      .nested thead th{
        background:#e6f1fb;
        color:#1a3f60;
        font-weight:700;
      }
      .nested .col-no{ width:10%!important; text-align:center; }
      .nested .col-item{ width:32%!important; }
      .nested .col-ket{  /* fleksibel, ambil sisa ruang */
        word-break:break-word; overflow-wrap:anywhere;
      }
      .nested .col-nom{ width:30%!important; text-align:right; }

      /* Hindari pemotongan baris nested saat cetak */
      .nested tr{ page-break-inside: avoid; }

      /* ======== Ringkasan ======== */
      .totals-box td{ border:1px solid #2a6ea3; font-weight:bold; padding:6px; }
    </style>
  </head>

  <body>
    <div class="invoice-box">
      <!-- Header Identitas -->
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="4" rowspan="5"><img src="<?=$logo;?>" style="width:100%; max-width:330px;"></td>
          <td colspan="2" class="tgl">LAPORAN KAS KELUAR</td>
        </tr>
        <tr><td colspan="2">Periode, <?=$dari.' - '.$sampai;?></td></tr>
        <tr><td colspan="2"></td></tr>
        <tr class="kepada">
          <td class="tkepada">Pencatat</td>
          <td class="bawah"><?=$user['nama_lengkap'];?></td>
        </tr>
        <tr><td colspan="2"></td></tr>
        <tr>
          <td colspan="4">
            <i class="fa fa-whatsapp"></i>&nbsp;<span class="sosmed"><?=$info['phone'];?></span>
            &nbsp;&nbsp;<i class="fa fa-envelope-square"></i>&nbsp;<span class="sosmed"><?=$info['email'];?></span>
            &nbsp;&nbsp;<i class="fa fa-facebook-square"></i>&nbsp;<span class="sosmed"><?=$info['fb'];?></span>
            &nbsp;&nbsp;<i class="fa fa-instagram"></i>&nbsp;<span class="sosmed"><?=$info['ig'];?></span>
          </td>
          <td colspan="2"></td>
        </tr>
      </table>

      <?php if(!empty($laporan)){ ?>
        <?php
          /* ===========================================================
           * Helper kecil: cari foreign key yang benar ke kas_keluar_detail
           * agar semua item detail muncul (bukan cuma satu baris).
           * Tidak mengubah controller/model/endpoint.
           * =========================================================== */
          if (!function_exists('_ambil_detail_kas_keluar')) {
            function _ambil_detail_kas_keluar($db, $masterId){
              $tbl = 'kas_keluar_detail';
              $candidates = ['id_kas','id_kas_keluar','id_parent','id_transaksi','id_master','idref','id'];
              foreach($candidates as $col){
                $db->reset_query();
                $q = $db->where($col, $masterId)->order_by('id', 'ASC')->get($tbl);
                if($q && $q->num_rows() > 0){
                  return $q->result_array();
                }
              }
              return [];
            }
          }

          $totalRincian = 0;   // akumulasi dari semua jumlah di detail
          $urut         = 1;   // nomor urut baris utama
        ?>

        <!-- Tabel Utama -->
        <table class="table-main" style="margin-top:8px" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th class="w-4  text-center">No.</th>
              <th class="w-12">No. Transaksi</th>  <!-- diperkecil -->
              <th class="w-10">Tanggal</th>
              <th class="w-10">Akun Bayar</th>
              <th class="w-10">Keterangan</th>
              <th class="w-25">Rincian Keterangan</th>
              <th class="w-15 text-right">Total</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($laporan as $aRow): ?>
              <?php $detail = _ambil_detail_kas_keluar($this->db, $aRow->id); ?>
              <tr>
                <!-- No. Urut -->
                <td class="text-center"><?= $urut; ?></td>

                <!-- No. Transaksi (kecil + wrap) -->
                <td class="break-word"><?= $aRow->no_transaksi; ?></td>

                <!-- Tanggal -->
                <td class="nowrap"><?= dtime($aRow->tanggal); ?></td>

                <!-- Akun Bayar -->
                <td><?= getAkun($aRow->id_akun); ?></td>

                <!-- Keterangan singkat -->
                <td><?= ($aRow->keterangan); ?></td>

                <!-- Rincian (Nested Table) -->
                <td class="nested-wrap">
                  <table class="nested">
                    <thead>
                      <tr>
                        <th class="col-no">No</th>
                        <th class="col-item">Item</th>
                        <th class="col-ket">Keterangan</th>
                        <th class="col-nom">Jumlah</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php if(!empty($detail)){ $no = 1; ?>
                        <?php foreach($detail as $val): ?>
                          <?php $totalRincian += (float)$val['jumlah']; ?>
                          <tr>
                            <td class="text-center"><?= $no; ?></td>
                            <td><?= getAkun($val['id_akun']); ?></td>
                            <td class="break-word"><?= $val['keterangan']; ?></td>
                            <td class="text-right nowrap"><?= rp($val['jumlah']); ?></td>
                          </tr>
                          <?php $no++; ?>
                        <?php endforeach; ?>
                      <?php } else { ?>
                        <tr>
                          <td colspan="4" class="text-center">Tidak ada rincian</td>
                        </tr>
                      <?php } ?>
                    </tbody>
                  </table>
                </td>

                <!-- Total Transaksi -->
                <td class="text-right nowrap"><?= rp($aRow->jumlah); ?></td>
              </tr>
              <?php $urut++; ?>
            <?php endforeach; ?>
          </tbody>
        </table>

        <!-- Ringkasan Total -->
        <table style="margin-top:8px">
          <tr class="totals-box">
            <td style="width:60%">Total Kas Keluar (akumulasi rincian)</td>
            <td class="text-right" style="width:40%"><?= rp($totalRincian); ?></td>
          </tr>
        </table>

      <?php } else { ?>
        <table style="width:100%;margin-top:10px" cellpadding="0" cellspacing="0">
          <tr>
            <td class="totals-box">Belum Ada Data</td>
          </tr>
        </table>
      <?php } ?>
    </div>
  </body>
</html>
