@props([
    'model' => '',
    'selectedDates' => []
])

<span 
    {{ $attributes }}
    id="filter-{{ $model }}"
    x-data
    x-ref="picker"
    x-init="() => {
        let picker = $($refs.picker);

        picker.daterangepicker({
            opens: 'left',
            ranges: {
                '@lang("Last 7 days")': [moment().subtract(6, 'days'), moment()],
                '@lang("Last 30 days")': [moment().subtract(29, 'days'), moment()],
                '@lang("Last 3 months")': [moment().subtract(3, 'month'), moment()],
                '@lang("Last year")': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                '@lang("This year")': [moment().startOf('year'), moment().endOf('year')],
                '@lang("Last month")': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                '@lang("This month")': [moment().startOf('month'), moment().endOf('month')]
            }
        }, function (start, end, label) {
            var range = start.format('MMM D') + ' - ' + end.format('MMM D');
            {{-- picker.find('.daterange-date').html(range); --}}
            @this.set('{{ $model }}', {
                start: start.format('YYYY-MM-DD'),
                end: end.format('YYYY-MM-DD')
            });
        });

        picker.on('cancel.daterangepicker', function () {
            @this.set('{{ $model }}', {});
            $(this).data('daterangepicker').setStartDate(moment().format('MM-DD-YYYY'))
            $(this).data('daterangepicker').setEndDate(moment().format('MM-DD-YYYY'));
        });
    }"
    style="cursor: pointer"
>
    <span class="daterange-date">

        @if($this->filters['daterange']['start'] ?? false)
            <x-ui.date :date="$this->filters['daterange']['start']" format="M d"/> - 
            <x-ui.date :date="$this->filters['daterange']['end'] ?? now()" format="M d"/>
        @else
            @lang('Select dates')
        @endif
    </span>
    <em class="icon ni ni-calendar"></em>
</span>