<?php
include '../config/koneksi.php';
include '../helpers/functions.php';

if (!isLogin() || !isClient()) redirect('../auth/login.php');

$id_user = $_SESSION['id'];
$user = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM users WHERE id='$id_user'"));

$title = "Dashboard Client";
include '../layouts/header.php';
?>

<div class="container-fluid">
    <div id="overlay" class="overlay"></div>

    <div class="row">
        <div class="col-lg-2 p-0">
            <?php include '../layouts/sidebar.php'; ?>
        </div>

        <div class="col-lg-10 p-0">
            <?php include '../layouts/navbar.php'; ?>

            <div class="content-wrap">
                
                <?php showFlash(); ?>

                <div class="row g-4">
                    
                    <!-- CARD SALDO -->
                    <div class="col-md-12">
                        <div class="card card-stat p-4">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div>
                                    <h6 class="text-muted mb-2">Saldo Saat Ini</h6>
                                    <h2 class="text-success mb-0"><?= rupiah($user['saldo']); ?></h2>
                                </div>

                                <div class="saldo-icon-box">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" fill="none" viewBox="0 0 24 24" stroke="#198754" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a5 5 0 00-10 0v2M5 9h14l-1 10a2 2 0 01-2 2H8a2 2 0 01-2-2L5 9z"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>


                  
<!-- INFORMASI NABUNG -->
<div class="col-md-12">
    <div class="card border-0 shadow-sm rounded-4 p-4 mb-2">
        <div class="d-flex align-items-center mb-3">
            <div class="me-3 bg-primary rounded-3 p-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"
                    viewBox="0 0 24 24" stroke="white" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 8c-3.866 0-7 1.343-7 3v5c0 1.657 3.134 3 7 3s7-1.343 7-3v-5c0-1.657-3.134-3-7-3z"/>
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M5 11c0 1.657 3.134 3 7 3s7-1.343 7-3"/>
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 3v5"/>
                </svg>
            </div>

            <div>
                <h4 class="mb-1 fw-bold">Informasi Menabung</h4>
                <small class="text-muted">
                    Silakan transfer ke rekening berikut sebelum mengajukan setoran.
                </small>
            </div>
        </div>

        <div class="alert alert-primary border-0 rounded-4 mb-4">
            <h6 class="mb-2 fw-bold">Nomor Rekening Tujuan</h6>
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h2 class="text-primary fw-bold mb-0" id="rekening">71024027105</h2>

                <button type="button" class="btn btn-outline-primary btn-sm"
                    onclick="copyRekening()">
                    Salin Nomor Rekening
                </button>
            </div>
        </div>

        <div class="alert alert-success border-0 rounded-4 mb-0">
            <h5 class="fw-bold mb-3">📌 Alur Proses Menabung</h5>

            <ol class="mb-0 ps-3">
                <li class="mb-2">
                    Transfer ke nomor rekening
                    <strong>71024027105</strong>.
                </li>

                <li class="mb-2">
                    Screenshot bukti transfer setelah transaksi berhasil.
                </li>

                <li class="mb-2">
                    Masuk ke menu <strong>Ajukan Setoran</strong>, isi nominal,
                    upload bukti transfer, kemudian kirim pengajuan.
                    Setelah disetujui Admin, saldo akan otomatis bertambah.
                </li>

                <li class="mb-2">
                    Untuk melakukan penarikan, silakan isi formulir
                    <strong>Ajukan Penarikan</strong>.
                    Setelah diproses Admin, saldo akan otomatis berkurang.
                </li>

                <li>
                    Seluruh riwayat setoran dan penarikan dapat dilihat pada
                    menu <strong>Riwayat Transaksi</strong>.
                </li>
            </ol>

            <hr>

            <small class="text-muted">
                Website ini dibuat untuk membantu pencatatan transaksi agar lebih
                rapi, terdokumentasi, dan meminimalisir transaksi yang terlewat
                dibandingkan pencatatan melalui WhatsApp atau spreadsheet.
            </small>
        </div>
    </div>
</div>

<script>
function copyRekening() {
    navigator.clipboard.writeText("71024027105");
    alert("Nomor rekening berhasil disalin.");
}
</script>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card-stat {
    padding: 20px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.card-stat h6 {
    color: #6c757d;
    font-size: 14px;
}

.card-stat h2, .card-stat h4 {
    font-weight: 700;
    margin: 0;
}
</style>

<?php include '../layouts/footer.php'; ?>