@extends('layouts.partials.main')
@section('Titre')
    Enregistrer un mot
@endsection
@section('content-pr')
    <!-- With Text -->
    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Enregistrer un nouveau Mot</h3>
        </div>
        <div class="block-content block-content-full">
            <form action="{{ route('Glossary.store') }}" method="POST">
                @csrf
                @method('POST')
                <div class="row">
                    <div class="col-lg-4">
                        <p class="fs-sm text-muted">
                            Enregistrer Mot
                        </p>
                    </div>
                    <div class="col-lg-8 col-xl-5">



                        {{-- <div class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-alt" id="example-group1-input2-alt"
                                name="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="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>
            </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