@extends(backpack_view('blank'))

@section('content')

    <div class="container">

        <form method="post" action="{{route('generateImage')}}">
            @csrf

            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Titre</label>
                    <input type="text" name="titre" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Entrer le titre de l'image">

                </div>
                <div id="ligne">
                    <div class="form-group ligneEnfant">
                        <label for="exampleInputEmail1">Ligne 1</label>
                        <input type="text" name="ligne[]" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Entrer le texte de la ligne 1">
                    </div>
                </div>

                <button id="addLine" type="button" class="btn btn-primary">Ajouter une ligne</button>
                <button type="submit" class="btn btn-primary">Créer l'image</button>
            </form>

        </form>

    </div>

    @push('after_scripts')
        <script>
            $( document ).ready(function() {

            })

            $(document).on('click','#addLine' , function (){
                let nb = ($('.ligneEnfant').length)
                if (nb > 5){
                    $('#ligne').append('Trop de ligne 😅 ! Besoin d\'une image en particulier ? Appeler l\'assistance => Léo : ☎ <a  href="tel:+33606441824">06 06 44 18 24</a>')
                }else {
                    $('#ligne').append('<div class="form-group ligneEnfant"> <label for="exampleInputEmail1">Ligne '+(nb+1)+'</label> <input type="text" name="ligne[]" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Entrer le texte de la ligne '+(nb+1)+'"></div>')
                }

            })
        </script>
    @endpush


@endsection