@props([
    'dateId' => 'reportDateRange',
    'dateValue' => 'Mar 01 – Mar 20, 2026',
    'select1Id' => 'reportEvent',
    'select1Label' => 'All Events',
    'select1Options' => [
        'all' => 'All',
        'nz2026' => 'NZ League 2026',
        'icl2026' => 'ICL League 2026'
    ],
    'select1Selected' => 'all',
    'select2Id' => 'reportStatus',
    'select2Label' => 'Status',
    'select2Options' => [
        'active' => 'Active',
        'inactive' => 'Inactive',
        'pending' => 'Pending'
    ],
    'select2Selected' => 'active',
    'searchId' => 'reportSearch',
    'searchPlaceholder' => 'Search Here...',
    'searchFirst' => false
])

<div class="filter-card mb-4">
    <div class="filter-grid txn-filter-grid">
        @if($searchFirst)
            <!-- Search Field First (Pending Tab Style) -->
            <div class="field">
                <div class="label">Search</div>
                <div class="search-wrap">
                    <input type="text" id="{{ $searchId }}" placeholder="{{ $searchPlaceholder }}" aria-label="Search records">
                    <span class="search-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#777777" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M22 22L20 20" stroke="#777777" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
            </div>
        @endif

        <!-- Date Range Field -->
        <div class="field">
            <div class="label">Date Range</div>
            <div class="date-wrap">
                <input type="text" id="{{ $dateId }}" value="{{ $dateValue }}" placeholder="Select Date Range" aria-label="Date Range">
                <div class="calendar">
                    <svg width="18" height="18" viewBox="0 0 24 24">
                        <path fill="#fff" d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 15H5V9h14z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Select 1 Field -->
        @if($select1Id)
            <div class="field">
                <div class="label">{{ $select1Label }}</div>
                <div class="select-wrap">
                    <select id="{{ $select1Id }}" aria-label="Select {{ $select1Label }}">
                        @foreach($select1Options as $optValue => $optLabel)
                            <option value="{{ $optValue }}" {{ $select1Selected == $optValue ? 'selected' : '' }}>{{ $optLabel }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif

        <!-- Select 2 Field -->
        @if($select2Id)
            <div class="field">
                <div class="label">{{ $select2Label }}</div>
                <div class="select-wrap">
                    <select id="{{ $select2Id }}" aria-label="Select {{ $select2Label }}">
                        @foreach($select2Options as $optValue => $optLabel)
                            <option value="{{ $optValue }}" {{ $select2Selected == $optValue ? 'selected' : '' }}>{{ $optLabel }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif

        @if(!$searchFirst)
            <!-- Search Field Last (Default Style) -->
            <div class="field">
                <div class="label">Search</div>
                <div class="search-wrap">
                    <input type="text" id="{{ $searchId }}" placeholder="{{ $searchPlaceholder }}" aria-label="Search records">
                    <span class="search-icon">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#777777" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M22 22L20 20" stroke="#777777" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </div>
            </div>
        @endif
    </div>
</div>