@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">
    {!! Form::open(['url' => 'reglement_pointage/'.$employeur_id.'/'.$exercice, 'method' => 'PUT']) !!}

    <div style="padding-left:0px" class="col-lg-max">
         <div class="row" style="">   
            <div class="col-md-1" style="padding-left:0px;">
               {!! Html::image("img/entreprise_cotisations.png", 
                    "Pointage", 
                    array( 'width'=>'120px','maxwidth'=>'10%',
                        "style"=>"padding:4px" ))
                     
                !!} 
            </div>
            <div class="col-md-8" style="padding-left:0px;">
                <h2 style="margin-top:2px;">Pointage des règlements</h2>
            </div>
            <div class="col-md-4" style="padding-left:0px;">
                {!! Form::hidden('employeur_id2', $employeur_id, ['id'  => 'employeur_id2']) !!}
                {!! Form::label('employeur_nom', 'Employeur :' ) !!}
                {!! Form::text('employeur_nom', $employeur_nom, 
                    ['placeholder' => 'Employeur', 'class' => 'form-control'
                        , 'id' => 'employeur_nom','style'=>'background:whitesmoke']) !!}
                 <!-- source: "../autocomplete_employeur", -->
                <script>
                    $(function() { 

                       $("#employeur_nom").autocomplete({
                            source: "{!! route('autocomplete_employeur') !!}",
                            minLength: 1,
                            select: function(event, ui) {
                                $('#employeur_nom').val(ui.item.id+" "+(ui.item.value.trim()));
                                $('#employeur_id2').val(ui.item.id);
                                if(ui.item.value=="TOUS") $('#employeur_id2').val('TOUS');
                                location.href="{!! url('reglement_pointage/') !!}/"
                                    +$('#employeur_id2').val()+"/"+$('#exercice_id').val();
                            },
                            close: function(event, ui) {
                                
                            }
                        }); 

                    });
                </script>
            </div>
            <div class="col-md-2">
                {!! Form::label('annes', 'Années :' ) !!}
                {!! Form::select('exercice',$exercices,$exercice,
                    [
                        'id' => 'exercice_id','class' => 'form-control selectpicker',
                        'data-width' => "100%",'style' => 'font-weight:bold;background:whitesmoke'
                    ]
                ) 
                !!}
                <script>
                    $(document).ready(function() {
                        $('#exercice_id').on('change', function() {
                            location.href="{!! url('reglement_pointage/') !!}/"
                                +$('#employeur_id2').val()+"/"+$('#exercice_id').val();
                        });
                    });
                </script>
            </div>

            <div class="col-md-1">
                {!! Form::label('montant_lettrage', 'Lettrage') !!}
                {!! Form::text('montant_lettrage','', ['id'=>'montant_lettrage','readonly','class' => 'form-control']) !!}
            </div>
            <div class="col-md-1" style="padding-top:23px">
                {!! Form::button('Lettrer', ['id'=>'bt_lettrer','class' => 'btn btn-primary','onclick'=>'submit();']) !!} 
            </div>

            <div class="col-md-1" style="">
                {!! Form::label('afficher', 'Afficher') !!}
                @if(!$affiche_tout)
                    {!! Form::button('Tout', [
                        'class' => 'btn btn-warning','align'=>'right','onclick'=>'affiche(0)']) !!} 
                @else
                    {!! Form::button('Lignes non lettrées', 
                        ['class' => 'btn btn-warning','align'=>'right','onclick'=>'affiche(1)']) !!} 
                @endif
            </div>
        </div>
    </div>



    <div class='col-lg-max' style="padding-top:15px">
        @if($employeur_id)
            {!! form::hidden('checklist','',['id'=>'checklist']) !!}
            <div class="col-lg-10">
                    <table id="_table" style="background-color:white"
                        class="table table-striped table-bordered table-hover" width="100%" >
                        <thead class="">
                            <tr>
                                <th width='1%'>N°</th>
                                <th width='10%'>Ex</th>
                                <th width='10%'>Date</th>
                                <th width='10%'>Débit</th>
                                <th width='10%'>Crédit</th>
                                <th width='1%'>Mois</th>
                                <th width='1%'>Nb&nbsp;Mois</th>
                                <th width='10%'>DatDépôt</th>
                                <th width='10%'>DatEncais</th>
                                <th width='1%'>Lettrage<br/>
                                    <span style="color:grey;">Tout&nbsp;</span>
                                    {!! Form::checkbox('box_all', '1',false
                                        , ['id'=>'box_all','style'=>'','onclick'=>'check_all()']); !!}
                                    
                                </th>
                                <th width='1%'>&nbsp</th>
                            </tr>
                        </thead>  

                        <tbody>
                                                        @foreach ($cotisations as $cotisation)
                                                        <tr>

                                <td id='id_{!! $cotisation->id !!}' style="color:grey">{!! $cotisation->id !!}</td>
                                <td align="center">{!! $cotisation->exercice !!}</td>
                                <td align="center">{!! $cotisation->date !!}</td>
                                <td align="right" id="debit_{!! $cotisation->id !!}" style="font-weight:bold;color:darkred" class="" nowrap>{!! $cotisation->debit !!}</td>
                                <td align="right" id="credit_{!! $cotisation->id !!}" style="font-weight:bold;color:darkblue" class="" nowrap>{!! $cotisation->credit !!}</td>
                                <td>{!! $cotisation->mois !!}</td>
                                <td>{!! $cotisation->nbmois !!}</td>
                                <td align="center">{!! $cotisation->date_depot !!}</td>
                                <td align="center">{!! $cotisation->encais_date !!}</td>
                                <td align="center">
                                    @if($cotisation->encais_date!="")
                                        @if($cotisation->lettrage2=="")
                                            {!! Form::checkbox('box_'.$cotisation->id, '1',false
                                            , ['id'=>'box_'.$cotisation->id,'onclick'=>'check()']); !!}
                                        @else
                                            {!! $cotisation->lettrage2 !!}
                                        @endif
                                    @endif
                                </td>
                                <td nowrap> 
                                    <a href="{!! url('pointage_encaissement/'.$cotisation->id) !!}" 
                                        class="btn btn-info pull-left" style="margin-right: 3px;">Encaisser</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div class="cform-group" style='font-weight:bold;padding-top:-30px;margin-bottom:100px'>
                        <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' align='right' id='total_CREDIT'></div>
                        </div>
                    </div>
            </div>
        @endif
    </div>

   {!! Form::close() !!} 
