<?php
/**
 * Visual Layout Builder - Drag & Drop Interface
 * Allows users to customize component positions and arrangements
 */
if (!defined('ABSPATH')) exit;

// Include layout configuration
include_once EM_FREE_PLUGIN_DIR . 'templates/frontend/layout-config.php';

// Get current layout configuration
$current_layout = isset($Event_Monster_Free_settings['em_layout_preference']) ? $Event_Monster_Free_settings['em_layout_preference'] : 'default';
$custom_layout = isset($Event_Monster_Free_settings['em_custom_layout']) ? $Event_Monster_Free_settings['em_custom_layout'] : array();

// Get available components
$available_components = array(
    'cancellation' => array(
        'name' => __('Event Cancellation', 'event-monster'),
        'description' => __('Cancellation notice and information', 'event-monster'),
        'icon' => 'dashicons-dismiss',
        'category' => 'system'
    ),
    'messages' => array(
        'name' => __('Event Messages', 'event-monster'),
        'description' => __('Important messages and announcements', 'event-monster'),
        'icon' => 'dashicons-megaphone',
        'category' => 'system'
    ),
    'header' => array(
        'name' => __('Event Header', 'event-monster'),
        'description' => __('Event title, banner image, and basic info', 'event-monster'),
        'icon' => 'dashicons-format-image',
        'category' => 'content'
    ),
    'countdown' => array(
        'name' => __('Countdown Timer', 'event-monster'),
        'description' => __('Live countdown to event start', 'event-monster'),
        'icon' => 'dashicons-clock',
        'category' => 'interactive'
    ),
    'content' => array(
        'name' => __('Event Content', 'event-monster'),
        'description' => __('Main event description and details', 'event-monster'),
        'icon' => 'dashicons-text-page',
        'category' => 'content'
    ),
    'details' => array(
        'name' => __('Event Details', 'event-monster'),
        'description' => __('Date, time, location, and venue info', 'event-monster'),
        'icon' => 'dashicons-calendar-alt',
        'category' => 'information'
    ),
    'map' => array(
        'name' => __('Location Map', 'event-monster'),
        'description' => __('Interactive Google Maps integration', 'event-monster'),
        'icon' => 'dashicons-location',
        'category' => 'information'
    ),
    'gallery' => array(
        'name' => __('Event Gallery', 'event-monster'),
        'description' => __('Photo gallery and media showcase', 'event-monster'),
        'icon' => 'dashicons-format-gallery',
        'category' => 'media'
    ),
    'schedule' => array(
        'name' => __('Event Schedule', 'event-monster'),
        'description' => __('Timeline and agenda', 'event-monster'),
        'icon' => 'dashicons-schedule',
        'category' => 'information'
    ),
    'speakers' => array(
        'name' => __('Speakers', 'event-monster'),
        'description' => __('Speaker profiles and information', 'event-monster'),
        'icon' => 'dashicons-groups',
        'category' => 'people'
    ),
    'organizers' => array(
        'name' => __('Organizers', 'event-monster'),
        'description' => __('Event organizer contact information', 'event-monster'),
        'icon' => 'dashicons-businessman',
        'category' => 'people'
    ),
    'sponsors' => array(
        'name' => __('Sponsors', 'event-monster'),
        'description' => __('Sponsor logos and information', 'event-monster'),
        'icon' => 'dashicons-awards',
        'category' => 'people'
    ),
    'registration' => array(
        'name' => __('Registration', 'event-monster'),
        'description' => __('Registration form and booking', 'event-monster'),
        'icon' => 'dashicons-forms',
        'category' => 'interactive'
    )
);

// Get current layout config for display
$layout_config = em_get_layout_configuration_free($Event_Monster_Free_settings);
?>

