<nav class="navbar fixed-top" id="navbar">
    <div class="card col-12" style="border-radius: 20px; background: none; border: none; margin-top: 20px;">
        <div class="row">
            <div class="col-6">
                <h4 class="mb-0" style="color: #fff;">Hai,</h4>
                <h5 style="color: #fff;"><small><?php echo $pcmem['nama'];?></small></h5>
            </div>
            <div class="col-6 text-right">
                <img src="profile/<?php echo $pcmem['profile']; ?>" class="rounded-circle" width="60px">
            </div>
        </div>
    </div>
</nav>

<div class="card" style="border-radius: 0px; background: none; border: none; margin-top: 100px;">
	<div class="card-body">
		<?php if($jenisAgen == 'Prabayar') { ?>
		<div style="text-align: center; color: #fff;">
            <p>Saldo Anda</p>
        
            <div style="display: inline-flex; align-items: center; justify-content: center;">
                <h1 style="font-size: 36px; color: #fff; margin: 0;">
                    <small>Rp. </small>
                    <b id="saldoValue">••••••••••••</b>
                </h1>
                <a onclick="toggleSaldo()" style="background: none; border: none; margin-left: 10px; cursor: pointer;">
                    <i id="iconEye" class="fa fa-eye-slash text-light" style="font-size: 24px;"></i>
                </a>
            </div>
        </div>
		<?php } else {  ?>
		<center>
			<p style="color: #fff;">Total Transaksi Belum Di Bayar</p>
			<h1 style="font-size: 36px; color: #fff;"><small>Rp. </small><b><?php echo substr(number_format($pcmem['saldo']),1); ?></b></h1>
		</center>
		<?php } ?>
	</div>
</div>
<div class="card" id="1" style="border-radius: 0px; background: none; border: none; z-index: 4;">
	<div class="card" style="border-radius: 20px; margin: 35px;">
		<div class="card-body p-2">
			<?php 
				$stmt = $pdo->prepare("SELECT * FROM v_jumlah_transaksi_agen_perhari WHERE id_agen_voucher = :id AND DATE(input_time) = :waktu");
				$stmt->execute([
				    ':id' => $_SESSION['agen'],
				    ':waktu' => date('Y-m-d')
				]);
				$jumtran = $stmt->fetch(PDO::FETCH_ASSOC);

				$stmt = $pdo->prepare("SELECT SUM(jumlah_uang) AS jumlah_uang_bulan, SUM(jumlah_voucher) AS jumlah_voucher_bulan FROM v_jumlah_transaksi_agen_perhari WHERE id_agen_voucher = :id AND SUBSTR(DATE(input_time), 1, 7) = :waktu");
				$stmt->execute([
				    ':id' => $_SESSION['agen'],
				    ':waktu' => date('Y-m')
				]);
				$jumtranbulan = $stmt->fetch(PDO::FETCH_ASSOC);
			?>
			<center>
				<p>Riwayat Transaksi</p><hr>
				<div class="row">
					<div class="col-6">
						<p class="mb-1">Hari ini</p>
						<p class="mb-1"><?php echo $jumtran['jumlah_voucher'];?> Voucher</p>
						<h6><?php  echo number_format($jumtran['jumlah_uang']); ?></h6>
					</div>
					<div class="col-6">
						<p class="mb-1">Bulan ini</p>
						<p class="mb-1"><?php echo $jumtranbulan['jumlah_voucher_bulan'];?> Voucher</p>
						<h6><?php  echo number_format($jumtranbulan['jumlah_uang_bulan']); ?></h6>
					</div>
				</div>
			</center>
		</div>
	</div>
</div>
<div class="card" id="2" style="border-top-right-radius: 40px; border-top-left-radius: 40px; min-height: 800px; margin-top: -100px;border: none; z-index: 1;">
	<div class="card-body" style="margin-top: 60px;">
		<?php
		$bulan = date('Y-m');

		$stmt2 = $pdo->prepare("SELECT COALESCE(SUM(kredit), 0) - COALESCE(SUM(debet), 0) AS cek_data FROM v_detail_agen_pascabayar WHERE id_agen_voucher = :id_agen AND generate_time != :gettime");
		$stmt2->bindParam(':id_agen', $_SESSION['agen'], PDO::PARAM_INT);
		$stmt2->bindParam(':gettime', $bulan);
		$stmt2->execute();
		$rows2 = $stmt2->fetch(PDO::FETCH_ASSOC);

		if ($jenisAgen === 'Pascabayar' && isset($rows2['cek_data']) && $rows2['cek_data'] > 0) { ?>
		<a href="?<?php echo base64_encode('riwayat_transaksi_pascabayar'); ?>">
		    <div class="card mb-2 mr-3 ml-3" style="border-radius: 20px; background-color: rgba(255, 0, 0, 0.2);">
		        <div class="card-body text-center p-2">
		            <p class="mb-1 text-dark">Anda belum melunasi penjualan bulan sebelumnya sebesar</p>
		            <h4 class="text-dark">Rp. <b><?php echo number_format($rows2['cek_data']); ?></b></h4>
		        </div>
		    </div>
		</a>
		<?php } ?>

		<div class="row">
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('voucher_buat'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/order.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Jual Voucher</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('paket_voucher'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/list.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Paket Voucher</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<?php if($jenisAgen == 'Prabayar') { ?>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('isi_saldo'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/wallet.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Isi Saldo</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('transfer_saldo'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/payment.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Transfer Saldo</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('riwayat_transaksi'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/report.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Riwayat Transaksi</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<?php } else { ?>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('riwayat_transaksi_pascabayar'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/report.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Riwayat Transaksi</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<?php } ?>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('voucher_belum_terjual'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/belum.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Voucher List</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('voucher_sudah_terjual'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/terjual.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Sudah Terjual</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<?php if($jenisAgen == 'Prabayar') { ?>
			<div class="col-4 p-2">
				<a href="?<?php echo base64_encode('voucher_diskon'); ?>">
			       <div class="card text-dark animated-link" style="border-radius: 15px;">
				       	<center>
			       		<img src="images/discounts.png" width="50px" class="mt-3 mb-2">
			       	    <p><small>Voucher Diskon</small></p>
				       	</center>
			       </div>
		       	</a>
			</div>
			<?php } ?>
		</div>
	</div>
</div>

<script>
    let isVisible = false; // Default: tersembunyi
    const originalSaldo = "<?php echo number_format($pcmem['saldo']); ?>";

    function toggleSaldo() {
        const saldoValue = document.getElementById('saldoValue');
        const iconEye = document.getElementById('iconEye');

        if (isVisible) {
            // Sembunyikan
            saldoValue.textContent = "••••••••••••";
            iconEye.classList.remove("fa-eye");
            iconEye.classList.add("fa-eye-slash");
        } else {
            // Tampilkan
            saldoValue.textContent = originalSaldo;
            iconEye.classList.remove("fa-eye-slash");
            iconEye.classList.add("fa-eye");
        }

        isVisible = !isVisible;
    }
</script>