@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 Atendimentos'
@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>
                        <small>{{ $dataCliente->id_provedor_clientes . " - " . $dataCliente->Pessoa->nome_pessoa }}</small>
                        <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('atendimentoprovedor.show', ['0', $idCli]) }}"><i>Novo Atendimento</i></button>
                        <button id="btVoltar" style="width: 150px;" class="btn btn-warning btn-icon float-left"
                            type="button"><i>Voltar</i></button>
                    </div>
                </div>
                @if(session('error'))
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        </div>
                    </div>
                @endif
            </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>Prioridade</th>
                                                <th>Protocolo</th>
                                                <th>Queixa</th>
                                                <th>Registro</th>
                                                <th>Tipo</th>
                                                <th>Andamento</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>Id</th>
                                                <th>Prioridade</th>
                                                <th>Protocolo</th>
                                                <th>Queixa</th>
                                                <th>Registro</th>
                                                <th>Tipo</th>
                                                <th>Andamento</th>
                                            </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: [[6, 'ASC'], [0, 'DESC']],
                pageLength: 100,
                ajax: {
                    url: "{!!  route('atendimentoprovedor.listDataTable') !!}",
                    data: {
                        'idCli': {{ $idCli }}
                    },
                    dataFilter: function(data) {
                        var json = jQuery.parseJSON(data);
                        console.log(data);
                        return JSON.stringify(json);
                    }
                },
                columns: [
                    {
                        data: 'id_provedor_atendimento'
                    },
                    {
                        data: 'prioridade_provedor_atendimento'
                    },
                    {
                        data: 'protocolo_provedor_atendimento'
                    },
                    {
                        data: 'queixa_provedor_atendimento'
                    },
                    {
                        data: 'registro_provedor_atendimento'
                    },
                    {
                        data: 'tipo_provedor_atendimento'
                    },
                    {
                        data: 'status_provedor_atendimento'
                    }
                ],
                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('atendimentoprovedor.show') }}/" + $(this).closest('tr').children()[0].textContent + "/{{ $idCli }}");
        });

        $('#btVoltar').click(function() {
            $(location).attr('href', "{{ route('clienteprovedor.show') }}/{{ $idCli }}/{{ $dataCliente->Pessoa->id_pessoa  }}");
        });
    </script>
@endsection