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

{% block title %}Fiche{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/extensions/toastr.min.css">
{% endblock %}
{% block body %}

{% include 'include/menu.html.twig' %}
<div class="app-content content" style="background-color: white !important;">
    <div class="content-wrapper">
        <div class="content-body"><!-- Dashboard Analytics Start -->
            <section id="dashboard-fiche">
                <div class="row">
                    <div class="col-md-2 col-sm-l2">
                        <a target="_blank" href="{{ path('dashboard_itinerary_id', {id : fiche.itineraries[0].getId()}) }}" class="card cursor-pointer shadow-none">
                            <img style="width: 80%; max-width: 80px; height: auto;" class="card-img-top  mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/ip.png">
                            <div class="card-body  d-flex align-items-center justify-content-center">
                                <h3 class="card-title text-center">Itinéraire pédagogique</h3>
                            </div>
                        </a>
                        {% if fiche.support is not null %}
                        <a target="_blank" href="{{ fiche.support }}" class="card cursor-pointer shadow-none">
                            <img style="height: auto; width: 80%; max-width: 110px;" class="card-img-top  mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/support_animation.png">
                            <div class="card-body  d-flex align-items-center justify-content-center">
                                <h3 class="card-title text-center">Support d'animation</h3>
                            </div>
                        </a>
                        {% else %}
                            <a class="card cursor-pointer shadow-none">
                                <img style="height: auto; width: 80%; max-width: 110px;" class="card-img-top  mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/support_animation.png">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Pas de Support d'animation</h3>
                                </div>
                            </a>
                        {% endif %}
                        {% if fiche.video is not null %}
                            <a href="#video" class="card cursor-pointer shadow-none">
                                <img style="height: auto; width: 80%; max-width: 90px;" class="card-img-top mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/video.jpg">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Vidéo</h3>
                                </div>
                            </a>
                        {% else %}
                            <div class="card cursor-pointer shadow-none">
                                <img style="height: auto; width: 80%; max-width: 90px;" class="card-img-top mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/video.jpg">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Pas de vidéo</h3>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-md-8 col-sm-12">
                        <div class="d-flex justify-content-between">
                            <div class="">
                                <h4 class="mb-0">{{ fiche.name | upper }}</h4>
                                <div style="color: #0076ba;">{{ fiche.animation | upper }}</div>
                            </div>
                            <div class="">
                                {% if fiche.isCommonThread == true %}
                                    <img title="fil_rouge" class="mx-1" height="40" width="40" alt="fil_rouge" src="/img/fil_rouge.png"/>
                                {% endif %}
                                {% if fiche.bestSeller == true %}
                                    <img title="best_seller" class="mx-1" width="40" alt="fil_rouge" src="/img/best_seller.png"/>
                                {% endif %}
                            </div>
                        </div>

                        <br>
                        <div class="row">
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-start" style="color: #0076ba;">
                                    <h5 style="color: #0076ba;" class="mb-0 mr-1">Effectif minimun</h5>
                                    {% for  i in 1..fiche.number %}
                                        <i style="margin-right: 0.75%" class="fas fa-user"></i>
                                    {% endfor %}

                                </div>
                            </div>
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-end" style="color: #0076ba;">
                                    <h5 style="color: #0076ba;" class="mb-0 mr-1">Niveau</h5>
                                    {% for  i in 1..3 %}
                                        {% if i <= fiche.level %}
                                            <i class="fas fa-star"></i>
                                        {% else %}
                                            <i class="far fa-star"></i>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <hr style="border-top: 2px solid #0076ba;">
                        <div class="row">
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-start">
                                    <img style="height: 50px; width: 50px;" src="/img/fiche_icons/dossier.png">
                                    <div class="flex-column ml-1">
                                        <h4 style="color: #0076ba;" class="mb-0 text-uppercase">Programme</h4>
                                        <div>{{ fiche.subcategory.name }}</div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-end">
                                    <img style="height: 50px; width: 50px;" src="/img/fiche_icons/chrono.jpg">
                                    <div class="flex-column ml-1">
                                        <h4 style="color: #0076ba;" class="mb-0 text-uppercase">Temps de préparation</h4>
                                        <div>{{ fiche.preparationTime }} Minutes</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-start">
                                    <img style="height: 50px; width: 50px;" src="/img/fiche_icons/cible.jpg">
                                    <div class="flex-column ml-1">
                                        <h4 style="color: #0076ba;" class="mb-0 text-uppercase">Objectif</h4>
                                        <div>{{ fiche.goal }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-xl-6col-lg-6 col-md-6 col-sm-6">
                                <div class="d-flex align-items-center justify-content-end">
                                    <img style="height: 50px; width: 50px;" src="/img/fiche_icons/chrono.jpg">
                                    <div class="flex-column ml-1">
                                        <h4 style="color: #0076ba;" class="mb-0 text-uppercase">Durée de la séquence</h4>
                                        <div>{{ fiche.sequenceTime }} Minutes</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr style="border-top: 2px solid #0076ba;">
                        <br>
                        <div style="background-color: #f0f4f8;" class="p-1">
                            <h5 style="color: #0076ba;" class="text-uppercase">Matériel</h5>
                          <!--  <ul>
                                <li>Blabla</li>
                                <li>Blabla</li>
                            </ul>-->
                            <p>{{ decodeHTML(fiche.equipment) }}</p>
                            <br>
                            <h5 style="color: #0076ba;" class="text-uppercase">Présentation</h5>
                           <!-- <ul>
                                <li>Blabla</li>
                                <li>Blabla</li>
                            </ul> -->
                            <p>{{ decodeHTML(fiche.presentation) }}</p>
                        </div>
                        <div class="d-flex justify-content-center my-3">
                            <img class="w-50 h-50" alt="{{ fiche.file }}" src="{{ fiche.file }}">
                        </div>
                        <br>
                        {% if fiche.video is not null %}
                            <div id="video" class="d-flex justify-content-center my-3">
                                <iframe class="w-50" height="400" src="https://www.youtube.com/embed/{{ fiche.video }}?rel=0&amp;showinfo=0"
                                        frameborder="0"  allow="encrypted-media"
                                        allowfullscreen></iframe>
                            </div>
                        {% endif %}


                        <h5>Note personnelle</h5>
                        <div id="comments">
                            {% for comment in comments %}
                                <div>{{ comment.comment }}</div>
                                <br>
                            {% endfor %}
                        </div>
                        {{ form_start(form) }}
                        <div class="row">
                            <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">

                                <div class="form-group">
                                    {{ form_row(form.comment) }}
                                </div>
                            </div>
                            <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 d-flex justify-content-end">
                                {{ form_row(form.save) }}
                            </div>
                        </div>
                        {{ form_end(form) }}
                        <br>
                    </div>
                    <div class="col-md-2 col-sm-l2">
                        {% if complete is not null %}
                            <a class="card cursor-pointer shadow-none" href="{{ path('dashboard_fiche_id_deleteComplete', {id : fiche.id}) }}">
                                <img style="height: auto; width: 80%; max-width: 120px;" class="card-img-top mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/fiche_check.png">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Fiche animéee</h3>
                                </div>
                            </a>
                        {% else %}
                            <a class="card cursor-pointer shadow-none" data-toggle="modal" href="#modalFiche">
                                <img style="height: auto; width: 80%; max-width: 120px;" class="card-img-top mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/fiche_not_check.png">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Fiche animéee</h3>
                                </div>
                            </a>
                        {% endif %}
                        <div class="modal fade" id="modalFiche" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog  modal-dialog-centered"
                                 role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalCenterTitle">Appréciation</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <i class="bx bx-x"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="d-flex justify-content-between">
                                            <a href="{{ path('dashboard_fiche_id_addComplete', {id : fiche.id, note : 1}) }}"><i class="far fa-frown fa-7x" style="color: red;"></i></a>
                                            <a href="{{ path('dashboard_fiche_id_addComplete', {id : fiche.id, note : 2}) }}"><i class="far fa-meh fa-7x" style="color: orange;"></i></a>
                                            <a href="{{ path('dashboard_fiche_id_addComplete', {id : fiche.id, note : 3}) }}"><i class="far fa-smile fa-7x" style="color: limegreen;"></i></a>
                                            <a href="{{ path('dashboard_fiche_id_addComplete', {id : fiche.id, note : 4}) }}"><i class="far fa-grin fa-7x" style="color: green;"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a id="position-bottom-center" class="card cursor-pointer shadow-none">
                            <input type="hidden" value="{{ fiche.id }}" id="id_fiche">
                            <img style="height: auto; width: 80%; max-width: 120px;" class="card-img-top mr-auto ml-auto img-fiche" alt="ip" src="/img/fiche_icons/planning.jpg">
                            <div class="card-body  d-flex align-items-center justify-content-center">
                                <h3 class="card-title text-center">Ajouter a l'agenda</h3>
                            </div>
                        </a>
                        {% if fiche.memo is not null %}
                            <a target="_blank" href="{{ fiche.memo }}" class="card cursor-pointer  shadow-none">
                                <img style="height: auto; width: 80%; max-width: 110px;" class="card-img-top mr-auto ml-auto" alt="ip" src="/img/fiche_icons/memo.png">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Mémo</h3>
                                </div>
                            </a>
                        {% else %}
                            <a class="card cursor-pointer  shadow-none">
                                <img style="height: auto; width: 80%; max-width: 110px;" class="card-img-top mr-auto ml-auto" alt="ip" src="/img/fiche_icons/memo.png">
                                <div class="card-body  d-flex align-items-center justify-content-center">
                                    <h3 class="card-title text-center">Pas de mémo</h3>
                                </div>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    <script>
        $(document).ready(function() {
            $("#position-bottom-center").on("click", function() {
                toastr.success("Fiche ajouter à l'agenda", "Notification", {
                    positionClass: "toast-bottom-center",
                    containerId: "toast-bottom-center"
                });

                $.ajax({
                    method: "POST",
                    url: "{{ path('dashboard_fiche_addPlanning') }}",
                    dataType: "json",
                    data: {id_fiche : $("#id_fiche").val()},
                    success: function(data){

                    }
                });
            });

        });
    </script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
{% endblock %}