<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>CRO | Home</title>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

 
<style>

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Inter",sans-serif;
}

body{
  background:#f4f7ff;
  padding-bottom:90px;
}

/* -----------------------------------
   HEADER
----------------------------------- */
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 15px;
  background:#03316C;
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,0.15);
}

.header-left, .header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-circle{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 3px 6px rgba(0,0,0,0.12);
}

.icon-circle img{
  width:95%;
  height:95%;
  object-fit:contain;
}

.app-name{
  font-size:18px;
  font-weight:700;
  color:#fff;
}

/* -----------------------------------
   BANNER
----------------------------------- */
.banner-container{
  width:100%;
  margin-top:18px;
}

.banner-image{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* -----------------------------------
   4 MENU ICON GRID
----------------------------------- */
.my-box-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:0 10px;
}

.menu-box{
  background:#ffffff;
  text-align:center;
  padding:12px 6px;
  border-radius:14px;
  color:#03316C;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  transition:.25s ease;
}

.menu-box:hover{
  transform:translateY(-4px);
}

.menu-box i{
  font-size:22px;
  margin-bottom:4px;
  color:#0057D9;
}

/* -----------------------------------
   CATEGORY TABS
----------------------------------- */
.record-tab{
  display:flex;
  justify-content:space-between;
  background:#dce8ff;
  margin:20px 15px 10px;
  border-radius:30px;
  padding:5px;
}

.record-tab a{
  flex:1;
  text-align:center;
  padding:10px 0;
  font-size:14px;
  font-weight:600;
  color:#4a4a4a;
  border-radius:22px;
  text-decoration:none;
  transition:.3s;
}

.record-tab a.active{
  background:#03316C;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
}

/* -----------------------------------
   PRODUCT CARDS
----------------------------------- */
.home-product{
  padding:0 12px;
}

.home-product-list{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

/* Card */
.product-card{
  background:#fff;
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:12px;
  box-shadow:0 3px 12px rgba(0,0,0,0.10);
  position:relative;
}

/* Product Image */
.product-img{
  width:110px;
  height:110px;
  border-radius:14px;
  overflow:hidden;
}

.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Product Info */
.product-info{
  flex:1;
}

.product-info h3{
  font-size:16px;
  color:#03316C;
  font-weight:700;
  margin-bottom:6px;
}

.product-info p{
  font-size:13px;
  margin-bottom:4px;
}

.product-info span{
  font-weight:700;
  color:#0057D9;
}

/* Buy Button */
.product-footer{
  margin-top:6px;
}

.invest-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:10px 0;
  font-size:14px;
  font-weight:700;
  border:none;
  background:linear-gradient(90deg,#03316C,#0057D9);
  color:#fff;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,0.16);
  text-decoration:none;
}

.invest-btn img{
  width:18px;
}

/* -----------------------------------
   LOCKED CARDS
----------------------------------- */
.product-card.locked{
  opacity:.85;
}

.locked-stamp{
  position:absolute;
  top:10px;
  right:-18px;
  transform:rotate(45deg);
  background:#ff4747;
  color:#fff;
  padding:4px 18px;
  font-size:12px;
  font-weight:700;
  border-radius:6px;
}

.locked-timer{
  position:absolute;
  bottom:10px;
  right:12px;
  background:#03316C;
  padding:3px 10px;
  color:#fff;
  font-size:12px;
  border-radius:8px;
}

.locked-btn{
  background:#9aa3b8 !important;
  cursor:not-allowed;
}

/* -----------------------------------
   FOOTER MENU
----------------------------------- */
/* Footer Menu */
.footer-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}

.footer-menu a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: 0.25s;
}

.footer-menu a .icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
}

