{% extends 'base.html' %}
{% block title %}Invite Student to Local Server - Student Smart Portal{% endblock %}
{% block content %}

<div class="page-heading" style="margin-bottom: 20px;">
  <div>
    <div class="eyebrow">ADMINISTRATOR &amp; TEACHER TOOLKIT</div>
    <h1 style="margin: 4px 0 6px; font-size: 1.6rem; color: #08154c;">Invite Student to Local Server</h1>
    <p class="muted">Share the student Progressive Web App (PWA) with students via WhatsApp or on-screen QR code.</p>
  </div>
</div>

<div class="two-column" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px;">

  <!-- Card 1: WhatsApp Invitation & Direct Link -->
  <section class="card" style="background: white; border-radius: 14px; padding: 22px; border: 1px solid #d6e2ef;">
    <div class="eyebrow" style="color: #059669;">WHATSAPP &amp; ONLINE INVITATION</div>
    <h2 style="font-size: 1.25rem; color: #08154c; margin: 6px 0 12px;">Share with Student Groups</h2>
    <p style="color: #64748b; font-size: 0.92rem; line-height: 1.5; margin-bottom: 16px;">
      Send this invitation link to student WhatsApp/Telegram groups so students can install the application on their phones or tablets at home before coming to the lecture hall.
    </p>

    <div style="background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px; margin-bottom: 16px;">
      <div style="font-size: 0.82rem; font-weight: 700; color: #475569; margin-bottom: 4px;">PWA Installation URL:</div>
      <input id="inviteUrl" type="text" readonly value="{{ invite_url }}" style="width: 100%; padding: 8px 10px; font-size: 0.9rem; font-family: monospace; border: 1px solid #94a3b8; border-radius: 6px; box-sizing: border-box; background: white;" />
    </div>

    <div class="button-stack" style="display: flex; flex-direction: column; gap: 10px;">
      <button class="button primary full" type="button" onclick="copyWhatsAppMessage()" style="background: #25d366; border-color: #25d366; font-weight: 700;">
        📋 Copy WhatsApp Invitation Message (نسخ الرسالة للواتساب)
      </button>

      <button class="button outline full" type="button" onclick="copyInstallLink()">
        🔗 Copy Link Only (نسخ الرابط فقط)
      </button>
    </div>

    <div style="margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e8f0;">
      <strong style="font-size: 0.88rem; color: #0f172a;">Pre-Formatted WhatsApp Text Preview:</strong>
      <div id="whatsappPreview" style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; margin-top: 8px; font-size: 0.85rem; line-height: 1.6; color: #166534; white-space: pre-wrap;" dir="rtl">🎓 *كلية أصول العلم الجامعة - قسم الصيدلة*
*بوابة الطالب الذكية (Smart Student Portal)*

أعزائي الطلبة، يرجى تثبيت تطبيق بوابة الطالب على هواتفكم الذكية أو أجهزتكم اللوحية:
🔗 {{ invite_url }}

📱 *خطوات التثبيت:*
1. افتح الرابط في متصفح Chrome (للأندرويد) أو Safari (للآيفون/الآيباد).
2. اضغط على خيارات المتصفح (⋮) أو زر المشاركة (Share) ثم اختر *"تثبيت التطبيق"* أو *"إضافة إلى الشاشة الرئيسية"*.
3. عند حضورك للقاعة الدراسية، اتصل بشبكة الكلية *(SSP@OUC)* وافتح التطبيق لمسح الرمز أو إدخال الكود السداسي.</div>
    </div>
  </section>

  <!-- Card 2: Classroom QR Code for Projector / Print -->
  <section class="card" style="background: white; border-radius: 14px; padding: 22px; border: 1px solid #d6e2ef; text-align: center;">
    <div class="eyebrow">PROJECT ON CLASSROOM SCREEN</div>
    <h2 style="font-size: 1.25rem; color: #08154c; margin: 6px 0 12px;">Student Installation QR</h2>

    <img src="{{ invite_qr }}" alt="PWA Install QR Code" style="max-width: 230px; width: 100%; border-radius: 12px; border: 1px solid #cbd5e1; margin: 8px auto 14px; display: block; box-shadow: 0 4px 12px rgba(0,0,0,0.06);" />

    <p style="color: #64748b; font-size: 0.88rem; margin-bottom: 16px;">
      Display this QR code during the first lecture or orientation for students to scan and install the portal immediately.
    </p>

    <div style="display: flex; gap: 10px;">
      <button class="button outline" type="button" onclick="window.print()" style="flex: 1;">
        🖨️ Print / Project QR
      </button>
    </div>
  </section>

</div>

<!-- Card 3: Platform Installation Guidelines -->
<section class="card" style="margin-top: 20px; background: white; border-radius: 14px; padding: 22px; border: 1px solid #d6e2ef;">
  <h2 style="font-size: 1.2rem; color: #08154c; margin-bottom: 14px;">Student Installation &amp; Operation Guidelines</h2>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
    <!-- Android Instructions -->
    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
      <h3 style="margin: 0 0 8px; color: #003366; font-size: 1rem;">🤖 Android Phones &amp; Tablets (Samsung, Tecno, Honor, Xiaomi, Pixel)</h3>
      <ol style="margin: 0; padding-left: 20px; font-size: 0.88rem; color: #475569; line-height: 1.6;">
        <li>Open link in <strong>Google Chrome</strong> or <strong>Samsung Internet</strong>.</li>
        <li>Tap the prompt <strong>"Install App"</strong> or open the menu (⋮) and tap <strong>"Add to Home screen"</strong>.</li>
        <li>The app will install as a standalone icon with the college crest.</li>
        <li>In class, connect to <strong>SSP@OUC</strong> Wi-Fi and open the app.</li>
      </ol>
    </div>

    <!-- iOS Instructions -->
    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
      <h3 style="margin: 0 0 8px; color: #003366; font-size: 1rem;">🍎 Apple iOS &amp; iPadOS (iPhone &amp; iPad)</h3>
      <ol style="margin: 0; padding-left: 20px; font-size: 0.88rem; color: #475569; line-height: 1.6;">
        <li>Open the link in <strong>Safari</strong> browser.</li>
        <li>Tap the <strong>Share</strong> button (square icon with arrow pointing up).</li>
        <li>Scroll down and tap <strong>"Add to Home Screen"</strong> (إضافة إلى الصفحة الرئيسية).</li>
        <li>Tap <strong>"Add"</strong> in the top right corner.</li>
        <li>In class, connect to <strong>SSP@OUC</strong> Wi-Fi and open the app.</li>
      </ol>
    </div>
  </div>
</section>

{% endblock %}

{% block scripts %}
<script>
function copyInstallLink() {
  var url = document.getElementById('inviteUrl').value;
  navigator.clipboard.writeText(url).then(function() {
    alert('Installation link copied to clipboard!');
  }).catch(function() {
    window.prompt('Copy installation link:', url);
  });
}

function copyWhatsAppMessage() {
  var msg = document.getElementById('whatsappPreview').innerText;
  navigator.clipboard.writeText(msg).then(function() {
    alert('WhatsApp invitation message copied to clipboard! You can now paste it into your WhatsApp group.');
  }).catch(function() {
    window.prompt('Copy WhatsApp message:', msg);
  });
}
</script>
{% endblock %}