{{--
    Shared filter bar. Passing `formAction` plus the *Name props turns it into a
    real GET form that reloads the listing; without them it renders as the
    static display-only bar the detail-page tabs still use.
--}}
@props([
    'formAction' => null,
    'hiddenFields' => [],
    'dateId' => 'reportDateRange',
    'dateName' => null,
    'dateValue' => 'Mar 01 – Mar 20, 2026',
    'select1Id' => 'reportEvent',
    'select1Name' => null,
    'select1Label' => 'All Events',
    'select1Options' => [
        'all' => 'All',
        'nz2026' => 'NZ League 2026',
        'icl2026' => 'ICL League 2026'
    ],
    'select1Selected' => 'all',
    'select2Id' => 'reportStatus',
    'select2Name' => null,
    'select2Label' => 'Status',
    'select2Options' => [
        'active' => 'Active',
        'inactive' => 'Inactive',
        'pending' => 'Pending'
    ],
    'select2Selected' => 'active',
    'searchId' => 'reportSearch',
    'searchName' => null,
    'searchValue' => '',
    'searchPlaceholder' => 'Search Here...',
    'searchFirst' => false
])

@php
    $isForm = (bool) $formAction;
    // The custom dropdowns fire a bubbling change event on the hidden native
    // select, so submitting on change works for both.
    $autoSubmit = $isForm ? 'this.form.submit()' : null;
@endphp

<div class="filter-card mb-4">
    <{{ $isForm ? 'form' : 'div' }}
        @if($isForm) method="GET" action="{{ $formAction }}" @endif
        class="filter-grid txn-filter-grid">
        @if($isForm)
            @foreach($hiddenFields as $hiddenName => $hiddenValue)
                <input type="hidden" name="{{ $hiddenName }}" value="{{ $hiddenValue }}">
            @endforeach
        @endif
        @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 }}" @if($searchName) name="{{ $searchName }}" @endif value="{{ $searchValue }}" 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 }}" @if($dateName) name="{{ $dateName }}" @endif 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 }}" @if($select1Name) name="{{ $select1Name }}" @endif @if($autoSubmit) onchange="{{ $autoSubmit }}" @endif aria-label="Select {{ $select1Label }}">
                        @foreach($select1Options as $optValue => $optLabel)
                            <option value="{{ $optValue }}" {{ (string) $select1Selected === (string) $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 }}" @if($select2Name) name="{{ $select2Name }}" @endif @if($autoSubmit) onchange="{{ $autoSubmit }}" @endif aria-label="Select {{ $select2Label }}">
                        @foreach($select2Options as $optValue => $optLabel)
                            <option value="{{ $optValue }}" {{ (string) $select2Selected === (string) $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 }}" @if($searchName) name="{{ $searchName }}" @endif value="{{ $searchValue }}" 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
    </{{ $isForm ? 'form' : 'div' }}>
</div>