@extends('layouts.dash_pop')
@section('title_card',"")

@section('content')
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">{!! "Compte Auxiliaire ".$titre." - Période du ".$date_deb." au ".$date_fin !!}</h3>
            </div>
            <div class='card-body'>
                <div class="form-group ">
                    <table id="_table_detail" style="width:100%" border="1px" class="display nowrap table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th width="1px">Transaction</th>
                                <th width="1px">Date</th>
                                <th width="1px">DateRef</th>
                                <th>Ref.</th>
                                <th >Designation</th>
                                <th width="1px">Débit</th>
                                <th width="1px">Crédit</th>
                            </tr>
                        </thead>
                        <tbody>
                        @php $total_debit=0;$total_credit=0;$solde=0; @endphp
                        @foreach($ecritures as $ecriture)
                            @php
                                $total_debit+=$ecriture->debit;
                                $total_credit+=$ecriture->credit;
                            @endphp
                            <tr>
                                <td align="center">{!! str_pad($ecriture->transaction,5,"0", STR_PAD_LEFT); !!}</td>
                                <td nowrap>{!! $ecriture->date_doc !!}</td>
                                <td nowrap>{!! $ecriture->date_ref !!}</td>
                                <td nowrap>{!! $ecriture->ref_doc !!}</td>
                                <td >{!! $ecriture->designation  !!}</td>
                                <td nowrap align="right">{!! $ecriture->debit !!}</td>
                                <td nowrap align="right">{!! $ecriture->credit !!}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="5"></th>
                                <th style="text-align:right;color:darkred">{{ $total_debit }}</th>
                                <th style="text-align:right;color:darkgreen">{{ $total_credit }}</th>
                            </tr>
                            <tr>
                                <th colspan="6"></th>
                                <th style="text-align:right;color:darkblue">{{ $total_debit-$total_credit }}</th>
                            </tr>                       
                        </tfoot>
                    </table>
            </div>
        </div>
    </div>
@endsection



@section('scripts')
    <!-- FancyBox -->
    <script src="{{ url('js/jquery.fancybox.js') }}"></script>
    
<script>
  $(function () {
    $.fn.dataTable.moment('D/M/YYYY');
    $("#_table_detail").DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": false,
      "responsive": false, 
      "autoWidth": false,
       oLanguage: {
            "sZeroRecords": "Aucune ligne",
            "sInfo": "Affichage de _START_ &agrave; _END_ sur _TOTAL_ lignes",
            "sInfoEmpty": "Showing 0 to 0 of 0 records",
            "sInfoFiltered": "(sur un total de _MAX_ lignes)",
            "oPaginate": {"sPrevious": "Pr&eacute;c&eacute;dente","sNext": "Suivante"
                ,"sFirst": "Premi&egrave;re","sLast": "Derni&egrave;re"},
                "sSearch":"Chercher",
            
            buttons: {
                colvis: 'Colonnes à afficher',
                copy: 'Copier',print: 'Imprimer',
                copyTitle: 'Ajouté au presse-papiers',
                copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
                copySuccess: {
                    _: '%d lignes copiées',
                    1: '1 ligne copiée'
                    }
                }
        },
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-4'i><'col-sm-6'B><'col-sm-2'p>>",
        "buttons": ["copy", "excel"], //"print", "pdf", "csv", , "colvis"
        "aaSorting": [
            [1,'asc']
        ],
        "columnDefs": [
            { "targets": [ 0], "orderable": false,"searchable": false},
        ]
    })
    .buttons().container().appendTo('#_table_wrapper .col-md-6:eq(0)');



  });

</script>
@endsection