{% extends 'company/base_dashboard_company.html.twig' %}

{% block dashContent %}

    <div class="row bg-bordered p-0">
        {% include 'company/ad_steps.html.twig' with {'tab':2} %}

        <div class="p-20">
            <div class="row">
                <div class="col s12">
                    <ul id="tabs-video" class="tabs">
                        <li class="tab col s4"><a class="active" href="#tab-video-new">Ajouter une nouvelle vidéo</a>
                        </li>
                        <li class="tab col s4"><a href="#tab-video-select">Utiliser une vidéo existante</a></li>
                    </ul>
                </div>
                <div id="tab-video-new" class="col s12">
                    {% include 'media/dropzone.html.twig' %}
                    {{ form_start(form, {'attr': { 'id': 'form_media' } }) }}
                    {{ form_widget(form) }}
                    <a href="{{ path('company_ad_edit',{"id": ad.getId()}) }}" class="btn btn-round btn-dark">Etape précédente</a>
                    <button id="submit" class="btn btn-default hide" type="submit">Etape suivante</button>
                    {{ form_end(form) }}
                </div>
                <div id="tab-video-select" class="col s12">
                    <div class="row">
                        {#{% for vid in videos %}#}
                            {#<div class="col s4">#}
                                {#<a class="addExistingVideo tooltipped btn btn-default" data-position="top"#}
                                   {#data-tooltip="Choisir cette vidéo" href="#" data-title="{{ vid.getTitle() }}"#}
                                   {#data-id="{{ vid.getId() }}">#}
                                    {#<span>{{ vid.getTitle() }}</span><br/>#}
                                {#</a>#}
                                {#<iframe src="https://player.vimeo.com{{ vid.getCdnUrl()|replace({ "videos": "video"}) }}"#}
                                        {#width="90%" height="auto" frameborder="0" webkitallowfullscreen#}
                                        {#mozallowfullscreen allowfullscreen></iframe>#}
                            {#</div>#}
                        {#{% endfor %}#}
                        {% if videos|length > 0 %}
                            {% include 'default/video_card.html.twig' %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var stepDate = '{{ path("company_ad_step3",{"id": ad.getId()}) }}';
        $('.slider').slider();
        $(".addExistingVideo").click(function () {
            var idVideo = $(this).data("id");
            $.ajax({
                type: 'POST',
                url: '{{ path("link_media", {"id": ad.getId() }) }}',
                data: "idVideo=" + idVideo,
                dataType: 'html',
                success: function (response) {
                    Materialize.toast('Vidéo associé Merci', 4000);
                    document.location.href = stepDate;

                },
                error: function (response, xhr, ajaxOptions, thrownError) {
                    Materialize.toast('Erreur lors de l\'association de la vidéo!', 4000);
                }
            });
        });
    </script>
    <script type="text/javascript">
        var urlDropzone = '{{ path("upload_media", {"id": ad.getId()}) }}';
        var urlDelete = '{{ path("delete_media", {"id": ad.getId() }) }}'
        var idObject = '{{ ad.getId() }}';
        var typeObject = "ad";
        {% if video %}
        if ($("#form_media").length) {
            $("#form_media #submit").removeClass('hide').fadeIn();
        }
        var videoExist = true;
        var videoOriginal = "{{ video.getOriginalUrl() }}";
        var mockFile = {name: '{{ video.getTitle() }}', size: '181818181', type: 'mp4', serverID: 0, accepted: true};
        {% else %}
        var videoExist = false;
        {% endif %}

    </script>
    <script src="{{ asset('/js/dropzone.js') }}"></script>
{% endblock %}