{% extends 'talent/base_dashboard_talent.html.twig' %}

{% block dashContent %}
    {% include 'talent/job_submenu.html.twig' with {
        'tab' : 2
    } %}
    <div class=" row bg-bordered p-20">
        <div class="col s12 bb-grey p-b-10">
            <span class="bg-blue-1 text-gradient font-2 text-upper text-bold">recommandations reçues</span>
        </div>
        <div id="reponses" class="col s12">
            <table class="bordered responsive-table">
                <thead>
                    <tr>
                        <th>Nom Prénom</th>
                        <th class="center-align">Date</th>
                        <th class="center-align">Action</th>
                        <th>Visibilité</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in received %}
                        <tr>
                            <td>
                                {{ r.sender.lastname }}
                                {{ r.sender.firstname }}
                            </td>
                            <td class="center-align">
                                {{ r.uTime|date('d/m/Y') }}
                            </td>
                            <td class="center-align">
                                <i class="fa fa-eye modalBtn c-pointer hover-blue1" data-url="{{ r.video.cdnUrl }}"></i>
                            </td>
                            <td>
                                {% if r.isVisible == false %}
                                    <span class="color-red">Désactivée</span>
                                {% else %}
                                    <div class="switch d-inblock">
                                        <label>
                                            <input class="visibilityToggle" type="checkbox" {% if r.isEnabled %} checked="checked" {% endif %} data-id="{{r.id}}">
                                            <span class="lever"></span>
                                        </label>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p class="center-align"></p>
        </div>
    </div>

    <div class=" row bg-bordered p-20">
        <div class="col s12 bb-grey p-b-10">
            <span class="bg-blue-1 text-gradient font-2 text-upper text-bold">recommandations envoyées</span>
        </div>
        <div id="reponses" class="col s12">
            <table class="bordered responsive-table">
                <thead>
                    <tr>
                        <th>Nom Prénom</th>
                        <th class="center-align">Date</th>
                        <th class="center-align">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in sended %}
                        <tr>
                            <td>
                                {{ r.user.lastname }}
                                {{ r.user.firstname }}
                            </td>
                            <td class="center-align">
                                {{ r.uTime|date('d/m/Y') }}
                            </td>
                            <td class="center-align">
                                {% if r.video.cdnUrl is defined %}
                                <i class="fa fa-eye modalBtn c-pointer hover-blue1" data-url="{{ r.video.cdnUrl }}"></i>
                                {% endif %}
                                <a href="{{ path('delete_recommendation',{id:r.id}) }}">
                                    <i class="fa fa-trash hover-red c-pointer color-black"></i>
                                </a>
                                {% if r.isVisible == false %}
                                    <span class="color-red">Désactivée</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p class="center-align"></p>
        </div>

        <div id="modal_video" class="modal">
            <div class="modal-content">
                <h4>Vidéo de la recommandation</h4>
                <div class="videoContainer" style="text-align:center;">Loading...</div>
            </div>
            <div class="modal-footer">
                <button class="modal-action modal-close waves-effect waves-green btn-flat">Fermer</button>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script type="text/javascript">
        $('.modalBtn').click(function () {
            $('.videoContainer').html('');
            $('#modal_video').modal('open');
            var urlVideo = $(this).data("url");
            urlVideo = urlVideo.replace('videos', 'video');
            var player = '<div data-vimeo-url="https://vimeo.com' + urlVideo + '" id="player_vimeo"></div>';
            $('.videoContainer').html(player);
            var player_vimeo = new Vimeo.Player('player_vimeo');
        });
    </script>
    <script>
        $('.visibilityToggle').change(function () {
            var recId = $(this).data('id');
            var route = '/talent/me/recommandation/' + recId + '/toggle';
            $.ajax({
                type: "POST",
                url: route,
                dataType: "json",
                success: function (msg) {
                    console.log(msg);
                }
            });
        });
    </script>
{% endblock %}