rapidsasi/vfx-shoot-wizard

1 2// Form submission with external save option3document.addEventListener('DOMContentLoaded', function() {4    const form = document.querySelector('form');5    6    if (form) {7        form.addEventListener('submit', function(e) {8            e.preventDefault();9            10            // Generate PDF11            const { jsPDF } = window.jspdf;12            const doc = new jsPDF();13// Add title14                doc.setFontSize(20);15                doc.text('VFX Shoot Details', 105, 20, { align: 'center' });16                doc.setFontSize(12);17                18                let y = 40;19                20                // Form sections21                const sections = form.querySelectorAll('div.space-y-4');22                sections.forEach(section => {23                    const title = section.querySelector('h2')?.textContent.trim();24                    if (title) {25                        doc.setFont('helvetica', 'bold');26                        doc.text(title, 14, y);27                        doc.setFont('helvetica', 'normal');28                        y += 10;29                    }30                    31                    // Get all input fields in section32                    const inputs = section.querySelectorAll('input, select, textarea');33                    inputs.forEach(input => {34                        const label = section.querySelector(`label[for="${input.id}"]`)?.textContent.trim() || input.id;35                        const value = input.value || '-';36                        37                        doc.text(`${label}: ${value}`, 14, y);38                        y += 8;39                        40                        // Add new page if we're at the bottom41                        if (y > 280) {42                            doc.addPage();43                            y = 20;44                        }45                    });46                    47                    y += 10;48                });49                // Generate PDF blob and URL50                const pdfBlob = doc.output('blob');51                const pdfUrl = URL.createObjectURL(pdfBlob);52                53                // Create modal container54                const modal = document.createElement('div');55                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';56                modal.innerHTML = `57                    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">58                        <div class="flex justify-between items-center mb-4">59                            <h3 class="text-xl font-bold text-gray-800">Download Your Request</h3>60                            <button id="close-modal" class="text-gray-500 hover:text-gray-700">61                                <i data-feather="x"></i>62                            </button>63                        </div>64                        <p class="text-gray-600 mb-6">Your VFX Shoot Request has been processed. Click below to download the PDF.</p>65                        <div class="flex flex-col space-y-3">66                            <a href="${pdfUrl}" download="VFX_Shoot_Request.pdf" 67                               class="px-4 py-3 bg-orange-500 text-white font-medium rounded-lg hover:bg-orange-600 text-center">68                                Download PDF69                            </a>70                            <button id="email-option" class="px-4 py-3 border border-orange-500 text-orange-500 font-medium rounded-lg hover:bg-orange-50">71                                Email Me the PDF72                            </button>73                        </div>74                    </div>75                `;76                77                // Add to document78                document.body.appendChild(modal);79                feather.replace();80                81                // Auto-click download after short delay82                setTimeout(() => {83                    modal.querySelector('a').click();84                }, 500);85                86                // Close modal handlers87                modal.querySelector('#close-modal').addEventListener('click', () => {88                    document.body.removeChild(modal);89                    URL.revokeObjectURL(pdfUrl);90                });91                92                // Email option handler93                modal.querySelector('#email-option').addEventListener('click', () => {94                    const email = prompt('Please enter your email address:');95                    if (email) {96                        alert(`The PDF will be sent to ${email}. Thank you!`);97                        document.body.removeChild(modal);98                        URL.revokeObjectURL(pdfUrl);99                    }100                });101});102        // Remove required attributes from all fields103        const allFields = form.querySelectorAll('input, select, textarea');104        allFields.forEach(field => {105            field.removeAttribute('required');106        });107 108        // Add animation class to form sections109        const sections = document.querySelectorAll('form > div');110        sections.forEach((section, index) => {111            section.classList.add('form-section');112            section.style.animationDelay = `${index * 0.1}s`;113        });114}115    116    // File upload feedback117    const fileInput = document.getElementById('file-upload');118    if (fileInput) {119        fileInput.addEventListener('change', function() {120            if (this.files.length > 0) {121                const uploadLabel = this.previousElementSibling;122                uploadLabel.textContent = `${this.files.length} file(s) selected`;123            }124        });125    }126});