@extends('layouts.admin')
@section('content')

    <div class="card-header">Lista de Ramais</div>
    <div class="card-body">
        <div class='actions PB-20'>
            @can('ramal.create')
            <a class="btn btn-primary active register-create d-inline" onclick="setaCreate();" role="button" aria-pressed="true" data-toggle="modal" data-target="#modalFormRamaisDiv"><i class="fas fa-plus"></i> Novo Ramal</a>
            @endcan
            <input id="search-register" class="form-control col-4 d-inline input-busca" type="search" placeholder="Digite o que deseja encontrar" aria-label="Search">
        </div>
        <br/>
        <div id='table' class="shadow">
            @include('admin.ramal.table')
        </div>
    </div>
     <!-- ADICIONAR NOVO RAMAL -->
     @include('admin.ramal.modal')

@endsection
@push('scripts')
<script>

    //Obtem o que foi digitado e envia para a function atualizaTable
    $(document).keypress(function(e) {
        if(e.which == 13) {
            atualizarTable($("#search-register").val());
        }
    });

    //Atualiza a listagem dos registros da tabela
    function atualizarTable(data)
    {
        var complementoUrl = data ? data : "''";

        $.ajax({
            type: 'GET',
            data: data,
            url: '/admin/ramais/atualizarAjax/'+ complementoUrl,
            success: function(data){
                $('#table').html(data);
            },
            error: function(){
                alert("Algo deu errado!");
            }
        });
            return false;
    }
</script>
@endpush