@extends('layouts.app')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>User Roles</h1>
            </div>
            <div class="col-sm-3 ml-auto">
                <div class="search_bar">
                    <div class="input-group" >
                        <input class="form-control form-control-sidebar" id="search" type="search" placeholder="Search" aria-label="Search" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>

<div class="content px-3">

    @include('flash::message')

    <div class="clearfix"></div>

    <div class="card">
        <div class="card-body p-0" id="view">
            @include('user_roles.table')

            <div class="card-footer clearfix">
                <div class="float-right">
                    @include('adminlte-templates::common.paginate', ['records' => $users])
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    fetchUserRoles(1);

    $("#search").on("keyup", (e) => {
        fetchUserRoles(1);
    });

    $(document).on('click', '.pagination a', function(event) {
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        var sendurl = $(this).attr('href');
        fetchUserRoles(page);
    });

    function fetchUserRoles(page) {
        $('#page-loader').show();
        var search = document.querySelector("#search").value;
        //   page = (page='')?'1':page;
        var data = {
            search
        };
        var make_url = "{{url('/')}}/users-role/search?page=" + page;
        $.ajax({
            url: make_url,
            data: data,
            success: function(data) {
                $('#view').empty().html(data);
                $('#page-loader').hide();
            },
            error: function(error) {
                $('#page-loader').hide();

            }
        });
    }
</script>
@endsection