@php
use App\Helpers\FilterHelper;

$filterConfig = FilterHelper::getFilterConfig($dashboard);
if (empty($filterConfig)) {
    return;
}

$filters = $filterConfig['filters'] ?? [];

// Kiểm tra xem tất cả filter có auto-submit không
$allAutoSubmit = true;
foreach ($filters as $filterName => $config) {
    if ($config['enabled'] ?? true) {
        if (!FilterHelper::isAutoSubmit($dashboard, $filterName)) {
            $allAutoSubmit = false;
            break;
        }
    }
}

// Nếu tất cả filter đều auto-submit, ẩn nút Lọc
$showFilterButton = $allAutoSubmit ? false : ($filterConfig['show_filter_button'] ?? true);
$showResetButton = $filterConfig['show_reset_button'] ?? true;
@endphp

<div class="filter-section">
    <div class="row align-items-center">
        <form id="filter-form" method="GET" action="{{ $action ?? '' }}" class="d-flex align-items-center flex-wrap gap-2">
            @csrf
            
            @foreach($filters as $filterName => $filterConfig)
                @if($filterConfig['enabled'] ?? true)
                    {!! FilterHelper::renderFilter($dashboard, $filterName, [
                        'dashboard' => $dashboard,
                        'value' => request($filterName),
                        'items' => $data[$filterName] ?? [],
                        'selected' => request($filterName, [])
                    ]) !!}
                @endif
            @endforeach

            <div class="col-auto">
                <div class="d-flex gap-2">
                    @if($showFilterButton)
                        <button type="submit" class="btn btn-primary btn-sm" id="filter-btn">
                            <i class="fas fa-filter"></i> Lọc
                        </button>
                    @endif

                    @if($showResetButton)
                        <button type="button" class="btn btn-secondary btn-sm" id="reset-btn">
                            <i class="fas fa-redo"></i> Đặt lại
                        </button>
                    @endif
                    
                    {!! $slot ?? '' !!}
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Khởi tạo Select2 cho multiselect
    $('.select2-multiple').select2({
        width: '100%',
        closeOnSelect: false,
        allowClear: true,
        placeholder: function() {
            return $(this).data('placeholder');
        }
    });

    // Auto-submit cho các filter có data-auto-submit="true"
    $('.filter-input[data-auto-submit="true"]').on('change', function() {
        // Nếu có function filterByDate hoặc tương tự, gọi nó
        if (typeof filterByDate === 'function') {
            filterByDate();
        } else {
            $('#filter-form').submit();
        }
    });

    // Submit button - tương thích với code cũ
    $('#filter-btn').on('click', function(e) {
        e.preventDefault();
        if (typeof filterByDate === 'function') {
            filterByDate(e);
        } else {
            $('#filter-form').submit();
        }
    });

    // Reset button - tương thích với code cũ
    $('#reset-btn').on('click', function() {
        if (typeof resetFilter === 'function') {
            resetFilter();
        } else {
            // Clear tất cả input
            $('.filter-input').each(function() {
                if ($(this).is('input[type="date"]')) {
                    $(this).val(new Date().toISOString().split('T')[0]);
                } else {
                    $(this).val('').trigger('change');
                }
            });
            
            // Reset Select2
            $('.select2-multiple').val(null).trigger('change');
            
            // Submit form
            $('#filter-form').submit();
        }
    });

    // AJAX submit (nếu cần)
    @if($ajax ?? false)
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        
        const formData = $(this).serialize();
        const url = $(this).attr('action') || window.location.href;
        
        $.ajax({
            url: url,
            method: 'GET',
            data: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                // Trigger custom event để component khác xử lý
                $(document).trigger('dashboard:filtered', [response]);
                
                // Hoặc reload data trực tiếp
                if (typeof window.updateDashboardData === 'function') {
                    window.updateDashboardData(response);
                }
            },
            error: function(xhr) {
                console.error('Filter error:', xhr);
                alert('Có lỗi xảy ra khi lọc dữ liệu');
            }
        });
    });
    @endif
});
</script>
@endpush