@extends('layouts.app0/dash2')
@section('content')
    <div class="page-bar">
        <span>. </span>
        <div class="col-md-10">
            <ul class="page-breadcrumb">
                <li>
                    <span class="caption-subject bold uppercase"> Notificatons</span>
                </li>
            </ul>
        </div>
        <div class="page-toolbar"></div>
    </div>

    <div class="portlet light bordered">
        <table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1">
            <thead>
                {{-- <tr>
                    <th colspan="4">
                        <span id="titre">LISTE DE CEUX QUI NE SONT PAS ENCORE PRIS EN COMPTE POUR LE PRODUIT SELECTIONNE </span>
                    </th>
                </tr> --}}
                <tr>
                    <th class="text-center" style="width: 5%"> N° </th>
                    <th class="text-center"style="width: 10%"> Date </th>
                    <th class="text-center" style="width: 15%" > Destinataires</th>
                    <th hidden class="text-center"style="width: 65%"> Messages </th>
                    {{-- <th class="text-center"style="width: 10%"> Action</th> --}}
                </tr>
            </thead>
            <tbody class = "cate" >
                <input type="hidden" value="" name="produit_id" id = "produit_id" class="form-control" >
                
                @foreach($messages as $key => $message)
                    <tr id="ligne"  >
                        <td style = "border : 1px solid black ; margin-top : 5px" class="text-center"width="10%">{{  $key+1}}</td>
                        <td style = "border : 1px solid black ; margin-top : 5px" class="text-center"width="10%">{{  $message->created_at}}</td>
                        {{-- </td> --}}
                        <td  style = "border : 1px solid black ; margin-top : 5px" class="text-center"width="65%">{{ $message->message }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>

            </tfoot>
        </table>
    </div>
        {{-- </form> --}}
<form id="delete-classe" action="#" method="POST" style="display: none;">
        @method('DELETE')
        @csrf
</form>


@endsection
@section('stylesheets')
<style>

</style>
@endsection
@section('javascripts')




<!--<script src="{{asset('assets/global/scripts/filtre.js')}}" type="text/javascript"></script> -->

<script>
    // begin first table
    $('#sample_1').dataTable({

// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
   "aria": {
       "sortAscending": ": activate to sort column ascending",
       "sortDescending": ": activate to sort column descending"
   },
   "emptyTable": "No data available in table",
   "info": "Showing _START_ to _END_ of _TOTAL_ records",
   "infoEmpty": "No records found",
   "infoFiltered": "(filtered1 from _MAX_ total records)",
   "lengthMenu": "Voir _MENU_",
   "search": "Rechercher:",
   "zeroRecords": "Aucun enregistrement",
   "paginate": {
       "previous":"Prev",
       "next": "Next",
       "last": "Last",
       "first": "First"
   }
},

// Or you can use remote translation file
//"language": {
//   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},

// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

"columnDefs": [ {
   "targets": 0,
   "orderable": false,
   "searchable": false
}],

"lengthMenu": [
   [5, 15, 20, -1],
   [5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"pagingType": "bootstrap_full_number",
"columnDefs": [{  // set default column settings
   'orderable': false,
   'targets': [0]
}, {
   "searchable": false,
   "targets": [0]
}],
"order": [
   [1, "asc"]
] // set first column as a default sort by asc
});


function delLigne(pObj) {
        pObj.parentNode.parentNode.parentNode.removeChild(pObj.parentNode.parentNode);

    }

$('.Modifbis').click(function (event) {
    event.preventDefault();
    id = $(this).attr("data-inscrit-id");
    anciennete =  $("#mention"+id).val();

});

$("#voir").click(function(){
    var produit = $("#produit option:selected").val();
    var produitext = $("#produit option:selected").text();
    var niveau = $("#classe option:selected").val();
    anc = "Ancien"
    var param = niveau + "|" + produit+ "|"
    var url2 = '{{ route("suivi.inscritfraisprod", ":id") }}';
    url2 = url2.replace(':id', param );
    console.log(url2)
    $.ajax({
        type:"GET",
        url: url2,
        // data: {},
         dataType : 'html',
         success: function (data) {
            $("#updateInscription").modal('show');
            // $('#prodvente').html(data)
            // $('#produit_id').val(produit)

        },
         error: function (data) {

        }

    });

})



</script>

@endsection