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

{% block head %}
<style>
    .sa-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
    .sa-search { flex:1; min-width:200px; }
    .sa-search input { width:100%; padding:11px 16px; border:1.5px solid #cbd5e1; border-radius:12px; background:#fff; color:#0f172a; font-size:14px; }
    .sa-search input:focus { outline:none; border-color:#2c7da0; box-shadow:0 0 0 3px rgba(44,125,160,0.1); }
    .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; background:#fff; font-size:14px; cursor:pointer; }
    .sa-btn { padding:10px 18px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
    .sa-btn-dark { background:#0f2b3d; color:#fff; } .sa-btn-dark:hover { background:#1b5e7a; }
    .sa-btn-outline { background:#fff; color:#0f2b3d; border:1.5px solid #cbd5e1; } .sa-btn-outline:hover { background:#f1f5f9; }

    .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:13px 16px; text-align:left; font-size:12px; font-weight:700; color:#334155; text-transform:uppercase; letter-spacing:0.5px; }
    .sa-table td { padding:13px 16px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .sa-table tbody tr:last-child td { border-bottom:none; }
    .sa-table tbody tr:hover td { background:#f8fafc; }

    .sa-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; border:2px solid #e2e8f0; background:#f1f5f9; flex-shrink:0; }
    .sa-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
    .sa-visitor-cell { display:flex; align-items:center; gap:10px; }
    .sa-edit-btn { padding:6px 14px; font-size:12px; font-weight:600; border:1.5px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; text-decoration:none; transition:all 0.2s; }
    .sa-edit-btn:hover { background:#f8fafc; border-color:#2c7da0; color:#2c7da0; }

    .sa-pagination { display:flex; gap:8px; justify-content:center; margin-top:20px; 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; transition:all 0.2s; }
    .sa-page-link:hover { background:#f8fafc; border-color:#2c7da0; }
    .sa-page-link.active { background:#0f2b3d; border-color:#0f2b3d; color:#fff; }
    .sa-footer-txt { text-align:center; padding:12px 0 4px; font-size:13px; color:#64748b; }

    /* Modal */
    .sa-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-modal.active { display:flex; }
    .sa-modal-box { background:#fff; border-radius:16px; width:90%; max-width:440px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.3); animation:saModalIn 0.25s ease; }
    @keyframes saModalIn { from{opacity:0;transform:translateY(-16px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }
    .sa-modal-header { padding:18px 22px; background:linear-gradient(135deg,#0f2b3d,#1b5e7a); display:flex; align-items:center; justify-content:space-between; }
    .sa-modal-header span { color:#fff; font-size:16px; font-weight:700; }
    .sa-modal-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-modal-body { padding:22px; display:flex; flex-direction:column; gap:14px; }
    .sa-field { display:flex; flex-direction:column; gap:5px; }
    .sa-field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; }
    .sa-field input { padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; background:#f8fafc; }
    .sa-field input:focus { outline:none; border-color:#2c7da0; background:#fff; box-shadow:0 0 0 3px rgba(44,125,160,0.1); }
    .sa-modal-btns { display:flex; gap:10px; padding-top:4px; }
    .sa-modal-btns .sa-btn { flex:1; justify-content:center; padding:12px 20px; }
</style>
{% endblock %}

{% block content %}
<div class="sa-card">
    <div class="sa-card-header">
        <div>
            <p class="sa-eyebrow">Visitor Registry</p>
            <h2>Manage Visitors</h2>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <span class="pill">{{ total }} total</span>
            <button onclick="openAddModal()" class="sa-btn sa-btn-dark">+ Add Visitor</button>
        </div>
    </div>
    <div class="sa-card-body">
        <form method="GET" action="/subadmin/visitors" class="sa-controls">
            <div class="sa-search">
                <input type="text" name="search" placeholder="Search by name, mobile, or email..." value="{{ search }}">
            </div>
            <div class="sa-show">
                <label>Show</label>
                <select name="limit" onchange="this.form.submit()">
                    <option value="25" {% if limit==25 %}selected{% endif %}>25</option>
                    <option value="50" {% if limit==50 %}selected{% endif %}>50</option>
                    <option value="100" {% if limit==100 %}selected{% endif %}>100</option>
                </select>
            </div>
        </form>

        {% if visitors %}
        <div class="sa-table-wrap">
            <table class="sa-table">
                <thead><tr>
                    <th>Face Reg. Date</th>
                    <th>Visitor</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr></thead>
                <tbody>
                {% for v in visitors %}
                <tr>
                    <td style="font-size:13px;font-weight:600;color:#334155;white-space:nowrap;">
                        {% if v.face_registered_at %}{{ v.face_registered_at.strftime('%Y-%m-%d') }}
                        {% else %}<span style="color:#cbd5e1;">—</span>{% endif %}
                    </td>
                    <td>
                        <div class="sa-visitor-cell">
                            <div class="sa-avatar">
                                <img src="{{ v.face_photo or '/admin/static/no photo.png' }}" onerror="this.src='/admin/static/no photo.png'">
                            </div>
                            <span style="font-weight:700;font-size:14px;">{{ v.name }}</span>
                        </div>
                    </td>
                    <td style="font-size:13px;color:#475569;">{{ v.mobile_number or '—' }}</td>
                    <td style="font-size:13px;color:#475569;">{{ v.email or '—' }}</td>
                    <td><a href="/subadmin/visitors/edit/{{ v.id }}" class="sa-edit-btn">Edit</a></td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {% if total_pages > 1 %}
        <div class="sa-pagination">
            {% if page > 1 %}<a href="/subadmin/visitors?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/visitors?page={{ p }}&limit={{ limit }}&search={{ search }}" class="sa-page-link">{{ p }}</a>
                {% endif %}
            {% endfor %}
            {% if page < total_pages %}<a href="/subadmin/visitors?page={{ page+1 }}&limit={{ limit }}&search={{ search }}" class="sa-page-link">Next &raquo;</a>{% endif %}
        </div>
        {% endif %}
        <div class="sa-footer-txt">Showing page {{ page }} of {{ total_pages }} ({{ total }} total visitors)</div>
        {% else %}
        <div style="text-align:center;padding:50px 20px;color:#94a3b8;">No visitors found</div>
        {% endif %}
    </div>
</div>

<!-- Add Visitor Modal -->
<div id="addModal" class="sa-modal">
    <div class="sa-modal-box">
        <div class="sa-modal-header">
            <span>👤 Add New Visitor</span>
            <button onclick="closeAddModal()">&times;</button>
        </div>
        <div class="sa-modal-body">
            <div class="sa-field"><label>Name *</label><input type="text" id="av_name" placeholder="e.g. John Doe"></div>
            <div class="sa-field"><label>Mobile (10 digits)</label><input type="text" id="av_mobile" placeholder="e.g. 9876543210" maxlength="10"></div>
            <div class="sa-field"><label>Email</label><input type="email" id="av_email" placeholder="e.g. john@example.com"></div>
            <div class="sa-modal-btns">
                <button class="sa-btn sa-btn-outline" onclick="closeAddModal()">Cancel</button>
                <button class="sa-btn sa-btn-dark" onclick="saveVisitor()">Save Visitor</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function openAddModal() { document.getElementById('addModal').classList.add('active'); }
function closeAddModal() { document.getElementById('addModal').classList.remove('active'); }
document.getElementById('addModal').addEventListener('click', e => { if(e.target===document.getElementById('addModal')) closeAddModal(); });

async function saveVisitor() {
    const name=document.getElementById('av_name').value.trim();
    const mobile=document.getElementById('av_mobile').value.trim();
    const email=document.getElementById('av_email').value.trim();
    if(!name){saToast('Name is required','error');return;}
    if(!email&&!mobile){saToast('Email or mobile required','error');return;}
    const res=await fetch('/subadmin/api/visitors/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,mobile,email})});
    const d=await res.json();
    if(d.success){saToast('Visitor added!','success');closeAddModal();setTimeout(()=>location.reload(),1200);}
    else saToast(d.message||'Error','error');
}
</script>
{% endblock %}