@include('forms.fbncheader')
@include('forms.fdatatables')


<style type="text/css">
tfoot input {
  width: 100%;
}
</style>

<div style="background-color:rgba(127,255,212,.2);"  class="col-lg-max container-fluid">

    <div style="padding-left:0px" class="col-lg-12">
         <div class="row" style="">   
            <div class="col-xs-1" style="padding-left:0px;">
               {!! Html::image("img/entreprise_cotisations.png", 
                    "Cotisations", 
                    array( 'width'=>'100%',
                        "style"=>"padding:4px" ))
                     
                !!} 
            </div>

            <div class="col-xs-10" style="padding-left:0px;">
                <h2 style="margin-top:2px;">Cotisations à encaisser</h2>
            </div>
        </div>
    </div>


    <div class='col-lg-max' style="padding-top:5px">
        <div class="">
            <table id="_table" style="background-color:white" 
                class="table table-striped table-bordered table-hover" width="100%" >
                <thead>
                    <tr>
                        <th width='1%'>N°</th>
                        <th width='1%'>Ex</th>
                        <th>Employeur</th>
                        <th width='1%'>Date</th>
                        <th width='1%'>Pmt</th> 
                        <th width='1%'>CLR</th> 
                        <th width='1%'>CCPF</th>
                        <th width='1%'>Débit</th>
                        <th width='1%'>Crédit</th>
                        <th width='1%'>Mois</th>
                        <th width='1%'>NbMois</th>
                        <th width='1%'>BdPu</th>
                        <th width='1%'>BdPr</th>
                        <th>Observations</th>
                        <th width='1%'>&nbsp</th>
                    </tr>
                </thead> 


                <tfoot>
                    <tr style='background-color:lightgrey'>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>                        
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot>

                <tbody>
                    @foreach ($cotisations as $cotisation)
                    <tr>
                        <td id='id_{!! $cotisation->id !!}' style="color:grey">
                            @if($user->can("COT_VISU") || $user->HasRole("ADMINISTRATEUR"))
                                <a href="{!! url('recouvrement/cotisations/'.$cotisation->id ) !!}">
                            @endif
                                {!! $cotisation->id !!}
                            @if($user->can("COT_VISU") || $user->HasRole("ADMINISTRATEUR"))
                                </a>
                            @endif
                        </td>
                        <td align="center">{!! $cotisation->exercice !!}</td>
                        <td align="left">{!! $cotisation->employeur !!}</td>
                        <td align="center">{!! $cotisation->date !!}</td>
                        <td align="center">{!! $cotisation->typepmt !!}</td>
                        <td align="right" nowrap>{!! $cotisation->clr !!}</td>
                        <td align="right" nowrap>{!! $cotisation->ccpf!!}</td>
                        <td align="right" style="font-weight:bold;color:darkred" class="" nowrap>{!! $cotisation->debit !!}</td>
                        <td align="right" style="font-weight:bold;color:darkblue" class="" nowrap>{!! $cotisation->credit !!}</td>
                        <td>{!! $cotisation->mois  !!}</td>
                        <td align="center">{!! $cotisation->nbmois !!}</td>
                        <td align="right">{!! $cotisation->bdx !!}</td>
                        <td align="right">{!! $cotisation->bdx_prive !!}</td>
                        <td>{!! $cotisation->observation !!}</td>
                        <td nowrap>                            
                            @if( ($user->can("COT_ENC") || $user->HasRole("ADMINISTRATEUR"))
                                )
                                <a href="{!! url('recouvrement/cotisations_encaiss/'.$cotisation->id ) !!}"
                                     class="btn btn-info pull-left" style="margin-right: 3px;">Encaisser</a>
                            @endif 
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

         <div class="col-lg-10 form-group" style='font-weight:bold;padding-top:-30px;margin-bottom:50px'>
            <div class="col-xs-2">
                <div>TOTAL&nbsp;CLR&nbsp;:&nbsp;</div>
                <div class='form-control' align='right' id='total_CLR'></div>
            </div>

            <div class="col-md-2">TOTAL&nbsp;CCPF&nbsp;:&nbsp;
            <div class='form-control' align='right' id='total_CCPF'></div>
            </div>

            <div class="col-md-2">TOTAL&nbsp;DEBIT&nbsp;:&nbsp;
            <div class='form-control' style='color:red' align='right' id='total_DEBIT'></div>
            </div>

            <div class="col-md-2">TOTAL&nbsp;CREDIT&nbsp;:&nbsp;
            <div class='form-control' style='color:blue'S align='right' id='total_CREDIT'></div>
            </div>

            <div class="col-md-2">SOLDE&nbsp;:&nbsp;
            <div class='form-control' style='color:green' align='right' id='total_SOLDE'></div>
            </div>

        </div>
    </div>

    <div class="col-md-4">&nbsp;</div>
