@extends('layouts.app')

@section('content')
<div class="website-builder">
    <!-- Top Toolbar -->
    <div class="builder-toolbar">
        <div class="d-flex justify-content-between align-items-center p-3 bg-white border-bottom">
            <div class="d-flex align-items-center">
                <h5 class="mb-0 me-4">Visual Builder - {{ $website->name }}</h5>
                <!-- Add page title display -->
                <span class="badge bg-secondary me-3" id="current-page-title">
                    {{ isset($page) ? $page->title : 'New Page' }}
                </span>
                <div class="btn-group me-3">
                    <button class="btn btn-sm btn-outline-secondary" id="desktop-view">
                        <i class="bi bi-display"></i> Desktop
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="tablet-view">
                        <i class="bi bi-tablet"></i> Tablet
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="mobile-view">
                        <i class="bi bi-phone"></i> Mobile
                    </button>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <button class="btn btn-sm btn-outline-secondary" id="page-settings-btn" data-bs-toggle="modal" data-bs-target="#pageSettingsModal">
                    <i class="bi bi-gear"></i> Settings
                </button>
                <button class="btn btn-sm btn-outline-secondary" id="preview-btn">
                    <i class="bi bi-eye"></i> Preview
                </button>
                <button class="btn btn-sm btn-success" id="save-page">
                    <i class="bi bi-check2"></i> Save Page
                </button>
                <a href="{{ route('website.show', $website) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x"></i> Exit
                </a>
            </div>
        </div>
    </div>

    <div class="builder-container d-flex">
        <!-- Left Sidebar - Components Panel -->
        <div class="components-panel">
            <div class="panel-header">
                <h6><i class="bi bi-puzzle me-2"></i>Components</h6>
            </div>

            <!-- Basic Components -->
            <div class="component-category">
                <h6 class="category-title">Basic</h6>
                <div class="component-grid">
                    <div class="component-item" data-component="heading">
                        <i class="bi bi-type-h1"></i>
                        <span>Heading</span>
                    </div>
                    <div class="component-item" data-component="text">
                        <i class="bi bi-text-paragraph"></i>
                        <span>Text</span>
                    </div>
                    <div class="component-item" data-component="image">
                        <i class="bi bi-image"></i>
                        <span>Image</span>
                    </div>
                    <div class="component-item" data-component="button">
                        <i class="bi bi-app"></i>
                        <span>Button</span>
                    </div>
                    <div class="component-item" data-component="divider">
                        <i class="bi bi-hr"></i>
                        <span>Divider</span>
                    </div>
                    <div class="component-item" data-component="spacer">
                        <i class="bi bi-arrows-expand"></i>
                        <span>Spacer</span>
                    </div>
                </div>
            </div>

            <!-- Layout Components -->
            <div class="component-category">
                <h6 class="category-title">Layout</h6>
                <div class="component-grid">
                    <div class="component-item" data-component="container">
                        <i class="bi bi-square-fill"></i>
                        <span>Container</span>
                    </div>
                    <div class="component-item" data-component="row">
                        <i class="bi bi-distribute-horizontal"></i>
                        <span>Row</span>
                    </div>
                    <div class="component-item" data-component="column">
                        <i class="bi bi-distribute-vertical"></i>
                        <span>Column</span>
                    </div>
                    <div class="component-item" data-component="section">
                        <i class="bi bi-layout-text-window"></i>
                        <span>Section</span>
                    </div>
                </div>
            </div>

            <!-- Advanced Components -->
            <div class="component-category">
                <h6 class="category-title">Advanced</h6>
                <div class="component-grid">
                    <div class="component-item" data-component="hero">
                        <i class="bi bi-card-image"></i>
                        <span>Hero Section</span>
                    </div>
                    <div class="component-item" data-component="gallery">
                        <i class="bi bi-images"></i>
                        <span>Gallery</span>
                    </div>
                    <div class="component-item" data-component="form">
                        <i class="bi bi-ui-checks"></i>
                        <span>Contact Form</span>
                    </div>
                    <div class="component-item" data-component="testimonial">
                        <i class="bi bi-chat-quote"></i>
                        <span>Testimonial</span>
                    </div>
                    <div class="component-item" data-component="pricing">
                        <i class="bi bi-currency-dollar"></i>
                        <span>Pricing Table</span>
                    </div>
                    <div class="component-item" data-component="team">
                        <i class="bi bi-people"></i>
                        <span>Team Member</span>
                    </div>
                </div>
            </div>

            <!-- E-commerce Components -->
            @if($website->ecommerce_enabled)
            <div class="component-category">
                <h6 class="category-title">E-commerce</h6>
                <div class="component-grid">
                    <div class="component-item" data-component="product-grid">
                        <i class="bi bi-grid-3x3"></i>
                        <span>Product Grid</span>
                    </div>
                    <div class="component-item" data-component="product-featured">
                        <i class="bi bi-star"></i>
                        <span>Featured Product</span>
                    </div>
                    <div class="component-item" data-component="add-to-cart">
                        <i class="bi bi-cart-plus"></i>
                        <span>Add to Cart</span>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Center Canvas - Page Builder -->
        <div class="canvas-area">
            <div class="canvas-container">
                <div class="device-frame" id="canvas-frame">
                    <div class="page-canvas" id="page-canvas">
                        <!-- Drop zone indicator -->
                        <div class="drop-zone-indicator">
                            <i class="bi bi-plus-circle"></i>
                            <p>Drag components here to start building</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Sidebar - Properties Panel -->
        <div class="properties-panel" id="properties-panel">
            <div class="panel-header">
                <h6><i class="bi bi-sliders me-2"></i>Properties</h6>
            </div>

            <div class="properties-content">
                <div class="no-selection">
                    <i class="bi bi-mouse2"></i>
                    <p>Select an element to edit its properties</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Component Templates -->
