@props([
'filters'=>[],
])
<div class="filtersection d-flex justify-content-between mb-3 gap-2 flex-wrap flex-md-nowrap" x-data x-init="
            const el = $refs.datefilter;
            $(el).daterangepicker({
                autoUpdateInput: false,
                locale: { cancelLabel: 'Clear' }
            });

            $(el).on('apply.daterangepicker', function(ev, picker) {
                const val = picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD');
                el.value = val;
                el.dispatchEvent(new Event('input')); // <-- this line notifies Livewire
            });

            $(el).on('cancel.daterangepicker', function() {
                el.value = '';
                el.dispatchEvent(new Event('input')); // notify Livewire about clear
            });
        ">
    <input type="text" class="form-control rounded-4" placeholder="Search by Keyword" wire:model.live="filters.keyword"
        wire:key="search-input-{{ @$filters['keyword'] }}">

    <select class="form-select prf-int" wire:model.live="filters.ico_type"
        wire:key="select-input-{{ @$filters['ico_type'] }}" aria-label="Airdrop Type" id="ico_type_id">
        <option value="" @if (request('ico_type') == '') selected @endif>All</option>
        <option value="Ongoing" @if (request('ico_type') == 'Ongoing') selected @endif>Ongoing</option>
        <option value="Upcoming" @if (request('ico_type') == 'Upcoming') selected @endif>Upcoming</option>
        <option value="Ended" @if (request('ico_type') == 'Ended') selected @endif>Ended</option>
    </select>

    <input x-ref="datefilter" type="text" id="datefilter" class="form-control rounded-4" placeholder="Select date range"
        wire:model.live="filters.date" wire:key="date-input-{{ @$filters['date'] }}">

    <div class="d-flex justify-content-end gap-2">
        <button class="btn mainbluebtn rounded-4" wire:click="applyFilters"><i class="fa-solid fa-magnifying-glass"></i>
            Search</button>
        <button class="btn mainbluebtn rounded-4" wire:click="resetFilters" type="button"><i class="fa-solid fa-arrows-rotate"></i>
            Reset</button>
    </div>


    <!-- Static Tags  -->

    <!-- Static Tags  -->
</div>
@if(!empty($exchangeWiseIdo['top']) && $exchangeWiseIdo['top']->count() > 0)
    <div class="row py-2 bg-white">
        <div class="col-12">
            <div class="d-flex align-items-center flex-wrap">
                <span class="me-2 text-downriver h6 mb-0 fw-medium">{{ $type == 1 ? 'IDO' : 'IEO' }} By Exchange</span>

                <div class="d-flex align-items-center flex-wrap">
                    @if(!empty($exchangeWiseIdo['top']) && $exchangeWiseIdo['top']->count() > 0)
                        @foreach ($exchangeWiseIdo['top'] as $val)
                            <a href="{{ CommonHelper::makeUrl($val->tag_url) }}"
                                class="text-decoration-none bluetext bg-lightblue shadow px-3 py-1 rounded-pill border  my-2"
                                title="{{ $val->name ?? $val->title }}">
                                <span>{{ $val->title }}</span>
                                <small>({{ $val->total_ieo }})</small>
                            </a>
                        @endforeach
                    @else
                        <div class="text-muted small py-2 px-3">
                            No IDO exchanges found.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif