<?php
namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Repeater;

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

class Filters_Compact extends AI_Widget_Base {
    public function get_name() { return 'ai_filters_compact'; }
    public function get_title() { return __('Filters Compact', 'ai-theme'); }
    public function get_icon() { return 'eicon-filter'; }
    public function get_categories() { return array('ai-theme-filters'); }

    protected function register_controls() {
        $this->start_controls_section('content_section', ['label' => __('Content', 'ai-theme'), 'tab' => Controls_Manager::TAB_CONTENT]);

        $repeater = new Repeater();
        $repeater->add_control('name', ['label' => __('Filter Name', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $repeater->add_control('options', ['label' => __('Options (one per line)', 'ai-theme'), 'type' => Controls_Manager::TEXTAREA]);
        $this->add_control('filters', ['label' => __('Filters', 'ai-theme'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls()]);
        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        ?>
        <div class="ai-filters ai-filters-compact bg-white py-12">
            <div class="ai-container">
                <!-- Compact Panel -->
                <div class="flex items-center gap-3 mb-6">
                    <!-- Filters Button -->
                    <button class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700">
                        <span><?php _e('Filters', 'ai-theme'); ?></span>
                    </button>

                    <!-- Sort Dropdown -->
                    <?php foreach ($s['filters'] as $filter) : ?>
                    <div class="relative">
                        <select class="ai-filter-select flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700 min-w-[200px]" name="<?php echo sanitize_title($filter['name']); ?>">
                            <option value=""><?php echo esc_html($filter['name']); ?></option>
                            <?php foreach (explode("\n", $filter['options']) as $opt) : if (trim($opt)) : ?>
                            <option value="<?php echo esc_attr(sanitize_title($opt)); ?>"><?php echo esc_html(trim($opt)); ?></option>
                            <?php endif; endforeach; ?>
                        </select>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php
    }
}