<div id="component-templates" style="display: none;">
    <!-- Heading Component -->
    <div class="component-template" data-type="heading">
        <div class="builder-element" data-element="heading">
            <h2 class="editable-heading" contenteditable="true">Your Heading Here</h2>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>

    <!-- Text Component -->
    <div class="component-template" data-type="text">
        <div class="builder-element" data-element="text">
            <p class="editable-text" contenteditable="true">This is a paragraph of text. Click to edit and customize your content.</p>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>

    <!-- Image Component -->
    <div class="component-template" data-type="image">
        <div class="builder-element" data-element="image">
            <div class="image-placeholder">
                <i class="bi bi-image"></i>
                <p>Click to add image</p>
                <input type="file" class="image-upload" accept="image/*" style="display: none;">
            </div>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>

    <!-- Button Component -->
    <div class="component-template" data-type="button">
        <div class="builder-element" data-element="button">
            <button class="btn btn-primary editable-button" contenteditable="true">Click Me</button>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>

    <!-- Hero Section Component -->
    <div class="component-template" data-type="hero">
        <div class="builder-element" data-element="hero">
            <div class="hero-section">
                <div class="hero-content">
                    <h1 class="editable-heading" contenteditable="true">Welcome to Our Website</h1>
                    <p class="editable-text" contenteditable="true">Create amazing experiences with our powerful builder</p>
                    <button class="btn btn-primary btn-lg editable-button" contenteditable="true">Get Started</button>
                </div>
            </div>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>

    <!-- Container Component -->
    <div class="component-template" data-type="container">
        <div class="builder-element" data-element="container">
            <div class="container-element">
                <div class="drop-zone">
                    <p class="text-muted">Drop components here</p>
                </div>
            </div>
            <div class="element-controls">
                <button class="btn btn-sm btn-outline-primary edit-btn"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger delete-btn"><i class="bi bi-trash"></i></button>
                <div class="drag-handle"><i class="bi bi-grip-vertical"></i></div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="pageSettingsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Page Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="page-title" class="form-label">Page Title</label>
                    <input type="text" class="form-control" id="page-title"
                           value="{{ isset($page) ? $page->title : '' }}" required>
                </div>
                <div class="mb-3">
                    <label for="page-slug" class="form-label">Page Slug</label>
                    <input type="text" class="form-control" id="page-slug"
                           value="{{ isset($page) ? $page->slug : '' }}" required>
                    <div class="form-text">URL-friendly version of the title</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-page-settings">Save</button>
            </div>
        </div>
    </div>
</div>



<style>
.website-builder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    z-index: 1000;
}

