@extends('layouts.partials.main')
@section('Titre')
    Mettre a jour un glossaire
@endsection
@section('content-pr')
    <!-- With Text -->
    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Enregistrer une nouvelle ressource</h3>
        </div>
        <div class="block-content block-content-full">
            <form action="{{ route('Glossary.update', $glo->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-lg-4">
                        <p class="fs-sm text-muted">
                            MAJ Glossary
                        </p>
                    </div>
                    <div class="col-lg-8 col-xl-5">
                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">Libellé</span>
                                <input type="text" class="form-control" id="example-group1-input1" name="label"
                                    value="{{ $glo->label }}">
                            </div>
                        </div>
                        <div class="block block-rounded">
                            <div class="block-header block-header-default">
                                <h3 class="block-title">Définitions</h3>
                            </div>
                            <div class="block-content">
                                <p class="fs-sm text-muted">
                                    Definitions pour de ce mot (Les categories associées aux definitions sont entres
                                    parentheses)
                                </p>
                                <div class="row items-push text-center">

                                    @foreach ($glo->definitions as $definitions)
                                        <button type="button" class="btn btn-primary w-100 js-bs-popover-enabled"
                                            data-bs-toggle="popover" data-bs-placement="top"
                                            data-bs-content="{{ $definitions->description }}">{{ $definitions->description }}
                                            ({{ $definitions->categorie->label }})
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        {{-- <div class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-alt" id="example-group1-input2-alt"
                                name="status" value="{{ $glo->status }}">
                            <span class="input-group-text
                        input-group-text-alt">Status</span>
                        </div>
                    </div> --}}
                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text input-group-text-alt"> Nombres de Definitions associées a ce
                                    mot</span>

                                <input type="number" id="N" min="0" value="3" max="15"
                                    step="1" name="nbrDef" style="width:2.5em;" onchange="Chbx();return false;">

                                {{-- <input type="button" id="bt" onclick="Disp();return false;"> --}}
                                {{-- <input type="button" id="bt" onclick="Disp();return false;"> --}}
                                {{-- {{dd($allCat)}} --}}
                                <br>
                                <span class="input-group-text input-group-text-alt"> Veuillez remplir les champs suivants
                                </span>

                                <div id="InputFields" style="margin-top: 10%">

                                </div>
                                <br> <br>
                                {{-- <div class="mb-4" style="margin-top: 10%">
                                    <div class="input-group">
                                        <span class="input-group-text">Dénomination</span>
                                        <input type="text" class="form-control" id="example-group1-input1" name="label"
                                            required>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="row items-push">
                                {{-- <div class="col-lg-4">
                            <p class="fs-sm text-muted">

                            </p>
                             </div> --}}

                                <div class="col-sm-6 col-xl-4">
                                    <input type="Submit" class="btn btn-success" value="Enregistrer">
                                    <div class="mt-2">
                                        {{-- <code>Enregistrer</code> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    <!-- END With Text -->
    <script>
        var tab1 = {!! json_encode($allCat) !!}
        // var section_lab = {!! json_encode($allCat) !!};
        // console.log(section_lab[0]["label"]);

        //     var myDiv = document.getElementById("myDiv");

        // //Create array of options to be added
        // var array = ["Volvo","Saab","Mercades","Audi"];

        //Create and append select list
        // var selectList = document.createElement("select");
        // selectList.setAttribute("id", "mySelect");
        // myDiv.appendChild(selectList);
        // for (var i = 0; i < array.length; i++) {
        //     var option = document.createElement("option");
        //     option.setAttribute("value", array[i]);
        //     option.text = array[i];
        //     selectList.appendChild(option);
        // }

        function Chbx() {
            Fields = document.getElementById("InputFields");
            N = document.getElementById("N").value;
            while (Fields.hasChildNodes()) {
                Fields.removeChild(Fields.lastChild);
            }
            for (i = 0; i < N; i++) {
                Fields.appendChild(document.createTextNode("Description " + (i + 1) + " "));
                var input = document.createElement("TEXTAREA");
                input.type = "text";
                input.name = "n" + i;
                input.rows = 2;
                //    input.min=0;input.max=50;input.step=1;
                input.style = "width:7em;"
                input.id = "k" + i;
                Fields.appendChild(input);
                //    document.getElementById("k"+i).value=25;

                Fields.appendChild(document.createTextNode("Categorie : "));
                var element = document.createElement("select");
                element.id = "cat" + i;
                element.name = "cat" + i;
                Fields.appendChild(element);
                for (var j = 0; j < tab1.length; j++) {
                    var option = document.createElement("option");
                    option.setAttribute("value", tab1[j]["id"]);
                    option.text = tab1[j]["label"];
                    element.appendChild(option);

                }



                Fields.appendChild(document.createElement("br"));

                //Create and append the options


            }
            // document.getElementById("bt").value="Afficher les "+N+" valeurs";
        }

        // function Disp() {
        //   N=document.getElementById("N").value;
        //   ValueList="";
        //   for (i=0;i<N;i++) {
        //        ValueList+=document.getElementById("k"+i).value+"\n";
        //   }
        //   alert(ValueList);
        // }

        Chbx();
    </script>
@endsection