@props(['route'])
<div class="p-3"> 
    <form action="{{$route}}" method="GET" class="w-full" id="searchForm">
        <div class="bg-white shadow-sm flex items-center pl-3 border rounded-full overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-0 ">
            <span class="fas fa-search text-gray-500 mr-3"></span>
            <input type="search" class="flex-grow border-0 ring-0 bg-white placeholder:text-gray-200 focus:border-0 focus:ring-0" id="q" name="q" placeholder="Karohy eto" value="{{Request::input('q')}}" required  autofocus autocomplete="q"/>
        </div>
    </form>
</div>
<script type="module">
$(document).ready(function(){
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
        }
    });
    
    function fetch_data(query=''){
        var uri=$("#searchForm").attr("action");
        $.ajax({
            type:'POST',
            url:uri,
            dataType:"json",
            data:{data:query},
            success:function(response){
                $("#liste").html(response.tbody);
                $("#pagination").html(response.pagination);
            }
            
        });
    };
    $("#q").keyup(function(){
        var query=$(this).val();
        fetch_data(query);
    });

});
    
</script>