@extends($activeTemplate.'layouts.master')
@section('content')

<body class="tiktok-theme">  <div class="dashboard-header">  
    <span class="topTit">Affiliate-center</span>  
</div>   
<!-- Notifikasi Flash -->
@if(session('success'))
    <div class="flash-notif success">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="flash-notif error">
        {{ session('error') }}
    </div>
@endif
<div class="dashboard-container">  <!-- Banner / Swiper -->  
<div class="swiper banner">  
    <div class="swiper-wrapper">  
        <div class="swiper-slide"><img src="{{asset('core/img/peluang1.png')}}" alt=""></div>  
        <div class="swiper-slide"><img src="{{asset('core/img/peluang2.png')}}" alt=""></div>   
    </div>  
</div>  
<!-- Statistik Card (besar) -->  
<div class="stats-cards">  
    <div class="card">  
        <p>Penarikan Sukses</p>  
        <h3>{{ showAmount($successfulWithdrawals) }} {{ $general->cur_text }}</h3>  
    </div>  
    <div class="card">  
        <p>Total Saldo</p>  
        <h3>{{ $general->cur_text }} {{ showAmount($invests) }}</h3>  
    </div>  
</div>  

<!-- Menu Grid -->  
<div class="menu-grid">  
    <a href="{{ route('user.deposit.index') }}">  
        <img src="{{asset('core/img/m_13.png')}}" alt="">  
        <p>Isi Ulang</p>  
    </a>  
    <a href="{{ route('user.withdraw') }}">  
        <img src="{{asset('core/img/m_11.png')}}" alt="">  
        <p>Tarik Saldo</p>  
    </a>  
    <a href="https://wa.me/6285808545268">  
        <img src="{{asset('core/img/m_12.png')}}" alt="">  
        <p>Bantuan</p>  
    </a>  
    <a href="#">  
        <img src="{{asset('core/img/m_5.png')}}" alt="">  
        <p>Apk Belum Tersedia</p>  
    </a>  
</div>  

<!-- Mini Stats -->  
<div class="mini-stats">  
    <div class="mini-card">  
        <span>{{ $general->cur_text }} {{ showAmount($successfulDeposits) }}</span>  
        <label>Total Isi Ulang</label>  
    </div>  
    <div class="mini-card">  
        <span>{{ $general->cur_sym }} {{ showAmount($interests) }}</span>  
        <label>Pendapatan Hari Ini</label>  
    </div>  
</div>  

<!-- Home Link Card -->  
<div class="home-link">  
    <ul>  
        <li>  
            <img src="{{asset('core/img/img_2.png')}}" alt="">  
            <a href="{{ route('user.invest.ranking') }}">Peringkat Pengguna</a>  
        </li>  
        <li>  
            <img src="{{asset('core/img/img_3.png')}}" alt="">  
            <a href="https://t.me/ng_scripts">Apk</a>  
        </li>  
    </ul>  
</div>   

<!-- Notice -->  
<div class="notice">  
    <div class="notice-tit">Berita Utama Hari Ini</div>  
    <div class="swiper">  
        <div class="swiper-wrapper">  

            {{-- Data asli dari deposits --}}  
            @php  
                $deposits = \App\Models\Deposit::with('user')  
                    ->where('status', 1)  
                    ->orderBy('created_at','desc')  
                    ->take(10)  
                    ->get();  
            @endphp  
            @foreach($deposits as $deposit)  
                <div class="swiper-slide">  
                    <img src="{{asset ('core/img/bonus.png')}}" alt="">  
                    <dl>  
                        <dt>  
                            +62 {{ substr($deposit->user->username ?? '08xxxx', 0, 2) }}****{{ substr($deposit->user->username ?? '0000', -4) }}  
                        </dt>  
                        <dd>  
                            berhasil isi ulang   
                            <span>Rp{{ number_format($deposit->amount, 0, ',', '.') }}</span>.  
                        </dd>  
                    </dl>  
                </div>  
            @endforeach  

            {{-- Dummy --}}  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 98****5552</dt><dd>berhasil isi ulang <span>Rp150.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 95****9999</dt><dd>berhasil isi ulang <span>Rp200.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 73****1547</dt><dd>berhasil isi ulang <span>Rp500.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 78****5509</dt><dd>berhasil isi ulang <span>Rp700.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 76****3694</dt><dd>berhasil isi ulang <span>Rp1.500.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 81****6871</dt><dd>berhasil isi ulang <span>Rp2.000.000</span>.</dd></dl></div>  
            <div class="swiper-slide"><img src="{{asset ('core/img/nav_1.png')}}" alt=""><dl><dt>+62 71****7228</dt><dd>berhasil isi ulang <span>Rp5.000.000</span>.</dd></dl></div>  

        </div>  
    </div>  
