{% 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:;">Modifier Etape</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.update",{"token" : Etape.getSgToken()}) }}" method="post"  enctype='multipart/form-data'>
                                <input type="hidden" name="_method" value="PUT" />

                                <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">
                                            {% 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>
                                            <input required type="NUMBER" min="1" value="{{Etape.getNum()}}" name="num" class="form-control">
                                            <input type="hidden"  value="{{ cours.getSgToken()}}" name="token" 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">Télécharger vos devoirs</label>
                                                    <div class="input-group mb-3">

                                                        <div class="custom-file">
                                                            <input type="file" name="profile_avatar1[]" multiple id="getval1" onchange="previewFile1()" 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_avatar2" id="getval2"  accept="video/mov" onchange="previewFile2()"  class="custom-file-input">
                                                            <label class="custom-file-label" id="video">Selectioner un video</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="{{ Etape.file_name ? asset(etape_images~'/'~Etape.id~'/'~Etape.file_name) : asset(admin_assets~"/images/default_image.png") }}" id="img">
                                        {% set n = 0 %}
                                        {% for fichier in  Etape.getFichiers() %}


                                                <div class="form-group" id="file_v">
                                                    <div class="mail-list mt-4 row">
                                                        <div class="col-lg-9">
<a target="_blank" class="list-group-item"
   href="{{ asset('/images/etapes/file/' ~ fichier.id ~ '/' ~ fichier.file_name) }}">
  {{ fichier.file_name }}
</a>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <a href="#" onclick="downloadF({{ fichier.sg_token|json_encode }},{{ n }})"><i class="fa fa-close"></i></a>
                                                        </div>
                                                    </div>


                                                </div>
{% set n= n+1 %}

                                        {% endfor %}
                                        {% if Etape.getVideo() %}

                                            <div class="form-group" id="video_v">

                                                <div class="mail-list mt-4 row">
                                                    <div class="col-lg-9">
                                                        <a target="_blank"  class="list-group-item " href="{{  asset(etape_videos~'/'~Etape.getVideo().id~'/'~Etape.getVideo().file_name)  }}"> <i class="fa fa-upload font-18 align-middle mr-2"></i> Voir Video <br>{{ Etape.getVDownload() }} Vues</a>

                                                    </div>
                                                    <div class="col-lg-3">
                                                        <a href="#" onclick="downloadV({{ Etape.sg_token|json_encode }})"><i class="fa fa-close"></i></a>
                                                    </div>
                                                </div>

                                            </div>


                                        {% endif %}
                                    </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={{ Etape.isEnabled() ? "1" : "0" }} >
                                                <input class="form-check-input" onclick="f()"  type="checkbox" {{ Etape.isEnabled() ? "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={{ Etape.isTp() ? "1" : "0" }} >
                                                <input class="form-check-input" onclick="f1()"  type="checkbox" {{ Etape.isTp() ? "checked" :"" }}>
                                                <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";
            }
        }
        function downloadV(token){


            $.ajax({
                type: "POST",
                data:{
                    token:token
                },
                url: "{{ path("admin.courses.delete.video") }}",
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (Response) {
                    document.getElementById("video_v").style.display="none";

                }
            });
        }
        function downloadF(token,i){


            $.ajax({
                type: "POST",
                data:{
                    token:token
                },
                url: "{{ path("admin.courses.delete.file") }}",
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (Response) {
                    document.getElementById("file_v"+i).style.display="none";

                }
            });
        }
    </script>

{% endblock %}