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

@extends('layouts.bo')

@section('content')
    <div class="card">
        <div class="card-header">
            Modification d'un article
            <a href="{{route('bo.articles.index')}}" class="btn btn-sm btn-primary float-right ml-2">Retour</a>
            <form action="{{route('bo.articles.destroy', $article->id)}}" method="POST" class="d-inline confirmDeleteJS">
                @method('DELETE')
                @csrf
                <input type="submit" class="btn btn-sm btn-danger float-right" value="Supprimer">
            </form>
        </div>

        <div class="card-body">
            <form action="{{route('bo.articles.update', $article->id)}}" method="POST" enctype="multipart/form-data">
                @method('PUT')
                @csrf
                <div class="row">
                    <div class="col-md-8 offset-md-2">
                        <div class="form-group">
                            <input type="text" class="form-control" name="title" placeholder="Titre *" value="{{old('title') ?? $article->title ?? ''}}" required>
                        </div>
                        <div class="form-group">
                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 340 x 340px</label>
                            <input type="file" name="picture" accept="image/png, image/jpeg">
                            </br>
                            </br>
                            <img src="{{ asset($article->picture) }}" style="max-height: 200px;">
                        </div>
                        <div class="form-group">
                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 780 x 508px</label>
                            <input type="file" name="picture_r" accept="image/png, image/jpeg">
                            </br>
                            </br>
                            <img src="{{ asset($article->picture_r) }}" style="max-height: 200px;">
                        </div>
                        <div class="form-group vueComponent">
                            <label class="col-form-label">Contenu *</label>
                            <custom-ckeditor name="content" dbtext="{{ old('content') ?? $article->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="type">
                                @foreach (ArticleCategory::toArray() as $article_category)
                                    @if ($article->type->equals($article_category))
                                        <option value="{{$article_category->value}}" selected>{{$article_category->label}}</option>
                                    @else
                                        <option value="{{$article_category->value}}">{{$article_category->label}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" id="div_answers">
                            <div class="form-group">
                                <input type="text" class="form-control" name="question" placeholder="Question *" value="{{old('question') ?? $article->question ?? ''}}">
                            </div>
                            <div class="form-group">
                                <label>
                                    @if ($article->multiple_response === 1)
                                        <input type="checkbox" name="multiple_response" checked>
                                    @else
                                        <input type="checkbox" name="multiple_response">
                                    @endif
                                    Autoriser la réponse multiple
                                </label>
                            </div>
                            <div class="form-group">
                                <label>
                                    @if ($article->stop_poll === 1)
                                        <input type="checkbox" name="stop_poll" checked>
                                    @else
                                        <input type="checkbox" name="stop_poll">
                                    @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">
                                        @foreach($article->answers as $answer)
                                            <tr id="tr_answer_{{$answer->id}}">
                                                <td class="w-75"><input class="form-control" name="answers[{{$answer->id}}]" placeholder="Réponse" value="{{$answer->answer}}"></td>
                                                <td class="w-25"><a href="#_" onclick="deleteAnswer('tr_answer_{{$answer->id}}')" class="col-form-label">Supprimer</a></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="notification" value="1">
                                Notifier les consommateurs
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                @if ($article->status === 1)
                                    <input type="checkbox" name="status" value="1" checked>
                                @else
                                    <input type="checkbox" name="status" value="1">
                                @endif
                                Publié ?
                            </label>
                        </div>
                        <div class="form-group text-center">
                            {{-- TODO remplacer la table category article inutile par un enum --}}
                            @if($article->type->equals(ArticleCategory::sondage()))
                            <a href="{{ route('bo.sondage.export', compact('article')) }}" class="btn btn-info">Export du sondage</a>
                            @endif
                            <input type="submit" class="btn btn-secondary" value="Modifier">
                        </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[_"+addId+"]";
                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) {
            if(confirm("{{ __('Êtes-vous sûr de vouloir supprimer cette réponse ? Cette action est irréversible, les réponses associés des clients seront effacés.') }}")) {
                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 != "{{ ArticleCategory::sondage()->value }}") {
            divAnswers.style.display = "none";
        }

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

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