<?php
/**
 * Event List Filters Component
 * Separate component for event filtering functionality
 */

if (!defined('ABSPATH')) exit;

// This file expects $categories and $list_id to be available
?>

<!-- Event List Filters -->
<section class="em-filters-section" id="em-filters-<?php echo esc_attr($list_id); ?>">
    <div class="em-filters-header">
        <h3 class="em-filters-title"><?php _e('Filter Events', 'event-monster'); ?></h3>
        <button type="button" class="em-filters-toggle" onclick="toggleFilters('<?php echo esc_attr($list_id); ?>')">
            <span class="em-toggle-text"><?php _e('Hide Filters', 'event-monster'); ?></span>
            <svg class="em-toggle-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </button>
    </div>
    
    <div class="em-filters-content" id="em-filters-content-<?php echo esc_attr($list_id); ?>">
        <div class="em-filters-grid">
            <!-- Keyword Search -->
            <div class="em-filter-group">
                <label for="em-keyword-search-<?php echo esc_attr($list_id); ?>"><?php _e('Keyword', 'event-monster'); ?></label>
                <input type="text" id="em-keyword-search-<?php echo esc_attr($list_id); ?>" class="em-filter-input" placeholder="<?php _e('Search events...', 'event-monster'); ?>">
            </div>
            
            <!-- Category Filter -->
            <div class="em-filter-group">
                <label for="em-category-filter-<?php echo esc_attr($list_id); ?>"><?php _e('Category', 'event-monster'); ?></label>
                <select id="em-category-filter-<?php echo esc_attr($list_id); ?>" class="em-filter-input">
                    <option value="all"><?php _e('All Categories', 'event-monster'); ?></option>
                    <?php foreach ($categories as $category): ?>
                        <option value="<?php echo esc_attr(strtolower($category)); ?>"><?php echo esc_html($category); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <!-- Date Filters -->
            <div class="em-filter-group">
                <label for="em-date-from-<?php echo esc_attr($list_id); ?>"><?php _e('From', 'event-monster'); ?></label>
                <input type="date" id="em-date-from-<?php echo esc_attr($list_id); ?>" class="em-filter-input">
            </div>
            
            <div class="em-filter-group">
                <label for="em-date-to-<?php echo esc_attr($list_id); ?>"><?php _e('To', 'event-monster'); ?></label>
                <input type="date" id="em-date-to-<?php echo esc_attr($list_id); ?>" class="em-filter-input">
            </div>
        </div>
        
        <!-- Filter Actions -->
        <div class="em-filter-actions">
            <button type="button" class="em-filter-clear" onclick="clearFilters('<?php echo esc_attr($list_id); ?>')">
                <?php _e('Clear All', 'event-monster'); ?>
            </button>
            <div class="em-filter-results">
                <span id="em-results-count-<?php echo esc_attr($list_id); ?>"></span>
            </div>
        </div>
    </div>
</section>

<style>
/* Filter Component Styles */
.em-filters-section {
    margin-bottom: 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.em-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.em-filters-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.em-filters-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.em-filters-toggle:hover {
    background-color: #eef2ff;
}

.em-toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.em-filters-toggle.collapsed .em-toggle-icon {
    transform: rotate(-90deg);
}

.em-filters-content {
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.em-filters-content.collapsed {
    display: none;
}

.em-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .em-filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.em-filter-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.em-filter-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.em-filter-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.em-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.em-filter-clear {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.em-filter-clear:hover {
    background: #dc2626;
}

.em-filter-results {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}
</style>

<script>
// Filter toggle functionality
function toggleFilters(listId) {
    const content = document.getElementById('em-filters-content-' + listId);
    const toggle = document.querySelector('#em-filters-' + listId + ' .em-filters-toggle');
    const toggleText = toggle.querySelector('.em-toggle-text');
    
    if (content.classList.contains('collapsed')) {
        content.classList.remove('collapsed');
        toggle.classList.remove('collapsed');
        toggleText.textContent = '<?php _e('Hide Filters', 'event-monster'); ?>';
    } else {
        content.classList.add('collapsed');
        toggle.classList.add('collapsed');
        toggleText.textContent = '<?php _e('Show Filters', 'event-monster'); ?>';
    }
}

// Clear all filters
function clearFilters(listId) {
    document.getElementById('em-keyword-search-' + listId).value = '';
    document.getElementById('em-category-filter-' + listId).value = 'all';
    document.getElementById('em-date-from-' + listId).value = '';
    document.getElementById('em-date-to-' + listId).value = '';
    
    // Trigger filter event
    if (window.emFilterEvents) {
        window.emFilterEvents(listId);
    }
}
</script>
