@extends('layouts.partials.main')
@section('Titre')
Plan de souscription
@endsection
@section('content-pr')
<!-- With Text -->
<div class="block block-rounded">
    <div class="block-header block-header-default">
        <h3 class="block-title">Enregistrer un Plan de souscription</h3>
    </div>
    <div class="block-content block-content-full">
        <form action="{{ route('SubscriptionPlan.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class=" row">
                <div class="col-lg-4">
                    <p class="fs-sm text-muted">
                        Enregistrer Plan de souscription
                    </p>
                </div>
                <div class="col-lg-8 col-xl-5">
                    <div class="mb-4">
                        <div class="input-group">
                            <span class="input-group-text">Libelle <span class="text-danger">*</span></span>
                            <input type="text" class="form-control" id="example-group1-input1" name="label" required>
                        </div>
                    </div>
                    {{-- <div class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control" id="example-group1-input2" name="description">
                            <span class="input-group-text">Description</span>
                        </div>
                    </div> --}}
                    <div class="mb-4">
                        <label class="form-label" for="example-textarea-input">Description <span
                                class="text-danger">*</span> </label>
                        <textarea class="form-control" id="example-textarea-input" name="description" rows="4"
                            placeholder="Veuillez y inscrire la description.." required></textarea>
                    </div>

                    {{-- <div class="mb-4">
                        <div class="input-group">
                            <span class="input-group-text input-group-text-alt">Status</span>
                            <input type="text" class="form-control form-control-alt" id="example-group1-input1-alt"
                                name="status">
                        </div>
                    </div> --}}
                    <div class="mb-4">
                        <div class="input-group">
                            <span class="input-group-text input-group-text-alt">Prix <span
                                    class="text-danger">*</span></span>
                            <input type="number" class="form-control form-control-alt" id="example-group1-input1-alt"
                                name="price" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="input-group">
                            <span class="input-group-text input-group-text-alt">Nombre de mois <span
                                    class="text-danger">*</span> </span>
                            <input type="number" class="form-control form-control-alt" id="example-group1-input1-alt"
                                name="time" required>
                        </div>
                    </div>
                    {{-- <div class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control" id="example-group1-input2" name="icon">
                            <span class="input-group-text">Icone</span>
                        </div>
                    </div> --}}
                    <div class="mb-4">
                        <div class="input-group">
                            <input type="file" class="form-control" id="example-group1-input2" name="cover">
                            <span class="input-group-text">Cover</span>
                        </div>
                    </div>

                </div>

                {{--
                <h2 class="content-heading border-bottom mb-4 pb-2">parent id</h2> --}}
                <div class="row items-push">
                    <div class="col-lg-4">
                        <p class="fs-sm text-muted">

                        </p>
                    </div>
                    <div class="col-lg-8 col-xl-5">

                        <div class="mb-4">
                            <span class="input-group-text input-group-text-alt"> Nombre de Rubriques associées </span>

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

                            {{-- <input type="button" id="bt" onclick="Disp();return false;"> --}}


                            <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>

                            {{-- <label class="form-label" for="val-skill">Section <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="parent_id">
                                <option value="">Please select</option>
                                @foreach ($listP as $lst)
                                <option value="{{ $lst->id }}">{{ $lst->label }}</option>
                                @endforeach
                            </select> --}}
                        </div>
                        <div class="mb-4">
                            <span class="input-group-text input-group-text-alt"> Nombre de contenus associés </span>

                            <input type="number" id="N1" min="0" value="1" max="15" step="1" name="nbrCont"
                                style="width:2.5em;" onchange="Chbx1();return false;">

                            {{-- <input type="button" id="bt" onclick="Disp();return false;"> --}}


                            <br>
                            {{-- <span class="input-group-text input-group-text-alt"> Veuillez remplir les champs
                                suivants
                            </span> --}}

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

                            </div>
                            <br> <br>

                            {{-- <label class="form-label" for="val-skill">Section <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="parent_id">
                                <option value="">Please select</option>
                                @foreach ($listP as $lst)
                                <option value="{{ $lst->id }}">{{ $lst->label }}</option>
                                @endforeach
                            </select> --}}
                        </div>
                        <div class="mb-4">
                            <span class="input-group-text input-group-text-alt"> Nombre de niveau
                                associées</span>

                            <input type="number" id="N2" min="0" value="1" max="15" step="1" name="nbrNiv"
                                style="width:2.5em;" onchange="Chbx2();return false;">

                            {{-- <input type="button" id="bt" onclick="Disp();return false;"> --}}


                            <br>
                            {{-- <span class="input-group-text input-group-text-alt"> Veuillez remplir les champs
                                suivants
                            </span> --}}

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

                            </div>
                            <br> <br>

                            {{-- <label class="form-label" for="val-skill">Section <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="parent_id">
                                <option value="">Please select</option>
                                @foreach ($listP as $lst)
                                <option value="{{ $lst->id }}">{{ $lst->label }}</option>
                                @endforeach
                            </select> --}}
                        </div>
                        <div class="mb-4">
                            <span class="input-group-text input-group-text-alt"> Nombres d'universités associées </span>

                            <input type="number" id="N3" min="0" value="1" max="15" step="1" name="nbrUniv"
                                style="width:2.5em;" onchange="Chbx3();return false;">

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

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

                            </div>
                            <br> <br>

                            {{-- <label class="form-label" for="val-skill">Section <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="parent_id">
                                <option value="">Please select</option>
                                @foreach ($listP as $lst)
                                <option value="{{ $lst->id }}">{{ $lst->label }}</option>
                                @endforeach
                            </select> --}}
                        </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($listP) !!}

    var tab3 = {!! json_encode($allLevls) !!}
    var tab4 = {!! json_encode($allUnivs) !!}
