<div class="container">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
                <%= title %>
            </h1>
            <p class="text-muted mb-0">Edit content displayed on Appointment page</p>
        </div>
        <div>
            <a href="<%= frontendUrl %>/make-appointment/" class="btn btn-outline-primary" target="_blank">
                <i class="fas fa-external-link-alt me-2"></i>View Appointment Page
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <form method="POST" class="content-with-fixed-buttons" id="appointmentForm"
                action="/admin/appointment/update">
                <!-- Hidden inputs for JSON data -->
                <input type="hidden" name="hero" id="heroJson">
                <input type="hidden" name="visaOptions" id="visaOptionsJson">
                <input type="hidden" name="form" id="formJson">

                <!-- Navigation Tabs -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white border-bottom">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#hero" role="tab">
                                    <i class="fas fa-home me-2"></i>Hero
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#visaOptions" role="tab">
                                    <i class="fas fa-passport me-2"></i>Visa Options
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#form" role="tab">
                                    <i class="fas fa-envelope me-2"></i>Form
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#submissions" role="tab">
                                    <i class="fas fa-list me-2"></i>Submissions
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="tab-content">
                            <!-- Hero Tab -->
                            <div class="tab-pane fade show active" id="hero" role="tabpanel">
                                <div class="card border shadow-sm">
                                    <div class="card-body">
                                        <h6 class="fw-medium mb-3">Hero Section</h6>
                                        <div class="row g-3">
                                            <div class="col-md-5">
                                                <label class="form-label fw-medium">Background Image</label>
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" id="heroBackgroundImage"
                                                        name="heroBackgroundImage"
                                                        value="<%= data.hero?.backgroundImage || '' %>">
                                                    <button type="button"
                                                        class="btn btn-outline-primary btn-upload-image"
                                                        data-target-input="heroBackgroundImage"
                                                        data-image-type="appointment">
                                                        <i class="fas fa-upload me-1"></i>Upload
                                                    </button>
                                                </div>
                                                <small class="text-muted">Recommended size: 1920x1080px</small>
                                            </div>
                                            <div class="col-md-7">
                                                <div id="heroImagePreview" style="height: 200px;">
                                                    <% if (data.hero?.backgroundImage) { %>
                                                        <% let heroImgSrc=data.hero.backgroundImage; if (heroImgSrc &&
                                                            !heroImgSrc.startsWith('http://') &&
                                                            !heroImgSrc.startsWith('https://')) {
                                                            heroImgSrc=heroImgSrc.startsWith('/') ? heroImgSrc : '/' +
                                                            heroImgSrc; } %>
                                                            <img src="<%= heroImgSrc %>" class="img-thumbnail"
                                                                id="heroPreviewImg"
                                                                style="height: 200px; width: 100%; object-fit: cover;"
                                                                alt="Background image preview"
                                                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                                            <div class="border rounded p-5 text-center text-muted"
                                                                style="height: 200px; display: none; align-items: center; justify-content: center;">
                                                                Image preview
                                                            </div>
                                                            <% } else { %>
                                                                <div class="border rounded p-5 text-center text-muted"
                                                                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
                                                                    Image preview
                                                                </div>
                                                                <% } %>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row g-3 mt-2">
                                            <div class="col-md-6">
                                                <label class="form-label fw-medium">Title</label>
                                                <input type="text" class="form-control" id="heroTitle" name="heroTitle"
                                                    value="<%= data.hero?.title || '' %>">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-medium">Subtitle</label>
                                                <input type="text" class="form-control" id="heroSubtitle"
                                                    name="heroSubtitle" value="<%= data.hero?.subtitle || '' %>">
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label fw-medium">Heading</label>
                                                <input type="text" class="form-control" id="heroHeading"
                                                    name="heroHeading" value="<%= data.hero?.heading || '' %>">
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label fw-medium">Description</label>
                                                <textarea class="form-control" id="heroDescription"
                                                    name="heroDescription"
                                                    rows="2"><%= data.hero?.description || '' %></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Visa Options Tab -->
                            <div class="tab-pane fade" id="visaOptions" role="tabpanel">
                                <div class="card border shadow-sm">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="fw-medium mb-0">Visa Options</h6>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                onclick="addVisaOption()">
                                                <i class="fas fa-plus"></i> Add Option
                                            </button>
                                        </div>
                                        <p class="text-muted small">These options will appear in the visa type selection
                                            dropdown on the appointment form.</p>
                                        <div id="visaOptionsContainer">
                                            <% if (data.visaOptions && data.visaOptions.length> 0) { %>
                                                <% data.visaOptions.forEach((option, index)=> { %>
                                                    <div class="input-group mb-2 visa-option-item">
                                                        <span class="input-group-text"><i
                                                                class="fas fa-passport"></i></span>
                                                        <input type="text" class="form-control visa-option-input"
                                                            value="<%= option %>" placeholder="Enter visa option">
                                                        <button type="button" class="btn btn-outline-danger"
                                                            onclick="removeVisaOption(this)">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                    <% }); %>
                                                        <% } %>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Tab -->
                            <div class="tab-pane fade" id="form" role="tabpanel">
                                <div class="card border shadow-sm">
                                    <div class="card-body">
                                        <h6 class="fw-medium mb-3">Form Settings</h6>
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Form Heading</label>
                                                <input type="text" class="form-control" id="formHeading"
                                                    value="<%= data.form?.heading || '' %>">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Submit Button Text</label>
                                                <input type="text" class="form-control" id="formSubmitButtonText"
                                                    value="<%= data.form?.submitButton?.text || 'Request Appointment' %>">
                                            </div>
                                            <!-- Hidden fields for submitButton icon and buttonClass -->
                                            <input type="hidden" id="formSubmitButtonIcon"
                                                value="<%= data.form?.submitButton?.icon || 'fa-solid fa-arrow-right' %>">
                                            <input type="hidden" id="formSubmitButtonClass"
                                                value="<%= data.form?.submitButton?.buttonClass || 'theme-btn' %>">
                                        </div>

                                        <hr class="my-4">

                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="fw-medium mb-0">Form Fields</h6>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                onclick="addFormField()">
                                                <i class="fas fa-plus"></i> Add Field
                                            </button>
                                        </div>

                                        <div id="formFieldsContainer">
                                            <% if (data.form?.fields && data.form.fields.length> 0) { %>
                                                <% data.form.fields.forEach((field, index)=> { %>
                                                    <div class="card mb-3 form-field-item">
                                                        <div class="card-body">
                                                            <div class="row g-3">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Field Name</label>
                                                                    <input type="text"
                                                                        class="form-control field-name-input"
                                                                        value="<%= field.name || '' %>"
                                                                        placeholder="e.g., name">
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Label</label>
                                                                    <input type="text"
                                                                        class="form-control field-label-input"
                                                                        value="<%= field.label || '' %>"
                                                                        placeholder="e.g., Your Name">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label">Type</label>
                                                                    <select class="form-select field-type-select">
                                                                        <option value="text" <%=field.type==='text'
                                                                            ? 'selected' : '' %>>Text</option>
                                                                        <option value="email" <%=field.type==='email'
                                                                            ? 'selected' : '' %>>Email</option>
                                                                        <option value="tel" <%=field.type==='tel'
                                                                            ? 'selected' : '' %>>Phone</option>
                                                                        <option value="textarea"
                                                                            <%=field.type==='textarea' ? 'selected' : ''
                                                                            %>>Textarea</option>
                                                                        <option value="date" <%=field.type==='date'
                                                                            ? 'selected' : '' %>>Date</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label">Col Class</label>
                                                                    <select class="form-select field-col-select">
                                                                        <option value="col-lg-4"
                                                                            <%=field.colClass==='col-lg-4' ? 'selected'
                                                                            : '' %>>1/3 Width</option>
                                                                        <option value="col-lg-6"
                                                                            <%=field.colClass==='col-lg-6' ? 'selected'
                                                                            : '' %>>1/2 Width</option>
                                                                        <option value="col-lg-12"
                                                                            <%=field.colClass==='col-lg-12' ? 'selected'
                                                                            : '' %>>Full Width</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label">Required</label>
                                                                    <div class="form-check mt-2">
                                                                        <input
                                                                            class="form-check-input field-required-check"
                                                                            type="checkbox" <%=field.required
                                                                            ? 'checked' : '' %>>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label">Placeholder</label>
                                                                    <input type="text"
                                                                        class="form-control field-placeholder-input"
                                                                        value="<%= field.placeholder || '' %>">
                                                                </div>
                                                            </div>
                                                            <button type="button"
                                                                class="btn btn-outline-danger btn-sm mt-3"
                                                                onclick="removeFormField(this)">
                                                                <i class="fas fa-trash me-2"></i>Remove Field
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <% }); %>
                                                        <% } %>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submissions Tab -->
                            <div class="tab-pane fade" id="submissions" role="tabpanel">
                                <div class="card border shadow-sm">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6 class="fw-medium mb-0">Recent Submissions</h6>
                                        </div>

                                        <!-- Date Filter -->
                                        <div class="row g-2 mb-4 align-items-end" id="filterContainer">
                                            <input type="hidden" id="filterTab" value="submissions">
                                            <div class="col-md-3">
                                                <label class="form-label small text-muted">Start Date</label>
                                                <input type="date" class="form-control form-control-sm"
                                                    id="filterStartDate" value="<%= locals.startDate || '' %>">
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small text-muted">End Date</label>
                                                <input type="date" class="form-control form-control-sm"
                                                    id="filterEndDate" value="<%= locals.endDate || '' %>">
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-sm btn-primary w-100"
                                                    onclick="applyDateFilter()">
                                                    <i class="fas fa-filter me-1"></i> Filter
                                                </button>
                                            </div>
                                            <div class="col-md-2">
                                                <a href="/admin/appointment?tab=submissions"
                                                    class="btn btn-sm btn-outline-secondary w-100">
                                                    <i class="fas fa-times me-1"></i> Clear
                                                </a>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-hover align-middle">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Name</th>
                                                        <th>Contact</th>
                                                        <th>Appt Date</th>
                                                        <th>Visa Types</th>
                                                        <th>Message</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <% if (locals.submissions && submissions.length> 0) { %>
                                                        <% submissions.forEach(submission=> { %>
                                                            <tr>
                                                                <td>
                                                                    <%= new
                                                                        Date(submission.createdAt).toLocaleDateString()
                                                                        %>
                                                                        <br>
                                                                        <small class="text-muted">
                                                                            <%= new
                                                                                Date(submission.createdAt).toLocaleTimeString([],
                                                                                {hour: '2-digit' , minute:'2-digit'}) %>
                                                                        </small>
                                                                </td>
                                                                <td>
                                                                    <%= submission.name %>
                                                                </td>
                                                                <td>
                                                                    <div class="d-flex flex-column">
                                                                        <a href="mailto:<%= submission.email %>"
                                                                            class="text-decoration-none"><i
                                                                                class="fas fa-envelope me-1"></i>
                                                                            <%= submission.email %>
                                                                        </a>
                                                                        <% if(submission.phone) { %>
                                                                            <span class="text-muted small"><i
                                                                                    class="fas fa-phone me-1"></i>
                                                                                <%= submission.phone %>
                                                                            </span>
                                                                            <% } %>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <%= submission.appointmentDate || '-' %>
                                                                </td>
                                                                <td>
                                                                    <% if (submission.visaTypes &&
                                                                        submission.visaTypes.length> 0) { %>
                                                                        <% submission.visaTypes.forEach(type=> { %>
                                                                            <span
                                                                                class="badge bg-light text-dark border me-1">
                                                                                <%= type %>
                                                                            </span>
                                                                            <% }); %>
                                                                                <% } else { %>
                                                                                    <span class="text-muted">-</span>
                                                                                    <% } %>
                                                                </td>
                                                                <td>
                                                                    <% if (submission.message) { %>
                                                                        <div title="<%= submission.message %>"
                                                                            style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                                            <%= submission.message %>
                                                                        </div>
                                                                        <% } else { %>
                                                                            <span class="text-muted">-</span>
                                                                            <% } %>
                                                                </td>
                                                                <td>
                                                                    <% let statusClass='bg-secondary' ;
                                                                        if(submission.status==='pending' )
                                                                        statusClass='bg-warning text-dark' ;
                                                                        if(submission.status==='confirmed' )
                                                                        statusClass='bg-success' ;
                                                                        if(submission.status==='completed' )
                                                                        statusClass='bg-info text-dark' ;
                                                                        if(submission.status==='cancelled' )
                                                                        statusClass='bg-danger' ; %>
                                                                        <span
                                                                            class="badge <%= statusClass %> rounded-pill">
                                                                            <%= submission.status %>
                                                                        </span>
                                                                </td>
                                                                <td>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-outline-primary"
                                                                        onclick="openStatusModal('<%= submission._id %>', '<%= submission.status %>')"
                                                                        title="Update Status">
                                                                        <i class="fas fa-edit"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <% }); %>
                                                                <% } else { %>
                                                                    <tr>
                                                                        <td colspan="8"
                                                                            class="text-center py-4 text-muted">No
                                                                            submissions found</td>
                                                                    </tr>
                                                                    <% } %>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-3 text-end">
                                            <small class="text-muted">Showing last 50 submissions</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fixed Bottom Buttons -->
                <div class="fixed-bottom-buttons">
                    <button type="reset" class="btn btn-secondary" onclick="resetForm()">
                        <i class="fas fa-undo me-2"></i>Reset
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <i class="fas fa-save me-2"></i>Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="statusForm">
                    <input type="hidden" id="statusSubmissionId">
                    <div class="mb-3">
                        <label for="statusSelect" class="form-label">Status</label>
                        <select class="form-select" id="statusSelect">
                            <option value="pending">Pending</option>
                            <option value="confirmed">Confirmed</option>
                            <option value="completed">Completed</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveStatus()">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script type="application/json" id="appointmentDataJson"><%- JSON.stringify(data) %></script>