</div>

</body></html>


<script>
    $(document).ready(function() {
        $.fn.dataTable.moment('D/M/YYYY');
    
        function format(n, sep) {
            sep = sep || "."; // Default to period as decimal separator
            return n.toLocaleString().split(sep)[0]
                + sep;
        }

        // Setup - add a text input to each footer cell
        $('#_table tfoot th:lt(14)').each( function (i) {
            var title = $('#_table thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="'+title+'" data-index="'+i+'" />' );
        } );


        var table =$('#_table').DataTable( {
            bAutoWidth: false,
            bPaginate: false,
            bInfo: true,
            bFilter: true,
            //deferRender:    true,
            scrollY:        "400px",
            scrollX:        true,
            scrollCollapse: true,
            oLanguage: {
                "sZeroRecords": "Aucune ligne",
                "sInfo": "Affichage de _START_ &agrave; _END_ sur _TOTAL_ lignes",
                "sInfoEmpty": "Showing 0 to 0 of 0 records",
                "decimal": ",",
                "thousands": " ",
                "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'
                        }
                    }
                },


                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(), data;
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    total = api.column(5, { page: 'current'}).data().reduce(function(a, b) {
                            return intVal(a) + intVal(b);}, 0);
                    total=format(total,' ');
                    $('#total_CLR').html(total);

                    total = api.column(6, { page: 'current'}).data().reduce(function(a, b) {
                            return intVal(a) + intVal(b);}, 0);
                    total=format(total, ' ');
                    $('#total_CCPF').html(total);


                    total = api.column(7, { page: 'current'}).data().reduce(function(a, b) {
                            return intVal(a) + intVal(b);}, 0);
                    var total_debit=total;
                    total=format(total, ' ');
                    $('#total_DEBIT').html(total);

                    total = api.column(8, { page: 'current'}).data().reduce(function(a, b) {
                            return intVal(a) + intVal(b);}, 0);
                    var total_credit=total;
                    total=format(total, ' ');
                    $('#total_CREDIT').html(total);


                    total=total_credit-total_debit;
                    total=format(total, ' ');
                    $('#total_SOLDE').html(total);
                },

                "aaSorting": [
                    [0,'desc']
                ],

                "aoColumnDefs": [
                    { "sTypes": "numeric", "aTargets": [ 3 ] },
                    { bSortable: false, aTargets: [13,14] },
                    { visible: false, targets: [10,11,12] },
                ],


                dom: "<'row'<'col-sm-4 text-left'f><'col-sm-4'><'col-sm-6 text-right'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 text-right'i><'col-sm-7'p>>",

                buttons: [ 
                    {extend: 'copy',exportOptions: {columns: ':visible'} },
                    {extend: 'excel',exportOptions: {columns: ':visible'} },
                    {extend: 'print',exportOptions: {columns: ':visible'} },
                    'colvis'
                ],

            } );


            // Filter event handler
            $( table.table().container() ).on( 'keyup', 'tfoot input', function () {
                table
                    .column( $(this).data('index') )
                    .search( this.value )
                    .draw();
            } );



            $('#_table').DataTable().draw();

            $(window).resize(function () {
                        $('#_table').DataTable().draw();
            });


    } );
</script>