</div>  

<!-- Floating Button -->  
<div class="turntable">  
    <a href="{{ route('plan') }}">  
        <img src="{{asset('core/img/turntable.png')}}">  
    </a>  
</div>
<!-- Floating Redeem Button -->
<div class="redeem-btn" onclick="openRedeemModal()">
    <img src="{{ asset('core/img/bonus.png') }}" alt="Redeem">
</div>

<!-- MODAL REDEEM -->
<div id="redeemModal" class="redeem-modal">
    <div class="redeem-content">
        <span class="close" onclick="closeRedeemModal()">&times;</span>
        <h2>Masukkan Kode Bonus</h2>
        <form action="{{ route('user.submit-bonus-confirm') }}" method="POST">
            @csrf
            <input type="text" name="code" placeholder="Masukkan kode" required>
            <button type="submit">Klaim Bonus</button>
        </form>
    </div>
</div>
@endsection

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">  
@push('style')   
<style>
    .flash-notif {
    position: fixed;
    top: 90px; /* di bawah header */
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    z-index: 2000;
    min-width: 200px;
    text-align: center;
    color: #000;
    animation: slideDown 0.5s ease, fadeOut 0.5s ease 3s forwards;
}

.flash-notif.success {
    background: gold;
}

.flash-notif.error {
    background: #ff4d4f;
    color: #fff;
}