.builder-toolbar {
    height: 60px;
    background: white;
    border-bottom: 2px solid #e0e0e0;
    z-index: 1001;
}

.builder-container {
    height: calc(100vh - 60px);
}

/* Components Panel */
.components-panel {
    width: 280px;
    background: white;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
}

.panel-header {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.panel-header h6 {
    margin: 0;
    color: #495057;
}

.component-category {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.category-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 10px;
}

.component-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.component-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s;
    text-align: center;
}

.component-item:hover {
    border-color: #007bff;
    background: #f8f9ff;
    transform: translateY(-2px);
}

.component-item i {
    font-size: 20px;
    color: #495057;
    margin-bottom: 4px;
}

.component-item span {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

/* Canvas Area */
.canvas-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow: auto;
}

.canvas-container {
    width: 100%;
    max-width: 1200px;
}

.device-frame {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-height: 600px;
    width: 100%;
    transition: all 0.3s ease;
}

.device-frame.tablet-view {
    max-width: 768px;
}

.device-frame.mobile-view {
    max-width: 375px;
}

.page-canvas {
    min-height: 600px;
    position: relative;
    padding: 20px;
}

.drop-zone-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    border: 2px dashed #d0d0d0;
    border-radius: 8px;
    color: #999;
    text-align: center;
}

.drop-zone-indicator i {
    font-size: 48px;
    margin-bottom: 10px;
}

/* Properties Panel */
.properties-panel {
    width: 300px;
    background: white;
    border-left: 1px solid #e0e0e0;
    overflow-y: auto;
}

.properties-content {
    padding: 20px;
}

.no-selection {
    text-align: center;
    color: #999;
    padding: 40px 20px;
}

.no-selection i {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}

/* Builder Elements */
.builder-element {
    position: relative;
    margin: 10px 0;
    min-height: 40px;
    border: 2px dashed transparent;
    transition: all 0.2s;
}

.builder-element:hover {
    border-color: #007bff;
}

.builder-element.selected {
    border-color: #007bff;
    background: rgba(0,123,255,0.05);
}

.element-controls {
    position: absolute;
    top: -35px;
    right: 0;
    display: none;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 5px;
    z-index: 10;
}

.builder-element:hover .element-controls,
.builder-element.selected .element-controls {
    display: flex;
    gap: 5px;
}

.drag-handle {
    cursor: grab;
    padding: 5px;
    color: #999;
}

