<?php
/**
 * Layout Selector Component for Admin
 * Allows users to choose different layout configurations
 */
if (!defined('ABSPATH')) exit;

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

// Get current layout preference
$current_layout = $event_settings['em_layout_preference'] ?? 'default';
?>

<div class="em-layout-selector-wrapper">
    <h3><?php _e('Layout Configuration', 'event-monster'); ?></h3>
    <p class="description"><?php _e('Choose how your event components are arranged on the frontend.', 'event-monster'); ?></p>
    
    <div class="em-layout-options">
        
        <!-- Default Layout -->
        <div class="em-layout-option <?php echo ($current_layout === 'default') ? 'selected' : ''; ?>">
            <input type="radio" 
                   id="layout_default" 
                   name="em_layout_preference" 
                   value="default" 
                   <?php checked($current_layout, 'default'); ?>>
            <label for="layout_default">
                <div class="em-layout-preview">
                    <div class="em-layout-visual">
                        <!-- Visual representation of default layout -->
                        <div class="em-section single"></div>
                        <div class="em-section single"></div>
                        <div class="em-section single"></div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                        <div class="em-section three-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                    </div>
                    <div class="em-layout-info">
                        <h4><?php _e('Default Layout', 'event-monster'); ?></h4>
                        <p><?php echo em_get_layout_preview_free('default'); ?></p>
                        <ul>
                            <li><?php _e('Header, Content (single column)', 'event-monster'); ?></li>
                            <li><?php _e('Details + Map (two columns)', 'event-monster'); ?></li>
                            <li><?php _e('Gallery (single column)', 'event-monster'); ?></li>
                            <li><?php _e('Speakers, Organizers, Sponsors (three columns)', 'event-monster'); ?></li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>
        
        <!-- Compact Layout -->
        <div class="em-layout-option <?php echo ($current_layout === 'compact') ? 'selected' : ''; ?>">
            <input type="radio" 
                   id="layout_compact" 
                   name="em_layout_preference" 
                   value="compact" 
                   <?php checked($current_layout, 'compact'); ?>>
            <label for="layout_compact">
                <div class="em-layout-preview">
                    <div class="em-layout-visual">
                        <!-- Visual representation of compact layout -->
                        <div class="em-section single"></div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section two-col-wide">
                            <div class="em-col wide"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section three-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                    </div>
                    <div class="em-layout-info">
                        <h4><?php _e('Compact Layout', 'event-monster'); ?></h4>
                        <p><?php echo em_get_layout_preview_free('compact'); ?></p>
                        <ul>
                            <li><?php _e('More multi-column sections', 'event-monster'); ?></li>
                            <li><?php _e('Space-efficient design', 'event-monster'); ?></li>
                            <li><?php _e('Better for content-heavy events', 'event-monster'); ?></li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>
        
        <!-- Detailed Layout -->
        <div class="em-layout-option <?php echo ($current_layout === 'detailed') ? 'selected' : ''; ?>">
            <input type="radio" 
                   id="layout_detailed" 
                   name="em_layout_preference" 
                   value="detailed" 
                   <?php checked($current_layout, 'detailed'); ?>>
            <label for="layout_detailed">
                <div class="em-layout-preview">
                    <div class="em-layout-visual">
                        <!-- Visual representation of detailed layout -->
                        <div class="em-section single"></div>
                        <div class="em-section single"></div>
                        <div class="em-section two-col-wide">
                            <div class="em-col wide"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section two-col-wide">
                            <div class="em-col wide"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                    </div>
                    <div class="em-layout-info">
                        <h4><?php _e('Detailed Layout', 'event-monster'); ?></h4>
                        <p><?php echo em_get_layout_preview_free('detailed'); ?></p>
                        <ul>
                            <li><?php _e('Focus on event information', 'event-monster'); ?></li>
                            <li><?php _e('Prominent details section', 'event-monster'); ?></li>
                            <li><?php _e('Good for informational events', 'event-monster'); ?></li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>
        
        <!-- Visual Layout -->
        <div class="em-layout-option <?php echo ($current_layout === 'visual') ? 'selected' : ''; ?>">
            <input type="radio" 
                   id="layout_visual" 
                   name="em_layout_preference" 
                   value="visual" 
                   <?php checked($current_layout, 'visual'); ?>>
            <label for="layout_visual">
                <div class="em-layout-preview">
                    <div class="em-layout-visual">
                        <!-- Visual representation of visual layout -->
                        <div class="em-section single"></div>
                        <div class="em-section single large"></div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section two-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section three-col">
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                            <div class="em-col"></div>
                        </div>
                        <div class="em-section single"></div>
                    </div>
                    <div class="em-layout-info">
                        <h4><?php _e('Visual Layout', 'event-monster'); ?></h4>
                        <p><?php echo em_get_layout_preview_free('visual'); ?></p>
                        <ul>
                            <li><?php _e('Prominent gallery section', 'event-monster'); ?></li>
                            <li><?php _e('Media-focused design', 'event-monster'); ?></li>
                            <li><?php _e('Great for visual events', 'event-monster'); ?></li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>

        <!-- Magazine Layout -->
        <div class="em-layout-option <?php echo ($current_layout === 'magazine') ? 'selected' : ''; ?>">
            <input type="radio"
                   id="layout_magazine"
                   name="em_layout_preference"
                   value="magazine"
                   <?php checked($current_layout, 'magazine'); ?>>
            <label for="layout_magazine">
                <div class="em-layout-preview">
                    <div class="em-layout-visual magazine-layout">
                        <!-- Visual representation of magazine layout -->
                        <div class="em-section single"></div>
                        <div class="em-magazine-grid">
                            <div class="em-main-content">
                                <div class="em-section single"></div>
                                <div class="em-section single"></div>
                                <div class="em-section single"></div>
                                <div class="em-section single"></div>
                            </div>
                            <div class="em-sidebar">
                                <div class="em-section small"></div>
                                <div class="em-section small"></div>
                                <div class="em-section small"></div>
                                <div class="em-section small"></div>
                                <div class="em-section small"></div>
                                <div class="em-section small"></div>
                            </div>
                        </div>
                    </div>
                    <div class="em-layout-info">
                        <h4><?php _e('Magazine Layout', 'event-monster'); ?></h4>
                        <p><?php echo em_get_layout_preview_free('magazine'); ?></p>
                        <ul>
                            <li><?php _e('Full-width banner header', 'event-monster'); ?></li>
                            <li><?php _e('Main content with sidebar', 'event-monster'); ?></li>
                            <li><?php _e('Magazine-style design', 'event-monster'); ?></li>
                        </ul>
                    </div>
                </div>
            </label>
        </div>

    </div>
    
    <!-- Preview Button -->
    <div class="em-layout-actions">
        <button type="button" class="button button-secondary" id="em-preview-layout">
            <?php _e('Preview Layout', 'event-monster'); ?>
        </button>
        <span class="description"><?php _e('Preview how your event will look with the selected layout.', 'event-monster'); ?></span>
    </div>
    
