@extends('layouts.dash')
@section('title') Cotisations @stop
@section('title_card',"")
@section('subtitle_card',"")

@section('content')
    <div class="card">
        <div class="card-header bg-warning">
            <h3>Cotisations</h3>
        </div>
        <div class="card-body">
            <div class="row m-3">
                <div class="col-md-1 zone_filtre">
                    {!! html()->label( 'Exercice','annes') !!}
                    {!! html()->select('exercice',$exercices,$exercice)
                        ->placeholder('A définir')
                        ->attributes(['id' => 'exercice_id','class' => 'form-control'])  !!}
                </div>
                <div class="col-md-6 zone_filtre">
                    {!! html()->label( 'Employeur','sel_employeurs') !!}
                    {!! html()->select('sel_employeurs')->options(null,'Nom précisé')
                        ->attributes(['id'=>'sel_employeurs','class' => 'select2 form-control','style' => 'padding:2px'])  !!}
                </div>
            </div>
            <div class="row">
                <table id="_table_cotisation" style="background-color:white" class="table table-condensed table-striped table-bordered" width="100%" >
                    <thead>
                        <tr>
                            @if(!$employeur)
                                <th>Employeur</th>
                            @endif
                            <th width='1px'>IdCotis</th>
                            <th width='1px'>Exercice</th>
                            <th width='1px'>Date</th>
                            <th width='1px'>Mois</th>
                            <th width='1px'>Nb&nbsp;Mois</th>
                            <th width='1px'>Bord.<br/>Pub</th>
                            <th width='1px'>Bord.<br/>Pri</th>
                            <th width='1px'>Date<br/>encais.</th>
                            <th width='1px'>Date<br/>Dépôt.</th>
                            <th width='1px'>CLR</th> 
                            <th width='1px'>CCPF</th>
                            <th width='1px'>Débit</th>
                            <th width='1px'>Crédit</th>

                            <th width='1px'>Transaction</th>
                        </tr>
                    </thead>
         
                    <tbody>
                        @foreach ($cotisations as $cotisation)
                        <tr>
                            @if(!$employeur)
                                <td>{!! $cotisation->NomEmployeur !!}</td>
                            @endif
                            <td nowrap>
                                @if($user->can("COT_VISU") || $user->HasRole("ADMINISTRATEUR"))
                                    <a href="{!! url('cotisations/show_box/'.$cotisation->id) !!}" class="various fancybox.iframe btn btn-sm btn-default" target="_blank">
                                @endif 
                                    <i>{!! $cotisation->id !!}</i>
                                @if($user->can("COT_VISU") || $user->HasRole("ADMINISTRATEUR"))
                                    </a>
                                @endif 
                            </td>
                            <td align="center">{!! $cotisation->exercice !!}</td>
                            <td align="center">{!! $cotisation->date !!}</td>
                            <td align="center">{!! $cotisation->mois !!}</td>
                            <td align="center">{!! $cotisation->nbmois !!}</td>
                            <td>{!! $cotisation->bdx !!}</td>
                            <td>{!! $cotisation->bdx_prive !!}</td>
                            <td align="center">{!! $cotisation->encais_date !!}</td>
                            <td align="center">{!! $cotisation->date_depot !!}</td>
                            <td align="right">{!! $cotisation->clr !!}</td>
                            <td align="right">{!! $cotisation->ccpf !!}</td>
                            <td align="right" class="text-danger">{!! $cotisation->debit !!}</td>
                            <td align="right" class="text-success">{!! $cotisation->credit !!}</td>
                            <td align="center">
                                 @if(($user->can("GLI_VISU") || $user->HasRole("ADMINISTRATEUR"))&&($cotisation->transaction))
                                    <a href="{!! url('transaction/'.$cotisation->transaction) !!}" target="_blank" class="btn btn-sm btn-default">
                                 @endif 
                                    {!! $cotisation->transaction !!}
                                @if(($user->can("GLI_VISU") || $user->HasRole("ADMINISTRATEUR"))&&($cotisation->transaction))
                                    </a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts0')
<script>
$(document).ready(function() {

        var t_employeurs=({!! $employeurs !!});
        var id_employeur="{!! isset($employeur->id)?$employeur->id:'' !!}";

        $('#sel_employeurs').select2({
            width:'80%',
            data: t_employeurs,
            placeholder:""
        });
        if(id_employeur!='') {$('#sel_employeurs').val(id_employeur); $('#sel_employeurs').trigger('change');} 

        $(document).on('select2:open', '.select2', function (e) {
            setTimeout(() => {
                const $elem = $(this).attr("id");
                document.querySelector(`[aria-controls="select2-${$elem}-results"]`).focus();
            });
        });

            //Filtre
            $("#sel_employeurs").change(function() {setRecherche();});
            $("#exercice_id").change(function() {setRecherche();});

            function setRecherche() {
                var sel_employeurs =  $("#sel_employeurs").val();
                var exercice_id = $('#exercice_id').val();
                if(exercice_id=="") exercice_id=0;   
                if(sel_employeurs=="") sel_employeurs=0;             

                var url="{!! url('cotisations_employeur') !!}"+"/"+exercice_id+"/"+sel_employeurs ;
                location.href=url;

            };


        var table =$('#_table_cotisation').dataTable( {
            bAutoWidth: false,bPaginate: true,bInfo: true,
            bFilter: true,deferRender:    true,"ordering": true,
            scrollCollapse: false,scroller:false,iDisplayLength:10,
            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',
                    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-1 text-left'f><'col-sm-11 text-right'B>>" +
                "<'row'<'col-sm-12'tr>>" +"<'row'<'col-sm-3'><'col-sm-3'><'col-sm-6'p>>",
                buttons: [
                    {extend: 'copy',exportOptions: {columns: ':visible'} },
                    {extend: 'excel',exportOptions: {columns: ':visible'} },
                    'colvis'
                ],
              "columnDefs": [
                 { "targets": [ 6,7], "orderable": true,"searchable": true,"visible": false},
             ]
        } );

});
</script>
@endsection