@extends('layouts.redesigned-front-layout')
@section('content')

    <div class="container py-5">
      <!-- STEP NAVIGATION -->
      <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="sheet">
        <h3 class="text-center mb-4 fw-bold">
          Choose your preferred treatment
        </h3>

        <!-- TREATMENT CARD -->
        <div class="treatment-card mt-5">
          <div class="recommended">Recommended</div>

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

              <!-- Tags -->
              <div class="d-flex flex-wrap gap-2 mt-2 mb-3">
                <span class="badge-mint text-dark fw-semibold"
                  >Most Popular</span
                >
                <span class="badge-mint text-dark fw-semibold"
                  >Cost-Effective</span
                >
                <span class="badge-mint text-dark fw-semibold"
                  >Equivalent to Viagra</span
                >
              </div>

              <h6 class="fw-bold mt-3">About this treatment:</h6>

              <ul class="mt-2">
                <li>
                  Sildenafil is medically identical to Viagra, but available
                  cheaper due to being generic.
                </li>
                <li>
                  Helps men with erectile dysfunction achieve and maintain an
                  erection.
                </li>
                <li>Take one tablet approx. an hour before sexual activity.</li>
                <li>Remains active in the body for up to four hours.</li>
              </ul>
            </div>

            <!-- RIGHT SIDE -->
            <div class="col-md-4 text-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('redesigned-assets/images/nivea-after-sun-l-35594.webp') }}"
                class="img-fluid rounded shadow"
                alt="Treatment pack"
              />
            </div>
          </div>

          <!-- Strength + Prices -->
          <div class="mt-5">
            <p class="text-center mb-2">
              <em>Which strength is best for me?</em>
              <i class="fa-regular fa-circle-question"></i>
            </p>

            <!-- STRENGTH SELECTOR -->
            <div class="text-center mb-4">
              <div class="btn-group d-flex gap-3" id="strengthButtons">
                <button class="btn strength-btn active" data-strength="100mg">
                  100mg
                </button>
                <button class="btn strength-btn" data-strength="50mg">
                  50mg
                </button>
                <button class="btn strength-btn" data-strength="25mg">
                  25mg
                </button>
              </div>
            </div>

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

            <!-- BUY BUTTON -->
            <div class="text-center mt-4">
              <a href="{{route('redesigned.cart') }}" class="btn-buy btn">Buy now</a>
            </div>
          </div>
        </div>

        <div class="text-center mt-5">
          <button class="btn btn-outline-secondary px-4 py-2">
            View other treatments
          </button>
        </div>
      </div>
    </div>

    <script>
      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 buttons = document.querySelectorAll(".strength-btn");

      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="r-${strength}-${
            item.tablets
          }" ${index === 0 ? "checked" : ""}>
                    <label class="form-check-label text-black" for="r-${strength}-${
            item.tablets
          }">${item.tablets} tablets</label>
                </div>
                <div>
                    <strong>${item.price}</strong>
                    ${
                      item.note
                        ? `<div class="small text-muted">${item.note}</div>`
                        : ""
                    }
                </div>
            `;
          priceList.appendChild(row);
        });
      }

      renderPrices("100mg");

      buttons.forEach((btn) => {
        btn.addEventListener("click", () => {
          buttons.forEach((b) => b.classList.remove("active"));
          btn.classList.add("active");
          renderPrices(btn.dataset.strength);
        });
      });
    </script>
@endsection