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

  <div class="container py-4">
  

    <!-- STEP NAVIGATION -->
    <div class="stepper">
        <div class="step">
            <div class="circle active"></div>
            <small>Consultation</small>
        </div>
        <div class="step">
            <div class="circle "></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>

    <main class="sheet">

      <div class="row gy-4">
        <!-- Main form column -->
        <div class="col-lg-8">

          <!-- Top heading -->
          <div class="mb-3 top-heading">
            <h5 class="mb-1">Medical Assessment for <span class="fw-bold">Hair Loss</span></h5>
            <p class="mb-1 muted">Complete this short online consultation so our medical team can show you suitable treatments.</p>
            <p class="mb-0">Ordered before? <button class="btn btn-sm fw-bold text-white" style="background:#E56515;"><i class="fas fa-lock"></i> Log in</button> now to speed up checkout.</p>
          </div>

          <!-- Form start -->
          <form id="consultationForm" novalidate>

            <!-- NOTE: below are sample sections/questions. Replace or replicate structure for all sections/questions you need. -->
            <!-- SECTION: About you (example) -->
            <section class="mb-4">
              <div class="mb-2">
                <span class="pill-mint"><i class="fa-solid fa-check"></i> GPhC registered</span>
              </div>

              <div class="mt-3">
                <h6 class="mb-2">About you</h6>

                <!-- Single question card -->
                <div class="question-card" data-question-id="q1" data-answer="We cannot supply this if you are pregnant." data-btn-status="yes" data-color="danger">
                  <div class="question-row">
                    <div class="flex-grow-1">
                      <div class="question-text">Are you currently pregnant?</div>
                      <div class="muted small">This helps us determine suitability</div>
                    </div>

                    <div>
                      <div class="btn-group" role="group" aria-label="Yes No">
                        <button type="button" class="btn btn-outline-success btn-yn" data-value="yes">Yes</button>
                        <button type="button" class="btn btn-outline-success btn-yn" data-value="no">No</button>
                      </div>
                    </div>
                  </div>

                  <div class="answer-display danger mt-2"></div>

                  <!-- Children questions -->
                  <div class="children mt-2">
                    <div class="question-card" data-question-id="q1a" data-answer="Please confirm date of delivery" data-btn-status="yes" data-color="warning">
                      <div class="question-row">
                        <div>
                          <div class="question-text">When are you due?</div>
                        </div>
                        <div>
                          <input type="date" class="form-control form-control-sm" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Another question -->
                <div class="question-card" data-question-id="q2" data-answer="You should avoid combining this with alcohol." data-btn-status="no" data-color="warning">
                  <div class="question-row">
                    <div class="flex-grow-1">
                      <div class="question-text">Do you drink more than 14 units of alcohol per week?</div>
                      <div class="muted small">If yes, we may adjust advice</div>
                    </div>

                    <div>
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-success btn-yn" data-value="yes">Yes</button>
                        <button type="button" class="btn btn-outline-success btn-yn" data-value="no">No</button>
                      </div>
                    </div>
                  </div>

                  <div class="answer-display warning mt-2"></div>
                </div>

                <!-- Keep adding question-card blocks for every question from sections -->
              </div>
            </section>

            <!-- Example: medical history section -->
            <section class="mb-4">
              <h6 class="mb-2">Medical history</h6>

              <div class="question-card" data-question-id="q3" data-answer="You have a known allergy to penicillin." data-btn-status="yes" data-color="danger">
                <div class="question-row">
                  <div class="flex-grow-1">
                    <div class="question-text">Do you have any medication allergies?</div>
                    <div class="muted small">Tell us about known drug allergies</div>
                  </div>

                  <div>
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-outline-success btn-yn" data-value="yes">Yes</button>
                      <button type="button" class="btn btn-outline-success btn-yn" data-value="no">No</button>
                    </div>
                  </div>
                </div>

                <div class="answer-display danger mt-2"></div>

                <div class="children mt-2">
                  <div class="mb-2">
                    <label class="form-label small">Please list allergies</label>
                    <input type="text" class="form-control form-control-sm" placeholder="e.g. penicillin, aspirin..." />
                  </div>
                </div>
              </div>

            </section>

            <!-- Submit area -->
            <div class="d-flex justify-content-end mt-4">
              <button type="submit" class=" py-2 px-4  btn-mint"><a class="text-decoration-none" href="{{ route('redesigned.preferred.treatments') }}">Submit</a></button>
            </div>
          </form>
        </div>

        <!-- Side column -->
        <aside class="col-lg-4">
          <div class="card side-card mb-3">
            <div class="card-body text-center" style="background:var(--mint); color:#042522;">
              <i class="fa-regular fa-clock fa-2x mb-2"></i>
              <p class="fw-bold mb-0">Complete our 2 minute questionnaire</p>
            </div>
          </div>

          <div class="card side-card mb-3">
            <div class="card-body text-center">
                <div class="mb-2 text-center">
                    <i class="fa-solid fa-hourglass fs-2 mb-2" style="color: var(--mint);"></i>
                    <p>To find a treatment suitable for you, we just need you to answer a few questions.</p>
                </div>
              <img src="{{ asset('redesigned-assets/images/carolina.webp') }}" alt="Pharmacist" class="img-fluid rounded mb-2" style="height:150px; object-fit:cover; background:var(--mint)">
              <div class="fw-bold">Ana Carolina Goncalves</div>
              <div class="muted small">Superintendent Pharmacist</div>
            </div>
          </div>

          <div class="card side-card mb-3">
            <div class="card-body text-center">
              <h6 class="fw-bold">Confidential & secure</h6>
              <ul class="ps-3 list-unstyled">
                <li class="muted small"><i class="fa-solid fa-check  fs-4 mx-2" style="color: var(--mint);"></i> We will review your details in confidence</li>
                <li class="muted small"><i class="fa-solid fa-check  fs-4 mx-2" style="color: var(--mint);"></i>Plain, unlabelled packaging</li>
                <li class="muted small"><i class="fa-solid fa-check  fs-4 mx-2" style="color: var(--mint);"></i>Billing appears as "Pharma"</li>
              </ul>
            </div>
          </div>

          <div class="card side-card mb-3 text-center">
            <div class="card-body">
              <div class="pill-mint mx-auto mb-3"><i class="fa-solid fa-award"></i> Lowest price guarantee</div>
              <p class="small muted">We’ll refund the difference if you find it cheaper.</p>
              <a href="#" class="text-decoration-none" style="color:var(--mint)">Find out more →</a>
            </div>
          </div>

          <div class="card side-card">
            <div class="card-body text-center">
              <h6 class="fw-bold">Need help?</h6>
              <p class="muted small mb-1">Call our helpline</p>
              <div class="fw-bold">0207 112 9014</div>
              <p class="small muted mb-0">help@ifeelshy.co.uk</p>
            </div>
          </div>
        </aside>

    


      </div> <!-- /.row -->
    </main>

  </div> <!-- /.container -->

   <script>
      // Vanilla JS consultation behavior
      (function () {
        // Keep answers in an array
        const allAnswers = [];

        // Helpers
        function findQuestionCard(el) {
          return el.closest(".question-card");
        }

        function updateAnswerArray(questionId, selectedAnswer) {
          const idx = allAnswers.findIndex((a) => a.question_id === questionId);
          if (idx > -1) allAnswers[idx].selected_answer = selectedAnswer;
          else
            allAnswers.push({
              question_id: questionId,
              selected_answer: selectedAnswer,
            });
          // console.log('Answers:', allAnswers);
        }

        function showAnswerBlock($card, clickedValue) {
          const answerText = $card.dataset.answer || "";
          const color = ($card.dataset.color || "success").toLowerCase();

          const display = $card.querySelector(".answer-display");
          if (!display) return;

          // match expected button status?
          const expected =
            $card.dataset.btnStatus || $card.dataset.btnStatus === undefined
              ? ($card.dataset.btnStatus || "").toLowerCase()
              : "";
          // If clicked value equals the "btn-status" (expected to show), then show
          if (expected === clickedValue || expected === "") {
            display.className =
              "answer-display " +
              (color === "danger"
                ? "danger"
                : color === "warning"
                ? "warning"
                : "success");
            display.textContent = answerText || "";
            display.style.display = "block";
          } else {
            display.textContent = "";
            display.style.display = "none";
          }
        }

        function toggleChildren($card, show) {
          const children = $card.querySelector(".children");
          if (!children) return;
          if (show) children.style.display = "block";
          else {
            // hide + reset inputs inside children
            children.style.display = "none";
            children
              .querySelectorAll('input[type="radio"], input[type="checkbox"]')
              .forEach((i) => (i.checked = false));
            children.querySelectorAll(".answer-display").forEach((d) => {
              d.style.display = "none";
              d.textContent = "";
            });
          }
        }

        // attach event listeners to all yes/no btns
        document.querySelectorAll(".btn-yn").forEach((button) => {
          button.addEventListener("click", (e) => {
            const btn = e.currentTarget;
            const clickedVal = btn.dataset.value; // 'yes' or 'no'
            const card = findQuestionCard(btn);
            if (!card) return;

            // visuals: toggle active states (sibling within btn-group)
            const group = btn.parentElement;
            group
              .querySelectorAll(".btn-yn")
              .forEach((b) => b.classList.remove("active"));
            btn.classList.add("active");

            // show/hide answer and children
            showAnswerBlock(card, clickedVal);
            // decide to show children if clicked matches data-btn-status (or if btn-status empty -> show on any selection)
            const expected = (card.dataset.btnStatus || "").toLowerCase();
            const showChildren = expected === clickedVal || expected === "";
            toggleChildren(card, showChildren);

            // update global answers array
            const qid = card.dataset.questionId;
            updateAnswerArray(qid, clickedVal);
          });
        });

        // Form submit validation
        const form = document.getElementById("consultationForm");
        if (form) {
          form.addEventListener("submit", function (e) {
            e.preventDefault();

            // Validate: require at least one question answered and ensure visible questions answered
            let valid = true;
            // check visible question-cards
            document.querySelectorAll(".question-card").forEach((card) => {
              if (card.offsetParent === null) return; // not visible
              const anyActive = card.querySelector(".btn-yn.active") !== null;
              const display = card.querySelector(".answer-display");
              if (!anyActive) {
                valid = false;
                // show temporary error on card
                if (display) {
                  display.className = "answer-display danger";
                  display.textContent = "Please complete this question.";
                  display.style.display = "block";
                } else {
                  card.style.outline = "2px solid #ffdddd";
                }
              }
            });

            if (!valid) {
              // scroll to first incomplete
              const firstErr = document.querySelector(
                '.answer-display.danger, .question-card[style*="outline"]'
              );
              if (firstErr)
                firstErr.scrollIntoView({
                  behavior: "smooth",
                  block: "center",
                });
              return;
            }

            if (allAnswers.length === 0) {
              alert("Please answer at least one question before submitting.");
              return;
            }

            // Example: send to backend (replace URL)
            fetch("/api/consultation/submit", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ answers: allAnswers }),
            })
              .then((r) => r.json())
              .then((data) => {
                // success redirect
                console.log("Submitted", data);
                // replace with real route
                window.location.href = "/treatments";
              })
              .catch((err) => {
                console.error("Submit error", err);
                alert("There was an error submitting. Please try again later.");
              });
          });
        }

        // Progressive enhancement: allow answer-display click to hide
        document.addEventListener("click", (e) => {
          if (e.target.matches(".answer-display")) {
            e.target.style.display = "none";
          }
        });
      })();
    </script>
@endsection