/* Active Tab */
.footer-menu a.active .icon-box {
  background: #03316C; /* Blue background for active */
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.footer-menu a i {
  font-size: 20px;
}

.footer-menu a.active i {
  color: #fff;
}

.footer-menu a span {
  font-size: 12px;
}

.footer-menu a.active span {
  color: #03316C; /* Optional: highlight text if needed */
}

/* Balance Card */
.balance-card {
  background: #03316C; /* Blue background */
  margin: 20px 15px 20px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
}

/* Balance Info */
.balance-info p {
  font-size: 14px;
  color: #cfd9f5;
  margin-bottom: 4px;
}

.balance-info h2 {
  font-size: 22px;
  font-weight: 700;
}

/* Balance Buttons */
.balance-buttons {
  display: flex;
  gap: 10px;
}

.balance-buttons a {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.25s;
}

.balance-buttons .btn-left {
  background: #f4f7ff; /* Light button */
  color: #03316C;
}

.balance-buttons .btn-left:hover {
  background: #e0e7ff;
}

.balance-buttons .btn-right {
  background: #0057D9; /* Darker blue button */
  color: #fff;
}

.balance-buttons .btn-right:hover {
  background: #003c99;
}
.invest-btn {
    display: block;              /* Full width block */
    width: 100%;
    text-align: center;          /* Center the text */
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(90deg, #03316C, #0057D9);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
    transition: all 0.3s ease;
}

.invest-btn:hover {
    background: linear-gradient(90deg, #0057D9, #03316C);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.invest-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Locked button style */
.locked-btn {
    background: #9aa3b8 !important;
    cursor: not-allowed;
    color: #fff;
}


</style>

</head>
<body>


<!-- Header with circular icons -->
<header class="app-header">
  <div class="header-left">
    <div class="icon-circle">
      <img src="victory/67f63c57c6b84c00013d4354_cryptocom-logo-png-transparent-background-1536x1536.png" alt="RedWire Icon">
    </div>
    <span class="app-name">Cro Coin</span>
  </div>

  <div class="header-right">
    <div class="icon-circle">
      <img src="victory/Telegram_logo.svg (1).webp" alt="Support Icon">
    </div>
  </div>
</header>

<!-- Balance Card -->
<div class="balance-card">
  <div class="balance-info">
    <p>Balance</p>
    <h2>{{ price(auth()->user()->balance) }}</h2>
  </div>
  <div class="balance-buttons">
    <a href="/user/recharge" class="btn-left">Deposit</a>
    <a href="/withdraw" class="btn-right">Withdraw</a>
  </div>
</div>


<div class="my-box-grid">
  <a href="/user/recharge" class="menu-box">
    <i class="fa-solid fa-wallet"></i>
    <p>Recharge</p>
  </a>
  <a href="/withdraw" class="menu-box">
    <i class="fa-solid fa-money-bill-wave"></i>
    <p>Withdraw</p>
  </a>
  <a href="/my-team" class="menu-box">
    <i class="fa-solid fa-users"></i>
    <p>Invite</p>
  </a>
  <a href="/get-bonus" class="menu-box">
    <i class="fa-solid fa-gift"></i>
    <p>Gift Code</p>
  </a>
</div>




@php
    use App\Models\Package;
    $packages = Package::where('status', 'active')->get();
@endphp

<div class="home-device"> 
    <!-- Category Tabs -->
    <div class="record-tab"> 
        <a href="javascript:void(0)" class="active" data-cat="pseries">Daily Plans</a> 
        <a href="javascript:void(0)" data-cat="bseries">Lock-in Plans</a> 
    </div>

    <!-- P Series -->
    <div class="home-product category pseries" style="margin-top: 12px;"> 
        <div class="home-product-list"> 
            @foreach ($packages as $package)
                @if ($package->category == 'P Series')
                    <div class="product-card">
                        <div class="product-img">
                            <img src="{{ asset($package->photo) }}" alt="{{ $package->name }}">
                        </div>
                        <div class="product-info">
                            <h3>{{ $package->name }}</h3>
                            <p>Price: <span>{{ price($package->price) }}</span></p>
                            <p>Cycle: <span>{{ $package->validity }} Days</span></p>
                            <p>Daily: <span>{{ price($package->commission_with_avg_amount / $package->validity) }}</span></p>
                        </div>
                        <div class="product-footer">
                            <a href="{{ route('vip.details', $package->id) }}" class="invest-btn">
                                Buy now
                            </a>
                        </div>
                    </div>
                @endif
            @endforeach
        </div> 
    </div> 

    <!-- B Series (Locked with Stamp) -->
    <div class="home-product category bseries" style="margin-top: 12px; display:none;"> 
        <div class="home-product-list"> 
            @foreach ($packages as $package)
                @if ($package->category == 'B Series')
                    <div class="product-card locked">
                        <div class="locked-stamp">LOCKED</div>
                        <div class="locked-timer" data-days="5"></div> <!-- Countdown timer -->

                        <div class="product-img">
                            <img src="{{ asset($package->photo) }}" alt="{{ $package->name }}">
                        </div>
                        <div class="product-info">
                            <h3>{{ $package->name }}</h3>
                            <p>Price: <span>{{ price($package->price) }}</span></p>
                            <p>Cycle: <span>{{ $package->validity }} Days</span></p>
                            <p>Daily: <span>{{ price($package->commission_with_avg_amount / $package->validity) }}</span></p>
                        </div>
                        <div class="product-footer">
                            <button class="invest-btn locked-btn" disabled>
                                <img src="redwire/10473528.png" alt="locked"> Locked
                            </button>
                        </div>
                    </div>
                @endif
            @endforeach
        </div> 
    </div> 
</div> 

@include('alert-message')



<br>
<br>
<br>
<!-- Bottom Menu Footer -->
<div class="footer-menu">
  <a href="/dashboard" class="active">
    <div class="icon-box">
      <i class="fa-solid fa-house"></i>
    </div>
    <span>Home</span>
  </a>
  <a href="/product">
    <div class="icon-box">
      <i class="fa-solid fa-bag-shopping"></i>
    </div>
    <span>Products</span>
  </a>
  <a href="/my-team">
    <div class="icon-box">
      <i class="fa-solid fa-users"></i>
    </div>
    <span>Team</span>
  </a>
  <a href="/my-profile">
    <div class="icon-box">
      <i class="fa-solid fa-user"></i>
    </div>
    <span>Mine</span>
  </a>
</div>
<!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // Tab switching
    $(".record-tab a").on("click", function(){
      var cat = $(this).data("cat");
      $(this).addClass("active").siblings().removeClass("active");
      $(".category").hide();
      $("."+cat).show();
    });
  </script>
  
<script>
function startLockedTimers() {
  $('.locked-timer').each(function() {
    // Get the number of days from data attribute
    var days = parseInt($(this).data('days'));
    
    // Set the target date
    var targetDate = new Date();
    targetDate.setDate(targetDate.getDate() + days);
    
    var timerEl = $(this);
    
    // Update every second
    var interval = setInterval(function() {
      var now = new Date().getTime();
      var distance = targetDate - now;

      if (distance <= 0) {
        clearInterval(interval);
        timerEl.text('Unlocked!');
        timerEl.siblings('.locked-stamp').fadeOut();
        timerEl.closest('.product-card').find('.locked-btn').prop('disabled', false).removeClass('locked-btn').text('Buy Now');
      } else {
        var d = Math.floor(distance / (1000 * 60 * 60 * 24));
        var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((distance % (1000 * 60)) / 1000);
        timerEl.text(`${d}d ${h}h ${m}m ${s}s`);
      }
    }, 1000);
  });
}

// Run the timers
startLockedTimers();
</script>

</body>
</html>   