{#
    Demo Contact Form Modal

    Lead capture form for demo visitors.
    Submits to /api/demo/contact endpoint.

    Required context:
    - session: DemoSession object
    - concept: Store concept
    - conceptInfo: Concept display info

    @see docs/specs/021-demo-dashboard/solution-design.md (lines 576-586)
#}

<!-- Contact Form Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="contactModalLabel">
                    <i class="fa-solid fa-calendar-days me-2"></i>
                    Get Started with BuyerKiosk
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="contactForm" onsubmit="submitContactForm(event)">
                <div class="modal-body">
                    <p class="text-muted mb-4">
                        Interested in BuyerKiosk for your {{ conceptInfo.name }} store? Our team will reach out to schedule a personalized demo.
                    </p>

                    <div class="mb-3">
                        <label for="contactEmail" class="form-label">Email Address</label>
                        <input type="email" class="form-control" id="contactEmail" name="email"
                               value="{{ session.email }}" readonly>
                        <div class="form-text">We'll use your demo email to reach out</div>
                    </div>

                    <div class="mb-3">
                        <label for="contactCompany" class="form-label">Company/Franchise Name <span class="text-muted">(optional)</span></label>
                        <input type="text" class="form-control" id="contactCompany" name="company_name"
                               placeholder="e.g., {{ conceptInfo.name }} - Downtown Location">
                    </div>

                    <div class="mb-3">
                        <label for="contactPhone" class="form-label">Phone Number <span class="text-muted">(optional)</span></label>
                        <input type="tel" class="form-control" id="contactPhone" name="phone"
                               placeholder="(555) 123-4567">
                    </div>

                    <div class="mb-3">
                        <label for="contactMessage" class="form-label">Message <span class="text-muted">(optional)</span></label>
                        <textarea class="form-control" id="contactMessage" name="message" rows="3"
                                  placeholder="Tell us about your store and what features interest you most..."></textarea>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="contactConsent" name="consent" checked>
                        <label class="form-check-label small text-muted" for="contactConsent">
                            I agree to receive communications from BuyerKiosk about their products and services.
                        </label>
                    </div>

                    <!-- Success message (hidden by default) -->
                    <div id="contactSuccess" class="alert alert-success d-none mt-3" role="alert">
                        <i class="fa-solid fa-check-circle me-2"></i>
                        <strong>Thanks!</strong> Our team will reach out soon.
                    </div>

                    <!-- Error message (hidden by default) -->
                    <div id="contactError" class="alert alert-danger d-none mt-3" role="alert">
                        <i class="fa-solid fa-exclamation-triangle me-2"></i>
                        <span id="contactErrorText">Something went wrong. Please try again.</span>
                    </div>
                </div>
                <div class="modal-footer" id="contactFooter">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Maybe Later
                    </button>
                    <button type="submit" class="btn btn-primary" id="contactSubmitBtn">
                        <i class="fa-solid fa-paper-plane me-1"></i>
                        Send Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
/**
 * Submit contact form
 */
async function submitContactForm(event) {
    event.preventDefault();

    const form = document.getElementById('contactForm');
    const submitBtn = document.getElementById('contactSubmitBtn');
    const successEl = document.getElementById('contactSuccess');
    const errorEl = document.getElementById('contactError');
    const footerEl = document.getElementById('contactFooter');

    // Disable button and show loading
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Sending...';

    // Clear previous messages
    successEl.classList.add('d-none');
    errorEl.classList.add('d-none');

    // Get form data
    const formData = {
        company_name: form.company_name.value || null,
        phone: form.phone.value || null,
        message: form.message.value || null,
        cta_type: 'contact_form'
    };

    try {
        const response = await fetch('/api/demo/contact', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify(formData)
        });

        const result = await response.json();

        if (response.ok && result.success) {
            // Show success
            successEl.classList.remove('d-none');
            footerEl.innerHTML = `
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fa-solid fa-check me-1"></i>
                    Done
                </button>
            `;

            // Track analytics
            if (typeof trackContactForm === 'function') {
                trackContactForm('submit', formData);
            }
        } else {
            throw new Error(result.message || 'Failed to submit form');
        }
    } catch (error) {
        console.error('Contact form error:', error);
        errorEl.classList.remove('d-none');
        document.getElementById('contactErrorText').textContent = error.message || 'Something went wrong. Please try again.';

        // Re-enable button
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fa-solid fa-paper-plane me-1"></i> Send Request';
    }
}

// Track modal open
document.getElementById('contactModal')?.addEventListener('show.bs.modal', function() {
    if (typeof trackContactForm === 'function') {
        trackContactForm('open');
    }
});

// Track modal close without submit
document.getElementById('contactModal')?.addEventListener('hidden.bs.modal', function() {
    // Reset form if closed after success
    const form = document.getElementById('contactForm');
    const successEl = document.getElementById('contactSuccess');

    if (!successEl.classList.contains('d-none')) {
        // Form was submitted successfully, reset for next open
        form.reset();
        successEl.classList.add('d-none');
        document.getElementById('contactFooter').innerHTML = `
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                Maybe Later
            </button>
            <button type="submit" class="btn btn-primary" id="contactSubmitBtn">
                <i class="fa-solid fa-paper-plane me-1"></i>
                Send Request
            </button>
        `;
    }
});
</script>