{% extends "base.html" %}

{% block title %}Visitors Management{% endblock %}
{% block page_id %}visitors{% endblock %}
{% block page_title %}Visitors{% endblock %}
{% block eyebrow %}Management{% endblock %}

{% block content %}
    <section class="panel-stack">
        <article class="glass-card panel-card">
            <div class="panel-header vt-panel-header">
                <div class="vt-header-top">
                    <div>
                        <p class="eyebrow">Visitor Registry</p>
                        <h3>Manage Visitors</h3>
                    </div>
                    <span class="pill">{{ total }} total</span>
                </div>
                <div class="vt-header-actions">
                    <button onclick="downloadTemplate()" class="vt-btn vt-btn-icon" title="Download Template">⬇<span class="vt-btn-label"> Template</span></button>
                    <label class="vt-btn vt-btn-icon" style="cursor:pointer;" title="Import CSV">
                        ⬆<span class="vt-btn-label"> Import</span>
                        <input type="file" id="importFile" accept=".csv" style="display:none;" onchange="importVisitors(this)">
                    </label>
                    <button onclick="exportVisitors()" class="vt-btn vt-btn-icon" title="Export">📤<span class="vt-btn-label"> Export</span></button>
                    <button onclick="openAddUserModal()" class="vt-btn vt-btn-primary">+ Add Visitor</button>
                </div>
            </div>

            <div class="panel-body">
                <!-- Search + Sort Controls -->
                <div class="vt-controls">
                    <!-- Predictive Search -->
                    <div class="vt-search-wrap">
                        <input type="text" id="searchInput" placeholder="Search name, mobile, email..."
                               value="{{ search }}" autocomplete="off"
                               oninput="onSearchInput(this.value)"
                               onkeydown="if(event.key==='Enter'){doSearch()}">
                        <button class="vt-search-btn" onclick="doSearch()">🔍</button>
                        <div id="searchDropdown" class="vt-dropdown"></div>
                    </div>

                    <!-- Sort + Show row -->
                    <div class="vt-filters-row">
                        <select id="sortSelect" class="vt-filter-select" onchange="doSort(this.value)">
                            <option value="" {% if not sort %}selected{% endif %}>Sort by</option>
                            <option value="face_asc"  {% if sort=='face_asc'  %}selected{% endif %}>📅 Face Reg ↑</option>
                            <option value="face_desc" {% if sort=='face_desc' %}selected{% endif %}>📅 Face Reg ↓</option>
                            <option value="name_asc"  {% if sort=='name_asc'  %}selected{% endif %}>🔤 Name A-Z</option>
                            <option value="name_desc" {% if sort=='name_desc' %}selected{% endif %}>🔤 Name Z-A</option>
                        </select>
                        <select class="vt-filter-select" onchange="doLimit(this.value)">
                            <option value="25"  {% if limit==25  %}selected{% endif %}>Show 25</option>
                            <option value="50"  {% if limit==50  %}selected{% endif %}>Show 50</option>
                            <option value="100" {% if limit==100 %}selected{% endif %}>Show 100</option>
                        </select>
                    </div>
                </div>

                {% if visitors %}
                <div class="vt-table-wrapper">
                    <table class="vt-table">
                        <thead>
                            <tr>
                                <th>Face Reg. Date</th>
                                <th>Visitor</th>
                                <th>Mobile</th>
                                <th class="vt-hide-sm">Email</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for v in visitors %}
                            <tr>
                                <td class="vt-date">
                                    {% if v.face_registered_at %}
                                        {{ v.face_registered_at.strftime('%Y-%m-%d') }}
                                    {% else %}
                                        <span class="vt-not-registered">—</span>
                                    {% endif %}
                                </td>
                                <td class="vt-visitor-cell">
                                    <div class="vt-avatar" onclick="vlOpen('{{ v.face_photo or "/admin/static/no photo.png" }}','{{ v.name }}')" title="Click to view photo">
                                        {% if v.face_photo %}
                                            <img src="{{ v.face_photo }}" alt="{{ v.name }}" onerror="this.src='/admin/static/no photo.png'">
                                        {% else %}
                                            <img src="/admin/static/no photo.png" alt="No photo">
                                        {% endif %}
                                    </div>
                                    <div>
                                        <span class="vt-name">{{ v.name }}</span>
                                        <span class="vt-email-sm vt-show-sm">{{ v.email or '—' }}</span>
                                    </div>
                                </td>
                                <td class="vt-mobile">{{ v.mobile_number or '—' }}</td>
                                <td class="vt-email vt-hide-sm">{{ v.email or '—' }}</td>
                                <td>
                                    <a href="{{ url_for('admin.edit_visitor', visitor_id=v.id) }}" class="vt-edit-btn">Edit</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if total_pages > 1 %}
                <div class="pagination">
                    {% if page > 1 %}
                        <a href="{{ url_for('admin.visitors_page', page=page-1, limit=limit, search=search, sort=sort) }}" class="page-link">&laquo;</a>
                    {% endif %}
                    {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                            <span class="page-link active">{{ p }}</span>
                        {% elif p <= 2 or p > total_pages - 2 or (p >= page - 1 and p <= page + 1) %}
                            <a href="{{ url_for('admin.visitors_page', page=p, limit=limit, search=search, sort=sort) }}" class="page-link">{{ p }}</a>
                        {% endif %}
                    {% endfor %}
                    {% if page < total_pages %}
                        <a href="{{ url_for('admin.visitors_page', page=page+1, limit=limit, search=search, sort=sort) }}" class="page-link">&raquo;</a>
                    {% endif %}
                </div>
                {% endif %}
                <div class="table-footer">Page {{ page }} of {{ total_pages }} · {{ total }} total visitors</div>

                {% else %}
                <div class="empty-state"><p>No visitors found</p></div>
                {% endif %}
            </div>
        </article>
    </section>

<!-- Photo Lightbox -->
<div id="vlOverlay" class="vl-overlay">
    <button class="vl-close" onclick="vlClose()">&times;</button>
    <img id="vlImg" class="vl-img" src="" alt="">
    <div id="vlCaption" class="vl-caption"></div>
</div>
{% endblock %}

{% block head %}
<style>
    /* ── Header actions ──────────────────────────────────────────────── */
    .vt-header-actions {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }

    /* ── Buttons ─────────────────────────────────────────────────────── */
    .vt-btn {
        padding: 8px 12px; font-size: 13px; font-weight: 600;
        border: 1.5px solid #cbd5e1; border-radius: 10px;
        background: #ffffff; color: #0f2b3d; cursor: pointer;
        transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px;
        white-space: nowrap;
    }
    .vt-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
    .vt-btn-primary { background: linear-gradient(135deg,#2c7da0,#1a5f7a); color:#fff; border:none; }
    .vt-btn-primary:hover { background: linear-gradient(135deg,#1a5f7a,#0f3a47); color:#fff; }

    /* ── Controls row ────────────────────────────────────────────────── */
    .vt-controls {
        display: flex; gap: 10px; align-items: center;
        flex-wrap: wrap; margin-bottom: 20px;
    }

    /* Search */
    .vt-search-wrap {
        flex: 1; min-width: 200px; position: relative; display: flex; gap: 6px;
    }
    .vt-search-wrap input {
        flex: 1; padding: 11px 14px; border: 1.5px solid #cbd5e1;
        border-radius: 10px; font-size: 14px; color: #0f172a;
        background: #fff; outline: none;
    }
    .vt-search-wrap input:focus { border-color: #2c7da0; box-shadow: 0 0 0 3px rgba(44,125,160,0.1); }
    .vt-search-btn {
        padding: 11px 16px; background: #0f2b3d; color: #fff; border: none;
        border-radius: 10px; font-size: 15px; cursor: pointer; flex-shrink: 0;
    }
    .vt-search-btn:hover { background: #1b5e7a; }

    /* Predictive dropdown */
    .vt-dropdown {
        position: absolute; top: calc(100% + 6px); left: 0;
        right: 52px; background: #fff; border: 1.5px solid #e2e8f0;
        border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 500; display: none; max-height: 260px; overflow-y: auto;
    }
    .vt-dropdown.open { display: block; }
    .vt-dd-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s;
    }
    .vt-dd-item:last-child { border-bottom: none; }
    .vt-dd-item:hover { background: #f0f7ff; }
    .vt-dd-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid #e2e8f0; flex-shrink:0; }
    .vt-dd-name { font-weight:700; font-size:14px; color:#0f172a; }
    .vt-dd-sub  { font-size:12px; color:#64748b; }
    .vt-dd-empty { padding:14px; text-align:center; color:#94a3b8; font-size:13px; }

    /* Sort + Show */
    .vt-sort-wrap select,
    .vt-show-wrap select {
        padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px;
        background: #fff; font-size: 13px; cursor: pointer; color: #0f172a;
    }
    .vt-show-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; }

    /* ── Table ───────────────────────────────────────────────────────── */
    .vt-table-wrapper { overflow-x: auto; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
    .vt-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 480px; }
    .vt-table thead tr { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
    .vt-table th { padding: 13px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #334155; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
    .vt-table td { padding: 13px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 14px; }
    .vt-table tbody tr:last-child td { border-bottom: none; }
    .vt-table tbody tr:hover td { background: #f8fafc; }

    .vt-date { font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
    .vt-not-registered { color: #cbd5e1; font-size: 18px; }

    .vt-visitor-cell { display: flex; align-items: center; gap: 10px; min-width: 140px; }
    .vt-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid #e2e8f0; background:#f1f5f9; cursor:pointer; }
    .vt-avatar:hover img { opacity: 0.85; }
    .vt-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
    .vt-name { font-weight: 700; color: #0f172a; font-size: 14px; display: block; }
    .vt-email-sm { font-size: 12px; color: #64748b; display: none; }
    .vt-mobile, .vt-email { font-size: 13px; color: #475569; }
    .vt-mobile { white-space: nowrap; }

    .vt-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; display:inline-block; white-space:nowrap; }
    .vt-edit-btn:hover { background:#f8fafc; border-color:#2c7da0; color:#2c7da0; }

    /* Pagination */
    .pagination { display:flex; gap:6px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
    .page-link { padding:9px 14px; border:1.5px solid #cbd5e1; border-radius:10px; background:#fff; color:#334155; text-decoration:none; font-size:14px; font-weight:600; transition:all 0.2s; }
    .page-link:hover { background:#f8fafc; border-color:#2c7da0; }
    .page-link.active { background:#0f2b3d; border-color:#0f2b3d; color:#fff; }
    .table-footer { text-align:center; padding:10px 0; font-size:13px; color:#64748b; }
    .empty-state { text-align:center; padding:50px 20px; color:#64748b; }

    /* ── Header layout ───────────────────────────────────────────────── */
    .vt-panel-header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    .vt-header-top { display: flex; align-items: center; justify-content: space-between; }
    .vt-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .vt-btn-label { display: inline; }

    /* Filters row */
    .vt-filters-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .vt-filter-select { padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 13px; cursor: pointer; color: #0f172a; flex: 1; min-width: 120px; }
    .vt-sort-wrap, .vt-show-wrap { display: none; } /* replaced by filters-row */

    /* ── Mobile responsive ───────────────────────────────────────────── */
    @media (max-width: 640px) {
        /* Header: keep labels visible */
        .vt-header-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
        .vt-btn { padding: 7px 10px; font-size: 12px; gap: 3px; }
        .vt-btn-label { display: inline; font-size: 11px; }

        /* Search */
        .vt-controls { flex-direction: column; align-items: stretch; gap: 8px; }
        .vt-search-wrap { min-width: 100%; }
        .vt-search-wrap input { font-size: 15px; padding: 13px 14px; }
        .vt-search-btn { padding: 13px 18px; font-size: 17px; }

        /* Filters */
        .vt-filters-row { gap: 8px; }
        .vt-filter-select { font-size: 13px; padding: 11px 10px; flex: 1; }

        /*
         * TABLE SCROLL BREAKOUT FIX
         * admin.css applies overflow-x:hidden to body AND the panel wrapper
         * on mobile, which traps the table and prevents any horizontal scrolling.
         *
         * Solution: Use negative margins to "break out" of the padded parent box,
         * width:100vw makes the wrapper span the full screen,
         * and overflow-x:auto on THAT element creates the scroll zone.
         * The parent overflow:hidden can't clip it because the wrapper now
         * independently owns its horizontal scroll context.
         */
        .vt-table-wrapper {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            width: 100vw !important;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            box-sizing: border-box;
            padding: 0 16px;
        }

        /* All columns stay — user scrolls right to see mobile, email, actions */
        .vt-table { min-width: 620px; }
        .vt-hide-sm { display: table-cell !important; }
        .vt-show-sm { display: block !important; }

        .vt-table th, .vt-table td { padding: 10px 10px; font-size: 13px; white-space: nowrap; }
        .vt-date { font-size: 11px; min-width: 85px; }
        .vt-name { font-size: 13px; }
        .vt-email-sm { display: none; }
        .vt-edit-btn { padding: 5px 10px; font-size: 12px; }
        .vt-avatar { width: 34px; height: 34px; }
        .vt-mobile { font-size: 12px; min-width: 110px; }
        .vt-visitor-cell { min-width: 130px; gap: 7px; }
        .vt-email { min-width: 150px; font-size: 12px; }

        /* Pagination */
        .page-link { padding: 8px 12px; font-size: 13px; }
    }

    /* ── Add Visitor Modal ───────────────────────────────────────────── */
    .add-user-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; }
    .add-user-modal.active { display:flex; }
    .add-user-modal-content { background:#fff; border-radius:16px; width:90%; max-width:440px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.3); animation:modalSlideIn 0.25s ease; }
    @keyframes modalSlideIn { from{opacity:0;transform:translateY(-16px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);} }
    .aum-header { padding:18px 22px; background:linear-gradient(135deg,#0f2b3d,#1b5e7a); display:flex; align-items:center; justify-content:space-between; }
    .aum-header span { color:#fff; font-size:16px; font-weight:700; }
    .aum-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; }
    .aum-body { padding:22px; display:flex; flex-direction:column; gap:14px; }
    .aum-field { display:flex; flex-direction:column; gap:5px; }
    .aum-field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#475569; }
    .aum-field input { padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; background:#f8fafc; width:100%; box-sizing:border-box; }
    .aum-field input:focus { outline:none; border-color:#2c7da0; background:#fff; }
    .aum-btns { display:flex; gap:10px; }
    .aum-btn-cancel { flex:1; padding:12px; background:#f1f5f9; color:#334155; border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; }
    .aum-btn-save   { flex:1; padding:12px; background:#0f2b3d; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
    .aum-btn-save:hover { background:#1b5e7a; }

    /* Lightbox */
    .vl-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:5000; align-items:center; justify-content:center; }
    .vl-overlay.active { display:flex; }
    .vl-img { max-width:88vw; max-height:82vh; object-fit:contain; border-radius:12px; }
    .vl-close { position:fixed; top:18px; right:18px; background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.3); color:#fff; width:40px; height:40px; border-radius:50%; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5001; }
    .vl-caption { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.85); font-size:13px; font-weight:600; background:rgba(0,0,0,0.45); padding:7px 18px; border-radius:20px; white-space:nowrap; }

    /* Popups */
    .visitor-popup { position:fixed; top:20px; right:20px; background:#fff; border-radius:12px; padding:14px 18px; min-width:260px; max-width:340px; box-shadow:0 20px 25px -5px rgba(0,0,0,0.15); z-index:10000; opacity:0; transform:translateX(400px); transition:all 0.3s; display:flex; gap:12px; align-items:flex-start; }
    .visitor-popup.show { opacity:1; transform:translateX(0); }
    .popup-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .success-icon { background:#d1fae5; color:#059669; }
    .error-icon   { background:#fee2e2; color:#dc2626; }
    .popup-title  { font-weight:700; font-size:14px; color:#0f172a; }
    .popup-message { font-size:13px; color:#475569; }
</style>

<!-- Add Visitor Modal -->
<div id="addUserModal" class="add-user-modal">
    <div class="add-user-modal-content">
        <div class="aum-header">
            <span>👤 Add New Visitor</span>
            <button onclick="closeAddUserModal()">&times;</button>
        </div>
        <div class="aum-body">
            <div class="aum-field"><label>Name *</label><input type="text" id="add_user_name" placeholder="e.g. John Doe"></div>
            <div class="aum-field"><label>Mobile (10 digits)</label><input type="text" id="add_user_mobile" placeholder="e.g. 9876543210" maxlength="10" inputmode="numeric"></div>
            <div class="aum-field"><label>Email</label><input type="email" id="add_user_email" placeholder="e.g. john@example.com"></div>
            <div class="aum-btns">
                <button class="aum-btn-cancel" onclick="closeAddUserModal()">Cancel</button>
                <button class="aum-btn-save" id="aumSaveBtn" onclick="saveUser()">Save Visitor</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ── URL helpers ───────────────────────────────────────────────────────────
function getParam(k){ return new URLSearchParams(location.search).get(k)||''; }

function doSearch() {
    const q = document.getElementById('searchInput').value.trim();
    const sort = getParam('sort'); const limit = getParam('limit')||'25';
    location.href = `{{ url_for('admin.visitors_page') }}?search=${encodeURIComponent(q)}&sort=${sort}&limit=${limit}&page=1`;
}
function doSort(val) {
    const q = getParam('search'); const limit = getParam('limit')||'25';
    location.href = `{{ url_for('admin.visitors_page') }}?search=${encodeURIComponent(q)}&sort=${val}&limit=${limit}&page=1`;
}
function doLimit(val) {
    const q = getParam('search'); const sort = getParam('sort');
    location.href = `{{ url_for('admin.visitors_page') }}?search=${encodeURIComponent(q)}&sort=${sort}&limit=${val}&page=1`;
}

// ── Predictive search ─────────────────────────────────────────────────────
let _searchTimer = null;
const _dropdown  = document.getElementById('searchDropdown');

function onSearchInput(val) {
    clearTimeout(_searchTimer);
    if (val.trim().length < 1) { closeDropdown(); return; }
    _searchTimer = setTimeout(() => fetchSuggestions(val.trim()), 250);
}

async function fetchSuggestions(q) {
    try {
        const res  = await fetch(`/admin/api/visitors/search?search=${encodeURIComponent(q)}&limit=8`);
        const data = await res.json();
        renderDropdown(data);
    } catch { closeDropdown(); }
}

function renderDropdown(items) {
    if (!items.length) {
        _dropdown.innerHTML = '<div class="vt-dd-empty">No results found</div>';
        _dropdown.classList.add('open');
        return;
    }
    _dropdown.innerHTML = items.map(v => `
        <div class="vt-dd-item" onclick="selectVisitor('${escHtml(v.name)}','${escHtml(v.email||'')}','${escHtml(v.mobile_number||'')}')">
            <img class="vt-dd-avatar" src="/admin/static/no photo.png" alt="${escHtml(v.name)}"
                 onerror="this.src='/admin/static/no photo.png'">
            <div>
                <div class="vt-dd-name">${escHtml(v.name)}</div>
                <div class="vt-dd-sub">${escHtml(v.email||v.mobile_number||'')}</div>
            </div>
        </div>`).join('');
    _dropdown.classList.add('open');
}

function selectVisitor(name, email, mobile) {
    document.getElementById('searchInput').value = name;
    closeDropdown();
    doSearch();
}

function closeDropdown() { _dropdown.classList.remove('open'); _dropdown.innerHTML = ''; }
function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

// Close dropdown on outside click
document.addEventListener('click', e => {
    if (!document.querySelector('.vt-search-wrap').contains(e.target)) closeDropdown();
});

// ── Add Visitor Modal ─────────────────────────────────────────────────────
function openAddUserModal() { document.getElementById('addUserModal').classList.add('active'); setTimeout(()=>document.getElementById('add_user_name').focus(),100); }
function closeAddUserModal() {
    document.getElementById('addUserModal').classList.remove('active');
    document.getElementById('add_user_name').value = '';
    document.getElementById('add_user_mobile').value = '';
    document.getElementById('add_user_email').value = '';
}
window.onclick = e => { if(e.target.id==='addUserModal') closeAddUserModal(); };

function saveUser() {
    const name   = document.getElementById('add_user_name').value.trim();
    const mobile = document.getElementById('add_user_mobile').value.trim();
    const email  = document.getElementById('add_user_email').value.trim();
    if (!name) { showPopup('error','Name is required'); return; }
    if (mobile && mobile.length!==10) { showPopup('error','Mobile must be 10 digits'); return; }
    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showPopup('error','Invalid email format'); return; }
    if (!email && !mobile) { showPopup('error','Email or mobile required'); return; }
    const btn = document.getElementById('aumSaveBtn');
    btn.disabled=true; btn.textContent='Saving...';
    fetch('/admin/api/visitors/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,mobile,email})})
    .then(r=>r.json())
    .then(d=>{
        if(d.success){showPopup('success',d.message||'Visitor added');setTimeout(()=>{closeAddUserModal();location.reload();},1400);}
        else showPopup('error',d.message||'Error');
    })
    .catch(()=>showPopup('error','Network error'))
    .finally(()=>{btn.disabled=false;btn.textContent='Save Visitor';});
}

// ── Popup ─────────────────────────────────────────────────────────────────
function showPopup(type, msg) { showFlashMessage(msg, type); }

// ── Template Download ─────────────────────────────────────────────────────
function downloadTemplate() {
    const csv='Name,Mobile Number,Email\nJohn Doe,9876543210,john@example.com\n';
    const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([csv],{type:'text/csv'})); a.download='visitors_template.csv'; a.click();
}

// ── Import CSV ────────────────────────────────────────────────────────────
function importVisitors(input) {
    const file=input.files[0]; if(!file) return;
    const reader=new FileReader();
    reader.onload=async function(e){
        const lines=e.target.result.trim().split('\n').filter(l=>l.trim());
        if(lines.length<2){showPopup('error','CSV empty or no data rows');return;}
        const headers=lines[0].replace(/^\uFEFF/,'').split(',').map(h=>h.trim().replace(/^["']|["']$/g,'').toLowerCase());
        const ni=headers.findIndex(h=>h==='name'), mi=headers.findIndex(h=>h.includes('mobile')), ei=headers.findIndex(h=>h==='email');
        if(ni===-1){showPopup('error','CSV must have Name column');return;}
        let ok=0,fail=0;
        for(let i=1;i<lines.length;i++){
            const cols=lines[i].split(',').map(c=>c.trim().replace(/^["']|["']$/g,''));
            const name=cols[ni]||'',mobile=mi>=0?cols[mi]||'':'',email=ei>=0?cols[ei]||'':'';
            if(!name||name.toLowerCase()==='name') continue;
            try{ const r=await fetch('/admin/api/visitors/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,mobile,email})}); const d=await r.json(); d.success?ok++:fail++; }catch{fail++;}
        }
        input.value='';
        showPopup(ok>0?'success':'error',`Imported ${ok} visitors${fail>0?', '+fail+' failed':''}.`);
        if(ok>0) setTimeout(()=>location.reload(),1800);
    };
    reader.readAsText(file);
}

// ── Export CSV ────────────────────────────────────────────────────────────
function exportVisitors() {
    fetch('/admin/api/visitors/export').then(r=>r.json()).then(data=>{
        if(!data.visitors?.length){showPopup('error','No visitors to export');return;}
        const rows=['Name,Mobile Number,Email'];
        data.visitors.forEach(v=>rows.push(`${(v.name||'').replace(/,/g,' ')},${v.mobile_number||''},${v.email||''}`));
        const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([rows.join('\n')],{type:'text/csv'}));
        a.download=`visitors_${new Date().toISOString().slice(0,10)}.csv`; a.click();
        showPopup('success',`Exported ${data.visitors.length} visitors.`);
    }).catch(()=>showPopup('error','Export failed'));
}

// ── Photo Lightbox ────────────────────────────────────────────────────────
function vlOpen(url,name){if(!url)return; document.getElementById('vlImg').src=url; document.getElementById('vlCaption').textContent=name||''; document.getElementById('vlOverlay').classList.add('active');}
function vlClose(){ document.getElementById('vlOverlay').classList.remove('active'); document.getElementById('vlImg').src=''; }
document.getElementById('vlOverlay').addEventListener('click',function(e){if(e.target===this)vlClose();});
document.addEventListener('keydown',e=>{if(e.key==='Escape')vlClose();});
</script>
{% endblock %}