</div>

</body></html>



<script>
    //Complete la liste des boites cochées
    function check(check_all=0) {
        var listbox='';
        var t_listbox=listbox.split(',');
        var listcheck="";
        var montant_credit=0;
        var montant_debit=0;
        for(i=0;i<t_listbox.length;i++) {
            if(check_all==1) $("#box_"+t_listbox[i]).prop('checked','true');
            if(check_all==2) $("#box_"+t_listbox[i]).prop('checked','');
            if($("#box_"+t_listbox[i]).prop('checked'))  {
                listcheck+=((listcheck=="")?"":",")+t_listbox[i];
                montant_credit+=parseInt($("#credit_"+t_listbox[i]).html());
                montant_debit+=parseInt($("#debit_"+t_listbox[i]).html());
            }
        }
        $("#checklist").val(listcheck);
        var total=montant_credit-montant_debit;
        $("#montant_lettrage").val(total);
        if((total!=0)||(listcheck=="")) $("#bt_lettrer").hide();
        else $("#bt_lettrer").show();
    }

    function check_all() {
        if($("#box_all").prop('checked')) check(1);
        else  check(2);
    }

    function affiche(val) {
        var url="{!! url('reglement_pointage/') !!}/"
                +$('#employeur_id2').val()+"/"+$('#exercice_id').val()+"/";
        if(val==0) url+="1";
        else  url+="0";
        location.href=url;
    }

    check();


</script>

<script>
    $(document).ready(function() {
        $.fn.dataTable.moment('D/M/YYYY');
        var col_visible=[];
        var col_sortable=[7,8];
        var col_numeric=[3];
        var coldep_footer=3;

        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(2)').filter(':gt(0)').each( function (i) {
            var title = $('#_table thead th').eq( $(this).index() ).text();
            $(this).html( '<input id="input_'+i+'" type="text" placeholder="'+title+'" data-index="'+i+'" />');
        } );

        var table =$('#_table').DataTable( {
                bAutoWidth: false,
                bPaginate: false,
                bInfo: true,
                bFilter: true,
                deferRender:    true,
                scrollY:        400,
                scrollX:        '100%',
                scrollCollapse: true,
                scroller:       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'
                            }
                        }
                    },

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

                    "aoColumnDefs": [
                        { "sTypes": "numeric", "aTargets": col_numeric },
                        { "bSortable": false, "aTargets": col_sortable },
                        { "visible": false, "targets": col_visible },
                    ],


                    dom: "<'row'<'col-sm-1 text-left'><'col-sm-4'><'col-sm-6 text-right'>>" +
                    "<'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: 'pdf',exportOptions: {columns: ':visible'} },
                        {extend: 'print',exportOptions: {columns: ':visible'} },
                        'colvis'
                    ],

            "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(coldep_footer, { 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(coldep_footer+1, { page: 'current'}).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);}, 0);
                var total_credit=total;
                total=format(total, ' ');
                $('#total_CREDIT').html(total);             
            },

        } );


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



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

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

} );


</script>