{% extends 'admin_base.html.twig' %}


{% block body %}
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">

            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h4>Les Étapes</h4>
                    </div>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ path("admin.main") }}">Tableau de board</a></li>
                        <li class="breadcrumb-item"><a href="{{ path("admin.courses.read.all",{ "token" :  cours.getGroupe().getSgToken() }) }}">{{ cours.getGroupe().getName() }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ path("admin.etapes.read.all",{ "token" :  cours.getSgToken() }) }}">{{ cours.getTitle() }}</a></li>
                        {% if parent %}
                            <li class="breadcrumb-item"><a href="{{ path("admin.etapes.read.all",{ "token" :  parent.getSgToken() }) }}">{{ parent.getTitle() }}</a></li>
                        {% endif %}
                        <li class="breadcrumb-item active"><a href="javascript:;">Nouveau Étape</a></li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">

                        <div class="card-body">
                            <form action="{{ path("admin.etapes.create") }}" method="post" enctype='multipart/form-data'>


                                <div class="alert alert-custom alert-outline-danger fade show mb-5" role="alert" style=" display: {{ msg ? "block" : "none" }}">
                                        <div class="alert-icon"><i class="flaticon-warning"></i></div>
                                        <div class="alert-text">{{msg}} </div>
                                        <div class="alert-close">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                <div class="row">
                                    <div class="col-lg-8 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label class="form-label">Titre </label>
                                            <input required type="text" placeholder="Titre" value="{{ Etape? Etape.getTitle() : "" }}" name="title" class="form-control">
                                            <input type="hidden"  value="{{ cours.getSgToken()}}" name="token" class="form-control">
                                            <input type="hidden"  value="{{parent ?  parent.getSgToken() : 0}}" name="token2" class="form-control">
                                            {% if errors %}
                                                {% for e in errors %}
                                                    {% if (e['propertyPath'] == "title")%}
                                                        <span class="form-text text-danger">{{ e['message'] }}</span>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label class="form-label"> Étape </label>
                                            {% set number = 0%}
                                            {% for e in cours.getEtapes() %}
                                                {% if e.getParent()==null %}
                                                    {% set number = number+1 %}
                                                {% endif %}
                                            {% endfor %}
                                            <input required type="NUMBER" min="1" value="{{ parent ? parent.getEtapes()|length + 1 : number + 1 }}" name="num" class="form-control">
                                            {% if errors %}
                                                {% for e in errors %}
                                                    {% if (e['propertyPath'] == "num")%}
                                                        <span class="form-text text-danger">{{ e['message'] }}</span>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12">

                                                <div class="form-group">
                                                    <label class="form-label">Image de miniature</label>
                                                    <div class="input-group mb-3">

                                                        <div class="custom-file">
                                                            <input type="file" name="profile_avatar" id="getval" onchange="previewFile()" accept=".png, .jpg, .jpeg" class="custom-file-input">
                                                            <label class="custom-file-label" id="img_text">Selectioner une Image</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">

                                                <div class="form-group">
                                                    <label class="form-label">Pièce Joint</label>
                                                    <div class="input-group mb-3">

                                                        <div class="custom-file">
                                                            <input type="file" name="profile_avatar2[]" id="getval1" onchange="previewFile1()" multiple  class="custom-file-input">
                                                            <label class="custom-file-label" id="file">Selectioner un Fichier</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <label class="form-label">Video</label>
                                                    <div class="input-group mb-3">

                                                        <div class="custom-file">
                                                            <input type="file" name="profile_avatar1" id="getval2" accept="video/mov" onchange="previewFile2()"  class="custom-file-input">
                                                            <label class="custom-file-label" id="video">Selectioner un video1</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">

                                                <div class="form-group">
                                                    <label class="form-label">Description</label>
                                                    <textarea class="form-control"  name="description" rows="4" id="comment">{{ Etape ? Etape.getDescription() : "" }}</textarea>
                                                    {% if errors %}
                                                        {% for e in errors %}
                                                            {% if (e['propertyPath'] == "description")%}
                                                                <span class="form-text text-danger">{{ e['message'] }}</span>
                                                            {% endif %}
                                                        {% endfor %}
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-12 col-sm-12">
                                        <img style="width: 200px;"  src="{{ asset(admin_assets~"/images/default_image.png") }}" id="img">
                                    </div>







                                    <div class="col-lg-12 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="HIDDEN" name="active" id="active" value=1 >
                                                <input class="form-check-input" onclick="f()"  type="checkbox" checked>
                                                <label class="form-check-label">
                                                    Active
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="HIDDEN" name="is_tp" id="is_tp" value=0 >
                                                <input class="form-check-input" onclick="f1()"  type="checkbox" >
                                                <label class="form-check-label">
                                                    Travaux
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                                        <button type="reset" onclick="Erase();" class="btn btn-light">Annuler</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">

    function Erase(){
        document.getElementById("img_text").innerHTML="Selctioner une Image";
        document.getElementById("file").innerHTML="Selctioner un Fichier";
        document.getElementById("video").innerHTML="Selctioner un Video";
    }
    function previewFile() {
        var preview = document.getElementById("img");
        var preview1 = document.getElementById("img_text");
        var file    = document.getElementById("getval").files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
            preview1.innerHTML=file.name;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
            preview.innerHTML="Selctioner une Image";
        }
    }

    function previewFile1() {

        var preview = document.getElementById("file");
        var file    = document.getElementById("getval1").files;
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.innerHTML=file.length+" fichiers sélectionnés";
        }
        for (var i=0;i<file.length;i++){
            if (file[i]) {
                reader.readAsDataURL(file[i]);
            } else {
                preview.innerHTML="Selctioner un Fichier";
            }
        }

    }
    function previewFile2() {

        var preview = document.getElementById("video");
        var file    = document.getElementById("getval2").files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.innerHTML=file.name;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.innerHTML="Selctioner un Video";
        }
    }

</script>

{% endblock %}