ldc-legaulois/resources/views/bo/articles/create.blade.php

@extends('layouts.bo')

@section('content')

    <div class="card">
        <div class="card-header">
            Ajout d'un article
            <a href="{{route('bo.articles.index')}}" class="btn btn-sm btn-primary float-right">Retour</a>
        </div>

        <div class="card-body">
            <form action="{{route('bo.articles.store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-8 offset-md-2">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="form-group">
                            <input type="text" class="form-control" name="title" placeholder="Titre *" value="{{ old('title') }}" required>
                        </div>
                        <div class="form-group">
                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 340 x 340px</label></br>
                            <input type="file" name="picture" accept="image/png, image/jpeg" required>
                        </div>
                        <div class="form-group">
                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 780 x 508px</label></br>
                            <input type="file" name="picture_r" accept="image/png, image/jpeg" required>
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Contenu *</label>
                            <custom-ckeditor name="content" dbtext="{{ old('content') }}"></custom-ckeditor>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-md-3">Catégorie *</label>
                            <select class="custom-select col-md-9" id="category" name="category">
                                @foreach ($ac as $article_category)
                                    <option value="{{$article_category->id}}" @if (old('category') == $article_category->id)selected @endif>{{$article_category->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" id="div_answers">
                            <div class="form-group">
                                <input type="text" class="form-control" name="question" value="{{ old('question') }}" placeholder="Question *">
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" name="multiple_response" @if (old('multiple_response') !== null)checked @endif>
                                    Autoriser la réponse multiple
                                </label>
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" name="stop_poll" @if (old('stop_poll') !== null)checked @endif>
                                    Arrêter le sondage
                                </label>
                            </div>
                            <div class="form-group text-center">
                                <a class="btn btn-primary text-white" onclick="addInput()" id="add_answer" role="button">Ajouter une réponse</a>
                            </div>
                            <div>
                                <table class="table text-center">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">Réponse</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody id="answers">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="notification" @if (old('notification') !== null)checked @endif>
                                Notification activé
                            </label>
                        </div>
                        <div class="form-group text-center">
                            <input type="submit" class="btn btn-secondary" value="Ajouter">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var addId = 0;
        // Compte le nombre de champs answer sur la page
        var nbAnswer = 0;

        function addInput() {
            // Désactive le bouton ajouter une réponse si il y a déjà 5 inputs présents
            if (nbAnswer >= 5) {
                document.getElementById('add_answer').classList.add("disabled");
            } else {
                addId++;
                nbAnswer++;

                var answerTable = document.getElementById('answers');

                var tr = document.createElement('tr');
                tr.id = "tr_answer_" + addId;

                var td1 = document.createElement('td');
                td1.className = "w-75";
                var td2 = document.createElement('td');
                td2.className = "w-25";

                var input = document.createElement('input');
                input.className = "form-control";
                input.name = "answers[]";
                input.placeholder = "Réponse";

                var a = document.createElement('a');
                a.href = "#_";
                a.setAttribute("onclick", "deleteAnswer('tr_answer_" + addId + "')");
                a.className = "col-form-label";
                a.innerHTML = "Supprimer"

                td1.appendChild(input);
                td2.appendChild(a);
                tr.appendChild(td1);
                tr.appendChild(td2);
                answerTable.appendChild(tr);

                if (nbAnswer >= 5) {
                    document.getElementById('add_answer').classList.add("disabled");
                }
            }
        }

        // Supprime une ligne du tableau de réponses, affiche le bouton ajouter une réponse si il y a moins de 5 champs présents sur la page
        function deleteAnswer(elementId) {
            var tr = document.getElementById(elementId);
            tr.parentNode.removeChild(tr);
            nbAnswer--;

            if (nbAnswer < 5) {
                document.getElementById('add_answer').classList.remove("disabled");
            }

            return false;
        }

        var divAnswers = document.getElementById('div_answers');
        var category = document.getElementById('category');
        if (category.value !== "4") {
            divAnswers.style.display = "none";
        }

        category.onchange = function() {
            if (category.value === "4") {
                divAnswers.style.display = "inline";
            } else {
                divAnswers.style.display = "none";
            }
        };
    </script>
@endsection