<div class="container-fluid px-3 px-md-4 py-3">

    <!-- ── PAGE HEADER ── -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h5 class="mb-0 fw-bold" style="color:#0f766e;">Detail Tabungan</h5>
            <small class="text-muted">Riwayat transaksi & informasi tabungan</small>
        </div>

        <div class="d-flex align-items-center gap-2 flex-wrap">
            <!-- Tombol Cetak Mutasi — style sama dengan btn-add di master_kas -->
            <a href="<?php echo base_url('tabungan/cetak_mutasi/' . $warga->id); ?>"
               target="_blank"
               style="display:inline-flex;align-items:center;gap:7px;
                      background:linear-gradient(135deg,#0b7a6e,#14a897);
                      color:#fff;border:none;border-radius:6px;
                      padding:10px 20px;font-size:13.5px;font-weight:600;
                      text-decoration:none;
                      box-shadow:0 4px 14px rgba(20,168,151,0.35);
                      transition:transform .15s,box-shadow .15s;"
               onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 20px rgba(20,168,151,0.4)'"
               onmouseout="this.style.transform='';this.style.boxShadow='0 4px 14px rgba(20,168,151,0.35)'">
                <i class="bi bi-printer-fill"></i> Cetak Mutasi
            </a>

            <!-- Tombol Kembali -->
            <a href="<?php echo base_url('tabungan'); ?>" class="btn btn-sm d-flex align-items-center gap-2"
               style="background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;font-weight:600;border-radius:10px;padding:7px 16px;">
                <i class="bi bi-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <?php if(isset($tabungan) && $tabungan): ?>

    <!-- ── INFO CARDS ── -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <div class="card border-0 h-100" style="border-radius:16px;box-shadow:0 2px 12px rgba(13,116,110,0.10);background:linear-gradient(135deg,#0f766e,#0d9488);">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <div style="width:32px;height:32px;background:rgba(255,255,255,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                            <i class="bi bi-person-fill text-white" style="font-size:15px;"></i>
                        </div>
                        <span style="font-size:11px;font-weight:600;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:.06em;">Nama Warga</span>
                    </div>
                    <div class="fw-bold text-white" style="font-size:17px;line-height:1.2;">
                        <?php echo isset($warga->nama_lengkap) ? $warga->nama_lengkap : '-'; ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card border-0 h-100" style="border-radius:16px;box-shadow:0 2px 12px rgba(16,185,129,0.12);border-top:3px solid #10b981;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <div style="width:32px;height:32px;background:#ecfdf5;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                            <i class="bi bi-wallet2" style="font-size:15px;color:#10b981;"></i>
                        </div>
                        <span style="font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Saldo Saat Ini</span>
                    </div>
                    <div class="fw-bold" style="font-size:17px;color:#065f46;">
                        Rp <?php echo number_format($tabungan->saldo, 0, ',', '.'); ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card border-0 h-100" style="border-radius:16px;box-shadow:0 2px 12px rgba(245,158,11,0.10);border-top:3px solid #f59e0b;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <div style="width:32px;height:32px;background:#fffbeb;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                            <i class="bi bi-bookmark-fill" style="font-size:15px;color:#f59e0b;"></i>
                        </div>
                        <span style="font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Jenis Tabungan</span>
                    </div>
                    <div class="fw-bold" style="font-size:17px;color:#92400e;">
                        <?php echo ucfirst($tabungan->jenis_tabungan); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ── RIWAYAT TRANSAKSI ── -->
    <div class="card border-0" style="border-radius:16px;box-shadow:0 2px 16px rgba(13,116,110,0.08);">

        <div class="card-header d-flex align-items-center gap-2 border-0 bg-white px-4 pt-3 pb-3" style="border-radius:16px 16px 0 0;">
            <div style="width:30px;height:30px;background:#f0fdfa;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                <i class="bi bi-clock-history" style="color:#0f766e;font-size:14px;"></i>
            </div>
            <span class="fw-bold" style="font-size:14px;color:#111827;">Riwayat Transaksi</span>
        </div>

        <div class="card-body p-0">
            <hr class="m-0" style="border-color:#f1f5f9;">

            <!-- ══════════════════════════════
                 MOBILE: card per baris (< md)
                 ══════════════════════════════ -->
            <div class="d-block d-md-none">
                <?php if(isset($transaksi) && !empty($transaksi)): foreach($transaksi as $tr): ?>

                <div style="padding:14px 16px; border-bottom:1px solid #f1f5f9;">

                    <!-- Baris 1: Tanggal + Nominal -->
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div style="font-weight:700;font-size:13px;color:#111827;">
                                <?php echo date('d/m/Y', strtotime($tr->tanggal_pengajuan)); ?>
                            </div>
                            <div style="font-size:11px;color:#9ca3af;">
                                <?php echo date('H:i', strtotime($tr->tanggal_pengajuan)); ?>
                                <?php if($tr->status != 'pending' && $tr->tanggal_verifikasi): ?>
                                    &nbsp;·&nbsp;Verif: <?php echo date('d/m/Y', strtotime($tr->tanggal_verifikasi)); ?>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div style="font-weight:700;font-size:15px;color:<?php echo $tr->jenis_transaksi == 'setor' ? '#059669' : '#e11d48'; ?>;">
                            <?php echo $tr->jenis_transaksi == 'setor' ? '+' : '−'; ?>Rp <?php echo number_format($tr->nominal, 0, ',', '.'); ?>
                        </div>
                    </div>

                    <!-- Baris 2: Badge Jenis + Status -->
                    <div class="d-flex align-items-center gap-2 mt-2">
                        <?php if($tr->jenis_transaksi == 'setor'): ?>
                            <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                  style="background:#dcfce7;color:#166534;font-size:11px;font-weight:700;">
                                <i class="bi bi-arrow-down-circle-fill"></i> Setor
                            </span>
                        <?php else: ?>
                            <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                  style="background:#fff7ed;color:#c2410c;font-size:11px;font-weight:700;">
                                <i class="bi bi-arrow-up-circle-fill"></i> Tarik
                            </span>
                        <?php endif; ?>

                        <?php if($tr->status == 'pending'): ?>
                            <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                  style="background:#fef3c7;color:#92400e;font-size:11px;font-weight:700;">
                                <i class="bi bi-clock-fill"></i> Menunggu
                            </span>
                        <?php elseif($tr->status == 'disetujui'): ?>
                            <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                  style="background:#dcfce7;color:#166534;font-size:11px;font-weight:700;">
                                <i class="bi bi-check-circle-fill"></i> Disetujui
                            </span>
                        <?php else: ?>
                            <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                  style="background:#ffe4e6;color:#9f1239;font-size:11px;font-weight:700;">
                                <i class="bi bi-x-circle-fill"></i> Ditolak
                            </span>
                        <?php endif; ?>
                    </div>

                    <!-- Baris 3: Saldo + Keterangan + Bukti -->
                    <div class="d-flex align-items-center justify-content-between mt-2 pt-2" style="border-top:1px dashed #e5e7eb;">
                        <div style="font-size:12px;color:#6b7280;flex:1;min-width:0;padding-right:10px;">
                            <?php if($tr->status == 'disetujui'): ?>
                                <i class="bi bi-wallet2" style="color:#0f766e;"></i>
                                <span style="font-weight:600;color:#0f766e;">Rp <?php echo number_format($tr->saldo_sesudah, 0, ',', '.'); ?></span>
                            <?php else: ?>
                                <span>Saldo: —</span>
                            <?php endif; ?>
                            <?php if($tr->keterangan): ?>
                                <span style="color:#9ca3af;"> · <?php echo $tr->keterangan; ?></span>
                            <?php endif; ?>
                            <?php if($tr->status == 'ditolak' && $tr->catatan_admin): ?>
                                <div style="color:#e11d48;font-size:11px;margin-top:2px;">
                                    <i class="bi bi-info-circle"></i> <?php echo $tr->catatan_admin; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                        <!-- Tombol Bukti SELALU terlihat di mobile -->
                        <?php if($tr->bukti_transfer): ?>
                            <a href="<?php echo base_url('tabungan/lihat_bukti/'.$tr->bukti_transfer); ?>"
                               target="_blank"
                               style="background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;padding:7px 14px;border-radius:9px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0;">
                                <i class="bi bi-image"></i> Lihat Bukti
                            </a>
                        <?php else: ?>
                            <span style="font-size:11px;color:#d1d5db;flex-shrink:0;">Tanpa bukti</span>
                        <?php endif; ?>
                    </div>
                </div>

                <?php endforeach; else: ?>
                <div class="text-center py-5" style="color:#9ca3af;">
                    <div style="font-size:36px;margin-bottom:10px;">📭</div>
                    <div style="font-size:13px;font-weight:600;">Belum ada riwayat transaksi</div>
                </div>
                <?php endif; ?>
            </div>
            <!-- ── END MOBILE ── -->

            <!-- ══════════════════════════════
                 DESKTOP: tabel (≥ md)
                 ══════════════════════════════ -->
            <div class="d-none d-md-block">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" style="font-size:13px;">
                        <thead>
                            <tr style="background:#f8fafc;">
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Tanggal</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Jenis</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Nominal</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Status</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Saldo</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Keterangan</th>
                                <th class="px-4 py-3 border-0" style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;">Bukti</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(isset($transaksi) && !empty($transaksi)): foreach($transaksi as $tr): ?>
                            <tr style="border-bottom:1px solid #f8fafc;"
                                onmouseover="this.style.background='#f0fdfa'"
                                onmouseout="this.style.background=''">
                                <td class="px-4 py-3">
                                    <div style="font-weight:600;color:#111827;"><?php echo date('d/m/Y', strtotime($tr->tanggal_pengajuan)); ?></div>
                                    <div style="font-size:11px;color:#9ca3af;"><?php echo date('H:i', strtotime($tr->tanggal_pengajuan)); ?></div>
                                    <?php if($tr->status != 'pending' && $tr->tanggal_verifikasi): ?>
                                        <div style="font-size:10px;color:#9ca3af;margin-top:2px;">Verif: <?php echo date('d/m/Y', strtotime($tr->tanggal_verifikasi)); ?></div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3">
                                    <?php if($tr->jenis_transaksi == 'setor'): ?>
                                        <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                              style="background:#dcfce7;color:#166534;font-size:11px;font-weight:700;">
                                            <i class="bi bi-arrow-down-circle-fill"></i> Setor
                                        </span>
                                    <?php else: ?>
                                        <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                              style="background:#fff7ed;color:#c2410c;font-size:11px;font-weight:700;">
                                            <i class="bi bi-arrow-up-circle-fill"></i> Tarik
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="fw-bold" style="font-size:13px;color:<?php echo $tr->jenis_transaksi == 'setor' ? '#059669' : '#e11d48'; ?>;">
                                        <?php echo $tr->jenis_transaksi == 'setor' ? '+' : '−'; ?>Rp <?php echo number_format($tr->nominal, 0, ',', '.'); ?>
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <?php if($tr->status == 'pending'): ?>
                                        <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                              style="background:#fef3c7;color:#92400e;font-size:11px;font-weight:700;">
                                            <i class="bi bi-clock-fill"></i> Menunggu
                                        </span>
                                    <?php elseif($tr->status == 'disetujui'): ?>
                                        <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                              style="background:#dcfce7;color:#166534;font-size:11px;font-weight:700;">
                                            <i class="bi bi-check-circle-fill"></i> Disetujui
                                        </span>
                                    <?php else: ?>
                                        <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-3"
                                              style="background:#ffe4e6;color:#9f1239;font-size:11px;font-weight:700;">
                                            <i class="bi bi-x-circle-fill"></i> Ditolak
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3">
                                    <?php if($tr->status == 'disetujui'): ?>
                                        <span style="font-weight:700;color:#0f766e;">Rp <?php echo number_format($tr->saldo_sesudah, 0, ',', '.'); ?></span>
                                    <?php else: ?>
                                        <span class="text-muted">—</span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3" style="max-width:200px;">
                                    <div style="color:#374151;"><?php echo $tr->keterangan ? $tr->keterangan : '—'; ?></div>
                                    <?php if($tr->status == 'ditolak' && $tr->catatan_admin): ?>
                                        <div style="font-size:11px;color:#e11d48;margin-top:3px;">
                                            <i class="bi bi-info-circle"></i> <?php echo $tr->catatan_admin; ?>
                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-4 py-3">
                                    <?php if($tr->bukti_transfer): ?>
                                        <a href="<?php echo base_url('tabungan/lihat_bukti/'.$tr->bukti_transfer); ?>"
                                           target="_blank"
                                           style="background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap;">
                                            <i class="bi bi-image"></i> Lihat
                                        </a>
                                    <?php else: ?>
                                        <span class="text-muted" style="font-size:12px;">—</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <?php endforeach; else: ?>
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div style="color:#9ca3af;">
                                        <div style="font-size:36px;margin-bottom:10px;">📭</div>
                                        <div style="font-size:13px;font-weight:600;">Belum ada riwayat transaksi</div>
                                    </div>
                                </td>
                            </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- ── END DESKTOP ── -->

        </div>
    </div>

    <?php else: ?>
    <div class="alert border-0 d-flex align-items-center gap-2" style="background:#fff7ed;color:#92400e;border-radius:12px;">
        <i class="bi bi-exclamation-triangle-fill"></i>
        Data tabungan tidak ditemukan.
    </div>
    <?php endif; ?>

</div>