{% extends "subadmin/base.html" %}
{% block title %}Consent{% endblock %}
{% block eyebrow %}Management{% endblock %}
{% block page_title %}Consent{% endblock %}
{% set active = 'consent' %}

{% block head %}
<style>
    .sa-role-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
    .sa-role-btn { padding:11px 24px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; border:2px solid transparent; transition:all 0.2s; }
    .sa-role-btn.visitor      { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
    .sa-role-btn.admin        { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
    .sa-role-btn.photographer { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
    .sa-role-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }

    .sa-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
    .sa-stat { background:#fff; border-radius:14px; border:1px solid #e2e8f0; padding:18px 20px; }
    .sa-stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#64748b; display:block; margin-bottom:6px; }
    .sa-stat-value { font-size:32px; font-weight:800; color:#0f172a; display:block; line-height:1; }

    .sa-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
    .sa-search { display:flex; gap:8px; flex:1; }
    .sa-search input { flex:1; max-width:340px; padding:10px 16px; border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; }
    .sa-search input:focus { outline:none; border-color:#2c7da0; }
    .sa-search button { padding:10px 16px; background:#2c7da0; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
    .sa-show { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#475569; }
    .sa-show select { padding:9px 12px; border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; cursor:pointer; }

    .sa-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid #e2e8f0; background:#fff; }
    .sa-table { width:100%; border-collapse:collapse; }
    .sa-table thead tr { background:#f8fafc; border-bottom:2px solid #e2e8f0; }
    .sa-table th { padding:12px 16px; text-align:left; font-size:12px; font-weight:700; color:#334155; text-transform:uppercase; letter-spacing:0.5px; }
    .sa-table td { padding:12px 16px; border-bottom:1px solid #f1f5f9; }
    .sa-table tbody tr:last-child td { border-bottom:none; }
    .sa-table tbody tr:hover td { background:#f8fafc; }
    .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
    .badge-yes { background:#dcfce7; color:#15803d; }
    .badge-no  { background:#fee2e2; color:#b91c1c; }

    .sa-pagination { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
    .sa-page-link { padding:9px 14px; border:1.5px solid #cbd5e1; border-radius:10px; background:#fff; color:#334155; text-decoration:none; font-size:13px; font-weight:600; }
    .sa-page-link:hover { background:#f8fafc; border-color:#2c7da0; }
    .sa-page-link.active { background:#0f2b3d; border-color:#0f2b3d; color:#fff; }

    /* Consent modal */
    .sa-cm-modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.7); backdrop-filter:blur(6px); z-index:1000; align-items:center; justify-content:center; }
    .sa-cm-modal.active { display:flex; }
    .sa-cm-box { background:#fff; border-radius:16px; width:90%; max-width:560px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.3); }
    .sa-cm-header { padding:16px 20px; background:linear-gradient(135deg,#0f2b3d,#1b5e7a); display:flex; align-items:center; justify-content:space-between; }
    .sa-cm-header span { color:#fff; font-size:16px; font-weight:700; }
    .sa-cm-header button { background:rgba(255,255,255,0.2); border:1.5px solid rgba(255,255,255,0.4); color:#fff; width:30px; height:30px; border-radius:8px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .sa-cm-body { padding:20px; }
    .sa-cm-body label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; display:block; margin-bottom:8px; }
    .sa-cm-body textarea { width:100%; padding:12px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; background:#f8fafc; resize:vertical; min-height:130px; font-family:inherit; box-sizing:border-box; }
    .sa-cm-body textarea:focus { outline:none; border-color:#2c7da0; background:#fff; }
    .sa-cm-btns { display:flex; gap:10px; padding-top:14px; }
    .sa-cm-btns button { flex:1; padding:12px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
    .sa-cm-save { background:#0f2b3d; color:#fff; border:none; }
    .sa-cm-save:hover { background:#1b5e7a; }
    .sa-cm-cancel { background:#f1f5f9; color:#334155; border:1.5px solid #cbd5e1; }

    @media(max-width:640px){ .sa-stats{grid-template-columns:1fr;} }
</style>
{% endblock %}

{% block content %}
<!-- Role buttons -->
<div class="sa-role-btns">
    <button class="sa-role-btn visitor"      onclick="openConsent('visitor')">👥 Visitor Consent</button>
    <button class="sa-role-btn admin"        onclick="openConsent('admin')">🔐 Admin Consent</button>
    <button class="sa-role-btn photographer" onclick="openConsent('photographer')">📷 Photographer Consent</button>
</div>

<!-- Stats -->
<div class="sa-stats">
    <div class="sa-stat">
        <span class="sa-stat-label">Total Visitors</span>
        <span class="sa-stat-value">{{ total_visitors }}</span>
    </div>
    <div class="sa-stat">
        <span class="sa-stat-label">Consented</span>
        <span class="sa-stat-value">{{ consented_users }}</span>
    </div>
    <div class="sa-stat">
        <span class="sa-stat-label">Remaining</span>
        <span class="sa-stat-value">{{ total_visitors - consented_users }}</span>
    </div>
</div>

<!-- Consent logs -->
<div class="sa-card">
    <div class="sa-card-header">
        <h2>Consent Logs</h2>
        <span class="pill">{{ total_logs }} logs</span>
    </div>
    <div class="sa-card-body">
        <div class="sa-controls">
            <form method="GET" action="/subadmin/consent" class="sa-search">
                <input type="text" name="search" value="{{ search }}" placeholder="Search by username or email...">
                <input type="hidden" name="limit" value="{{ limit }}">
                <button type="submit">Search</button>
                {% if search %}<a href="/subadmin/consent?limit={{ limit }}" style="padding:10px 14px;background:#f1f5f9;color:#64748b;border:1.5px solid #cbd5e1;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;">Clear</a>{% endif %}
            </form>
            <form method="GET" action="/subadmin/consent" class="sa-show">
                <label>Show</label>
                <select name="limit" onchange="this.form.submit()">
                    <option value="10"  {% if limit==10  %}selected{% endif %}>10</option>
                    <option value="25"  {% if limit==25  %}selected{% endif %}>25</option>
                    <option value="50"  {% if limit==50  %}selected{% endif %}>50</option>
                </select>
                <input type="hidden" name="search" value="{{ search }}">
            </form>
        </div>

        {% if logs %}
        <div class="sa-table-wrap">
            <table class="sa-table">
                <thead><tr>
                    <th>Sl No</th><th>Username</th><th>Email</th><th>Agreed</th><th>Agreed At</th>
                </tr></thead>
                <tbody>
                {% for log in logs %}
                <tr>
                    <td style="color:#94a3b8;font-weight:700;">{{ loop.index + (page-1)*limit }}</td>
                    <td style="font-weight:600;">{{ log.username or '—' }}</td>
                    <td style="font-size:13px;color:#475569;">{{ log.user_email or '—' }}</td>
                    <td><span class="badge {% if log.agreed %}badge-yes{% else %}badge-no{% endif %}">{% if log.agreed %}✓ Yes{% else %}✗ No{% endif %}</span></td>
                    <td style="font-size:13px;color:#64748b;">{{ log.agreed_at.strftime('%Y-%m-%d %H:%M') if log.agreed_at else '—' }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {% if total_pages > 1 %}
        <div class="sa-pagination">
            {% if page > 1 %}<a href="/subadmin/consent?page={{ page-1 }}&limit={{ limit }}&search={{ search }}" class="sa-page-link">&laquo; Prev</a>{% endif %}
            {% for p in range(1, total_pages+1) %}
                {% if p==page %}<span class="sa-page-link active">{{ p }}</span>
                {% elif p<=2 or p>total_pages-2 or (p>=page-1 and p<=page+1) %}
                <a href="/subadmin/consent?page={{ p }}&limit={{ limit }}&search={{ search }}" class="sa-page-link">{{ p }}</a>
                {% endif %}
            {% endfor %}
            {% if page < total_pages %}<a href="/subadmin/consent?page={{ page+1 }}&limit={{ limit }}&search={{ search }}" class="sa-page-link">Next &raquo;</a>{% endif %}
        </div>
        {% endif %}
        {% else %}
        <div style="text-align:center;padding:40px;color:#94a3b8;">No consent logs found</div>
        {% endif %}
    </div>
</div>

<!-- Consent Message Modal -->
<div id="cmModal" class="sa-cm-modal">
    <div class="sa-cm-box">
        <div class="sa-cm-header">
            <span id="cmTitle">Consent Message</span>
            <button onclick="closeConsent()">&times;</button>
        </div>
        <div class="sa-cm-body">
            <label id="cmLabel">CONSENT MESSAGE</label>
            <textarea id="cmText" placeholder="Loading..."></textarea>
            <div class="sa-cm-btns">
                <button class="sa-cm-cancel" onclick="closeConsent()">Cancel</button>
                <button class="sa-cm-save" onclick="saveConsent()">Save</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let _cmRole = '';
const roleLabels = { visitor:'👥 Visitor', admin:'🔐 Admin', photographer:'📷 Photographer' };

async function openConsent(role) {
    _cmRole = role;
    document.getElementById('cmTitle').textContent = roleLabels[role] + ' Consent';
    document.getElementById('cmLabel').textContent  = role.toUpperCase() + ' CONSENT MESSAGE';
    document.getElementById('cmText').value = 'Loading...';
    document.getElementById('cmModal').classList.add('active');
    const r = await fetch(`/subadmin/api/consent/message/${role}`);
    const d = await r.json();
    document.getElementById('cmText').value = d.consent_msg || '';
}
function closeConsent() { document.getElementById('cmModal').classList.remove('active'); }

async function saveConsent() {
    const msg = document.getElementById('cmText').value.trim();
    if(!msg){saToast('Message cannot be empty','error');return;}
    const r = await fetch(`/subadmin/api/consent/message/${_cmRole}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({consent_msg:msg})});
    const d = await r.json();
    if(d.success){saToast(d.message,'success');closeConsent();}
    else saToast(d.error||'Failed','error');
}

document.getElementById('cmModal').addEventListener('click',e=>{if(e.target===document.getElementById('cmModal'))closeConsent();});
</script>
{% endblock %}