@extends('layouts.partials.main')
@section('Titre')
    Enregistrer une section
@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 Rubrique</h3>
        </div>
        <div class="block-content block-content-full">
            <form action="{{ route('Sections.store') }}" method="POST" enctype="multipart/form-data"">
                @csrf
                @method('POST')
                <div class=" row">
                    <div class="col-lg-4">
                        <p class="fs-sm text-muted">
                            Enregistrer rubrique
                        </p>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="col-lg-8 col-xl-5">
                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">Libellé <span class="text-danger">*</span></span>
                                <input type="text" class="form-control" id="example-group1-input1" name="label">
                            </div>
                        </div>
                        {{-- <div class="mb-4">
                    <div class="input-group">
                        <input type="color" class="form-control form-control-alt" id="example-group1-input2-alt"
                            name="label_color">
                        <span class="input-group-text input-group-text-alt"> Couleur du libellé</span>
                    </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.."></textarea>
                        </div>
                        {{-- <div class="mb-4">
                    <label class="form-label" for="file">Icone </label>
                    <input class="form-control" type="file" id="file" name="icone" placeholder="Selectionnez une image">
                </div> --}}

                        {{-- <div class="mb-4">
                    <div class="input-group">
                        <input type="color" class="form-control form-control-alt" id="example-group1-input2-alt"
                            name="icon_color">
                        <span class="input-group-text input-group-text-alt">Couleur de l'icone</span>
                    </div>
                </div> --}}


                        {{-- <div class="mb-4">
                    <div class="input-group">
                        <input type="color" class="form-control form-control-alt" id="example-group1-input2-alt"
                            name="description_color">
                        <span class="input-group-text input-group-text-alt">Couleur de la description</span>
                    </div>
                </div> --}}

                        <div class="mb-4">
                            <label class="form-label" for="val-skill">Actif/inactif <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="is_visible" required>
                                <option value="">Selectionnez un element</option>


                                <option value="0">Inactif</option>
                                <option value="1">Actif</option>

                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="form-label" for="val-skill">Rubrique payante <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="is_paid" required>
                                <option value="">Selectionnez un element</option>


                                <option value="0">Non</option>
                                <option value="1" selected>Oui</option>

                            </select>
                        </div>


                        <div class="mb-4">
                            <label class="form-label">Visible à l'accueil </label>
                            <div class="space-x-2">
                                {{-- <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" value="0" id="example-checkbox-inline1"
                                name="is_visible_home">
                            <label class="form-check-label" for="example-checkbox-inline1">Non</label>

                        </div> --}}
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="1"
                                        id="example-checkbox-inline1" name="is_visible_home">
                                    <label class="form-check-label" for="example-checkbox-inline1">Oui</label>

                                </div>

                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="cover">Cover</label>
                            <input class="form-control" type="file" id="file" name="cover">
                        </div>

                        {{-- <div class="col-lg-4">
                    <p class="fs-sm text-muted">

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

                        <div class="mb-4">
                            <label class="form-label" for="val-skill">Type de rubrique <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="val-skill" name="section_type_id" required>
                                <option value="">Selectionnez un élément</option>
                                @foreach ($sectionsType as $section)
                                    <option value="{{ $section->id }}">{{ $section->label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">Nombre de categories</span>
                                <input type="number" id="N" min="0" value="1" max="10"
                                    step="1" name="nbrCats" style="width:2.5em;" onchange="Chbx();return false;"
                                    class="form-control">
                            </div>
                        </div>





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


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

                            </div>
                        </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($cats) !!};

        // 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("Categorie : " + (i + 1) + " "));
                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