// console.log(tab1);
// console.log(tab2);
// console.log(tab3);
// console.log(tab4);

    // 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("Rubrique " + (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("Rubrique : " ));
       var element = document.createElement("select");
       element.id = "Rubrique" + i;
       element.name = "Rub" + 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"));
    }
// document.getElementById("bt").value="Afficher les "+N+" valeurs";
}
function Chbx1() {
    Fields=document.getElementById("InputFields1");
    N=document.getElementById("N1").value;
    while (Fields.hasChildNodes()) {Fields.removeChild(Fields.lastChild);}
    for (i=0;i<N;i++) {
       Fields.appendChild(document.createTextNode("Contenu " + (i+1)+" "));
       var input = document.createElement("INPUT");
       input.type = "text";
       input.name = "subCont" + i;
    //    input.rows = 2;
    //    input.min=0;input.max=50;input.step=1;
       input.style = "width:7em;margin-top:3em"
       input.id = "subCont" + i;
       Fields.appendChild(input);
    //    document.getElementById("subCont"+i).value="";

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

       }



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




    // }
// document.getElementById("bt").value="Afficher les "+N+" valeurs";
}function Chbx2() {
    Fields=document.getElementById("InputFields2");
    N=document.getElementById("N2").value;
    while (Fields.hasChildNodes()) {Fields.removeChild(Fields.lastChild);}
    for (i=0;i<N;i++) {
    //    Fields.appendChild(document.createTextNode("Rubrique " + (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("Niveau : " ));
       var element = document.createElement("select");
       element.id = "lev" + i;
       element.name = "lev" + i ;
       Fields.appendChild(element);
       for (var j = 0; j < tab3.length; j++) {
    var option = document.createElement("option");
    option.setAttribute("value", tab3[j]["id"]);
    option.text = tab3[j]["label"];
    element.appendChild(option);

       }



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




    }
// document.getElementById("bt").value="Afficher les "+N+" valeurs";
}function Chbx3() {
    Fields=document.getElementById("InputFields3");
    N=document.getElementById("N3").value;
    while (Fields.hasChildNodes()) {Fields.removeChild(Fields.lastChild);}
    for (i=0;i<N;i++) {
    //    Fields.appendChild(document.createTextNode("Rubrique " + (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("Université : " ));
       var element = document.createElement("select");
       element.id = "univ" + i;
       element.name = "univ" + i ;
       Fields.appendChild(element);
       for (var j = 0; j < tab4.length; j++) {
    var option = document.createElement("option");
    option.setAttribute("value", tab4[j]["id"]);
    option.text = tab4[j]["name"];
    element.appendChild(option);

       }



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




    }
// 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();
Chbx1();
Chbx2();
Chbx3();



</script>
@endsection