/* Hero Section Styling */
.hero-section {
    background: #0066FF;
    color: white;
    padding: 80px 40px;
    text-align: center;
    border-radius: 8px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Container Element */
.container-element {
    border: 1px dashed #ccc;
    border-radius: 4px;
    min-height: 100px;
    position: relative;
}

.drop-zone {
    padding: 40px;
    text-align: center;
}

/* Image Placeholder */
.image-placeholder {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
}

.image-placeholder i {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .components-panel {
        width: 240px;
    }
    .properties-panel {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .components-panel,
    .properties-panel {
        position: fixed;
        left: -100%;
        top: 60px;
        height: calc(100vh - 60px);
        z-index: 1002;
        transition: left 0.3s;
    }

    .components-panel.open,
    .properties-panel.open {
        left: 0;
    }
}

/* Sortable styling */
.sortable-ghost {
    opacity: 0.5;
}

.sortable-chosen {
    transform: rotate(5deg);
}

/* Editable content */
[contenteditable="true"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
class VisualBuilder {
    constructor() {
        this.selectedElement = null;
        this.pageData = [];
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.setupDragAndDrop();
        this.setupSortable();
        this.loadExistingContent();
    }

    setupEventListeners() {



         // Page settings modal
    document.getElementById('save-page-settings').addEventListener('click', () => {
        this.updatePageSettings();
    });

     // Auto-generate slug from title
     document.getElementById('page-title').addEventListener('input', (e) => {
        const title = e.target.value;
        const slug = this.generateSlug(title);
        document.getElementById('page-slug').value = slug;
    });



        // Component drag start
        document.querySelectorAll('.component-item').forEach(item => {
            item.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('component-type', item.getAttribute('data-component'));
            });
            item.setAttribute('draggable', true);
        });



        // Canvas drop handling
        const canvas = document.getElementById('page-canvas');
        canvas.addEventListener('dragover', (e) => {
            e.preventDefault();
            canvas.classList.add('drag-over');
        });

        canvas.addEventListener('dragleave', (e) => {
            if (!canvas.contains(e.relatedTarget)) {
                canvas.classList.remove('drag-over');
            }
        });

        canvas.addEventListener('drop', (e) => {
            e.preventDefault();
            canvas.classList.remove('drag-over');
            const componentType = e.dataTransfer.getData('component-type');
            this.addComponent(componentType);
        });

        // Device view buttons
        document.getElementById('desktop-view').addEventListener('click', () => this.setDeviceView('desktop'));
        document.getElementById('tablet-view').addEventListener('click', () => this.setDeviceView('tablet'));
        document.getElementById('mobile-view').addEventListener('click', () => this.setDeviceView('mobile'));

        // Save button
        document.getElementById('save-page').addEventListener('click', () => this.savePage());

        // Preview button
        document.getElementById('preview-btn').addEventListener('click', () => this.togglePreview());
    }

    setupDragAndDrop() {
        // This will be enhanced with more sophisticated drag/drop logic
    }

    setupSortable() {
        const canvas = document.getElementById('page-canvas');
        new Sortable(canvas, {
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            onEnd: () => {
                this.updatePageData();
            }
        });
    }

    addComponent(type) {
        const template = document.querySelector(`[data-type="${type}"]`);
        if (!template) return;

        const canvas = document.getElementById('page-canvas');
        const dropIndicator = canvas.querySelector('.drop-zone-indicator');
        if (dropIndicator) {
            dropIndicator.style.display = 'none';
        }

        const newElement = template.cloneNode(true);
        newElement.classList.remove('component-template');
        newElement.style.display = 'block';

        // Add unique ID
        const elementId = 'element-' + Date.now();
        newElement.querySelector('.builder-element').setAttribute('data-id', elementId);

        canvas.appendChild(newElement);
        this.setupElementEvents(newElement);
        this.selectElement(newElement.querySelector('.builder-element'));
        this.updatePageData();
    }


    generateSlug(text) {
    return text
        .toLowerCase()
        .replace(/[^\w\s-]/g, '') // Remove special characters
        .replace(/\s+/g, '-') // Replace spaces with hyphens
        .replace(/-+/g, '-') // Replace multiple hyphens with single
        .trim('-'); // Remove leading/trailing hyphens
}

updatePageSettings() {
    const title = document.getElementById('page-title').value;
    const slug = document.getElementById('page-slug').value;

    if (!title || !slug) {
        alert('Please enter both title and slug');
        return;
    }

    // Update the display
    document.getElementById('current-page-title').textContent = title;

    // Close modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('pageSettingsModal'));
    modal.hide();
}

    setupElementEvents(element) {
        const builderElement = element.querySelector('.builder-element');

        // Selection
        builderElement.addEventListener('click', (e) => {
            e.stopPropagation();
            this.selectElement(builderElement);
        });

        // Delete button
        const deleteBtn = element.querySelector('.delete-btn');
        deleteBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            element.remove();
            this.updatePageData();
            this.clearSelection();
        });

        // Edit button
        const editBtn = element.querySelector('.edit-btn');
        editBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            this.editElement(builderElement);
        });

        // Image upload
        const imageUpload = element.querySelector('.image-upload');
        if (imageUpload) {
            const placeholder = element.querySelector('.image-placeholder');
            placeholder.addEventListener('click', () => imageUpload.click());

            imageUpload.addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        placeholder.innerHTML = `<img src="${e.target.result}" style="max-width: 100%; height: auto;">`;
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // Contenteditable elements
        const editableElements = element.querySelectorAll('[contenteditable="true"]');
        editableElements.forEach(el => {
            el.addEventListener('blur', () => {
                this.updatePageData();
            });
        });
    }

    selectElement(element) {
        // Clear previous selection
        document.querySelectorAll('.builder-element.selected').forEach(el => {
            el.classList.remove('selected');
        });

        // Select new element
        element.classList.add('selected');
        this.selectedElement = element;
        this.showProperties(element);
    }

    clearSelection() {
        document.querySelectorAll('.builder-element.selected').forEach(el => {
            el.classList.remove('selected');
        });
        this.selectedElement = null;
        this.hideProperties();
    }

    showProperties(element) {
        const panel = document.getElementById('properties-panel');
        const content = panel.querySelector('.properties-content');
        const elementType = element.getAttribute('data-element');

        let propertiesHTML = `
            <h6>Element Properties</h6>
            <div class="mb-3">
                <label class="form-label">Element Type</label>
                <input type="text" class="form-control" value="${elementType}" readonly>
            </div>
        `;

        // Add specific properties based on element type
        switch(elementType) {
            case 'heading':
                propertiesHTML += `
                    <div class="mb-3">
                        <label class="form-label">Heading Level</label>
                        <select class="form-select heading-level">
                            <option value="h1">H1</option>
                            <option value="h2" selected>H2</option>
                            <option value="h3">H3</option>
                            <option value="h4">H4</option>
                            <option value="h5">H5</option>
                            <option value="h6">H6</option>
                        </select>
                    </div>
                `;
                break;
            case 'button':
                propertiesHTML += `
                    <div class="mb-3">
                        <label class="form-label">Button Style</label>
                        <select class="form-select button-style">
                            <option value="btn-primary">Primary</option>
                            <option value="btn-secondary">Secondary</option>
                            <option value="btn-success">Success</option>
                            <option value="btn-danger">Danger</option>
                            <option value="btn-outline-primary">Outline Primary</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Button Size</label>
                        <select class="form-select button-size">
                            <option value="btn-sm">Small</option>
                            <option value="" selected>Default</option>
                            <option value="btn-lg">Large</option>
                        </select>
                    </div>
                `;
                break;
        }

        // Common style properties
        propertiesHTML += `
            <hr>
            <h6>Styling</h6>
            <div class="mb-3">
                <label class="form-label">Text Align</label>
                <select class="form-select text-align">
                    <option value="text-start">Left</option>
                    <option value="text-center">Center</option>
                    <option value="text-end">Right</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Margin</label>
                <div class="row">
                    <div class="col-6">
                        <input type="number" class="form-control margin-top" placeholder="Top" min="0">
                    </div>
                    <div class="col-6">
                        <input type="number" class="form-control margin-bottom" placeholder="Bottom" min="0">
                    </div>
                </div>
            </div>
        `;

        content.innerHTML = propertiesHTML;

        // Setup property change listeners
        this.setupPropertyListeners(content, element);
    }

    setupPropertyListeners(panel, element) {
        // Heading level change
        const headingLevel = panel.querySelector('.heading-level');
        if (headingLevel) {
            headingLevel.addEventListener('change', (e) => {
                const heading = element.querySelector('[contenteditable="true"]');
                const newTag = e.target.value;
                const newHeading = document.createElement(newTag);
                newHeading.innerHTML = heading.innerHTML;
                newHeading.className = heading.className;
                newHeading.setAttribute('contenteditable', 'true');
                heading.parentNode.replaceChild(newHeading, heading);
                this.updatePageData();
            });
        }

        // Button style change
        const buttonStyle = panel.querySelector('.button-style');
        if (buttonStyle) {
            buttonStyle.addEventListener('change', (e) => {
                const button = element.querySelector('.editable-button');
                button.className = `btn ${e.target.value}`;
                this.updatePageData();
            });
        }

        // Text align change
        const textAlign = panel.querySelector('.text-align');
        if (textAlign) {
            textAlign.addEventListener('change', (e) => {
                element.classList.remove('text-start', 'text-center', 'text-end');
                element.classList.add(e.target.value);
                this.updatePageData();
            });
        }
    }

    hideProperties() {
        const panel = document.getElementById('properties-panel');
        const content = panel.querySelector('.properties-content');
        content.innerHTML = `
            <div class="no-selection">
                <i class="bi bi-mouse2"></i>
                <p>Select an element to edit its properties</p>
            </div>
        `;
    }

    editElement(element) {
        // Focus on the first editable element
        const editable = element.querySelector('[contenteditable="true"]');
        if (editable) {
            editable.focus();
        }
    }

    setDeviceView(device) {
        const frame = document.getElementById('canvas-frame');
        const buttons = document.querySelectorAll('#desktop-view, #tablet-view, #mobile-view');

        // Remove active states
        buttons.forEach(btn => btn.classList.remove('btn-primary'));
        buttons.forEach(btn => btn.classList.add('btn-outline-secondary'));

        // Remove device classes
        frame.classList.remove('desktop-view', 'tablet-view', 'mobile-view');

        // Add new device class and activate button
        frame.classList.add(`${device}-view`);
        document.getElementById(`${device}-view`).classList.remove('btn-outline-secondary');
        document.getElementById(`${device}-view`).classList.add('btn-primary');
    }

    updatePageData() {
        const canvas = document.getElementById('page-canvas');
        const elements = canvas.querySelectorAll('.builder-element');

        this.pageData = Array.from(elements).map(element => {
            const elementType = element.getAttribute('data-element');
            const elementId = element.getAttribute('data-id');

            let content = {};

            // Extract content based on element type
            switch(elementType) {
                case 'heading':
                    const heading = element.querySelector('[contenteditable="true"]');
                    content = {
                        text: heading.innerHTML,
                        tag: heading.tagName.toLowerCase(),
                        classes: heading.className
                    };
                    break;
                case 'text':
                    const text = element.querySelector('[contenteditable="true"]');
                    content = {
                        text: text.innerHTML,
                        classes: text.className
                    };
                    break;
                case 'button':
                    const button = element.querySelector('.editable-button');
                    content = {
                        text: button.innerHTML,
                        classes: button.className,
                        href: button.getAttribute('href') || '#'
                    };
                    break;
                case 'image':
                    const img = element.querySelector('img');
                    content = {
                        src: img ? img.src : '',
                        alt: img ? img.alt : '',
                        classes: img ? img.className : ''
                    };
                    break;
                case 'hero':
                    const heroHeading = element.querySelector('h1[contenteditable="true"]');
                    const heroText = element.querySelector('p[contenteditable="true"]');
                    const heroButton = element.querySelector('.editable-button');
                    content = {
                        heading: heroHeading ? heroHeading.innerHTML : '',
                        text: heroText ? heroText.innerHTML : '',
                        buttonText: heroButton ? heroButton.innerHTML : '',
                        buttonHref: heroButton ? (heroButton.getAttribute('href') || '#') : '#'
                    };
                    break;
            }

            return {
                id: elementId,
                type: elementType,
                content: content,
                classes: element.className,
                styles: element.getAttribute('style') || ''
            };
        });
    }

    savePage() {
        this.updatePageData();


        const title = document.getElementById('page-title')?.value;
        const slug = document.getElementById('page-slug')?.value;

        if (!title || !slug) {
            alert('Please set page title and slug in Settings before saving');
            return;
        }


        // Show loading state
        const saveBtn = document.getElementById('save-page');
        const originalText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
        saveBtn.disabled = true;

        // Send data to server
        fetch('{{ route("pages.builder.save", [$website, $page ?? "new"]) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                pageData: this.pageData,
                title: document.getElementById('page-title')?.value || 'Untitled Page',
                slug: document.getElementById('page-slug')?.value || 'untitled-page'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Success feedback
                saveBtn.innerHTML = '<i class="bi bi-check2"></i> Saved!';
                saveBtn.classList.remove('btn-success');
                saveBtn.classList.add('btn-success');

                setTimeout(() => {
                    saveBtn.innerHTML = originalText;
                    saveBtn.classList.remove('btn-success');
                    saveBtn.classList.add('btn-success');
                    saveBtn.disabled = false;
                }, 2000);
            } else {
                throw new Error(data.message || 'Save failed');
            }
        })
        .catch(error => {
            // Error feedback
            saveBtn.innerHTML = '<i class="bi bi-exclamation-triangle"></i> Error';
            saveBtn.classList.add('btn-danger');

            setTimeout(() => {
                saveBtn.innerHTML = originalText;
                saveBtn.classList.remove('btn-danger');
                saveBtn.disabled = false;
            }, 3000);

            console.error('Save error:', error);
        });
    }

    togglePreview() {
        const previewBtn = document.getElementById('preview-btn');
        const isPreview = previewBtn.textContent.includes('Preview');

        if (isPreview) {
            // Enter preview mode
            this.enterPreviewMode();
            previewBtn.innerHTML = '<i class="bi bi-pencil"></i> Edit';
        } else {
            // Exit preview mode
            this.exitPreviewMode();
            previewBtn.innerHTML = '<i class="bi bi-eye"></i> Preview';
        }
    }

    enterPreviewMode() {
        // Hide all builder controls
        document.querySelectorAll('.element-controls').forEach(control => {
            control.style.display = 'none';
        });

        // Remove hover effects and selection
        document.querySelectorAll('.builder-element').forEach(element => {
            element.classList.remove('selected');
            element.style.border = 'none';
        });

        // Disable contenteditable
        document.querySelectorAll('[contenteditable="true"]').forEach(element => {
            element.setAttribute('contenteditable', 'false');
        });

        // Hide properties panel
        document.getElementById('properties-panel').style.display = 'none';

        // Make links functional
        document.querySelectorAll('.editable-button').forEach(button => {
            button.style.pointerEvents = 'auto';
        });
    }

    exitPreviewMode() {
        // Show builder controls
        document.querySelectorAll('.element-controls').forEach(control => {
            control.style.display = '';
        });

        // Enable contenteditable
        document.querySelectorAll('[contenteditable="false"]').forEach(element => {
            element.setAttribute('contenteditable', 'true');
        });

        // Show properties panel
        document.getElementById('properties-panel').style.display = 'block';

        // Disable links in edit mode
        document.querySelectorAll('.editable-button').forEach(button => {
            button.style.pointerEvents = 'none';
        });
    }

    loadExistingContent() {
        // Load existing page content if editing
        @if(isset($page) && $page->builder_data)
            const existingData = @json($page->builder_data);
            this.renderPageFromData(existingData);
        @endif
    }

    renderPageFromData(data) {
        const canvas = document.getElementById('page-canvas');
        const dropIndicator = canvas.querySelector('.drop-zone-indicator');
        if (dropIndicator) {
            dropIndicator.style.display = 'none';
        }

        data.forEach(elementData => {
            const template = document.querySelector(`[data-type="${elementData.type}"]`);
            if (!template) return;

            const newElement = template.cloneNode(true);
            newElement.classList.remove('component-template');
            newElement.style.display = 'block';

            const builderElement = newElement.querySelector('.builder-element');
            builderElement.setAttribute('data-id', elementData.id);
            builderElement.className = elementData.classes;

            if (elementData.styles) {
                builderElement.setAttribute('style', elementData.styles);
            }

            // Restore content based on element type
            this.restoreElementContent(builderElement, elementData);

            canvas.appendChild(newElement);
            this.setupElementEvents(newElement);
        });
    }

    restoreElementContent(element, data) {
        switch(data.type) {
            case 'heading':
                const heading = element.querySelector('[contenteditable="true"]');
                heading.innerHTML = data.content.text;
                heading.className = data.content.classes;
                break;
            case 'text':
                const text = element.querySelector('[contenteditable="true"]');
                text.innerHTML = data.content.text;
                text.className = data.content.classes;
                break;
            case 'button':
                const button = element.querySelector('.editable-button');
                button.innerHTML = data.content.text;
                button.className = data.content.classes;
                if (data.content.href) {
                    button.setAttribute('href', data.content.href);
                }
                break;
            case 'image':
                if (data.content.src) {
                    const placeholder = element.querySelector('.image-placeholder');
                    placeholder.innerHTML = `<img src="${data.content.src}" alt="${data.content.alt}" class="${data.content.classes}" style="max-width: 100%; height: auto;">`;
                }
                break;
            case 'hero':
                const heroHeading = element.querySelector('h1[contenteditable="true"]');
                const heroText = element.querySelector('p[contenteditable="true"]');
                const heroButton = element.querySelector('.editable-button');

                if (heroHeading) heroHeading.innerHTML = data.content.heading;
                if (heroText) heroText.innerHTML = data.content.text;
                if (heroButton) {
                    heroButton.innerHTML = data.content.buttonText;
                    heroButton.setAttribute('href', data.content.buttonHref);
                }
                break;
        }
    }
}

// Initialize builder when page loads
document.addEventListener('DOMContentLoaded', function() {
    new VisualBuilder();

    // Click outside to deselect
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.builder-element') && !e.target.closest('.properties-panel')) {
            document.querySelectorAll('.builder-element.selected').forEach(el => {
                el.classList.remove('selected');
            });
        }
    });
});
</script>
@endsection