@php
    /**
     * Card de filtro elegante e padronizado para listagens CMS.
     *
     * Colapsável sob demanda: exibe busca + botões sempre visíveis;
     * filtros avançados (período + campos customizados via slot) ficam
     * ocultos por padrão, expandidos via toggle.
     *
     * Uso básico:
     *   @component('v2-cms::partials.filter-card', [
     *       'searchPlaceholder' => 'Buscar por nome, e-mail ou CPF...',
     *       'searchValue'       => request('search', ''),
     *       'action'            => route('v2.module.cms.index'),
     *       'showDateRange'     => true,
     *       'dateFrom'          => request('date_from', ''),
     *       'dateTo'            => request('date_to', ''),
     *   ])
     *       <div class="col-md-4">
     *           <select name="status" class="form-select form-select-sm">
     *               <option value="">Todos</option>
     *           </select>
     *       </div>
     *   @endcomponent
     *
     * @param string      $searchPlaceholder Placeholder do campo de busca
     * @param string|null $searchValue       Valor atual da busca (default: request('search'))
     * @param string|null $action            Action do form (default: url()->current())
     * @param string      $method            Método HTTP (default: GET)
     * @param bool        $showDateRange     Exibe campos de período (date_from / date_to)
     * @param string|null $dateFrom          Valor do campo date_from
     * @param string|null $dateTo            Valor do campo date_to
     * @param bool        $expandByDefault   Inicia expandido (mostrando filtros avançados)
     * @param string|null $searchName        Nome do campo de busca (default: 'search')
     */
    $searchPlaceholder = $searchPlaceholder ?? 'Buscar por termo... (suporta regex)';
    $searchValue       = $searchValue ?? request('search', '');
    $searchName        = $searchName ?? 'search';
    $action            = $action ?? url()->current();
    $method            = $method ?? 'GET';
    $showDateRange     = $showDateRange ?? false;
    $dateFrom          = $dateFrom ?? request('date_from', '');
    $dateTo            = $dateTo ?? request('date_to', '');
    $expandByDefault   = $expandByDefault ?? false;

    $hasAdvancedSlots = $slot !== '';
    $hasAdvanced = $showDateRange || $hasAdvancedSlots;

    // Determina se deve iniciar expandido
    $hasActiveFilters = !empty($searchValue) || !empty($dateFrom) || !empty($dateTo);
    $showExpanded = $expandByDefault || $hasActiveFilters;

    $collapseId = 'filter-advanced-' . md5($action . $searchName);
