@extends('layouts.app')

@section('title', 'Consulta de Animais')

@section('content')

<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-12  mt-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Consulta de Animais</h3>

                        <div class="card-tools">
                            <!-- <button type="submit" class="btn btn-default">
                                <i class="fas fa-filter"></i>
                            </button> -->
                        </div>
                    </div>

                    <div class="card-body">
                        <table class="table table-bordered yajra-datatable" id="all-animals">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>NOME</th>
                                    <th>TUTOR</th>
                                    <th>RAÇA</th>
                                    <th>SEXO</th>
                                    <th>OPÇÕES</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</section> <!-- /.content -->
@include('castracao.widgets.adicionar-modal')
@push('scripts')
<script>
    $(function () {
        $('#all-animals').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.2/i18n/pt-BR.json',
            },
            responsive: true,
            serverSide: true,
            processing: true,
            searchDelay: 1000,
            ajax: {
                url: "{{ route('animal.all') }}",
                type: "GET",
                data: function (d) {
                    return d;
                }
            },
            dom: 'Bfrtip',
            columns: [
                { data: 'id' },
                { data: 'nome' },
                { data: 'tutor', name: 'pessoa.nome' },
                { data: 'raca', name: 'raca' },
                { data: 'sexo', name: 'sexo' },
                { data: 'action', orderable: false, searchable: false },
            ]
        });

        // listening for show event of modal_lista_de_espera aka modal_default
        $('#modal-default').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_animal = button.data('animal-id'); // Extract info from data-* attributes
            var nome_animal = button.data('animal-nome'); // Extract info from data-* attributes
            $('#animal').empty();
            $('#animal').append('<option value="' + id_animal + '">' + nome_animal + '</option>');
            $('#animal_nome').val(nome_animal);
        });
    });
</script>
@endpush
@endsection