<div class="em-layout-builder-wrapper">

    <!-- Header -->
    <div class="em-builder-header">
        <h2><?php _e('Visual Layout Builder', 'event-monster'); ?></h2>
        <p class="description">
            <?php _e('Choose a preset layout for your event page.', 'event-monster'); ?>
        </p>
    </div>

    <!-- Layout Mode Selector -->
    <div class="em-layout-mode-selector">
        <h3><?php _e('Layout Mode', 'event-monster'); ?></h3>
        <div class="em-mode-buttons">
            <button type="button" class="button button-primary"
                    data-mode="preset" id="preset-mode">
                <?php _e('Use Preset Layout', 'event-monster'); ?>
            </button>
            <button type="button" class="button" disabled
                    data-mode="custom" id="custom-mode" style="opacity: 0.6; cursor: not-allowed;">
                <?php _e('Custom Layout Builder', 'event-monster'); ?>
                <span class="dashicons dashicons-lock" style="font-size: 14px; margin-left: 4px; vertical-align: middle;"></span>
            </button>
        </div>
        <!-- Pro Feature Notice -->
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 16px; border-radius: 8px; margin-top: 12px; display: flex; align-items: center; gap: 10px;">
            <span class="dashicons dashicons-star-filled" style="font-size: 20px;"></span>
            <div>
                <strong><?php _e('Custom Layout Builder is a Pro Feature', 'event-monster'); ?></strong>
                <p style="margin: 4px 0 0 0; font-size: 13px; opacity: 0.9;">
                    <?php _e('Upgrade to Pro for drag-and-drop custom layouts with unlimited components.', 'event-monster'); ?>
                    <a href="https://awplife.com/account/shop/" target="_blank" style="color: #ffd700; text-decoration: underline; margin-left: 4px;"><?php _e('Upgrade Now →', 'event-monster'); ?></a>
                </p>
            </div>
        </div>
    </div>

    <!-- Preset Layout Selector (Always visible in Starter) -->
    <div class="em-preset-layouts">
        <div class="em-preset-grid">
            <?php
            // Show available preset layouts
            $preset_layouts = array('default', 'magazine');
            // Force preset mode in Starter version
            if ($current_layout === 'custom') {
                $current_layout = 'default';
            }
            foreach ($preset_layouts as $layout_name) {
                $selected = ($current_layout === $layout_name) ? 'selected' : '';
                echo '<div class="em-preset-option ' . $selected . '" data-layout="' . $layout_name . '">';
                echo '<h4>' . ucfirst($layout_name) . ' Layout</h4>';
                echo '<p>' . em_get_layout_preview_free($layout_name) . '</p>';
                echo '</div>';
            }
            ?>
        </div>
    </div>

    <!-- Custom Layout Builder - DISABLED IN STARTER VERSION -->
    <div class="em-custom-builder" style="display:none !important;">
        
        <!-- Component Library -->
        <div class="em-builder-sidebar">
            <h3><?php _e('Available Components', 'event-monster'); ?></h3>
            <div class="em-component-categories">
                
                <?php
                $categories = array(
                    'system' => __('System', 'event-monster'),
                    'content' => __('Content', 'event-monster'),
                    'information' => __('Information', 'event-monster'),
                    'media' => __('Media', 'event-monster'),
                    'people' => __('People', 'event-monster'),
                    'interactive' => __('Interactive', 'event-monster')
                );
                
                foreach ($categories as $cat_key => $cat_name) {
                    echo '<div class="em-component-category">';
                    echo '<h4>' . $cat_name . '</h4>';
                    echo '<div class="em-component-list">';
                    
                    foreach ($available_components as $comp_key => $comp_data) {
                        if ($comp_data['category'] === $cat_key) {
                            echo '<div class="em-component-item" data-component="' . $comp_key . '">';
                            echo '<span class="dashicons ' . $comp_data['icon'] . '"></span>';
                            echo '<div class="em-component-info">';
                            echo '<strong>' . $comp_data['name'] . '</strong>';
                            echo '<small>' . $comp_data['description'] . '</small>';
                            echo '</div>';
                            echo '</div>';
                        }
                    }
                    
                    echo '</div>';
                    echo '</div>';
                }
                ?>
                
            </div>
        </div>
        
        <!-- Layout Canvas -->
        <div class="em-builder-canvas">
            <h3><?php _e('Layout Canvas', 'event-monster'); ?></h3>
            <div class="em-canvas-toolbar">
                <button type="button" class="button" id="add-section">
                    <span class="dashicons dashicons-plus-alt"></span>
                    <?php _e('Add Section', 'event-monster'); ?>
                </button>
                <button type="button" class="button" id="clear-layout">
                    <span class="dashicons dashicons-trash"></span>
                    <?php _e('Clear All', 'event-monster'); ?>
                </button>
            </div>
            
            <div class="em-layout-canvas" id="layout-canvas">
                <!-- Dynamic sections will be added here -->
                <div class="em-canvas-placeholder">
                    <span class="dashicons dashicons-layout"></span>
                    <p><?php _e('Drag components here to build your layout', 'event-monster'); ?></p>
                    <button type="button" class="button button-primary" id="start-building">
                        <?php _e('Start Building', 'event-monster'); ?>
                    </button>
                </div>
            </div>
        </div>
        
    </div>
    
    <!-- Action Buttons -->
    <div class="em-builder-actions">
        <button type="button" class="button button-primary" id="save-layout">
            <?php _e('Save Layout', 'event-monster'); ?>
        </button>
        <button type="button" class="button" id="reset-layout">
            <?php _e('Reset to Default', 'event-monster'); ?>
        </button>
    </div>
    
    <!-- Hidden Fields -->
    <input type="hidden" name="em_layout_preference" id="layout-preference" value="<?php echo esc_attr($current_layout); ?>">
    <input type="hidden" name="em_custom_layout" id="custom-layout-data" value="<?php echo esc_attr(json_encode($custom_layout)); ?>">
    
