@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css') }}">
@endsection

@section('csss')
    <style>
        tbody {
            cursor: pointer;
        }

    </style>
@endsection

@php
    $title = 'Lista de Planos'    
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')
    <section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2 class="uppercase">{{ $title }}</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                                class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-sm-12">
                        <button id="btNovo" style="width: 150px;" class="btn btn-primary btn-icon float-left"
                            type="button"  data-urlnew="{{ route('planoprovedor.show', '0') }}"><i>Nova Registro</i></button>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="header">

                            </div>
                            <div class="body">
                                <div class="table-responsive">
                                    <table id="listarDataTable" width="100%"
                                        class="table table-bordered table-striped table-hover js-basic-example dataTableordered table-striped table-hover dataTable">
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Descrição</th>
                                                <th>Valor</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>Id</th>
                                                <th>Descrição</th>
                                                <th>Valor</
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scriptUrl')
    <!-- Jquery DataTable Plugin Js -->
    <script src="{{ asset('assets/bundles/datatablescripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/js/formjs.js') }}"></script>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            $('#listarDataTable').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                order: [0, 'desc'],
                ajax: {
                    url: "{!!  route('planoprovedor.listDataTable') !!}",
                    dataFilter: function(data) {
                        var json = jQuery.parseJSON(data);
                        console.log(data);
                        return JSON.stringify(json);
                    }
                },
                columns: [{
                        data: 'id_provedor_planos'
                    },
                    {
                        data: 'desc_provedor_planos'
                    },
                    {
                        data: 'valor_provedor_planos'
                    }
                ],
                language: {
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    "infoEmpty": "Sem registros",
                    "infoFiltered": 'filtrados de _MAX_ registros',
                    "emptyTable": "Nenhum registro avaliado na tabela",
                    "zeroRecords": "Nenhum registro encontrado para a busca",
                    "lengthMenu": "Mostrando _MENU_ registros",
                    "searchPlaceHolder": 'Filtro',
                    "search": 'Digite sua busca:',
                    "processing": "Aguarde por favor",
                    paginate: {
                        first: '<<',
                        last: '>>',
                        previous: 'Anterior',
                        next: 'Próximo'
                    }
                }
            });
        });

        $('#listarDataTable').on('click', 'tbody tr td', function() {
            $(location).attr('href', "{{  route('planoprovedor.show') }}/" + $(this).closest('tr').children()[0].textContent);
        });
    </script>
@endsection