@php


@endphp


<div class="table-responsive" style="overflow-y: auto;height: 45vh;"><!--table bon de livarison-->

    <table class="table table-hover table-sm table-bordered" id="table_planning_fiche_annexe" style="width:100%">
        <thead style="background-color:#28a745; color:white">

        <th scope="col" class="text-center">CODE</th>
        <th scope="col" class="text-center" >DATE</th>
        <th scope="col" class="text-center">BL</th>
        <th scope="col" class="text-center">QUANTITE</th>
        <th scope="col" class="text-center">DEP CENT</th>
        <th scope="col" class="text-center">ARR CHAN</th>
        <th scope="col" class="text-center">DEB VID</th>
        <th scope="col" class="text-center">FIN VID</th>
        <th scope="col" class="text-center">DEP CHAN</th>
        <th scope="col" class="text-center">ARR CENT</th>
        <th scope="col" class="text-center">VEHICULE</th>
        <th scope="col" class="text-center">CENTRALE</th>
        <th scope="col" class="text-center">SUPP</th>


        </thead>
    </table>

</div><!-- fin table planning-->
<script>
    $(function() { // Dom ready
        //////data table planning



        var table_planning_fiche_annexe = $('#table_planning_fiche_annexe').on('processing.dt', function (e, settings, processing) {

            $('.ring').css('display', processing ? 'block' : 'none');
            $('#filtre_loading').css('display', processing ? 'block' : 'none');

        }).DataTable({


            // autoWidth:true,
            paging: true,
            searching: true,
            scrollCollapse: true,


            "ajax": {
                "url": "{{url('planning/planning_data_table_fiche_annexe')}}",
                "type": "GET",

                "data": {
                    'type_fiche_annexe': '{{$type_fiche_annexe}}',
                    'id_fiche_annexe':'{{$id_fiche_annexe}}',

                },


            },

            columnDefs: [


                { "className": "text-center align-middle ", "targets": "_all" },
                // { "width": "500px", "targets": [0] }

            ]
        });



    });//Fin dom ready
</script>