@props(['placeholder' => 'Pesquisar...', 'name' => 'search', 'value' => ''])

<div class="search-bar">
    <input
        type="text"
        name="{{ $name }}"
        class="search-input"
        placeholder="{{ $placeholder }}"
        value="{{ $value }}"
        {{ $attributes }}
    >
    <i class="fas fa-search search-icon"></i>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ request()->url() }}" id="searchForm">
            <div class="row g-3 align-items-end">
                <!-- Busca -->
                <div class="col-md-4">
                    <label for="search" class="form-label">Buscar</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" 
                               name="search" 
                               id="search" 
                               class="form-control" 
                               placeholder="Digite para buscar..." 
                               value="{{ request('search') }}">
                    </div>
                </div>
                
                <!-- Itens por página -->
                <div class="col-md-2">
                    <label for="per_page" class="form-label">Exibir</label>
                    <select name="per_page" id="per_page" class="form-select" onchange="document.getElementById('searchForm').submit()">
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>
                
                <!-- Ordenação -->
                <div class="col-md-3">
                    <label for="sort_by" class="form-label">Ordenar por</label>
                    <select name="sort_by" id="sort_by" class="form-select" onchange="document.getElementById('searchForm').submit()">
                        @foreach($sortOptions ?? [] as $value => $label)
                            <option value="{{ $value }}" {{ request('sort_by', 'id') == $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <!-- Ordem -->
                <div class="col-md-2">
                    <label for="sort_order" class="form-label">Ordem</label>
                    <select name="sort_order" id="sort_order" class="form-select" onchange="document.getElementById('searchForm').submit()">
                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Crescente</option>
                        <option value="desc" {{ request('sort_order', 'desc') == 'desc' ? 'selected' : '' }}>Decrescente</option>
                    </select>
                </div>
                
                <!-- Botões -->
                <div class="col-md-1">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-funnel"></i>
                        </button>
                        @if(request()->hasAny(['search', 'per_page', 'sort_by', 'sort_order']))
                            <a href="{{ request()->url() }}" class="btn btn-secondary" title="Limpar filtros">
                                <i class="bi bi-x-circle"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@if(request('search'))
    <div class="alert alert-info">
        <i class="bi bi-info-circle"></i> 
        Buscando por: <strong>{{ request('search') }}</strong>
        <span class="ms-2">|</span>
        <span class="ms-2">{{ $items->total() }} resultado(s) encontrado(s)</span>
    </div>
@endif