@extends('layouts.app0/dash2')
@section('content')

    <!-- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> -->
<div class="portlet light bordered">
    <div class="col-md-3">
        <div class="form-group  col-md-12" >
            <label for="periode" class="control-label">Période </label>
            <select name="periode" id="periode" class="form-control periode" value ="1"required>
                <option></option>
                <option value="1">1er trimestre</option>
                <option value="2">2eme trimestre</option>
                <option value="3">3eme trimestre</option>
                {{-- <option value="4">4eme trimestre</option> --}}
            </select>
        </div>
    </div>


    <div class="col-md-6">
        {{-- <div class="form-group  col-md-4" >
            <label for="matiere_id" class="control-label">Matiere </label>
            <select name="matiere_id" id="matiere" class="form-control matiere" required>
                <option></option>
                @foreach($matieres as $evaluation)
                <option value="{{ $evaluation['id'] }}" >{{ $evaluation['libelle'] }} </span></option>
            @endforeach
            </select>
        </div> --}}
        {{-- <div class="col-md-8"style="padding-top: 25px;padding-rigth: 10px">
            <button type="button" class="btn sbold btn-success btn-sm" id="noteclasse" >
                <i class="fa fa-save"></i>
                Délibération
            </button>
        
            <button type="button" class="btn sbold btn-success btn-sm" id="notebulletin">
                <i class="fa fa-save"></i>
                Bulletin 1
            </button>
        </div> --}}
    </div>
    {{-- <div class="col-md-2"></div> --}}
    <div class="col-md-3"style="padding-top: 15px; ">
        <button type="button" onclick = "printForm('notestab')" class="btn green">
            <i class="fa fa-print"></i>IMPRIMER
        </button>
    </div>



         {{-- <div class="col-md-3" style="padding-top: 25px; padding-right: 10px">

        </div> --}}
    {{-- </div> --}}


    <div class="col-md-12" style="overflow: scroll">
        
        <div id="affichenotes"  class="tabcontent">

            <div>.</div>
        </div>
    </div>

    <span>.</span>
</div>

@endsection
@section('stylesheets')
@endsection
@section('javascripts')
<script>
    tbody = $('tbody').html();
    tab = [];
    // @if(Session::has('success'))
    // toastr.success('<b> {{ Session::get('success') }} !</b>',{
    //     closeButton: true,
    //     positionClass: "toast-top-right",
    //     showDuration: 1000,
    //     hideDuration: 10000000,
    // });
    // @endif


// Suppression d'une ligne de la table
    function delLigne(pObj) {
        pObj.parentNode.parentNode.parentNode.removeChild(pObj.parentNode.parentNode);
        var nbLignes = tableau.rows.length;
        $('#nombre').val(nbLignes-1);
        numerotation();
      }


// Affichage des notes d'une matière
$('#periode').change(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b =  periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = periode

        var url2 = '{{ route("notes.recap", ":id") }}';
            url2 = url2.replace(':id', b1 );

console.log( url2);


        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                // console.log(data);
                toastr.clear()
                $('#affichenotes').html(data)


            }
        })
        $('#trimest').empty().text(periodetext)
    })

    // Affichage des notes d'une matière
    $('#noteclasse1').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b = classe_id + "|" + periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = classe_id + "|" + periode

        // console.log(periodetext)

        // var url = '{{ route("etatnote.matiere", ":id") }}';
        // url = url.replace(':id', b );

        var url2 = '{{ route("etatnote.classebis", ":id") }}';
            url2 = url2.replace(':id', b1 );


        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                console.log(periodetext);
                toastr.clear()
                $('#affichenotes').html(data)
                $('#trimest1').empty().text(periodetext)

            }
        })
    })



    $('#noteclasse2').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b = classe_id + "|" + periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = classe_id + "|" + periode

        // console.log(periodetext)

        // var url = '{{ route("etatnote.matiere", ":id") }}';
        // url = url.replace(':id', b );

        var url2 = '{{ route("etatnote.classebis1", ":id") }}';
            url2 = url2.replace(':id', b1 );


        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                console.log(periodetext);
                toastr.clear()
                $('#affichenotes').html(data)
                $('#trimest1').empty().text(periodetext)

            }
        })
    })


    $('#bilannuel').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b = classe_id + "|" + periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = classe_id + "|" + periode

        // console.log(periodetext)

        // var url = '{{ route("etatnote.matiere", ":id") }}';
        // url = url.replace(':id', b );

        var url2 = '{{ route("etatnote.bilannuel", ":id") }}';
            url2 = url2.replace(':id', b1 );


        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                console.log(periodetext);
                toastr.clear()
                $('#affichenotes').html(data)
                $('#trimest1').empty().text(periodetext)

            }
        })
    })
    $('#fichesco').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b = classe_id + "|" + periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = classe_id + "|" + periode

        // console.log(periodetext)

        // var url = '{{ route("etatnote.matiere", ":id") }}';
        // url = url.replace(':id', b );

        var url2 = '{{ route("note.fichebulletin", ":id") }}';
            url2 = url2.replace(':id', b1 );


        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                console.log(periodetext);
                toastr.clear()
                $('#affichenotes').html(data)
                $('#trimest1').empty().text(periodetext)

            }
        })
    })
