<!-- views/master_kas/index.php -->
<style>

/* .master-kas-wrapper {
    font-family: inherit;
} */

/* ── Header ── */
.kas-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.kas-page-header h4 {
    font-size: 22px;
    font-weight: 800;
    color: #0f2a2a;
    margin-bottom: 2px;
}
.kas-page-header p {
    font-size: 13px;
    color: #6b8a8a;
    margin: 0;
}
.kas-page-header .btn-add {
    display: 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;
}
.kas-page-header .btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20,168,151,0.4);
    color: #fff;
}

/* ── Total Saldo Card ── */
.total-saldo-card {
    background: linear-gradient(135deg, #0b7a6e 0%, #14a897 50%, #1dbfad 100%);
    border-radius: 6px;
    padding: 26px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(11,122,110,0.30);
    margin-bottom: 32px;
}
.total-saldo-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.total-saldo-card::after {
    content: '';
    position: absolute;
    bottom: -50px; right: 80px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.total-saldo-card .label {
    font-size: 12px;
    font-weight: 500;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 6px;
}
.total-saldo-card .amount {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.total-saldo-card .icon-bg {
    width: 56px; height: 56px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}

/* ── Section Title ── */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #5a7a7a;
    text-transform: uppercase;
    letter-spacing: .9px;
    margin-bottom: 14px;
    margin-top: 8px;
}
.section-title .divider {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, #c8e6e3, transparent);
}
.section-title .badge-priority {
    background: linear-gradient(135deg, #0b7a6e, #14a897);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Kas Card ── */
.kas-card {
    background: #fff;
    border-radius: 6px;
    padding: 18px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,40,40,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    border-left: 4px solid var(--kas-color, #14a897);
    transition: transform .18s, box-shadow .18s;
    position: relative;
    overflow: hidden;
}
.kas-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,40,40,0.12);
}
.kas-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 70px; height: 70px;
    background: radial-gradient(circle at top right, var(--kas-color, #14a897), transparent 70%);
    opacity: .06;
    border-radius: 0 0 0 100%;
}

/* Header row: badges + icon */
.kas-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.kas-card-head .icon-wrap {
    width: 40px; height: 40px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--kas-color, #14a897) 12%, white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--kas-color, #14a897);
}

.badge-kode {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--kas-color, #14a897) 15%, white);
    color: var(--kas-color, #14a897);
    border: 1px solid color-mix(in srgb, var(--kas-color, #14a897) 30%, white);
}
.badge-tabungan {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b7a6e, #14a897);
    color: #fff;
}
.badge-nonaktif {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: #e9ecef;
    color: #6c757d;
}

/* Card body text */
.kas-card .kas-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a3535;
    margin-bottom: 2px;
    line-height: 1.3;
}
.kas-card .kas-meta {
    font-size: 11.5px;
    color: #8aabab;
    line-height: 1.7;
}

/* Saldo box */
.saldo-box {
    margin-top: 14px;
    background: linear-gradient(135deg, #f4fcfb, #eaf7f5);
    border-radius: 6px;
    padding: 10px 13px;
    border: 1px solid rgba(20,168,151,0.12);
}
.saldo-box .saldo-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #7aacac;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}
.saldo-box .saldo-amount {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
}
.saldo-box .saldo-amount.positive { color: #0b7a6e; }
.saldo-box .saldo-amount.negative { color: #e05252; }
.saldo-box .saldo-awal {
    font-size: 10.5px;
    color: #9fbfbf;
    margin-top: 2px;
}

/* Action buttons */
.kas-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}
.kas-card-actions .btn-kas {
    flex: 1;
    border: none;
    border-radius: 6px;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all .15s;
}
.btn-kas-edit {
    background: linear-gradient(135deg, #e6f9f7, #d0f3ef);
    color: #0b7a6e;
    border: 1px solid rgba(11,122,110,0.15) !important;
}
.btn-kas-edit:hover {
    background: linear-gradient(135deg, #0b7a6e, #14a897);
    color: #fff;
    border-color: transparent !important;
}
.btn-kas-toggle-pause {
    background: #fff8e6;
    color: #b07c00;
    border: 1px solid rgba(176,124,0,0.15) !important;
}
.btn-kas-toggle-pause:hover {
    background: #f59e0b;
    color: #fff;
    border-color: transparent !important;
}
.btn-kas-toggle-play {
    background: #e8f7ef;
    color: #1a7a40;
    border: 1px solid rgba(26,122,64,0.15) !important;
}
.btn-kas-toggle-play:hover {
    background: #22c55e;
    color: #fff;
    border-color: transparent !important;
}
.btn-kas-delete {
    background: #fff0f0;
    color: #c0392b;
    border: 1px solid rgba(192,57,43,0.15) !important;
}
.btn-kas-delete:hover {
    background: #ef4444;
    color: #fff;
    border-color: transparent !important;
}

/* Flash alerts */
.kas-alert {
    border-radius: 6px;
    border: none;
    padding: 13px 18px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 20px;
}
.kas-alert-success {
    background: linear-gradient(135deg, #d4faf2, #bbf0e6);
    color: #0a5e52;
    box-shadow: 0 2px 10px rgba(11,122,110,0.12);
}
.kas-alert-error {
    background: linear-gradient(135deg, #fde8e8, #fad4d4);
    color: #8b1a1a;
    box-shadow: 0 2px 10px rgba(192,57,43,0.12);
}
</style>

<div class="container-fluid master-kas-wrapper">

    <!-- ── Page Header ── -->
    <div class="kas-page-header">
        <div>
            <h4><i class="bi bi-wallet2 me-2" style="color:#14a897;"></i>Master Kas</h4>
            <p>Kelola rekening dan dompet kas RT</p>
        </div>
        <a href="<?php echo base_url('master_kas/tambah'); ?>" class="btn-add">
            <i class="bi bi-plus-circle"></i> Tambah Kas
        </a>
    </div>

    <!-- ── Flash Messages ── -->
    <?php if ($this->session->flashdata('success')): ?>
        <div class="kas-alert kas-alert-success d-flex align-items-center gap-2 alert-dismissible fade show">
            <i class="bi bi-check-circle-fill"></i>
            <?php echo $this->session->flashdata('success'); ?>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>
    <?php if ($this->session->flashdata('error')): ?>
        <div class="kas-alert kas-alert-error d-flex align-items-center gap-2 alert-dismissible fade show">
            <i class="bi bi-exclamation-circle-fill"></i>
            <?php echo $this->session->flashdata('error'); ?>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <!-- ── Total Saldo ── -->
    <div class="row mb-2">
        <div class="col-md-4 col-lg-3">
            <div class="total-saldo-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="label">Total Saldo Seluruh Kas</div>
                        <div class="amount">Rp <?php echo number_format($total_saldo, 0, ',', '.'); ?></div>
                    </div>
                    <div class="icon-bg"><i class="bi bi-bank2"></i></div>
                </div>
            </div>
        </div>
    </div>

    <?php
    $grouped_tab = [];
    $grouped_ops = ['bank' => [], 'tunai' => [], 'ewallet' => []];
    foreach ($kas_list as $kas) {
        if ($kas->is_tabungan) {
            $grouped_tab[] = $kas;
        } else {
            $grouped_ops[$kas->jenis][] = $kas;
        }
    }
    $label_jenis = [
        'bank'    => ['emoji' => '🏦', 'label' => 'Rekening Bank'],
        'tunai'   => ['emoji' => '💵', 'label' => 'Kas Tunai'],
        'ewallet' => ['emoji' => '📱', 'label' => 'E-Wallet'],
    ];
    ?>

    <!-- ── Satu Grid 3 Kolom — semua kas di sini ── -->
    <?php
    // Helper: render satu card kas
    function render_kas_card($kas, $is_tabungan = false) {
    ?>
    <div class="col-12 col-md-4">
        <div class="kas-card" style="--kas-color: <?php echo htmlspecialchars($kas->warna); ?>">
            <div class="kas-card-head">
                <div class="d-flex flex-wrap gap-1 align-items-center">
                    <span class="badge-kode"><?php echo htmlspecialchars($kas->kode); ?></span>
                    <?php if ($is_tabungan): ?>
                        <span class="badge-tabungan"><i class="bi bi-piggy-bank"></i> Tabungan</span>
                    <?php endif; ?>
                    <?php if ($kas->status === 'nonaktif'): ?>
                        <span class="badge-nonaktif">Nonaktif</span>
                    <?php endif; ?>
                </div>
                <div class="icon-wrap">
                    <i class="bi <?php echo htmlspecialchars($kas->icon); ?>"></i>
                </div>
            </div>
            <div class="kas-name"><?php echo htmlspecialchars($kas->nama); ?></div>
            <div class="kas-meta">
                <?php if ($kas->nomor_rekening): ?><?php echo htmlspecialchars($kas->nomor_rekening); ?><br><?php endif; ?>
                <?php if ($kas->atas_nama): ?><?php echo htmlspecialchars($kas->atas_nama); ?><?php endif; ?>
            </div>
            <div class="saldo-box">
                <div class="saldo-label">Saldo Saat Ini</div>
                <div class="saldo-amount <?php echo $kas->saldo_realtime < 0 ? 'negative' : 'positive'; ?>">
                    Rp <?php echo number_format($kas->saldo_realtime, 0, ',', '.'); ?>
                </div>
                <?php if ($is_tabungan && $kas->saldo_awal > 0): ?>
                <div class="saldo-awal">Saldo awal: Rp <?php echo number_format($kas->saldo_awal, 0, ',', '.'); ?></div>
                <?php endif; ?>
            </div>
            <div class="kas-card-actions">
                <a href="<?php echo base_url('master_kas/edit/' . $kas->id); ?>" class="btn-kas btn-kas-edit">
                    <i class="bi bi-pencil"></i> Edit
                </a>
                <a href="<?php echo base_url('master_kas/toggle/' . $kas->id); ?>"
                   class="btn-kas <?php echo $kas->status === 'aktif' ? 'btn-kas-toggle-pause' : 'btn-kas-toggle-play'; ?>"
                   title="<?php echo $kas->status === 'aktif' ? 'Nonaktifkan' : 'Aktifkan'; ?>">
                    <i class="bi <?php echo $kas->status === 'aktif' ? 'bi-pause-circle' : 'bi-play-circle'; ?>"></i>
                </a>
                <a href="<?php echo base_url('master_kas/hapus/' . $kas->id); ?>"
                   class="btn-kas btn-kas-delete"
                   onclick="return confirm('Yakin hapus kas ini?')" title="Hapus">
                    <i class="bi bi-trash"></i>
                </a>
            </div>
        </div>
    </div>
    <?php } ?>

    <div class="row g-3">

        <?php if (!empty($grouped_tab)): ?>
        <!-- Label Tabungan — full row -->
        <div class="col-12">
            <div class="section-title mt-1">
                <span>🐷 Kas Penampung Tabungan Warga</span>
                <span class="badge-priority">Prioritas Pencairan Pinjaman</span>
                <div class="divider"></div>
            </div>
        </div>
        <?php foreach ($grouped_tab as $kas): render_kas_card($kas, true); endforeach; ?>
        <?php endif; ?>

        <?php foreach (['tunai', 'bank', 'ewallet'] as $jenis): ?>
            <?php if (!empty($grouped_ops[$jenis])): ?>
            <!-- Label Jenis — full row -->
            <div class="col-12">
                <div class="section-title mt-1">
                    <span><?php echo $label_jenis[$jenis]['emoji'] . ' ' . $label_jenis[$jenis]['label']; ?></span>
                    <small style="font-weight:500; text-transform:none; letter-spacing:0; color:#9fbfbf;">(Operasional RT)</small>
                    <div class="divider"></div>
                </div>
            </div>
            <?php foreach ($grouped_ops[$jenis] as $kas): render_kas_card($kas, false); endforeach; ?>
            <?php endif; ?>
        <?php endforeach; ?>

    </div>

</div>