@extends ('layouts.front-layout')
@section('content')
 <style>
      .card-custom {
        border-radius: 10px;
        border: 1px solid #ddd;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      }
      .recommended-badge {
        background: #30bfac;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
      }
      .strength-btn {
        border: 1px solid #ccc;
        border-radius: 0;
        min-width: 80px;
      }
      .strength-btn.active {
        background-color: #30bfac;
        color: #fff;
      }
      .price-list {
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
      }
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
      }
      .price-row:last-child {
        border-bottom: none;
      }
      .price-row:hover {
        background: #f9f9f9;
      }
      .buy-btn {
        background-color: #f48024;
        border: none;
        padding: 10px 20px;
      }
      .buy-btn:hover {
        background-color: #d96e1e;
      }
    </style>
    <div class="container my-5">
      <!-- Stepper -->
      <div class="stepper">
        <div class="step">
          <div class="circle"></div>
          <small>Consultation</small>
        </div>
        <div class="step">
          <div class="circle active"></div>
          <small>Treatments</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Delivery</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Payment</small>
        </div>
      </div>

      <div class="container my-5 shadow-sm p-5 bg-white rounded">
        <h4 class="text-center mb-4">Choose your preferred treatment</h4>

        <div class="card card-custom position-relative p-4 my-5">
          <!-- Badge -->
          <div class="recommended-badge">Recommended</div>

          <div class="row g-4">
            <!-- Left Content -->
            <div class="col-md-8">
              <h4 class="fw-bold">Sildenafil</h4>
              <p class="text-muted">Sildenafil (Generic Viagra)</p>

              <!-- Tags -->
              <div class="mb-3">
                <span class="badge bg-success me-1">Most Popular</span>
                <span class="badge bg-success me-1">Cost-Effective</span>
                <span class="badge bg-success">Equivalent To Viagra</span>
              </div>

              <!-- About -->
              <p><strong>About this treatment:</strong></p>
              <ul>
                <li>
                  Sildenafil is medically identical to Viagra, but available at
                  a lower price as it is a generic medicine.
                </li>
                <li>
                  Sildenafil helps men with erectile dysfunction (ED) to achieve
                  and maintain an erection.
                </li>
                <li>
                  Take one tablet approximately an hour before sexual activity.
                </li>
                <li>Remains active in the body for up to four hours.</li>
              </ul>
            </div>

            <!-- Right Content -->
            <div class="col-md-4 text-center">
              <div class="d-flex flex-column align-items-center">
                <div class="mb-2">
                  <strong>4.8/5</strong>
                  <i class="fa-solid fa-star text-warning"></i>
                  <i class="fa-solid fa-star text-warning"></i>
                  <i class="fa-solid fa-star text-warning"></i>
                  <i class="fa-solid fa-star text-warning"></i>
                  <i class="fa-solid fa-star-half-stroke text-warning"></i>
                </div>
                <p class="small text-muted">Based on 27,133 reviews</p>
                <img
                  src="{{asset('assets/Assets/slide2.jpg')}}"
                  alt="Sildenafil Pack"
                  class="img-fluid rounded"
                />
              </div>
            </div>

            <div
              class="container d-flex flex-column align-items-center gap-3 my-3"
            >
              <p>
                <em>Which strength is best for me?</em>
                <i class="fa-regular fa-circle-question"></i>
              </p>

              <div class="container my-5">
                <!-- Strength Selector -->
                <div class="mb-3 d-flex flex-column align-items-center">
                  <div class="btn-group" role="group" id="strengthButtons">
                    <button
                      type="button"
                      class="btn strength-btn active"
                      data-strength="100mg"
                    >
                      100mg
                    </button>
                    <button
                      type="button"
                      class="btn strength-btn"
                      data-strength="50mg"
                    >
                      50mg
                    </button>
                    <button
                      type="button"
                      class="btn strength-btn"
                      data-strength="25mg"
                    >
                      25mg
                    </button>
                  </div>
                </div>

                <!-- Prices -->
                <div class="price-list" id="priceList"></div>

                <!-- Button -->
                <div class="mt-3 text-center">
                  <a href="#" class="btn buy-btn text-white add_to_cart_btn">Buy now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button class="btn btn-outline-secondary"> View Other Treatments</button>
      </div>
    </div>

    <script>
      // Price data
      const prices = {
        "100mg": [
          { tablets: 2, price: "£10.99" },
          { tablets: 4, price: "£16.99" },
          { tablets: 8, price: "£29.99" },
          { tablets: 12, price: "£39.99" },
          { tablets: 16, price: "£49.99", note: "£3.12 per tablet" },
          { tablets: 24, price: "£69.99" },
          { tablets: 28, price: "£79.99" },
          { tablets: 32, price: "£89.99" },
          { tablets: 64, price: "£139.99" },
        ],
        "50mg": [
          { tablets: 4, price: "£12.99" },
          { tablets: 8, price: "£19.99" },
          { tablets: 16, price: "£34.99" },
          { tablets: 32, price: "£59.99" },
        ],
        "25mg": [
          { tablets: 4, price: "£9.99" },
          { tablets: 8, price: "£15.99" },
          { tablets: 16, price: "£27.99" },
        ],
      };

      const priceList = document.getElementById("priceList");
      const strengthButtons = document
        .getElementById("strengthButtons")
        .querySelectorAll(".strength-btn");

      // Render price list
      function renderPrices(strength) {
        priceList.innerHTML = "";
        prices[strength].forEach((item, index) => {
          const row = document.createElement("div");
          row.className = "price-row";

          row.innerHTML = `
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tablets" id="${strength}-${
            item.tablets
          }" ${index === 0 ? "checked" : ""}>
          <label class="form-check-label" for="${strength}-${item.tablets}">
            ${item.tablets} tablets
          </label>
        </div>
        <div>
          <strong>${item.price}</strong>
          ${
            item.note
              ? `<small class="text-muted d-block">${item.note}</small>`
              : ""
          }
        </div>
      `;
          priceList.appendChild(row);
        });
      }

      // Default render
      renderPrices("100mg");

      // Button click handler
      strengthButtons.forEach((btn) => {
        btn.addEventListener("click", () => {
          strengthButtons.forEach((b) => b.classList.remove("active"));
          btn.classList.add("active");
          renderPrices(btn.getAttribute("data-strength"));
        });
      });
    </script>
@endsection