</div>

<style>
/* Layout Builder Styles */
.em-layout-builder-wrapper {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 20px;
    margin: 20px 0;
}

.em-builder-header h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.em-layout-mode-selector {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
}

.em-mode-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.em-preset-layouts {
    margin: 20px 0;
}

.em-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.em-preset-option {
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.em-preset-option:hover {
    border-color: #0073aa;
}

.em-preset-option.selected {
    border-color: #0073aa;
    background: #f0f8ff;
}

.em-custom-builder {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    min-height: 500px;
}

.em-builder-sidebar {
    width: 300px;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 15px;
    overflow-y: auto;
    max-height: 600px;
}

.em-component-category {
    margin-bottom: 20px;
}

.em-component-category h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.em-component-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.3s ease;
}

.em-component-item:hover {
    border-color: #0073aa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.em-component-item:active {
    cursor: grabbing;
}

.em-component-item .dashicons {
    color: #0073aa;
    font-size: 18px;
}

.em-component-info strong {
    display: block;
    font-size: 12px;
    line-height: 1.3;
}

.em-component-info small {
    color: #666;
    font-size: 11px;
    line-height: 1.2;
}

.em-builder-canvas {
    flex: 1;
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 4px;
    padding: 15px;
}

.em-canvas-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.em-layout-canvas {
    min-height: 400px;
    position: relative;
}

.em-canvas-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
}

.em-canvas-placeholder .dashicons {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 10px;
}

.em-builder-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
}

/* Layout Sections */
.em-layout-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
}

.em-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.em-section-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.em-section-type {
    font-weight: 600;
    color: #0073aa;
}

.em-section-count {
    font-size: 12px;
    color: #666;
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 10px;
}

.em-section-actions {
    display: flex;
    gap: 5px;
}

.em-section-actions button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 2px;
    color: #666;
}

.em-section-actions button:hover {
    background: #ddd;
    color: #000;
}

.em-section-content {
    padding: 15px;
    min-height: 80px;
}

.em-section-single {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.em-section-two_column_equal,
.em-section-two_column_wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.em-section-two_column_wide {
    grid-template-columns: 2fr 1fr;
}

.em-section-three_column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.em-section-component {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    cursor: move;
}

.em-component-preview {
    display: flex;
    align-items: center;
    gap: 10px;
}

.em-component-preview .dashicons {
    color: #0073aa;
    font-size: 16px;
}

.em-component-details strong {
    display: block;
    font-size: 12px;
    line-height: 1.3;
}

.em-component-details small {
    color: #666;
    font-size: 11px;
}

.em-component-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: #dc3232;
    cursor: pointer;
    padding: 2px;
}

.em-component-remove:hover {
    background: #dc3232;
    color: #fff;
    border-radius: 2px;
}

.em-section-placeholder {
    text-align: center;
    color: #999;
    padding: 30px;
    border: 2px dashed #ddd;
    border-radius: 4px;
}

.em-section-placeholder .dashicons {
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.em-component-placeholder {
    background: #f0f8ff;
    border: 2px dashed #0073aa;
    border-radius: 4px;
    height: 60px;
    margin: 5px 0;
}

/* Drag and Drop States */
.em-dragging {
    opacity: 0.7;
    transform: rotate(5deg);
    z-index: 1000;
}

.ui-sortable-helper {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Modal Styles */
.em-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-modal {
    background: #fff;
    border-radius: 4px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.em-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.em-modal-header h3 {
    margin: 0;
}

.em-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.em-modal-content {
    padding: 20px;
}

.em-section-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.em-section-type-option {
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.em-section-type-option:hover {
    border-color: #0073aa;
    background: #f0f8ff;
}

.em-section-type-option h4 {
    margin: 0 0 5px 0;
    color: #0073aa;
}

.em-section-type-option p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .em-custom-builder {
        flex-direction: column;
    }

    .em-builder-sidebar {
        width: 100%;
        max-height: 300px;
    }

    .em-mode-buttons {
        flex-direction: column;
    }

    .em-builder-actions {
        flex-wrap: wrap;
    }

    .em-section-two_column_equal,
    .em-section-two_column_wide,
    .em-section-three_column {
        grid-template-columns: 1fr;
    }

    .em-section-types {
        grid-template-columns: 1fr;
    }
}
</style>

<!-- JavaScript is handled by assets/js/layout-builder.js -->
