{% extends "base.html" %}
{% block page_title %}Enroll in Care{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/plugins/care-circle/assets/css/care-circle.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}
{% block content %}
<section aria-label="Care enrollment" class="care-wrap blocks-workspace" data-plugin="care-circle" data-login-email="{{ login_email }}">
  <div class="blocks-workspace-notice" data-care-notice role="status" aria-live="polite" tabindex="-1" hidden></div>
  <h1>Enroll in Care Circle</h1>
  <p class="care-muted">One-time, free enrollment. SOS and care bookings unlock after this step.</p>

  {% if enrolled %}
  <div class="care-sos-card">
    <p><strong>Enrollment already completed.</strong> Contact support to edit your details.</p>
    <p><a href="/plugins/care-circle/index">Go to My Care</a></p>
  </div>
  {% else %}
  <div id="care-enroll-form" data-conditional-visibility="enrollment_pending" class="care-enroll-form">
  <div class="care-sos-card" id="care-enroll-step1">
    <h2>Step 1 — Who is enrolling?</h2>
    <label class="care-radio"><input type="radio" name="enroll_as" value="self" checked> I am enrolling myself</label>
    <label class="care-radio"><input type="radio" name="enroll_as" value="nok"> I am a relative enrolling for a family member</label>
  </div>

  <div class="care-sos-card" id="care-enroll-step2">
    <h2>Step 2 — Member particulars</h2>
    <p class="care-muted" id="ce-self-email-note">Enrolling with your login Gmail: <strong>{{ login_email }}</strong></p>
    <div class="care-grid">
      <label>Full name*<input id="ce-name" class="form-control" autocomplete="name"></label>
      <label>Phone<input id="ce-phone" class="form-control" autocomplete="tel"></label>
      <label id="ce-email-row">Member Gmail ID — we invite them to approve<input id="ce-email" class="form-control" type="email" autocomplete="email"></label>
      <label>Apartment name
        <div class="care-row">
          <input id="ce-apartment" class="form-control" placeholder="Apartment / building name">
          <button type="button" class="btn btn-primary care-book-btn" id="ce-geo-apartment" aria-label="Fill apartment from current location" title="Fill from current location">📍</button>
        </div>
      </label>
      <label>Flat no<input id="ce-flat" class="form-control"></label>
      <label>Blood group
        <select id="ce-blood" class="form-control">
          <option value="">Select</option>
          <option>O+</option><option>O-</option>
          <option>A+</option><option>A-</option>
          <option>B+</option><option>B-</option>
          <option>AB+</option><option>AB-</option>
        </select>
      </label>
      <label>Address<input id="ce-address" class="form-control"></label>
      <label>Preferred language
        <select id="ce-lang" class="form-control">
          <option value="">Select</option>
          <option>English</option>
          <option>Hindi</option>
          <option>Tamil</option>
          <option>Telugu</option>
          <option>Kannada</option>
          <option>Malayalam</option>
          <option>Marathi</option>
          <option>Gujarati</option>
          <option>Bengali</option>
          <option>Punjabi</option>
        </select>
      </label>
    </div>
    <div class="care-grid care-grid-full">
      <label>Medical notes<textarea id="ce-emergency" class="form-control" rows="3"></textarea></label>
      <label>Allergies<input id="ce-allergies" class="form-control"></label>
      <label>Chronic conditions<input id="ce-chronic" class="form-control"></label>
      <label>Primary hospital<input id="ce-hospital" class="form-control"></label>
    </div>
    <h3>Available care options</h3>
    <ul class="care-muted">{% for n in needs %}<li>{{ n.label }}</li>{% endfor %}</ul>
    <label class="care-radio"><input type="checkbox" id="ce-consent"> I consent to storing these particulars for SOS response*</label>
  </div>

  <div class="care-sos-card" id="care-enroll-step3">
    <h2>Step 3 — Your circle</h2>
    <p class="care-muted">Everyone must have signed in once with Google. Type a Gmail ID or pick a phone contact — we show whether they exist.</p>
    <div id="ce-nok-section">
      <h3>Relatives</h3>
      <div id="ce-nok-list"></div>
      <button type="button" class="btn btn-primary care-book-btn" id="ce-add-nok">+ Add relative</button>
    </div>
    <h3>Caretaker</h3>
    <div id="ce-care-list"></div>
    <button type="button" class="btn btn-primary care-book-btn" id="ce-add-care">+ Add caretaker</button>
  </div>

  <button id="ce-submit" class="btn btn-primary care-sos-btn care-submit-btn" data-action="enroll-save">Submit enrollment</button>
  <div id="care-enrollment-progress"></div>
  <p class="care-muted" id="ce-status" role="status" aria-live="polite"></p>
  </div>
  <div class="care-sos-card" id="care-enroll-thankyou" data-conditional-visibility="enrollment_complete" hidden>
    <h2>Thank you for enrolling in Care Circle.</h2>
    <p>Your enrollment has been received. Any circle invitations are pending approval by the invited contacts.</p>
    <p><a href="/plugins/care-circle/index">Go to My Care</a></p>
  </div>
  {% endif %}

  {% if invites %}
  <div class="care-sos-card">
    <h2>Pending invitations for you</h2>
    {% for i in invites %}
    <div class="care-need-card" data-link="{{ i.link_id }}">
      <p><strong>{{ i.member_name }}</strong> invited you as {% if i.link_type == "nok" %}relative{% elif i.link_type == "caretaker" %}caretaker{% else %}{{ i.link_type }}{% endif %}.</p>
      <button class="btn btn-primary care-book-btn" data-decide="approve" data-link="{{ i.link_id }}">Approve</button>
      <button class="btn btn-primary care-book-btn" data-decide="decline" data-link="{{ i.link_id }}">Decline</button>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/static/js/blocks-action-client.js"></script>
<script src="/plugins/care-circle/assets/js/care_sos.js"></script>
<script src="/static/js/blocks-async-lookup.js"></script>
<script src="/static/dist/platform-ui/solid.js"></script>
<script src="/plugins/care-circle/assets/js/care_enroll.js"></script>
{% endblock %}