@keyframes slideDown {
    0% { transform: translate(-50%, -50px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translate(-50%, -20px); }
}
</style>
<style>
/* Tombol Redeem Ngambang */
.redeem-btn {
  position: fixed;
  bottom: 180px; /* tepat di atas turntable */
  right: 3px;
  width: 58px;
  height: 58px;
  background: radial-gradient(circle at top left, gold, #b8860b);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255,215,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: floating 2.5s ease-in-out infinite;
}

.redeem-btn img {
  width: 80px;
  height: 70px;
  filter: drop-shadow(0 0 5px #fff);
  pointer-events: none; /* biar kliknya ke div, bukan ke gambar */ 
  margin-top: -10px;
}

.redeem-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(255,215,0,1), 0 0 15px rgba(255,215,0,0.7) inset;
}

/* Animasi ngambang lembut */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Modal Redeem */
.redeem-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}
.redeem-content {
  background: #111;
  border: 2px solid gold;
  border-radius: 14px;
  padding: 25px;
  width: 80%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
  position: relative;
}
.redeem-content h2 {
  color: gold;
  margin-bottom: 15px;
  font-size: 18px;
}
.redeem-content input {
  width: 90%;
  padding: 8px 10px;
  border: 1px solid gold;
  border-radius: 8px;
  background: #000;
  color: #fff;
  outline: none;
}
.redeem-content button {
  margin-top: 12px;
  width: 92%;
  padding: 10px;
  background: gold;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
}
.close {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 24px;
  color: gold;
  cursor: pointer;
} 
</style>
<style>  
body.tiktok-theme {  
    background:#000;  
    color:#fff;  
    font-family:'Maven Pro', sans-serif;  
    padding-bottom:100px;  
}  
.dashboard-header {  
  background: #222 !important;  
  color: #fff !important;  
  text-align: center;  
  font-size: 14px;  
  font-weight: 600;  
  padding: 14px 0;  
  border-bottom: 2px solid gold;  
  border-radius: 0 0 30px 30px;  
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4);  
  margin-bottom: 18px;  
}  }
.dashboard-header span {
display: inline-block;
position: relative;
top: -6px; /* atur jarak turun, bisa ubah ke 2px atau 4px sesuai selera /
letter-spacing: 0.5px; / biar hurufnya agak renggang dan rapi */
}
.banner {
max-width:94%;
height:180px;
margin: 25px auto 10px auto;
background:#111;
border:2px solid #FFD700;
border-radius:10px;
overflow:hidden;
box-shadow:0 0 20px rgba(255,215,0,0.2);
}
.banner .swiper-slide { height:100%; }
.banner img {
width:100%;
height:120%;
object-fit:cover;
transform:translateY(-15%);
}
.stats-cards {
display:flex; gap:12px; margin-bottom:15px;
}
.stats-cards .card {
flex:1; background:#111; border-radius:14px; padding:15px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,0.4);
}
.stats-cards p { font-size:13px; color:#aaa; }
.stats-cards h3 { font-size:18px; margin-top:5px; color:gold; }
.menu-grid {
display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:15px;
}
.menu-grid a {
background:#111; border-radius:12px; padding:12px 6px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:all .2s ease;
}
.menu-grid a img {
width:26px; height:26px; margin-bottom:6px;
filter: brightness(0) saturate(100%) invert(74%) sepia(55%) saturate(447%) hue-rotate(7deg) brightness(97%) contrast(92%);
}
.menu-grid a:hover img { filter: drop-shadow(0 0 6px gold) brightness(0) saturate(100%) invert(74%) sepia(55%) saturate(447%) hue-rotate(7deg) brightness(97%) contrast(92%); }
.menu-grid a p { font-size:11px; margin:0; }
.mini-stats { display:flex; gap:12px; margin-bottom:15px; }
.mini-card { flex:1; background:#111; border-radius:12px; padding:12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.mini-card span { display:block; font-size:15px; font-weight:600; color:gold; }
.mini-card label { font-size:11px; color:#aaa; }
.home-link { background:#111; border-radius:12px; padding:15px; margin-bottom:20px; }
.home-link ul { display:flex; justify-content:space-around; gap:5px; list-style:none; padding:0; margin:0; }
.home-link li { flex:1; display:flex; flex-direction:column; align-items:center; }
.home-link li img { width:42px; height:42px; margin-bottom:8px; }
.home-link a { font-size:15px!important; color:#fff; line-height:1.4!important; word-wrap:break-word!important; }
.turntable { position:fixed; bottom:25px; right:25px; z-index:999; }
.turntable img { width:58px; height:58px; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,0.5); }
.notice { background:#111!important; padding:15px; border-radius:10px; margin-bottom:15px; }
.notice .notice-tit { color:#fff!important; }
.notice .swiper-slide dd span { color:gold; font-weight:600; }
.notice .swiper-slide img { filter: drop-shadow(0 0 3px gold) brightness(0) saturate(100%) invert(74%) sepia(55%) saturate(447%) hue-rotate(7deg) brightness(97%) contrast(92%); }
</style>

<style>   
.top-header {  
  width: 100%;  
  background: #0b0e1a;  
  padding: 10px 18px;  
  border-bottom-left-radius: 20px;  
  border-bottom-right-radius: 20px;  
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);  
  
  display: flex;  
  justify-content: flex-start; /* logo di kiri */  
  align-items: center;         /* vertikal rata tengah */  
}  
  
.top-header img.header-logo {  
  width: 28px;  
  height: 28px;  
  object-fit: contain;  
}  
</style>   
<script>
function openRedeemModal() {
    document.getElementById("redeemModal").style.display = "flex";
}
function closeRedeemModal() {
    document.getElementById("redeemModal").style.display = "none";
}
window.onclick = function(e){
    if(e.target == document.getElementById("redeemModal")){
        closeRedeemModal();
    }
}
</script>
<script>  
var noticeSwiper = new Swiper(".notice .swiper", {  
    direction:"vertical",  
    loop:true,  
    autoplay:{ delay:2500, disableOnInteraction:false },  
    slidesPerView:1,  
});  
</script> 
@endpush