@endphp
<div class="card border shadow-sm mb-3">
    <div class="card-body py-2 px-3">
        <form method="{{ $method }}" action="{{ $action }}" class="row g-2 align-items-end" role="search">
            {{-- Busca --}}
            <div class="col-md-5 col-12">
                <label for="{{ $searchName }}" class="form-label visually-hidden">{{ strip_tags($searchPlaceholder) }}</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-transparent border-end-0">
                        <i class="bi bi-search text-muted" aria-hidden="true"></i>
                    </span>
                    <input type="text" id="{{ $searchName }}" name="{{ $searchName }}"
                           class="form-control border-start-0 ps-0"
                           placeholder="{{ $searchPlaceholder }}"
                           value="{{ $searchValue }}"
                           aria-label="{{ strip_tags($searchPlaceholder) }}">
                </div>
            </div>

            {{-- Botões — texto oculto no mobile, visível a partir de md --}}
            <div class="col-md-auto col-12 d-flex gap-1 justify-content-md-end justify-content-start flex-wrap">
                <button type="submit" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1"
                        title="Filtrar" aria-label="Filtrar">
                    <i class="bi bi-funnel" aria-hidden="true"></i>
                    <span class="d-none d-md-inline">Filtrar</span>
                </button>
                <a href="{{ url()->current() }}" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1"
                   title="Limpar filtros" aria-label="Limpar filtros">
                    <i class="bi bi-x-circle" aria-hidden="true"></i>
                    <span class="d-none d-md-inline">Limpar</span>
                </a>
                @if($hasAdvanced)
                    <button type="button" class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1"
                            data-bs-toggle="collapse"
                            data-bs-target="#{{ $collapseId }}"
                            aria-expanded="{{ $showExpanded ? 'true' : 'false' }}"
                            aria-controls="{{ $collapseId }}"
                            title="{{ $showExpanded ? 'Menos filtros' : 'Mais filtros' }}"
                            aria-label="{{ $showExpanded ? 'Menos filtros' : 'Mais filtros' }}">
                        <i class="bi bi-sliders" aria-hidden="true"></i>
                        <span class="d-none d-md-inline filter-toggle-label">{{ $showExpanded ? 'Menos filtros' : 'Mais filtros' }}</span>
                        <i class="bi {{ $showExpanded ? 'bi-chevron-up' : 'bi-chevron-down' }} filter-toggle-icon d-none d-md-inline" aria-hidden="true"></i>
                    </button>
                @endif
            </div>

            {{-- Filtros avançados (colapsável) --}}
            @if($hasAdvanced)
            <div class="col-12 collapse {{ $showExpanded ? 'show' : '' }}" id="{{ $collapseId }}">
                <hr class="my-2">
                <div class="row g-2 align-items-end">
                    @if($showDateRange)
                    <div class="col-md-3 col-6">
                        <label for="date_from_{{ md5($collapseId) }}" class="form-label small fw-medium text-muted mb-1">De</label>
                        <input type="text" id="date_from_{{ md5($collapseId) }}" name="date_from"
                               class="form-control form-control-sm"
                               placeholder="dd/mm/aaaa"
                               value="{{ $dateFrom }}"
                               data-picker="date"
                               autocomplete="off">
                    </div>
                    <div class="col-md-3 col-6">
                        <label for="date_to_{{ md5($collapseId) }}" class="form-label small fw-medium text-muted mb-1">Até</label>
                        <input type="text" id="date_to_{{ md5($collapseId) }}" name="date_to"
                               class="form-control form-control-sm"
                               placeholder="dd/mm/aaaa"
                               value="{{ $dateTo }}"
                               data-picker="date"
                               autocomplete="off">
                    </div>
                    @endif

                    {{-- Campos customizados (slot) --}}
                    {{ $slot }}
                </div>
            </div>
            @endif
        </form>
    </div>
</div>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var filterToggles = document.querySelectorAll('[data-bs-toggle="collapse"][data-bs-target^="#filter-advanced-"]');
    filterToggles.forEach(function(btn) {
        var targetId = btn.getAttribute('data-bs-target');
        var target = document.querySelector(targetId);
        if (!target) return;

        btn.addEventListener('click', function() {
            var isExpanded = btn.getAttribute('aria-expanded') === 'true';
            var label = btn.querySelector('.filter-toggle-label');
            var icon = btn.querySelector('.filter-toggle-icon');
            if (label) {
                label.textContent = isExpanded ? 'Menos filtros' : 'Mais filtros';
            }
            if (icon) {
                icon.className = 'bi ' + (isExpanded ? 'bi-chevron-up' : 'bi-chevron-down') + ' filter-toggle-icon';
            }
        });

        // Escuta o evento de collapse do Bootstrap
        target.addEventListener('shown.bs.collapse', function() {
            // Re-inicializa flatpickr para os campos de data que acabaram de ficar visíveis
            if (window.flatpickr) {
                target.querySelectorAll('[data-picker="date"]').forEach(function(el) {
                    if (!el._flatpickr) {
                        flatpickr(el, {
                            locale: 'pt',
                            dateFormat: 'Y-m-d',
                            altInput: true,
                            altFormat: 'd/m/Y',
                            allowInput: true
                        });
                    }
                });
            }
        });
    });
});
</script>
@endpush