<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: Arial, sans-serif; background: #f4f6fb; margin: 0; padding: 30px 0; }
    .wrap { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 12px;
            overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

    /* Header changes based on status */
    .header-approved { background: linear-gradient(135deg, #10b981, #059669); padding: 28px 32px; text-align: center; }
    .header-rejected { background: linear-gradient(135deg, #6b7280, #374151); padding: 28px 32px; text-align: center; }
    .header-approved h1, .header-rejected h1 { color: #fff; font-size: 22px; margin: 0 0 4px; }
    .header-approved p,  .header-rejected p  { color: rgba(255,255,255,0.75); font-size: 12px; margin: 0; }
    .badge { background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px;
             padding: 4px 14px; font-size: 12px; font-weight: 600;
             display: inline-block; margin-top: 10px; }

    .body { padding: 32px; color: #374151; }
    .body p { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }

    /* Approved styles */
    .success-box { background: #d1fae5; border: 1px solid #6ee7b7; border-radius: 8px;
                   padding: 13px 16px; margin-bottom: 18px; text-align: center; }
    .success-box p { margin: 0; font-size: 14px; color: #065f46; font-weight: 600; }

    .plan-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
                padding: 16px 18px; margin-bottom: 18px; }
    .plan-box h3 { margin: 0 0 10px; font-size: 11px; color: #1e40af;
                   text-transform: uppercase; letter-spacing: 0.5px; }
    .plan-row { display: flex; justify-content: space-between; font-size: 13px;
                padding: 6px 0; border-bottom: 1px solid #dbeafe; color: #374151; }
    .plan-row:last-child { border-bottom: none; font-weight: 700; font-size: 14px; color: #1e3a8a; }

    .steps { margin-bottom: 18px; }
    .step { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
    .step-num { background: #4f8ef7; color: #fff; border-radius: 50%;
                min-width: 24px; height: 24px; display: flex; align-items: center;
                justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
    .step-text { font-size: 13px; color: #374151; line-height: 1.5; }

    /* Rejected styles */
    .reason-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
                  padding: 13px 16px; margin-bottom: 18px; }
    .reason-box h4 { margin: 0 0 6px; font-size: 11px; color: #991b1b;
                     text-transform: uppercase; letter-spacing: 0.5px; }
    .reason-box p { margin: 0; font-size: 13px; color: #7f1d1d; }

    .contact-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
                   padding: 13px 16px; margin-bottom: 18px; }
    .contact-box p { margin: 0; font-size: 13px; color: #6b7280; }

    /* Button */
    .btn-wrap { text-align: center; margin: 20px 0 8px; }
    .btn-green { display: inline-block; padding: 13px 36px; background: #10b981;
                 color: #fff !important; text-decoration: none; border-radius: 8px;
                 font-weight: 600; font-size: 14px; }
    .btn-blue  { display: inline-block; padding: 13px 36px; background: #4f8ef7;
                 color: #fff !important; text-decoration: none; border-radius: 8px;
                 font-weight: 600; font-size: 14px; }

    .footer { text-align: center; padding: 16px 32px 24px; font-size: 11px;
              color: #9ca3af; border-top: 1px solid #f3f4f6; }
  </style>
</head>
<body>
<div class="wrap">

  {{-- ── HEADER — changes color by status ── --}}
  @if($status === 'approved')
    <div class="header-approved">
      <h1>🎓 ECA</h1>
      <p>Education Consultancy Association</p>
      <div class="badge">✅ Membership Approved</div>
    </div>
  @else
    <div class="header-rejected">
      <h1>🎓 ECA</h1>
      <p>Education Consultancy Association</p>
      <div class="badge">❌ Application Update</div>
    </div>
  @endif

  <div class="body">

    {{-- ── APPROVED CONTENT ── --}}
    @if($status === 'approved')

      <div class="success-box">
        <p>🎉 Congratulations! Your membership has been approved.</p>
      </div>

      <p>Dear <b>{{ $memberName }}</b>,</p>
      <p>Your ECA membership application for <b>{{ $unitName }}</b> unit has been reviewed and approved by your Unit Admin.</p>

      <div class="plan-box">
        <h3>Your Membership Plan</h3>
        <div class="plan-row">
          <span>Plan Name</span>
          <span>{{ $planName }}</span>
        </div>
        <div class="plan-row">
          <span>Membership Type</span>
          <span>{{ $planType }}</span>
        </div>
        <div class="plan-row">
          <span>Amount to Pay</span>
          <span>₹{{ $planAmount }}</span>
        </div>
      </div>

      <p><b>Next steps to activate your membership:</b></p>
      <div class="steps">
        <div class="step">
          <div class="step-num">1</div>
          <div class="step-text">Log in to the ECA app using your registered email and password.</div>
        </div>
        <div class="step">
          <div class="step-num">2</div>
          <div class="step-text">Go to <b>My Membership</b> and complete your payment of <b>₹{{ $planAmount }}</b>.</div>
        </div>
        <div class="step">
          <div class="step-num">3</div>
          <div class="step-text">Once payment is confirmed, your membership becomes <b>ACTIVE</b> and your ID card is issued.</div>
        </div>
      </div>

      <!-- <div class="btn-wrap">
        <a href="{{ $loginUrl }}" class="btn-green">Login &amp; Pay Now</a>
      </div> -->

    {{-- ── REJECTED CONTENT ── --}}
    @else

      <p>Dear <b>{{ $memberName }}</b>,</p>
      <p>Thank you for applying for ECA membership under <b>{{ $unitName }}</b> unit. After review, your application has not been approved at this time.</p>

      @if($reason)
        <div class="reason-box">
          <h4>Reason</h4>
          <p>{{ $reason }}</p>
        </div>
      @endif

      <div class="contact-box">
        <p>
          If you believe this is an error or would like to re-apply,
          please contact your unit admin at <b>{{ $contactEmail }}</b>.
        </p>
      </div>

      <!-- <p>You may re-register with corrected information after speaking with your unit admin.</p> -->

      <div class="btn-wrap">
        <a href="mailto:{{ $contactEmail }}" class="btn-blue">Contact Unit Admin</a>
      </div>

    @endif

    <p style="font-size:11px;color:#9ca3af;text-align:center;margin-top:8px;">
      This is an automated email. Please do not reply directly to this message.
    </p>
  </div>

  <div class="footer">
    &copy; {{ date('Y') }} ECA — Education Consultancy Association
  </div>

</div>
</body>
</html>