@include('../header')

<main class="main" id="top">

    @include('../navigation')

    <div class="content">


        <div class="card card-shadow mb-4">

            <div class="card-body">

                <form class="formUpdateModel" method="POST">
                    @csrf
                    <div class="row">

                        <div class="col-md-4">
                            <label class="FormLabel">Type model</label>
                            <select id="ModelSelect" name="" class="form-select">

                            </select>
                        </div>


                        <div class="col-md-4">
                            <label class="FormLabel">Variables</label>
                            <select id="VariableSelect" class="form-select">
                            </select>
                        </div>

                        <input type="hidden" name="IDModelHidden" id="IDModelHidden" class="form-control">

                        <div class="col-md-4">
                            <button  class="btn btn-success" style="float:right;margin-top:20px" type="submit">Appliquer les
                                modifications</button>
                        </div>

                    </div><br>

                    <textarea name="contenuModel" class="modelCodeBox" id="summernote"></textarea>
            </div>
            </form>

        </div>


        {{-- <div class="modal fade" id="ModelModal" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-success">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Nouveau model</h5><button
                            class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span
                                class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <div class="modal-body">

                       <form class="">

                       <div class="row">

                            <div class="col-md-2">
                            <label class="FormLabel">Type model</label>
                            <input type="text" class="form-control" name="" required>
                            </div>

                            <div class="col-md-2">
                             <label class="FormLabel">Titre model</label>
                                <input type="text" class="form-control" name="" required>
                            </div>


                            <div class="col-md-8">
                              <label class="FormLabel" for="organizerMultiple">Variables</label>
                              <select class="form-select" id="organizerMultiple" data-choices="data-choices" multiple="multiple" data-options='{"removeItemButton":true,"placeholder":true}'>
                                <option value="">Selectionner...</option>
                                <option>Massachus</option>
                                <option>University</option>
                                <option>GSAS</option>
                                <option>California</option>
                                </select>
                            </div>

                       </div><br>
                        <textarea id="summernotes"></textarea>
                       </form>
                    </div>
                    <div class="modal-footer">

                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                        <button class="btn btn-success" type="button">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div> --}}

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {
        GetModel();

        GetVariable(1);
        $('#summernote').summernote({
            placeholder: 'Entrez du texte ici...',
            tabsize: 2,
            height:'400px'
        });

        $('#summernotes').summernote({
            placeholder: 'Hello Bootstrap 6',
            tabsize: 2,
            height: 200
        });
        
        $("#InfoSocieteDatatable").DataTable({
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
        });

        $(document).on('change', '#ModelSelect', function() {
            var IDModel = $(this).val()
            GetVariable(IDModel);
            MesrequetesAjax("{{ route('ModelById.recuperation') }}", "GET", {
                IDmodel: IDModel
            }, null, true, "JSON", function(
                resp) {
                $('#IDModelHidden').val( resp.ligne[0].IDModelmessage)
                $('.modelCodeBox').summernote('code', resp.ligne[0].ContenuModel);
            })
        })

        $(document).on('change', '#VariableSelect', function() {
            var $variable = $(this).val()
            let htmlContent = $('.modelCodeBox').summernote('code');
            htmlContent =  '%' + $variable + '%';
            $('.modelCodeBox').summernote('insertText', htmlContent);
        })

        $('.formUpdateModel').on('submit', function(e) {
               e.preventDefault();
               MesrequetesAjax("{{ route('Model.modifier') }}", "POST",new FormData(this), false, false, "JSON", function(
                resp) {
                 Notification('Succès', resp.msg, 'top-right', 'success')
            })
        })

    })

    function GetModel() {

        MesrequetesAjax("{{ route('model.recuperation') }}", "GET", null, true, true, "JSON", function(
            resp) {
            $('#ModelSelect').html('')
            $.each(resp.ligne, function(key,values) {
               
                if (values.principal == 1) {
                    $('#ModelSelect').append('<option selected value="' + values.IDModelmessage + '">' +
                        values.titreModel + '</option>');
                    $('.modelCodeBox').summernote('code', values.ContenuModel);
                     $('#IDModelHidden').val(values.IDModelmessage)
                } else {
                    $('#ModelSelect').append($('<option>', {
                        value: values.IDModelmessage,
                        text: values.titreModel
                    }))

                }
            })
        });

    }

    function GetVariable($IDModel) {

        MesrequetesAjax("{{ route('variable.recuperation') }}", "GET", {
            IDmodel: $IDModel
        }, null, true, "JSON", function(
            resp) {
            $('#VariableSelect').html('')
            $.each(resp.ligne, function(key, values) {

                $('#VariableSelect').append($('<option>', {
                    value: values.libelleVariable,
                    text: values.libelleVariable
                }));

            })
        });
    }
</script>

</body>

</html>