{% extends 'base.html' %}
{% block title %}Dashboard — {{ org.name }}{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  .verified-box {
    background:#e8f5ee;border:1px solid #a5d6b7;
    border-radius:12px;padding:16px;text-align:left;
  }
  .verified-box .v-name { font-size:1.1rem;font-weight:700;color:#1a5c38;margin-bottom:4px; }
  .verified-box .v-info { font-size:.87rem;color:#2d6a4f; }
  #statusBadge .badge  { font-size:.82rem;padding:5px 12px; }
</style>
{% endblock %}

{% block content %}

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
  <div>
    <h4 style="font-weight:700;margin:0;">Dashboard</h4>
    <p style="color:#888;font-size:.87rem;margin:0;">{{ org.name }} — {{ org.get_sector_display }}</p>
  </div>
  {% if org.uidai_setup_done %}
    <button class="btn-accent" onclick="openQRModal()">Verify Visitor</button>
  {% else %}
    <a href="/setup-uidai/" class="btn-accent">Complete UIDAI Setup</a>
  {% endif %}
</div>

<!-- Trial Banner -->
{% if org.is_trial and not org.trial_expired %}
  {% if trial_days_left <= 3 %}
  <div style="background:#fdecea;border:1px solid #f5c6cb;border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
    <span style="color:#c62828;font-size:.9rem;">
      ⚠️ <strong>Trial ending soon:</strong> Only {{ trial_days_left }} day{{ trial_days_left|pluralize }} remaining.
    </span>
    <a href="/upgrade/" style="background:#d62828;color:white;border-radius:20px;padding:7px 18px;font-size:.85rem;font-weight:600;text-decoration:none;">Upgrade Now</a>
  </div>
  {% elif trial_days_left <= 7 %}
  <div style="background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
    <span style="color:#5d4037;font-size:.9rem;">
      ⏰ <strong>Free Trial:</strong> {{ trial_days_left }} days remaining.
    </span>
    <a href="/upgrade/" style="background:#e8a020;color:white;border-radius:20px;padding:7px 18px;font-size:.85rem;font-weight:600;text-decoration:none;">View Plans</a>
  </div>
  {% else %}
  <div style="background:#e8f5ee;border:1px solid #a5d6b7;border-radius:12px;padding:12px 18px;margin-bottom:20px;font-size:.88rem;color:#1a5c38;">
    ✅ <strong>Free Trial Active:</strong> {{ trial_days_left }} days remaining.
    <a href="/upgrade/" style="color:#1a3c5e;font-weight:600;margin-left:8px;">View Plans →</a>
  </div>
  {% endif %}
{% endif %}

<!-- UIDAI Setup Warning -->
{% if not org.uidai_setup_done %}
<div style="background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:.9rem;color:#5d4037;">
  ⚠️ <strong>UIDAI setup is incomplete.</strong>
  <a href="/setup-uidai/" style="color:#1a3c5e;font-weight:600;">Complete setup</a> to start verifying visitors.
</div>
{% endif %}

<!-- Verification Limit Warning -->
{% if remaining == 0 %}
<div style="background:#fdecea;border:1px solid #f5c6cb;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:.9rem;color:#c62828;">
  Monthly verification limit reached.
  <a href="/upgrade/" style="color:#1a3c5e;font-weight:600;">Upgrade your plan</a> to continue.
</div>
{% elif remaining < 20 %}
<div style="background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:.9rem;color:#5d4037;">
  ⚠️ Only <strong>{{ remaining }}</strong> verification{{ remaining|pluralize }} left this month.
  <a href="/upgrade/" style="color:#1a3c5e;font-weight:600;">Upgrade</a>
</div>
{% endif %}

<!-- Stat Cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card c-blue">
      <div class="s-num">{{ total_visitors }}</div>
      <div class="s-lbl">Total Visitors</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card c-gold">
      <div class="s-num">{{ today_visitors }}</div>
      <div class="s-lbl">Today</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card c-green">
      <div class="s-num">{{ remaining }}</div>
      <div class="s-lbl">Verif. Left</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card c-blue" style="border-color:#6c757d;">
      <div class="s-num" style="color:#6c757d;font-size:1rem;">{{ org.get_plan_display }}</div>
      <div class="s-lbl">Current Plan</div>
    </div>
  </div>
</div>

<!-- Library/Coaching Stat Cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-4">
    <div class="stat-card c-green">
      <div class="s-num">{{ present_today }}</div>
      <div class="s-lbl">Present Today</div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="stat-card c-blue">
      <div class="s-num">{{ total_students }}</div>
      <div class="s-lbl">Total Students</div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="stat-card c-gold">
      <div class="s-num">₹{{ fees_collected_total }}</div>
      <div class="s-lbl">Fees Collected (This Month)</div>
    </div>
  </div>
</div>

<!-- Chart -->
<div class="card mb-4">
  <div class="card-header-bar">
    <h5>Daily Visitors</h5>
  </div>
  <div style="padding:20px;">
    <div style="position:relative;height:210px;">
      <canvas id="visitorChart"></canvas>
    </div>
  </div>
</div>

<!-- Table -->
<div class="card">
  <div class="card-header-bar">
    <h5>Visitor Records</h5>
  </div>
  <div style="padding:20px;">

    <form method="GET" action="">
      <div class="filter-bar">
        <div class="filter-group">
          <label>From</label>
          <input type="date" name="from_date" value="{{ from_date }}" class="filter-input">
        </div>
        <div class="filter-group">
          <label>To</label>
          <input type="date" name="to_date" value="{{ to_date }}" class="filter-input">
        </div>
        <button type="submit" class="btn-primary-main" style="padding:9px 20px;font-size:.87rem;">Filter</button>
        <a href="/dashboard/" style="background:white;color:#888;border:1.5px solid #ddd;border-radius:24px;padding:8px 16px;font-size:.87rem;font-weight:600;text-decoration:none;">Reset</a>
        {% if can_export %}
        <a href="/export-excel/?from_date={{ from_date }}&to_date={{ to_date }}"
           style="background:#1a7a4a;color:white;border-radius:24px;padding:9px 20px;font-size:.87rem;font-weight:600;text-decoration:none;margin-left:auto;">
          Export Excel
        </a>
        {% else %}
        <a href="/upgrade/"
           style="background:#aaa;color:white;border-radius:24px;padding:9px 20px;font-size:.87rem;font-weight:600;text-decoration:none;margin-left:auto;"
           title="Upgrade to Business or Enterprise to export">
          Export (Upgrade Required)
        </a>
        {% endif %}
      </div>
    </form>

    {% if from_date or to_date %}
    <div style="background:#e8f5ee;border-radius:8px;padding:8px 14px;font-size:.84rem;color:#1a5c38;margin-bottom:14px;">
      Filtered:
      {% if from_date %}<strong>{{ from_date }}</strong>{% endif %}
      {% if from_date and to_date %} to {% endif %}
      {% if to_date %}<strong>{{ to_date }}</strong>{% endif %}
      — <strong>{{ visitors|length }}</strong> record(s)
    </div>
    {% endif %}

    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Gender</th>
            <th>Address</th>
            <th>Other Info</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          {% for v in visitors %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td><strong>{{ v.name }}</strong></td>
            <td>{{ v.dob|default:"—" }}</td>
            <td>{{ v.gender|default:"—" }}</td>
            <td>{{ v.address|truncatechars:45|default:"—" }}</td>
            <td style="font-size:.82rem;color:#666;">
              {% for key, value in v.extra_data.items %}
                {% if key == 'residentImage' %}
                  <img src="data:image/jpeg;base64,{{ value }}" alt="Photo" style="width:40px;height:40px;border-radius:6px;object-fit:cover;cursor:pointer;" onclick="showPhotoLightbox(this.src)">
                {% else %}
                  <div>{{ key }}: {{ value }}</div>
                {% endif %}
              {% empty %}
                —
              {% endfor %}
            </td>
            <td style="white-space:nowrap;font-size:.83rem;">{{ v.created_at|date:"d M Y H:i" }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-center text-muted py-5">
              {% if from_date or to_date %}
                No visitors found in this date range.
              {% else %}
                No visitors yet. Click "Verify Visitor" to get started.
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>
</div>

<!-- QR Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
    <div class="modal-content text-center p-1">
      <div class="modal-body" style="padding:28px;">
        <h5 style="font-weight:700;margin-bottom:4px;">Visitor Verification</h5>
        <p style="color:#888;font-size:.83rem;margin-bottom:20px;">Secure UIDAI Aadhaar Authentication</p>
        <div class="step-bar">
          <div class="step active" id="step1">QR</div>
          <div class="step" id="step2">Scan</div>
          <div class="step" id="step3">Verify</div>
          <div class="step" id="step4">Done</div>
        </div>
        <div id="statusBadge" class="mb-3">
          <span class="badge bg-secondary">Idle</span>
        </div>
        <div class="qr-wrap">
          <img id="qrImage" src="" alt="QR Code" style="display:none;">
        </div>
        <div id="resultBox">
          <p style="color:#1a3c5e;font-size:.88rem;">Generating QR code...</p>
        </div>
        <button id="retryBtn" class="btn-primary-main mt-3" style="display:none;border-radius:24px;padding:9px 22px;font-size:.87rem;">
          Generate New QR
        </button>
      </div>
      <div class="modal-footer border-0 pt-0">
        <button type="button" class="btn btn-sm btn-outline-secondary w-100" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Photo Lightbox -->
<div id="photoLightbox" onclick="this.style.display='none'" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out;">
  <img id="photoLightboxImg" src="" alt="Photo" style="max-width:90%;max-height:90%;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);">
</div>

{% endblock %}

{% block extra_js %}
<script src="/static/js/app.js"></script>
<script>
function showPhotoLightbox(src) {
  document.getElementById('photoLightboxImg').src = src;
  const box = document.getElementById('photoLightbox');
  box.style.display = 'flex';
}
function openQRModal() {
  new bootstrap.Modal(document.getElementById('verifyModal')).show();
}
new Chart(document.getElementById('visitorChart'), {
  type: 'line',
  data: {
    labels: {{ dates|safe }},
    datasets: [{
      label: 'Visitors',
      data: {{ counts|safe }},
      borderColor: '#1a3c5e',
      backgroundColor: 'rgba(26,60,94,.07)',
      borderWidth: 2.5,
      pointBackgroundColor: '#1a3c5e',
      pointRadius: 4,
      fill: true,
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      y: { beginAtZero: true, ticks: { stepSize: 1 }, grid: { color: 'rgba(0,0,0,.05)' } },
      x: { grid: { display: false } }
    }
  }
});
</script>
{% endblock %}