// Remplissage de la liste des matière de la classe choisie

$("#classe").change(function(){
       // The following line was missing a var declaration,
       // Making it an implicit global
       var classe_id = $("#classe option:selected").val();
       $('#matiere').empty();
       $('#matiere').append('<option ></option>')

       $('.cate').empty();
       $('.delibera').empty();
       $('.saisi').empty();

        var url = '{{ route("note.nivmatiere", ":d1") }}';
        url = url.replace(':d1', classe_id );

       $.ajax({
         type:"GET",
         url:url,
         //dataType : 'json',
         success : function(data) {

            var i = 0 ;
            var nbr = data.length

            idmats =data[0]
            libelmats = data[1]
           // console.log(idmats)

            const Ids = idmats.map(idmat => idmat.id);
            const libelles = libelmats.map(libelmat => libelmat.libelle);

console.log(idmats);
            $( idmats).each( function( i, item ){

                $('#matiere').append('<option value="'+ Ids[i]+'"> '+libelles[i]+' </option>')
               // console.log(Ids[i],libelles[i])
            });

        }
    });
 })


 $(document).ready(function() {
    $('#btn-generate-pdf').on('click', function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        // var b1 = classe_id+"/"+periode

        // etatnote d'une matiere


        param = classe_id+"|"+periode+"|"+ "A"
       var url = '{{ route("etatnote.bulletin", ":d1") }}';
        url = url.replace(':d1', param );
        console.log(url);
        $.ajax({
            url: url,
            method: 'GET',
            success: function(data) {
                // Traitement réussi
                console.log(data);
            },
            error: function(xhr, status, error) {
                // Gestion des erreurs
                console.error(error);
            }
        });
    });
});

 $('#notebulletin').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        // var b1 = classe_id+"/"+periode

        // etatnote d'une matiere


        param = periode+"|"+ "A"
       var url = '{{ route("notes.bulletin", ":d1") }}';
        url = url.replace(':d1', param );
        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url:url,
            // url: "/note/etatnotebulletin/"+b1,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                //console.log(data);
                toastr.clear()
                $('#affichenotes').html(data)

                // $('.trimest').empty().html("Bulletin de notes du " + periodetext)
            }
        })
    })

$('#print').on('click', function() {

    let CSRF_TOKEN = $('meta[name="csrf-token"').attr('content');
    var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        param = classe_id+"|"+periode+"|"+ "A"
       var url = '{{ route("etatnote.bulletin", ":d1") }}';
        url = url.replace(':d1', param );

    $.ajaxSetup({
        url: url,
        type: 'GET',
        data: {
            _token: CSRF_TOKEN,
        },
        beforeSend: function() {
            console.log('printing ...');
        },
        complete: function() {
            console.log('printed!');
        }
        });

        $.ajax({
        success: function(viewContent) {
            $.print(viewContent, {
                globalStyles: true,
                mediaPrint: false,
                stylesheet: true,
                iframe: true,
                noPrintSelector: ".no-print"
                }); // This is where the script calls the printer to print the viwe's content.

        }
    });
});

    $('#notebulletin1').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        // var b1 = classe_id+"/"+periode

        // etatnote d'une matiere


        param = classe_id+"|"+periode+"|"+ "B"
       var url = '{{ route("etatnote.bulletin", ":d1") }}';
        url = url.replace(':d1', param );
        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url:url,
            // url: "/note/etatnotebulletin/"+b1,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                //console.log(data);
                toastr.clear()
                $('#affichenotes').html(data)

                // $('.trimest').empty().html("Bulletin de notes du " + periodetext)
            }
        })
    })

    $('#notebulletin1b').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        // var b1 = classe_id+"/"+periode

        // etatnote d'une matiere


        param = classe_id+"|"+periode+"|"+ "C"
       var url = '{{ route("etatnote.bulletin", ":d1") }}';
        url = url.replace(':d1', param );
        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url:url,
            // url: "/note/etatnotebulletin/"+b1,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                //console.log(data);
                toastr.clear()
                $('#affichenotes').html(data)

                // $('.trimest').empty().html("Bulletin de notes du " + periodetext)
            }
        })
    })

 $('#notebulletinbis').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext =  $("#periode option:selected").text();

        // var b1 = classe_id+"/"+periode

        // etatnote d'une matiere


        param = classe_id+"|"+periode
       var url = '{{ route("exportPdf", ":d1") }}';
        url = url.replace(':d1', param );
        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url:url,
            // url: "/note/etatnotebulletin/"+b1,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                //console.log(data);
                toastr.clear()
                $('#affichenotes').html(data)

                // $('.trimest').empty().html("Bulletin de notes du " + periodetext)
            }
        })
    })



