@php
    // $start_id = $name . '_start_date_' . rand(0, 100);
    // $end_id = $name . '_end_date_' . rand(0, 100);
    $range_id = $name . '_range_date_' . rand(0, 100);
    $max = $column_params['max'] ?? false;
    $min = $column_params['min'] ?? false;
    $required = $column_params['required'] ?? false;
@endphp
{{-- <input type="text" class="form-control" id="{{ $start_id }}">
<input type="text" class="form-control" id="{{ $end_id }}"> --}}
<input type="text" class="form-control" id="{{ $range_id }}">
@push('filter_scripts')
{{-- var {{ $name }}_start_date = '';
var {{ $name }}_end_date = ''; --}}
function {{ $name }}_date_filter(value) {
    {{ $table_options['id'] }}.columns("{{ $column_name }}:name").search( value ).draw();
}
{{-- $("#{{ $start_id }}").flatpickr({
    enableTime: true,
    enableSeconds: true,
    allowInput: true,
    dateFormat: "Y-m-d H:i:S",
    time_24hr: true,
    onChange: function(selectedDates, dateStr, instance) {
        {{ $name }}_start_date = dateStr;
        {{ $name }}_date_filter();
    }
});
$("#{{ $end_id }}").flatpickr({
    enableTime: true,
    enableSeconds: true,
    allowInput: true,
    dateFormat: "Y-m-d H:i:S",
    time_24hr: true,
    onChange: function(selectedDates, dateStr, instance) {
        {{ $name }}_end_date = dateStr;
        {{ $name }}_date_filter();
    }
}); --}}
$("#{{ $range_id }}").flatpickr({
    enableTime: true,
    enableSeconds: true,
    dateFormat: "Y-m-d H:i:S",
    time_24hr: true,
    mode: "range",
    onChange: function(selectedDates, dateStr, instance) {
        console.log(dateStr);
        {{ $name }}_date_filter(dateStr);
    }
});
@endpush