@extends('layout.template')

@section('intitule')
    <h4 class="text-uppercase mb-0">INSERTION DES NOTES: {{ $data['intituleUE'] }}</h4>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Insertion notes</li>
@endsection

@section('styles')
    <link href="{{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">

    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css') }}">

    <link href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}" rel="stylesheet">

    <link href="{{ asset('assets/libs/jquery-steps/steps.css') }}" rel="stylesheet">
@endsection

@section('main')
    <div class="row justify-content-center mt-4" style="min-height: calc(85vh - 60px)">
        <div class="col-lg-12">
            <div class="bg-white" style="padding: 25px">
                <h3 class="box-title m-b-0">Notes des étudiants:Rattrapages</h3>
                <p class="text-muted m-b-30 font-13"> Ce formulaire permet de renseigner la note des étudiants...</p>
                @if ($data['modeResultat'] == 'U')
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body wizard-content p-0">
                                <h6 class="card-subtitle mb-3"></h6>
                                <form action="{{ route('insertion.normale.note1') }}" class="tab-wizard wizard-circle">
                                    <h6>{{ $data['intituleUE'] }}</h6>
                                    <section>
                                        <div class="row justify-content-center">
                                            <div id="alert_message"></div>
                                            <table id="datatable" cellpadding="10px" style="border: 1px solid #e9ecef"
                                                class="table table-striped table-hover table-bordered " role="grid">
                                                <thead class="text-info">
                                                    <th>#</th>
                                                    <th>Matricule</th>
                                                    <th>Sexe</th>
                                                    <th>Noms &amp; Prénoms</th>
                                                    <th style="width:150px">
                                                        Notes</th>
                                                </thead>
                                                                                                <tbody>
                                                    @foreach ($data['students'] as $student)
                                                        @php
                                                            $code_ecu = $data['ecus'][0]->code_ecu;
                                                            $noteEcu = App\Models\NoteEcu::whereRaw('idFiliere=? AND annee=? AND niveauFormation=? AND annee_acad=?  AND code_unite=?  AND code_ecu=?  AND matricule=?', [$data['idFiliere'], $data['annee'], $data['niveauFormation'], $data['annee_acad'], $data['code_unite'], $code_ecu, $student->matricule])->first();
                                                            $noteEcu = $noteEcu ? $noteEcu->noteEcu : 0;
                                                        @endphp
                                                        <tr>
                                                            <td style="width:75px!important">
                                                                {{ $counter }}</td>
                                                            <td style="width:150px!important">{{ $student->matricule }}
                                                            </td>
                                                            <td>{{ $student->sexe }}
                                                            </td>
                                                            <td>{{ $student->nomPrenom }}</td>
                                                            <td contenteditable align='center'><b>{{ $noteEcu }}</b>
                                                            </td>
                                                        </tr>
                                                                                                            @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </section>
                                </form>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body wizard-content p-0">
                                <form action="{{ route('insertion.rattrapage.note1') }}" class="tab-wizard wizard-circle">
                                    @php
                                        $dat = 0;
                                    @endphp
                                    @foreach ($data['ecus'] as $ecu)
                                        <h6>{{ $ecu->intituleEcu }}</h6>
                                        <section>
                                            @php
                                                $dat++;
                                                $counterEtu = 0;
                                            @endphp
                                            <div class="row justify-content-center">
                                                <div style="padding-left: 10%!important;padding-right:10%!important;">
                                                    <div id="alert_message"></div>
                                                    <table id="datatable{{ $dat }}" cellpadding="10px"
                                                        style="border: 1px solid #e9ecef"
                                                        class="table table-striped table-hover table-bordered "
                                                        role="grid">
                                                        <thead class="text-info">
                                                            <td>#</td>
                                                            <td>Matricule</td>
                                                            <td>Noms &amp; Prénoms</td>
                                                            <th>Notes</th>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($data['students'] as $student)
                                                                @php
                                                                    $counterEtu++;
                                                                    $noteEcu = App\Models\NoteEcu::whereRaw('idFiliere=? AND annee=? AND niveauFormation=? AND annee_acad=?  AND code_unite=?  AND code_ecu=?  AND matricule=?', [$data['idFiliere'], $data['annee'], $data['niveauFormation'], $data['annee_acad'], $data['code_unite'], $ecu->code_ecu, $student->matricule])->first();
                                                                    $noteEcu = $noteEcu ? $noteEcu->noteEcu : '';
                                                                    $noteEcu = ""; //donnée de test
                                                                    $id = $noteEcu ? $noteEcu->noteEcu : '';

                                                                @endphp
                                                                <tr role="row">
                                                                    <td>{{ $counterEtu }}</td>
                                                                    <td>{{ $student->matricule }}</td>

                                                                    <td>{{ $student->nom . ' ' . $student->prenom }}
                                                                    </td>
                                                                    {{-- @if ($data['plafond'] == 1) --}}
                                                                        <td style='width:15%;overflow:auto' align=center
                                                                            class="form-group"><INPUT type="number"
                                                                                min="0" max="{{ $data['echelle'] }}"
                                                                                step="0.1"
                                                                                name={{ $student->matricule }}
                                                                                id="note$numbertotale"
                                                                                value="{{ $noteEcu }}"
                                                                                style="width:130px" required></td>
                                                                    {{-- @else
                                                                        <td style='width:20%;overflow:auto' align='center'
                                                                            contenteditable="true" class='update'
                                                                            data-id='{{ $id }}'
                                                                            data-column='noteEcu'>
                                                                            <b>{{ $noteEcu }}</b>
                                                                        </td>
                                                                    @endif --}}
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </section>
                                    @endforeach


                                </form>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>

    <script src="{{ asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js') }}"></script>

    <script src="{{ asset('dist/js/pages/datatable/datatable-basic.init.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#datatable').DataTable();
        });
        $(document).ready(function() {
            $('#datatable1').DataTable();
        });
        $(document).ready(function() {
            $('#datatable2').DataTable();
        });
        $(document).ready(function() {
            $('#datatable3').DataTable();
        });
        $(document).ready(function() {
            $('#datatable4').DataTable();
        });
        $(document).ready(function() {
            $('#datatable5').DataTable();
        });
    </script>

    <script src="{{ asset('assets/libs/block-ui/jquery.blockUI.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('dist/js/pages/datatable/datatable-advanced.init.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.29/dist/sweetalert2.all.min.js"></script>
    <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>


    {{-- <script>
        $(() => {
            let isValid = (id) => {
                $(id).css({
                    "border-color": "#2cd07e",
                    "background-image": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232cd07e' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z' /%3e%3c/svg%3e\")",
                    "padding-right": "calc(1.5em + 0.75rem)",
                    "background-repeat": "no-repeat",
                    "background-position": "right calc(0.375em + 0.1875rem) center",
                    "background-size": "calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)"
                });
                $(id).next().css({
                    "display": "none",
                });
            }
            let isInvalid = (id) => {
                $(id).css({
                    "border-color": "#ff5050",
                    "background-image": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff5050' %3e%3ccircle cx='6' cy='6' r='4.5' /%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff5050' stroke='none' /%3e%3c/svg%3e\")",
                    "padding-right": "calc(1.5em + 0.75rem)",
                    "background-repeat": "no-repeat",
                    "background-position": "right calc(0.375em + 0.1875rem) center",
                    "background-size": "calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)"
                });
                $(id).next().css({
                    "display": "block",
                    "width": "100%",
                    "margin-top": "0.25rem",
                    "font-size": "0.875em",
                    "color": "#ff5050"
                })
            }
            let allCaseValid = () => {
                all = [];
                @if ($data['mode'] != 'S')
                    for (let i = 1; i < {{ $counter }}; i++) {
                        all.push(checkNullValidation("#note" + i));
                    }
                @else
                    for (let i = 1; i < {{ $counter }}; i++) {
                        all.push(checkNullValidation("#noteE" + i));
                        all.push(checkNullValidation("#noteC" + i));
                    }
                @endif

                return all.every(value => value === true);
            }
            //Vérifie si les élements des formulaires sont vide
            let checkNullValidation = (id) => {
                if ($(id).val() === '' || $(id).val() === undefined || ($(id).val() < 0 || $(id).val() >
                        {{ $data['echelle'] }})) {
                    isInvalid(id);
                    return false;
                } else {
                    isValid(id);
                    return true;
                }
            }
            $(document).ready(function() {
                $('#datatable').DataTable({
                    "lengthChange": false,
                    "scrollcollapse": true,
                    "paging": false,
                    "scrollY": "450px"
                });
            });
            //Custom design form example

            

            $(".tab-wizard").steps({
                headerTag: "h6",
                bodyTag: "section",
                transitionEffect: "fade",
                titleTemplate: '<span class="step">#index#</span> #title#',
                labels: {
                    finish: "Submit"
                },
                onFinished: function(event, currentIndex) {
                    if (allCaseValid()) {

                        Swal.fire({
                            title: 'Confirmer cette opération?',
                            text: "Cette opération ajoutera les notes des étudiants dans la base",
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonColor: 'rgb(44, 208, 126)',
                            cancelButtonColor: '#d33',
                            cancelButtonText: 'Annuler',
                            reverseButtons: true,
                            confirmButtonText: 'Confirmer l\'opération',
                            backdrop: true,

                            preConfirm: () => {
                                let url = "{{ route('insertion.normale.note1') }}";

                                @if ($data['mode'] != 'S')
                                    all = {};
                                    for (let i = 1; i < {{ $counter }}; i++) {
                                        all[$("#note" + i).attr('name')] = $("#note" + i)
                                            .val();
                                    }
                                @else
                                    all = {
                                        noteC: {},
                                        noteE: {}
                                    };
                                    for (let i = 1; i < {{ $counter }}; i++) {
                                        all['noteE'][$("#noteE" + i).attr('name')] = $(
                                            "#noteE" + i).val();
                                        all['noteC'][$("#noteC" + i).attr('name')] = $(
                                            "#noteC" + i).val();
                                    }
                                @endif
                                let token = document
                                    .querySelector('meta[name="csrf-token"]')
                                    .getAttribute("content");

                                let options = {
                                    headers: 
                                    {
                                        "Content-Type": "application/json",
                                        Accept: "application/json, text-plain, */*",
                                        "X-Requested-With": "XMLHttpRequest",
                                        "X-CSRF-TOKEN": token,
                                    },
                                    method: "post",
                                    credentials: "same-origin",
                                    body: JSON.stringify(
                                        {
                                            acadYear: "{{ $data['acadYear'] }}",
                                            idFiliere: "{{ $data['idFiliere'] }}",
                                            formation: "{{ $data['formation'] }}",
                                            etudeYear: "{{ $data['etudeYear'] }}",
                                            notes: all,
                                            operation: "{{ $data['operation'] }}",
                                            intituleEcu: "{{ $data['intituleECU'] }}",
                                            code_unite: "{{ $data['code_unite'] }}",
                                            code_ecu: "{{ $data['code_ecu'] }}",
                                            ip: "{{ $data['ip'] }}",
                                            echelle: "{{ $data['echelle'] }}"
                                        }),
                                };
                                console.log(options.body);

                                return fetch(url, options)
                                    .then((response) => response.json())
                                    .then((response) => {
                                        if (!response.success) {
                                            console.log(response);
                                            throw new Error("L'opération n'a pas réussi");
                                        };
                                    })
                                    .catch((e) => {
                                        console.log(e);
                                        throw new Error("L'opération à échoué");
                                    });
                            },
                            allowOutsideClick: () => !Swal.isLoading(),
                            showLoaderOnConfirm: true,
                        }).then((result) => {
                            if (result.isConfirmed) {
                                console.log("tout va bien");
                                fetch(url1, allOptions);
                                Swal.fire(
                                    'Insertion des notes de {{ $counter - 1 }} étudiants',
                                    'réalisée avec succès.',
                                    'success'
                                );
                                window.location.replace("{{ route('insertion.normale') }}");
                            }
                        }).catch((e) => {
                            console.log("l'erreur e est :", e);
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Une erreur s\'est produite lors de l\'insertion',

                            });
                        });
                    } else {
                        $('.wizard-content .wizard>.steps>ul>li').removeClass("done");
                        toaster("error", "Veuillez entrer toutes les notes...");
                    }
                }
            });
            for (let i = 1; i < {{ $counter }}; i++) {
                $("#note" + i).blur(() => {
                    checkNullValidation("#note" + i)
                });
                $("#noteE" + i).blur(() => {
                    checkNullValidation("#noteE" + i)
                });
                $("#noteC" + i).blur(() => {
                    checkNullValidation("#noteC" + i)
                });
            }
        });
    </script> --}}
    
    <script>
        //Custom design form example
        $(".tab-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit"
            },
            onFinished: function(event, currentIndex) {
                @if ($data['plafond'] == 1)
                @endif
            }
        });
        @if ($data['plafond'] == 0)
            $(document).ready(function() {
                function update_data(id, column_name, value) {
                    // $.blockUI({
                    //     message: '<h3>S\'il vous plaît, veuillez patienter...</h3>',
                    //     centerY: 0,
                    //     css: {
                    //         top: '10px',
                    //         left: '',
                    //         right: '10px',
                    //         border: '3px solid #a00'
                    //     },
                    //     overlayCSS: {
                    //         backgroundColor: '#f00',
                    //         opacity: 0.6,
                    //         cursor: 'wait'
                    //     }
                    // });
                    return;
                    $.ajax({
                        url: "update_note_rattrapage.php",
                        method: "POST",
                        data: {
                            id: id,
                            column_name: column_name,
                            value: value
                        },
                        success: function(data) {
                            $('#alert_message').html('<div class="alert alert-danger">' + data +
                                '</div>');
                            $.unblockUI();
                        }
                    });
                    setInterval(function() {
                        $('#alert_message').html('');
                    }, 7000);
                }

                $(document).on('blur', '.update', function() {
                    var value = $(this).text();
                    var column_name = $(this).data("column");
                    var id = $(this).data("id");
                    update_data(id, column_name, value);
                });

                $(document).on('keydown', '.update', function(event) {
                    if (event.which == 13) {
                        var value = $(this).text();
                        var column_name = $(this).data("column");
                        var id = $(this).data("id");
                        update_data(id, column_name, value);
                        event.preventDefault();
                    }
                })
            });
        @endif
    </script>
@endsection