<script>
    let originalFormData = null;
    let statusModal = null;

    document.addEventListener('DOMContentLoaded', function () {
        try {
            var jsonScript = document.getElementById('appointmentDataJson');
            originalFormData = JSON.parse(jsonScript.textContent);
        } catch (e) {
            console.error('Error parsing originalFormData:', e);
            originalFormData = {};
        }

        // Check for tab parameter in URL
        const urlParams = new URLSearchParams(window.location.search);
        const tab = urlParams.get('tab');
        if (tab) {
            const triggerEl = document.querySelector(`a[href="#${tab}"]`);
            if (triggerEl) {
                const tabInstance = new bootstrap.Tab(triggerEl);
                tabInstance.show();
            }
        }

        // Move modal to body to prevent backdrop issues
        const statusModalEl = document.getElementById('statusModal');
        if (statusModalEl) {
            document.body.appendChild(statusModalEl);
        }
        statusModal = new bootstrap.Modal(statusModalEl);

        updateAllJsonInputs();
        initializeFormHandlers();
    });

    function applyDateFilter() {
        const startDate = document.getElementById('filterStartDate').value;
        const endDate = document.getElementById('filterEndDate').value;
        const url = new URL(window.location.href);
        url.searchParams.set('tab', 'submissions');

        if (startDate) {
            url.searchParams.set('startDate', startDate);
        } else {
            url.searchParams.delete('startDate');
        }

        if (endDate) {
            url.searchParams.set('endDate', endDate);
        } else {
            url.searchParams.delete('endDate');
        }

        window.location.href = url.toString();
    }

    function openStatusModal(id, currentStatus) {
        document.getElementById('statusSubmissionId').value = id;
        document.getElementById('statusSelect').value = currentStatus;
        statusModal.show();
    }

    async function saveStatus() {
        const id = document.getElementById('statusSubmissionId').value;
        const status = document.getElementById('statusSelect').value;

        try {
            const response = await fetch(`/admin/appointments/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ status })
            });

            const result = await response.json();

            if (result.success) {
                // Determine CSS class for the notification or badge
                // Since this is generic, we'll reload or update UI manually if complex.
                // Reload is safest to show updated table state (including sorting/filtering if any)
                // But let's try to be smooth:

                window.location.reload();
            } else {
                alert('Failed to update status: ' + (result.error || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error updating status:', error);
            alert('Error updating status');
        }
    }

    function initializeFormHandlers() {
        const form = document.getElementById('appointmentForm');
        form.addEventListener('submit', async function (e) {
            e.preventDefault();
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';

            try {
                updateJsonData();
                this.submit();
            } catch (error) {
                console.error('Error updating data:', error);
                alert('Failed to process form data. Please try again.');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
            }
        });

        // Image upload buttons
        document.querySelectorAll('.btn-upload-image').forEach(button => {
            button.addEventListener('click', function () {
                const targetInput = this.dataset.targetInput;
                const imageType = this.dataset.imageType;
                openImageUploader(targetInput, imageType);
            });
        });

        // Update preview when background image changes
        document.getElementById('heroBackgroundImage').addEventListener('input', function () {
            updateHeroImagePreview(this.value);
        });
    }

    function updateHeroImagePreview(imagePath) {
        const previewContainer = document.getElementById('heroImagePreview');
        if (imagePath) {
            let imgSrc = imagePath;
            if (!imgSrc.startsWith('http://') && !imgSrc.startsWith('https://')) {
                imgSrc = imgSrc.startsWith('/') ? imgSrc : '/' + imgSrc;
            }
            previewContainer.innerHTML = `
                <img src="${imgSrc}" class="img-thumbnail" id="heroPreviewImg"
                    style="height: 200px; width: 100%; object-fit: cover;"
                    alt="Background image preview"
                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                <div class="border rounded p-5 text-center text-muted"
                    style="height: 200px; display: none; align-items: center; justify-content: center;">
                    Image preview
                </div>
            `;
        } else {
            previewContainer.innerHTML = `
                <div class="border rounded p-5 text-center text-muted"
                    style="height: 200px; display: flex; align-items: center; justify-content: center;">
                    Image preview
                </div>
            `;
        }
    }

    function updateAllJsonInputs() {
        updateJsonData();
    }

    function updateJsonData() {
        // Hero data
        const heroData = {
            title: document.getElementById('heroTitle').value || '',
            backgroundImage: document.getElementById('heroBackgroundImage').value || '',
            subtitle: document.getElementById('heroSubtitle').value || '',
            heading: document.getElementById('heroHeading').value || '',
            description: document.getElementById('heroDescription').value || '',
        };
        document.getElementById('heroJson').value = JSON.stringify(heroData);

        // Visa options
        const visaOptions = [];
        document.querySelectorAll('.visa-option-input').forEach(input => {
            if (input.value.trim()) {
                visaOptions.push(input.value.trim());
            }
        });
        document.getElementById('visaOptionsJson').value = JSON.stringify(visaOptions);

        // Form data
        const fields = [];
        document.querySelectorAll('.form-field-item').forEach(item => {
            fields.push({
                name: item.querySelector('.field-name-input').value || '',
                label: item.querySelector('.field-label-input').value || '',
                type: item.querySelector('.field-type-select').value || 'text',
                placeholder: item.querySelector('.field-placeholder-input').value || '',
                required: item.querySelector('.field-required-check').checked,
                colClass: item.querySelector('.field-col-select').value || 'col-lg-12',
            });
        });

        const formData = {
            heading: document.getElementById('formHeading').value || '',
            fields: fields,
            submitButton: {
                text: document.getElementById('formSubmitButtonText').value || 'Request Appointment',
                icon: document.getElementById('formSubmitButtonIcon').value || 'fa-solid fa-arrow-right',
                buttonClass: document.getElementById('formSubmitButtonClass').value || 'theme-btn',
            },
        };
        document.getElementById('formJson').value = JSON.stringify(formData);
    }

    function addVisaOption() {
        const container = document.getElementById('visaOptionsContainer');
        const html = `
            <div class="input-group mb-2 visa-option-item">
                <span class="input-group-text"><i class="fas fa-passport"></i></span>
                <input type="text" class="form-control visa-option-input" value="" placeholder="Enter visa option">
                <button type="button" class="btn btn-outline-danger" onclick="removeVisaOption(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    }

    function removeVisaOption(button) {
        button.closest('.visa-option-item').remove();
    }

    function addFormField() {
        const container = document.getElementById('formFieldsContainer');
        const html = `
            <div class="card mb-3 form-field-item">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Field Name</label>
                            <input type="text" class="form-control field-name-input" value="" placeholder="e.g., name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Label</label>
                            <input type="text" class="form-control field-label-input" value="" placeholder="e.g., Your Name">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Type</label>
                            <select class="form-select field-type-select">
                                <option value="text" selected>Text</option>
                                <option value="email">Email</option>
                                <option value="tel">Phone</option>
                                <option value="textarea">Textarea</option>
                                <option value="date">Date</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Col Class</label>
                            <select class="form-select field-col-select">
                                 <option value="col-lg-4">1/3 Width</option>
                                <option value="col-lg-6">1/2 Width</option>
                                <option value="col-lg-12" selected>Full Width</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Required</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input field-required-check" type="checkbox">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Placeholder</label>
                            <input type="text" class="form-control field-placeholder-input" value="">
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-danger btn-sm mt-3" onclick="removeFormField(this)">
                        <i class="fas fa-trash me-2"></i>Remove Field
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    }

    function removeFormField(button) {
        button.closest('.form-field-item').remove();
    }

    function resetForm() {
        if (confirm('Are you sure you want to reset all changes?')) {
            location.reload();
        }
    }

    // Image uploader function (reuse from shared)
    function openImageUploader(targetInput, imageType) {
        // Open upload modal or trigger file input
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.onchange = async function (e) {
            const file = e.target.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);

            try {
                const response = await fetch('/admin/upload/image', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                if (result.success && result.imagePath) {
                    document.getElementById(targetInput).value = result.imagePath;
                    if (targetInput === 'heroBackgroundImage') {
                        updateHeroImagePreview(result.imagePath);
                    }
                } else {
                    alert('Upload failed: ' + (result.error || 'Unknown error'));
                }
            } catch (error) {
                console.error('Upload error:', error);
                alert('Upload failed. Please try again.');
            }
        };
        input.click();
    }
</script>