$('#periode').change(() => {
    $('.cate').empty();
       $('.delibera').empty();
       $('.saisi').empty();
       $("#matiere option:default");
        $('.periodenote').val($('#periode').val())
    })

    $('#evaluation').change(() => {
        $('.cate').empty();
       $('.delibera').empty();
       $('.saisi').empty();
        $('.evaluationnote').val($('#evaluation').val())
    })

// Affichage des notes d'une matière
     $('#notematiereclasse').click(function() {
        var classe_id = $("#classe option:selected").val();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var matiere = $("#matiere option:selected").text();
        var evaluation_id = $("#evaluation option:selected").val();

        var b =  periode+ "|" + matiere_id
        var b1 = classe_id + "|" + periode

        console.log(b)

        var url = '{{ route("notes.matiere", ":id") }}';
        url = url.replace(':id', b );

        // var url2 = '{{ route("etatnote.classe", ":id") }}';
        //     url2 = url2.replace(':id', b1 );

        // etatnote d'une matiere
        $.ajax({
            type: "GET",
            url:url,
            // url: "/note/etatnotematiere/"+b,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                //console.log(data);
                toastr.clear()

                $('#affichenotes').html(data)
                $('#trimest').empty().text(periodetext)
                $('#mat').empty().text(matiere)
            }
        })

    })

// Affichage des notes d'une matière
$('#retrait').click(function() {

    var classe_id = $("#classe option:selected").val();
    var classe = $("#classe option:selected").text();
        var periode = $("#periode option:selected").val();
        var periodetext = $("#periode option:selected").text();
        var matiere_id = $("#matiere option:selected").val();
        var evaluation_id = $("#evaluation option:selected").val();

        var b = classe_id + "|" + periode+ "|" + matiere_id+ "|" + evaluation_id
        var b1 = classe_id + "|" + periode

        var url2 = '{{ route("note.insretraitbul", ":id") }}';
            url2 = url2.replace(':id', b1 );

        // etatnote d'une classe
        $.ajax({
            type: "GET",
            url: url2,
            beforeSend: () => {
                toastr.warning('Chargement',{
                    closeButton: true,
                    positionClass: "toast-top-right",
                    showDuration: 1000,
                    hideDuration: 10000000,
                });
            },
            success: data => {
                console.log(periodetext);
                toastr.clear()
                $('#affichenotes').html(data)
                $('#trimest').empty().text(periodetext)
                $('#clas').empty().text(classe)

            }
        })
        // $('#trimest').empty().text(periodetext)

    })



    // $(".classe").select2({
    //     theme: "classic",
    //     placeholder : "Choisir la classe"
    // });

    $("#periode").select2({
        theme: "classic",
        placeholder : "Choisir la periode"
    });

    // $(".evaluation").select2({
    //     theme: "classic",
    //     placeholder : "Choisir l'évaluation"
    // });

    $("#matiere").select2({
        theme: "classic",
        placeholder : "Choisir la matiere"
    });

    function printForm(reciept) {
            printJS({
            printable: reciept,
            type: 'html',
            targetStyles: ['*'],
            header:'',
            maxWidth : 700
	    })
	}

// Affichage des notes d'une classe
$('#notestab').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": -1,
"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
});
</script>

@endsection