@extends('user.layout')
<style>
    /* Card */
    .jewel-card {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        border-radius: 18px;
        padding: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    .jewel-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    /* Image */
    .jewel-img {
        height: 220px;
        border-radius: 18px;
        overflow: hidden;
        background: #f9f9f9;
    }

    .jewel-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .jewel-card:hover .jewel-img img {
        transform: scale(1.08);
    }

    /* Content */
    .jewel-content {
        padding: 15px;
    }

    .jewel-title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .jewel-price {
        color: #c9a227;
        /* Gold tone */
        font-weight: 600;
        margin-bottom: 12px;
    }

    /* Button */
    .jewel-btn {
        border: 1px solid #c9a227;
        color: #c9a227;
        border-radius: 25px;
        padding: 5px 14px;
        font-size: 13px;
        transition: 0.3s;
    }

    .jewel-btn:hover {
        background: #c9a227;
        color: #fff;
    }

    /* Optional Badge */
    .jewel-card::before {
        content: "Premium";
        position: absolute;
        top: 12px;
        left: 12px;
        background: #000;
        color: #fff;
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 12px;
    }
   .text-shimmer {

  color: #eab308;
  font-size: 20px !important;


  background: linear-gradient(
    90deg,
    #b45309,
    #fde68a,
    #f59e0b,
    #fde68a,
    #b45309
  );
  background-size: 200% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shimmerText 3s linear infinite;
}

@keyframes shimmerText {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
.note-card {
  background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  padding-bottom: 0px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
</style>
@section('content')
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Packages</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('user.purchase_requests') }}" class="btn btn-primary">
             💎 My Purchases
            </a>
        </div>
    </div>
<div class="note-card">
    <h5 class="fw-bold text-center text-shimmer">
  **You can exchange the product wallet & gold sales bonus points to purchase a package**
</h5>
</div>

{{-- <div class="row">
        <div class="container">
            <div class="row g-4">

                <div class="col-lg-3 col-md-6">
                    <div class="jewel-card">

                        <!-- Image -->
                        <div class="jewel-img">
                            <img src="{{ asset('/assets/ring.webp') }}" alt="Jewellery">
                        </div>

                        <!-- Content -->
                        <div class="jewel-content text-center">
                            <h6 class="jewel-title">Ring</h6>
                            <p class="jewel-price">$12500</p>

                            <a href="{{ route('user.buy_now') }}"> <button class="btn btn-primary">
                                    Buy Now
                                </button></a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="jewel-card">

                        <!-- Image -->
                        <div class="jewel-img">
                            <img src="{{ asset('/assets/bracelet.png') }}" alt="Jewellery">
                        </div>

                        <!-- Content -->
                        <div class="jewel-content text-center">
                            <h6 class="jewel-title">Bracelet</h6>
                            <p class="jewel-price">$12500</p>

                            <a href="{{ route('user.buy_now') }}"> <button class="btn btn-primary">
                                    Buy Now
                                </button></a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="jewel-card">

                        <!-- Image -->
                        <div class="jewel-img">
                            <img src="{{ asset('/assets/shopping.webp') }}" alt="Jewellery">
                        </div>

                        <!-- Content -->
                        <div class="jewel-content text-center">
                            <h6 class="jewel-title"> Necklace</h6>
                            <p class="jewel-price">$12500</p>

                            <a href="{{ route('user.buy_now') }}"> <button class="btn btn-primary">
                                    Buy Now
                                </button></a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="jewel-card">

                        <!-- Image -->
                        <div class="jewel-img">
                            <img src="{{ asset('/assets/earing.jpg') }}" alt="Jewellery">
                        </div>

                        <!-- Content -->
                        <div class="jewel-content text-center">
                            <h6 class="jewel-title">Earing</h6>
                            <p class="jewel-price">$12500</p>

                            <a href="{{ route('user.buy_now') }}"> <button class="btn btn-primary">
                                    Buy Now
                                </button></a>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div> --}}
    <div class="row">
        <div class="container">
            <div class="row g-4">

                @foreach ($packages as $package)
                    <div class="col-lg-3 col-md-6">
                        <div class="jewel-card">

                            <!-- Image -->
                            <div class="jewel-img">
                                <img src="{{ asset('storage/' . $package->package_image) }}" alt="Package">
                            </div>

                            <!-- Content -->
                            <div class="jewel-content text-center">
                                <h6 class="jewel-title text-white">{{ $package->name }}</h6>

                                <p class="jewel-price">₹ {{ $package->price }}</p>

                                <a href="{{ route('user.buy_now', $package->id) }}">
                                    <button class="btn btn-primary">💎 Own It Now</button>
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
@endsection