@section('title', 'Web Forms')

<style>
.wf * { box-sizing: border-box; }
.wf { font-family: inherit; }

/* Header */
.wf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.wf-title { font-size: 20px; font-weight: 700; color: var(--text-primary, #1f2937); margin: 0; }
.wf-subtitle { font-size: 13px; color: var(--text-muted, #6b7280); margin-top: 3px; }

/* Card */
.wf-card { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-lg, 12px); overflow: hidden; }
.wf-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--card-border, #e5e7eb); }
.wf-search { flex: 1; min-width: 200px; max-width: 320px; padding: 8px 12px 8px 36px; border: 1px solid var(--input-border, #d1d5db); border-radius: var(--radius-md, 8px); background: var(--input-bg, #fff); color: var(--input-text, #1f2937); font-size: 13px; }
.wf-search:focus { outline: none; border-color: #5a67d8; box-shadow: 0 0 0 3px rgba(90,103,216,0.1); }
.wf-search-wrap { position: relative; flex: 1; max-width: 320px; }
.wf-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted, #6b7280); pointer-events: none; }

/* Table */
.wf table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wf thead tr { background: var(--body-bg, #f7fafc); border-bottom: 2px solid var(--card-border, #e5e7eb); }
.wf thead th { padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.5px; text-align: left; white-space: nowrap; }
.wf tbody tr { border-bottom: 1px solid var(--card-border, #e5e7eb); transition: background 0.1s; }
.wf tbody tr:last-child { border-bottom: none; }
.wf tbody tr:hover { background: var(--body-bg, #f7fafc); }
.wf tbody td { padding: 12px 14px; color: var(--text-primary, #1f2937); vertical-align: middle; }

/* Form name cell */
.wf-name-main { font-weight: 600; color: var(--text-primary, #1f2937); }
.wf-name-url { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.wf-name-url a { color: #5a67d8; text-decoration: none; }
.wf-name-url a:hover { text-decoration: underline; }

/* Token */
.wf-token-wrap { display: flex; align-items: center; gap: 6px; }
.wf-token { font-family: monospace; font-size: 11px; background: var(--body-bg, #f7fafc); padding: 3px 8px; border-radius: 4px; color: var(--text-muted, #6b7280); border: 1px solid var(--card-border, #e5e7eb); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; cursor: pointer; }
.wf-token:hover { border-color: #5a67d8; color: #5a67d8; }
.wf-copy-tip { font-size: 10px; color: var(--text-muted,#9ca3af); }

/* Stat pill */
.wf-stat { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; }
.wf-stat-fields { background: rgba(90,103,216,0.1); color: #5a67d8; }
.wf-stat-leads  { background: rgba(56,161,105,0.1); color: #2f855a; }
.wf-stat-zero   { background: var(--body-bg,#f7fafc); color: var(--text-muted,#9ca3af); border: 1px solid var(--card-border,#e5e7eb); }

/* Badges */
.wf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.wf-badge-active   { background: rgba(56,161,105,0.1); color: #2f855a; }
.wf-badge-inactive { background: rgba(107,114,128,0.1); color: #6b7280; }
.wf-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.wf-badge-active .wf-badge-dot   { background: #2f855a; }
.wf-badge-inactive .wf-badge-dot { background: #9ca3af; }

/* Action buttons */
.wf-actions { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.wf-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; font-weight: 500; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.15s; white-space: nowrap; background: none; }
.wf-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.wf-btn-embed  { background: rgba(56,161,105,0.08);  color: #2f855a; border-color: rgba(56,161,105,0.2); }
.wf-btn-embed:hover  { background: rgba(56,161,105,0.15); border-color: #2f855a; }
.wf-btn-toggle { background: rgba(237,137,54,0.08);  color: #c05621; border-color: rgba(237,137,54,0.2); }
.wf-btn-toggle:hover { background: rgba(237,137,54,0.15); border-color: #c05621; }
.wf-btn-activate { background: rgba(56,161,105,0.08); color: #2f855a; border-color: rgba(56,161,105,0.2); }
.wf-btn-activate:hover { background: rgba(56,161,105,0.15); border-color: #2f855a; }
.wf-btn-edit   { background: rgba(90,103,216,0.08);  color: #5a67d8; border-color: rgba(90,103,216,0.2); }
.wf-btn-edit:hover   { background: rgba(90,103,216,0.15); border-color: #5a67d8; }
.wf-btn-delete { background: rgba(229,62,62,0.08);   color: #c53030; border-color: rgba(229,62,62,0.2); }
.wf-btn-delete:hover { background: rgba(229,62,62,0.15);  border-color: #c53030; }

/* Empty */
.wf-empty { text-align: center; padding: 60px 20px; color: var(--text-muted, #6b7280); }
.wf-empty svg { width: 48px; height: 48px; opacity: 0.25; margin: 0 auto 16px; display: block; }
.wf-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-primary, #1f2937); margin-bottom: 6px; }
.wf-empty p  { font-size: 13px; }

/* Pagination */
.wf-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--card-border, #e5e7eb); font-size: 12px; color: var(--text-muted, #6b7280); flex-wrap: wrap; gap: 8px; }
.wf-pagination-btns { display: flex; gap: 4px; }
.wf-pagination-btns button { padding: 4px 10px; border: 1px solid var(--card-border, #e5e7eb); border-radius: 6px; background: var(--card-bg, #fff); cursor: pointer; font-size: 12px; color: var(--text-primary, #1f2937); }
.wf-pagination-btns button:disabled { opacity: 0.4; cursor: not-allowed; }
.wf-pagination-btns button.active { background: #5a67d8; color: #fff; border-color: #5a67d8; }

/* Embed Modal */
.wf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: none; align-items: center; justify-content: center; }
.wf-modal-overlay.open { display: flex; }
.wf-modal { background: var(--card-bg, #fff); border-radius: var(--radius-lg, 12px); width: 640px; max-width: 95vw; max-height: 90vh; overflow: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.2); }
.wf-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--card-border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; background: var(--body-bg, #f7fafc); border-radius: 12px 12px 0 0; }
.wf-modal-head h3 { font-size: 15px; font-weight: 700; color: var(--text-primary, #1f2937); margin: 0; }
.wf-modal-body { padding: 20px; }
.wf-embed-label { font-size: 11px; font-weight: 700; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 6px; }
.wf-embed-label:first-child { margin-top: 0; }
.wf-embed-code { background: var(--body-bg, #f7fafc); border: 1px solid var(--card-border, #e5e7eb); border-radius: 8px; padding: 12px 80px 12px 12px; font-family: monospace; font-size: 12px; color: var(--text-primary, #1f2937); white-space: pre-wrap; word-break: break-all; position: relative; line-height: 1.6; }
.wf-copy-btn { position: absolute; top: 8px; right: 8px; background: #5a67d8; color: #fff; border: none; border-radius: 6px; padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
.wf-copy-btn:hover { background: #4c56c0; }
.wf-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
</style>

<div class="wf">
    <div class="wf-header">
        <div>
            <h2 class="wf-title">Web Forms</h2>
            <p class="wf-subtitle">Create embeddable forms to capture leads from your website</p>
        </div>
        @if($permissions['canCreate'])
        <a href="{{ route('admin.leadmanagement.webforms.create') }}" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:6px;padding:9px 18px;font-size:13px;font-weight:600;border-radius:8px;background:#5a67d8;color:#fff;text-decoration:none;border:none;">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" style="width:15px;height:15px;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            Create Form
        </a>
        @endif
    </div>

    <div class="wf-card">
        <div class="wf-toolbar">
            <div class="wf-search-wrap">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="text" class="wf-search" id="wfSearch" placeholder="Search forms..." oninput="debounceLoad()">
            </div>
        </div>

        <div style="overflow-x:auto;">
            <table>
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Form Name</th>
                        <th>Token</th>
                        <th style="text-align:center;">Fields</th>
                        <th style="text-align:center;">Leads</th>
                        <th>Default Status</th>
                        <th>Default Source</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="wfTableBody">
                    <tr><td colspan="10" style="text-align:center;padding:48px;color:var(--text-muted,#6b7280);">
                        <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="width:28px;height:28px;opacity:0.3;display:inline-block;margin-bottom:8px;"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
                        <br>Loading...
                    </td></tr>
                </tbody>
            </table>
        </div>

        <div class="wf-pagination" id="wfPagination" style="display:none;">
            <span id="wfPagInfo"></span>
            <div class="wf-pagination-btns" id="wfPagBtns"></div>
        </div>
    </div>
</div>

{{-- Embed Modal --}}
<div class="wf-modal-overlay" id="embedModal" onclick="if(event.target===this)closeEmbed()">
    <div class="wf-modal">
        <div class="wf-modal-head">
            <h3 id="embedModalTitle">Embed Form</h3>
            <button onclick="closeEmbed()" style="background:none;border:none;cursor:pointer;font-size:22px;line-height:1;color:var(--text-muted,#6b7280);padding:0 4px;">×</button>
        </div>
        <div class="wf-modal-body">
            <p style="font-size:13px;color:var(--text-muted,#6b7280);margin:0 0 16px;">Copy one of the snippets below and paste into your website HTML.</p>

            <div class="wf-embed-label">Public Form URL</div>
            <div class="wf-embed-code" id="embedUrl">
                <button class="wf-copy-btn" onclick="copyCode('embedUrl')">Copy</button>
                <span id="embedUrlText"></span>
            </div>

            <div class="wf-embed-label">iFrame Embed</div>
            <div class="wf-embed-code" id="embedIframe">
                <button class="wf-copy-btn" onclick="copyCode('embedIframe', true)">Copy</button>
                <code id="embedIframeCode"></code>
            </div>

            <div class="wf-embed-label">JavaScript Snippet</div>
            <div class="wf-embed-code" id="embedJs">
                <button class="wf-copy-btn" onclick="copyCode('embedJs', true)">Copy</button>
                <code id="embedJsCode"></code>
            </div>

            <div class="wf-modal-foot">
                <a id="embedOpenLink" href="#" target="_blank" style="display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:13px;font-weight:500;border-radius:7px;background:var(--body-bg,#f7fafc);color:var(--text-primary,#1f2937);border:1px solid var(--card-border,#e5e7eb);text-decoration:none;">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="width:14px;height:14px;"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    Open Form
                </a>
                <button onclick="closeEmbed()" style="padding:7px 14px;font-size:13px;font-weight:500;border-radius:7px;border:1px solid var(--card-border,#e5e7eb);background:var(--card-bg,#fff);color:var(--text-primary,#1f2937);cursor:pointer;">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
const csrf = '{{ csrf_token() }}';
const canEdit   = {{ $permissions['canEdit']   ? 'true' : 'false' }};
const canDelete = {{ $permissions['canDelete'] ? 'true' : 'false' }};
let currentPage = 1;
let searchTimer;

function debounceLoad() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => { currentPage = 1; loadForms(); }, 350);
}

async function loadForms(page = 1) {
    currentPage = page;
    const search = document.getElementById('wfSearch').value;
    try {
        const res  = await fetch(`{{ route('admin.leadmanagement.webforms.data') }}?page=${page}&search=${encodeURIComponent(search)}`);
        const data = await res.json();
        renderTable(data.data.data);
        renderPagination(data.data.pagination);
    } catch(e) {
        document.getElementById('wfTableBody').innerHTML = '<tr><td colspan="10" style="text-align:center;padding:40px;color:#e53e3e;">Error loading data. Please refresh.</td></tr>';
    }
}

function renderTable(rows) {
    const tbody = document.getElementById('wfTableBody');
    if (!rows || !rows.length) {
        tbody.innerHTML = `<tr><td colspan="10">
            <div class="wf-empty">
                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                <h3>No web forms yet</h3>
                <p>Click "Create Form" to build your first web-to-lead form</p>
            </div>
        </td></tr>`;
        return;
    }

    tbody.innerHTML = rows.map(r => {
        const fieldsClass = r.fields_count > 0 ? 'wf-stat-fields' : 'wf-stat-zero';
        const leadsClass  = r.leads_count  > 0 ? 'wf-stat-leads'  : 'wf-stat-zero';
        const shortToken  = r.token.length > 22 ? r.token.substring(0, 22) + '…' : r.token;

        const toggleBtn = r.active
            ? `<button class="wf-btn wf-btn-toggle" onclick="toggleForm(${r.id})" title="Deactivate this form">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                Deactivate
               </button>`
            : `<button class="wf-btn wf-btn-activate" onclick="toggleForm(${r.id})" title="Activate this form">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Activate
               </button>`;

        return `<tr>
            <td style="color:var(--text-muted,#6b7280);font-size:12px;">${r.id}</td>
            <td>
                <div class="wf-name-main">${escHtml(r.name)}</div>
                <div class="wf-name-url"><a href="${r.public_url}" target="_blank" title="Open public form">↗ ${r.public_url}</a></div>
            </td>
            <td>
                <div class="wf-token-wrap">
                    <span class="wf-token" onclick="copyToken('${escHtml(r.token)}')" title="Click to copy token">${shortToken}</span>
                </div>
            </td>
            <td style="text-align:center;"><span class="wf-stat ${fieldsClass}">${r.fields_count}</span></td>
            <td style="text-align:center;"><span class="wf-stat ${leadsClass}">${r.leads_count}</span></td>
            <td style="color:var(--text-muted,#6b7280);">${escHtml(r.default_status)}</td>
            <td style="color:var(--text-muted,#6b7280);">${escHtml(r.default_source)}</td>
            <td>
                <span class="wf-badge ${r.active ? 'wf-badge-active' : 'wf-badge-inactive'}">
                    <span class="wf-badge-dot"></span>
                    ${r.active ? 'Active' : 'Inactive'}
                </span>
            </td>
            <td style="color:var(--text-muted,#6b7280);white-space:nowrap;">${r.created_at}</td>
            <td>
                <div class="wf-actions">
                    <button class="wf-btn wf-btn-embed" onclick="showEmbed(${r.id})" title="Get embed code">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                        Embed
                    </button>
                    ${canEdit ? `
                    ${toggleBtn}
                    <a href="{{ url('admin/leadwebforms') }}/${r.id}/edit" class="wf-btn wf-btn-edit" title="Edit form">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        Edit
                    </a>` : ''}
                    ${canDelete ? `
                    <button class="wf-btn wf-btn-delete" onclick="deleteForm(${r.id}, '${escHtml(r.name)}')" title="Delete form">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        Delete
                    </button>` : ''}
                </div>
            </td>
        </tr>`;
    }).join('');
}

function renderPagination(pag) {
    const el = document.getElementById('wfPagination');
    if (!pag || pag.last_page <= 1) { el.style.display = 'none'; return; }
    el.style.display = 'flex';
    const from = ((pag.current_page - 1) * pag.per_page) + 1;
    const to   = Math.min(pag.current_page * pag.per_page, pag.total);
    document.getElementById('wfPagInfo').textContent = `Showing ${from}–${to} of ${pag.total}`;

    let btns = `<button onclick="loadForms(${pag.current_page-1})" ${pag.current_page===1?'disabled':''}>‹ Prev</button>`;
    for (let i = 1; i <= pag.last_page; i++) {
        btns += `<button onclick="loadForms(${i})" class="${i===pag.current_page?'active':''}">${i}</button>`;
    }
    btns += `<button onclick="loadForms(${pag.current_page+1})" ${pag.current_page===pag.last_page?'disabled':''}>Next ›</button>`;
    document.getElementById('wfPagBtns').innerHTML = btns;
}

async function toggleForm(id) {
    const res  = await fetch(`{{ url('admin/leadwebforms') }}/${id}/toggle`, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } });
    const data = await res.json();
    if (data.success) loadForms(currentPage);
    else alert(data.message || 'Failed to toggle status');
}

async function deleteForm(id, name) {
    if (!confirm(`Delete form "${name}"?\n\nThis will also delete all associated form field configurations. Leads captured will not be deleted.`)) return;
    const res  = await fetch(`{{ url('admin/leadwebforms') }}/${id}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } });
    const data = await res.json();
    if (data.success) { loadForms(currentPage); }
    else alert(data.message || 'Failed to delete');
}

async function showEmbed(id) {
    const res  = await fetch(`{{ url('admin/leadwebforms') }}/${id}/embed`, { headers: { 'Accept': 'application/json' } });
    const data = await res.json();
    if (!data.success) { alert('Failed to load embed code'); return; }

    document.getElementById('embedModalTitle').textContent  = data.data.name;
    document.getElementById('embedUrlText').textContent     = data.data.public_url;
    document.getElementById('embedIframeCode').textContent  = data.data.iframe;
    document.getElementById('embedJsCode').textContent      = data.data.js;
    document.getElementById('embedOpenLink').href           = data.data.public_url;
    document.getElementById('embedModal').classList.add('open');
}

function closeEmbed() {
    document.getElementById('embedModal').classList.remove('open');
}

function copyCode(elId, isCode = false) {
    const el   = document.getElementById(elId);
    const text = isCode ? el.querySelector('code').textContent : el.querySelector('span').textContent;
    navigator.clipboard.writeText(text).then(() => {
        const btn  = el.querySelector('.wf-copy-btn');
        const orig = btn.textContent;
        btn.textContent = '✓ Copied';
        btn.style.background = '#2f855a';
        setTimeout(() => { btn.textContent = orig; btn.style.background = ''; }, 1800);
    });
}

function copyToken(token) {
    navigator.clipboard.writeText(token).then(() => {
        // brief visual feedback handled by CSS hover
    });
}

function escHtml(str) {
    if (!str || str === '-') return str || '-';
    return String(str).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
}

loadForms();
</script>