<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 
  <title>CRO | Product</title> 
  <link rel="stylesheet" href="/static/home/css/swiper-bundle.min.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 /* -----------------------------------
   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 */
}

.products-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 20px 0;
  position: relative;
}

/* हल्की ऊपर की छाया */
.products-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  width: 80px;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  filter: blur(6px);
  border-radius: 50%;
}

 </style>

</head> 

<h2 class="products-heading">Our Products</h2>


@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" >
    <div class="icon-box">
      <i class="fa-solid fa-house"></i>
    </div>
    <span>Home</span>
  </a>
  <a href="/product" class="active">
    <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>
</body>
</html>