</div>

<style>
/* Layout Selector Styles */
.em-layout-selector-wrapper {
    margin: 20px 0;
}

.em-layout-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.em-layout-option {
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.em-layout-option:hover {
    border-color: #0073aa;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.1);
}

.em-layout-option.selected {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

.em-layout-option input[type="radio"] {
    display: none;
}

.em-layout-option label {
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.em-layout-preview {
    padding: 15px;
}

.em-layout-visual {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    min-height: 120px;
}

.em-section {
    background: #0073aa;
    margin-bottom: 4px;
    border-radius: 2px;
    height: 12px;
    opacity: 0.7;
}

.em-section.large {
    height: 20px;
}

.em-section.two-col,
.em-section.two-col-wide,
.em-section.three-col {
    display: flex;
    gap: 4px;
    height: auto;
    background: none;
}

.em-col {
    background: #0073aa;
    height: 12px;
    border-radius: 2px;
    flex: 1;
    opacity: 0.7;
}

.em-col.wide {
    flex: 2;
}

.em-layout-info h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.em-layout-info p {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
}

.em-layout-info ul {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    color: #666;
}

.em-layout-info li {
    margin-bottom: 2px;
}

/* Magazine Layout Styles */
.em-layout-visual.magazine-layout {
    background: #f0f9ff;
    padding: 8px;
}

.em-magazine-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.em-main-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.em-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.em-layout-visual .em-section.small {
    height: 15px;
    background: #e2e8f0;
    border-radius: 2px;
}

.em-layout-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.em-layout-actions .description {
    margin-left: 10px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .em-layout-options {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Handle layout selection
    $('input[name="em_layout_preference"]').on('change', function() {
        $('.em-layout-option').removeClass('selected');
        $(this).closest('.em-layout-option').addClass('selected');
    });
    
    // Preview layout functionality
    $('#em-preview-layout').on('click', function() {
        const selectedLayout = $('input[name="em_layout_preference"]:checked').val();
        
        // Open preview in new window/tab
        const previewUrl = '<?php echo admin_url('admin-ajax.php'); ?>?action=em_preview_layout&layout=' + selectedLayout + '&event_id=<?php echo $event_id; ?>';
        window.open(previewUrl, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
    });
});
</script>
