@extends('layouts.app')

@section('title', 'Welcome — set up your account')

@section('content')
<style>
  .onb-card { background: #fff; border: 1px solid #E8E4DE; border-radius: 12px; padding: 32px; max-width: 640px; margin: 0 auto; }
  .onb-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid #F1ECE3; }
  .onb-section:first-of-type { margin-top: 18px; padding-top: 0; border-top: 0; }
  .onb-row { margin-bottom: 18px; }
  .onb-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 520px) { .onb-row.two-col { grid-template-columns: 1fr; } }
  .onb-section-title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #960000; margin: 0 0 4px; }
  .onb-section-sub { color: #6a5050; font-size: 13px; margin: 0 0 18px; }
  .onb-required-pill { display: none; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #960000; padding: 2px 6px; border-radius: 999px; }
  body[data-coppa="1"] .onb-required-pill { display: inline-block; }
  .onb-help { font-size: 12px; color: #8a7070; margin-top: 4px; }
  .onb-consent { display: flex; gap: 10px; align-items: flex-start; background: #FBF7EE; border: 1px solid #EBDDC0; border-radius: 8px; padding: 12px 14px; }
  .onb-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
  .onb-consent label { font-size: 13px; color: #4a3030; margin: 0; font-weight: 500; line-height: 1.5; }
  .onb-actions { margin-top: 28px; display: flex; justify-content: flex-end; }
</style>

<div class="onb-card">
  <h1 style="margin-top:0">Welcome to AGS</h1>
  <p class="muted">A few details before you launch. We use these to keep your AGS account safe and to comply with student-privacy rules.</p>

  <form method="POST" action="{{ route('onboarding.store') }}" id="onboardingForm">
    @csrf

    {{-- Section 1: the student --}}
    <div class="onb-section">
      <div class="onb-section-title">About the student</div>
      <p class="onb-section-sub">The person who'll be using AGS Math (and friends).</p>

      <div class="onb-row">
        <label for="date_of_birth">Date of birth</label>
        <input type="date" name="date_of_birth" id="date_of_birth"
          value="{{ old('date_of_birth', optional($user->date_of_birth)->format('Y-m-d')) }}"
          required max="{{ now()->format('Y-m-d') }}" min="1900-01-01">
        <div class="onb-help" id="ageHelp"></div>
      </div>

      <div class="onb-row two-col">
        <div>
          <label for="child_email">Student email <span class="muted">(optional)</span></label>
          <input type="email" name="child_email" id="child_email"
            value="{{ old('child_email', $user->child_email) }}" placeholder="student@example.com">
        </div>
        <div>
          <label for="child_whatsapp">Student WhatsApp <span class="muted">(optional)</span></label>
          <input type="tel" name="child_whatsapp" id="child_whatsapp"
            value="{{ old('child_whatsapp', $user->child_whatsapp) }}" placeholder="+6591234567">
        </div>
      </div>
    </div>

    {{-- Section 2: the parent/guardian --}}
    <div class="onb-section">
      <div class="onb-section-title">
        Parent / guardian contact
        <span class="onb-required-pill">Required (student is under 13)</span>
      </div>
      <p class="onb-section-sub">For students under 13, parental consent + contact is required by privacy regulations.</p>

      <div class="onb-row two-col">
        <div>
          <label for="parent_email">Parent email</label>
          <input type="email" name="parent_email" id="parent_email"
            value="{{ old('parent_email', $parent->email ?? '') }}" placeholder="parent@example.com">
        </div>
        <div>
          <label for="parent_whatsapp">Parent WhatsApp</label>
          <input type="tel" name="parent_whatsapp" id="parent_whatsapp"
            value="{{ old('parent_whatsapp', $parent->phone ?? '') }}" placeholder="+6591234567">
        </div>
      </div>

      <div class="onb-row">
        <div class="onb-consent">
          <input type="checkbox" name="parent_consent" id="parent_consent" value="1"
            {{ old('parent_consent', $parentConsentAt ? '1' : '') ? 'checked' : '' }}>
          <label for="parent_consent">
            I am the parent or legal guardian of the student named on this account,
            and I consent to AGS collecting and processing the information above
            for the purpose of providing the learning service.
          </label>
        </div>
      </div>
    </div>

    <div class="onb-actions">
      <button class="btn" type="submit">Save and continue</button>
    </div>
  </form>
</div>

<script>
  (function () {
    var dob = document.getElementById('date_of_birth');
    var help = document.getElementById('ageHelp');
    var parentEmail = document.getElementById('parent_email');
    var parentWa = document.getElementById('parent_whatsapp');
    var consent = document.getElementById('parent_consent');

    function recompute() {
      if (!dob.value) { document.body.removeAttribute('data-coppa'); help.textContent = ''; return; }
      var birth = new Date(dob.value);
      if (isNaN(birth.getTime())) return;
      var now = new Date();
      var age = now.getFullYear() - birth.getFullYear();
      if (now.getMonth() < birth.getMonth() ||
          (now.getMonth() === birth.getMonth() && now.getDate() < birth.getDate())) {
        age--;
      }
      help.textContent = 'Age: ' + age + ' year' + (age === 1 ? '' : 's');
      var underThirteen = age < 13;
      document.body.setAttribute('data-coppa', underThirteen ? '1' : '0');
      parentEmail.required = underThirteen;
      parentWa.required = underThirteen;
      consent.required = underThirteen;
    }

    dob.addEventListener('change', recompute);
    dob.addEventListener('input', recompute);
    recompute();
  })();
</script>
@endsection