@extends("layouts.base")

@section("head")
    <!-- Script JavaScript pour le tableau (DataTables) -->
    <link href="{{ asset('vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/dt-1.13.8/b-2.4.2/sp-2.2.0/datatables.js"></script>
@endsection

@section("content")

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Liste des comptes viewers </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered display" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nome</th>
                            <th>Quantidade</th>
                            <th>data</th>
                            <th>Banco</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transactions as $transaction)
                            <tr>
                                <td>{{ $transaction->id }}</td>
                                <td>{{ $transaction->name }}</td>
                                <td>{{ $transaction->amount }}</td>
                                <td>{{ $transaction->date }}</td>
                                <td>{{ $transaction->banco->nome ?? "nenhum banco atribuido"}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
        <!-- Script JavaScript pour le tableau (DataTables) -->
        <script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

        <!-- Script pour filtrer les données du tableau -->
        <script>

            //init le tableau
            $(document).ready(function () {
            var table = $('#dataTable').DataTable({
                "order": [[3, 'as']],  // Ordena pela 4ª coluna (data) de forma decrescente
                "paging": true,          // Paginação
                "searching": true,       // Busca
                "info": true,             // Exibe informações sobre o número de registros
                //Nombre de line affichés par page
                lengthMenu: [[10,25,50,-1],[10,25,50,"Todos"]],
                //Langue du tableau (Francais)
                language:{
                    url:'//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-PT.json',
                }
            })
                table.draw();
            });

        </script>
@endsection