<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ form.title }} - Embed</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: #f8f9fa;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .embed-container {
            background: #f8f9fa;
            padding: 0;
            min-height: 100vh;
        }

        .embed-form-wrapper {
            margin: 0;
            padding: 20px;
        }

        .embed-form {
            max-width: 800px;
            margin: 0 auto;
        }

        .embed-form .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .embed-form .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 30px;
            color: white;
        }

        .embed-form .card-body {
            padding: 0;
        }

        .embed-info {
            background: white;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 20px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
            position: relative;
            margin-top: 15px;
        }

        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #4a5568;
            border: none;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s;
        }

        .copy-btn:hover {
            background: #2d3748;
        }

        .copy-btn.copied {
            background: #48bb78;
        }

        .preview-iframe {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            width: 100%;
            height: 600px;
            background: white;
        }

        .tab-content {
            margin-top: 20px;
        }

        .nav-tabs .nav-link {
            border: none;
            background: #f7fafc;
            color: #4a5568;
            padding: 12px 24px;
            margin-right: 8px;
            border-radius: 8px 8px 0 0;
            transition: all 0.2s;
        }

        .nav-tabs .nav-link.active {
            background: white;
            color: #2d3748;
            border-bottom: 2px solid #667eea;
        }

        .nav-tabs .nav-link:hover {
            background: #edf2f7;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .feature-list i {
            color: #48bb78;
            margin-right: 10px;
        }

        .dimensions-info {
            background: #f7fafc;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }

        .responsive-options {
            margin-top: 20px;
        }

        .responsive-option {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .responsive-option:hover {
            border-color: #667eea;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
        }

        .responsive-option.active {
            border-color: #667eea;
            background: #f0f4ff;
        }
    </style>
</head>
<body>
    <div class="embed-container">
        <div class="embed-form-wrapper">
            <div class="embed-form">
                <!-- Header -->
                <div class="embed-info">
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div>
                            <h1 class="h2 mb-2">
                                <i class="fas fa-code text-primary"></i> Embed Form
                            </h1>
                            <p class="text-muted mb-0">Get the embed code for "{{ form.title }}"</p>
                        </div>
                        <a href="{% url 'form_preview' form.id %}" target="_blank" class="btn btn-outline-primary">
                            <i class="fas fa-external-link-alt"></i> Preview Form
                        </a>
                    </div>

                    <!-- Stats -->
                    <div class="row text-center mb-4">
                        <div class="col-md-3">
                            <div class="p-3">
                                <h4 class="text-primary mb-1">{{ form.submissions.count }}</h4>
                                <small class="text-muted">Submissions</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3">
                                <h4 class="text-success mb-1">{{ form.structure.wizards|length|default:0 }}</h4>
                                <small class="text-muted">Steps</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3">
                                <h4 class="text-info mb-1">
                                    {% if form.structure.wizards %}
                                        {{ form.structure.wizards.0.fields|length|default:0 }}
                                    {% else %}
                                        0
                                    {% endif %}
                                </h4>
                                <small class="text-muted">Fields</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3">
                                <h4 class="text-warning mb-1">{{ form.created_at|date:"M d" }}</h4>
                                <small class="text-muted">Created</small>
                            </div>
                        </div>
                    </div>

                    <!-- Tabs -->
                    <ul class="nav nav-tabs" id="embedTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="iframe-tab" data-bs-toggle="tab" data-bs-target="#iframe" type="button" role="tab">
                                <i class="fas fa-globe"></i> iFrame
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="popup-tab" data-bs-toggle="tab" data-bs-target="#popup" type="button" role="tab">
                                <i class="fas fa-external-link-alt"></i> Popup
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="inline-tab" data-bs-toggle="tab" data-bs-target="#inline" type="button" role="tab">
                                <i class="fas fa-code"></i> Inline
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content" id="embedTabsContent">
                        <!-- iFrame Tab -->
                        <div class="tab-pane fade show active" id="iframe" role="tabpanel">
                            <h5 class="mb-3">iFrame Embed Code</h5>
                            <p class="text-muted">Embed this form directly into your website using an iframe.</p>

                            <div class="code-block">
                                <button class="copy-btn" onclick="copyToClipboard(this, 'iframe-code')">
                                    <i class="fas fa-copy"></i> Copy
                                </button>
                                <code id="iframe-code"><iframe src="{{ request.build_absolute_uri }}{% url 'form_preview' form.id %}?embed=true"
    width="100%"
    height="600"
    frameborder="0"
    style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"></iframe></code>
                            </div>

                            <div class="dimensions-info">
                                <h6 class="mb-3">Responsive Options</h6>
                                <div class="responsive-options">
                                    <div class="responsive-option active" onclick="selectResponsive(this, 'iframe', 'fixed')">
                                        <strong>Fixed Height:</strong> 600px
                                        <div class="text-muted small">Best for most websites</div>
                                    </div>
                                    <div class="responsive-option" onclick="selectResponsive(this, 'iframe', 'responsive')">
                                        <strong>Responsive:</strong> Auto height
                                        <div class="text-muted small">Adjusts to content height</div>
                                    </div>
                                    <div class="responsive-option" onclick="selectResponsive(this, 'iframe', 'full')">
                                        <strong>Full Screen:</strong> 100vh
                                        <div class="text-muted small">Takes full viewport height</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Popup Tab -->
                        <div class="tab-pane fade" id="popup" role="tabpanel">
                            <h5 class="mb-3">Popup Embed Code</h5>
                            <p class="text-muted">Add a button or link that opens the form in a modal popup.</p>

                            <div class="code-block">
                                <button class="copy-btn" onclick="copyToClipboard(this, 'popup-code')">
                                    <i class="fas fa-copy"></i> Copy
                                </button>
                                <code id="popup-code"><button onclick="openFormPopup()" class="btn btn-primary">
    Open Form
</button>

<script>
function openFormPopup() {
    const modal = document.createElement('div');
    modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';

    const iframe = document.createElement('iframe');
    iframe.src = '{{ request.build_absolute_uri }}{% url 'form_preview' form.id %}?embed=true';
    iframe.style.cssText = 'width: 90%; max-width: 800px; height: 80vh; border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);';

    modal.appendChild(iframe);
    document.body.appendChild(modal);

    modal.onclick = function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    };
}
</script></code>
                            </div>

                            <div class="mt-3">
                                <h6>Customization Options</h6>
                                <ul class="feature-list">
                                    <li><i class="fas fa-check"></i> Custom button text and styling</li>
                                    <li><i class="fas fa-check"></i> Trigger on page load or scroll</li>
                                    <li><i class="fas fa-check"></i> Custom modal dimensions</li>
                                    <li><i class="fas fa-check"></i> Close on outside click</li>
                                </ul>
                            </div>
                        </div>

                        <!-- Inline Tab -->
                        <div class="tab-pane fade" id="inline" role="tabpanel">
                            <h5 class="mb-3">Inline Embed Code</h5>
                            <p class="text-muted">Embed the form HTML directly into your page for maximum customization.</p>

                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> <strong>Note:</strong> This option requires more technical knowledge but offers the best integration.
                            </div>

                            <div class="code-block">
                                <button class="copy-btn" onclick="copyToClipboard(this, 'inline-code')">
                                    <i class="fas fa-copy"></i> Copy
                                </button>
                                <code id="inline-code"><!-- Form CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

<!-- Form Container -->
<div id="form-{{ form.id }}">
    <div class="text-center py-5">
        <div class="spinner-border text-primary" role="status"></div>
        <p class="mt-3">Loading form...</p>
    </div>
</div>

<!-- Form Scripts -->
<script src="https://unpkg.com/preact@10.19.3/dist/preact.umd.js"></script>
<script src="https://unpkg.com/htm@3.1.1/dist/htm.umd.js"></script>
<script>
    // Load form data and render
    fetch('/recruitment/api/forms/{{ form.id }}/load/')
        .then(response => response.json())
        .then(data => {
            // Render form using the form structure
            console.log('Form data:', data);
            // Implement form rendering logic here
        })
        .catch(error => console.error('Error loading form:', error));
</script></code>
                            </div>

                            <div class="mt-3">
                                <h6>Benefits of Inline Embed</h6>
                                <ul class="feature-list">
                                    <li><i class="fas fa-check"></i> Full control over styling</li>
                                    <li><i class="fas fa-check"></i> Better SEO integration</li>
                                    <li><i class="fas fa-check"></i> Faster initial load</li>
                                    <li><i class="fas fa-check"></i> Custom form handling</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Preview Section -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-eye"></i> Live Preview
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <iframe src="{% url 'form_preview' form.id %}?embed=true"
                                class="preview-iframe"
                                frameborder="0">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        function copyToClipboard(button, elementId) {
            const element = document.getElementById(elementId);
            const text = element.textContent;

            navigator.clipboard.writeText(text).then(function() {
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="fas fa-check"></i> Copied!';
                button.classList.add('copied');

                setTimeout(function() {
                    button.innerHTML = originalText;
                    button.classList.remove('copied');
                }, 2000);
            }).catch(function(err) {
                console.error('Failed to copy text: ', err);

                // Fallback for older browsers
                const textArea = document.createElement("textarea");
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                try {
                    document.execCommand('copy');
                    button.innerHTML = '<i class="fas fa-check"></i> Copied!';
                    button.classList.add('copied');

                    setTimeout(function() {
                        button.innerHTML = '<i class="fas fa-copy"></i> Copy';
                        button.classList.remove('copied');
                    }, 2000);
                } catch (err) {
                    console.error('Fallback copy failed: ', err);
                }

                document.body.removeChild(textArea);
            });
        }

        function selectResponsive(element, type, option) {
            // Remove active class from all options in this tab
            const container = element.closest('.tab-pane');
            container.querySelectorAll('.responsive-option').forEach(opt => {
                opt.classList.remove('active');
            });

            // Add active class to selected option
            element.classList.add('active');

            // Update the embed code based on selection
            updateEmbedCode(type, option);
        }

        function updateEmbedCode(type, option) {
            const baseUrl = '{{ request.build_absolute_uri }}{% url "form_preview" form.id %}?embed=true';
            let height = '600';
            let style = 'border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);';

            if (type === 'iframe') {
                switch(option) {
                    case 'responsive':
                        height = 'auto';
                        style += ' min-height: 600px;';
                        break;
                    case 'full':
                        height = '100vh';
                        style += ' min-height: 100vh;';
                        break;
                    default:
                        // fixed height - already set
                        break;
                }

                const code = `<iframe src="${baseUrl}"
    width="100%"
    height="${height}"
    frameborder="0"
    style="${style}"></iframe>`;

                document.getElementById('iframe-code').textContent = code;
            }
        }

        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
</body>
</html>
