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

{% set title = 'Meeting sheet' %}

{% block doctype %}
    {% block stylesheets %}
        {{ parent() }}
        <link href="{{ asset('build/css/meetingSheet.css') }}" rel="stylesheet"/>
        <link href="{{ asset('build/css/fontawesome.css') }}" rel="stylesheet"/>
    {% endblock %}
    {% block tab_name %}
        <title>M'A :: Meeting sheet</title>
    {% endblock %}
{% endblock %}
{% block body %}
    {% block javascripts %}
        {{ parent() }}
        <script src="{{ asset('build/js/meeting.js') }}"></script>
        <script src="{{ asset('build/js/meetingSheet.js') }}"></script>
    {% endblock %}
    {% block main %}
        {{ parent() }}
        {% block alertMessage %}
            <div class="alert-msg hidden">
                <p class="alert-msg-title"></p>
                <p class="alert-msg-text"></p>
            </div>
        {% endblock %}
        {% block form %}
            <div class="popup-bg">
            </div>
            <div id="popup-add-participant" class="popup">
                <p class="popup-title">Add an attendee</p>
                <div class="popup-content">
                    <input id="popup-lastname" type="text" placeholder="Last name"/>
                    <input id="popup-firstname" type="text" placeholder="First name"/>
                    <input id="popup-mail" type="text" placeholder="Email"/>
                    <div id="existing-attendee-div">
                        <p class="popup-subtitle">Or select an existing one</p>
                        <select id="existing-attendee-select">
                            <option>Select an existing attendee...</option>
                        </select>
                    </div>
                    <button class="form-btn">Add to the meeting</button>
                </div>
            </div>
            <div id="popup-delete-meeting-confirm" class="popup">
                <p class="popup-title">Confirm meeting deletion</p>
                <div class="popup-content">
                    <p>Are you sure you want to delete the current meeting ?</p>
                    <button class="form-btn" onclick="closePopup();">Cancel</button>
                    <button class="form-btn" onclick="deleteMeeting(null, true, {{ meeting_data.m_id }});">Confirm</button>
                </div>
            </div>
            <div id="data-zone">
                <div id="zone-1">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting headers</p>
                    </div>
                    <div id="m_title">
                        <p>Meeting title</p>
                        <input id="meeting-title" class="disabled to-disable" disabled value="{{ meeting_data.m_title }}"/>
                    </div>
                    <div id="m_start_date">
                        <p>Start datetime</p>
                        <input id="meeting-start-date" class="disabled to-disable" disabled type="datetime" value="{{ meeting_data.m_start_date|date("d-m-Y H:i") }}"/>
                    </div>
                    <div id="m_end_date">
                        <p>End datetime</p>
                        <input id="meeting-end-date" class="disabled to-disable" disabled type="datetime" value="{{ meeting_data.m_end_date|date("d-m-Y H:i") }}"/>
                    </div>
                    <div id="m_room">
                        <p>Room</p>
                        <input id="meeting-room" class="disabled to-disable" disabled value="{{ meeting_data.m_room }}"/>
                    </div>
                    <div id="m_desc">
                        <p>Description</p>
                        <textarea id="meeting-desc" class="disabled to-disable" disabled>{{ meeting_data.m_desc }}</textarea>
                    </div>
                    <div id="m_day_order">
                        <p>Day orders</p>
                        <textarea id="meeting-day-order" class="disabled to-disable" disabled>{{  meeting_data.m_day_order }}</textarea>
                    </div>
                </div>
                <div id="zone-2">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting body</p>
                    </div>
                    <div id="icons">
                        <p>Attendees</p>
                        <i id="add" class="fas fa-plus-circle disabled to-disable"></i>
                        <i id="remove" class="fas fa-minus-circle disabled to-disable"></i>
                        <i id="edit" class="fas fa-edit disabled to-disable"></i>
                    </div>
                    <table>
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Email</th>
                        </tr>
                        <img id="hidden-cross" style="display: none" src="{{ asset('build/images/croix_rouge.png') }}"/>
                        {% for attendee in meeting_data.m_attendees.0 %}
                            <tr class="participant-row">
                                <td><input disabled class="participant-row-val fn disabled to-disable" value="{{ attendee.firstName }}"></td>
                                <td><input disabled class="participant-row-val ln disabled to-disable" value="{{ attendee.lastName }}"></td>
                                <td><input disabled class="participant-row-val m disabled to-disable" value="{{ attendee.mail }}"><img style="display: none" onclick="removeParticipant(this);" src="{{ asset('build/images/croix_rouge.png') }}" class="red-cross-rem"/></td>
                            </tr>
                        {% endfor %}
                    </table>
                    <div id="btn-actions">
                        <button type="button" class="form-btn" id="btn-link" onclick="updateMeeting(this);">Update the meeting</button>
                        <button type="button" class="form-btn" onclick="deleteMeeting(this, false);">Delete the meeting</button>
                    </div>
                </div>
                <div id="zone-3">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting reporting</p>
                    </div>
                    <div id="meeting-report-zone" class="meeting-data">
                        <div id="m_report">
                            <textarea id="meeting-report" class="disabled to-disable" disabled placeholder="Write your report here">{{ meeting_data.m_report }}</textarea>
                        </div>
                        <div id="btn-actions">
                            <a href="{{ path('create_meeting_report_pdf', {'meetingId': meeting_data.m_id}) }}"><button class="form-btn" id="btn-link">Generate<br>meeting report</button></a>
                            <a onclick="sendMeetingReport({{ meeting_data.m_id }});"><button class="form-btn">Send<br>meeting report</button></a>
                        </div>
                    </div>
                </div>
                <div id="zone-4">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting recording</p>
                    </div>
                    <div id="meeting-record">
                        <button type="button" id="record" class="btn-record">
                            <i class="fas fa-microphone"></i>
                            Start recording
                        </button>
                        <button type="button" id="stop" class="btn-record">
                            <i class="fas fa-stop"></i>
                            Stop recording
                        </button>
                        <div id="records">
                            {% if meeting_data.m_tags|length > 0 %}
                                <article class="clip">
                                    <div class="data-track">

                                    </div>
                                    <audio></audio>
                                    <div class="data-track">
                                        <button class="delete-track">Delete the track</button>
                                    </div>
                                    <div class="track-tags-div">
                                        <p class="track-tags">Track tags</p>
                                    </div>
                                    <div class="data-track tags-div" id="data-tags" style="border: none;" ondragover="allowDrop(event);" ondrop="drop(event, 'data-tags');">
                                    {% for tag in meeting_data.m_tags %}
                                        {% set color = tag.t_color %}
                                        {% set name = tag.t_name %}
                                        {% set id = tag.t_id %}
                                        <span draggable="true" ondragstart="drag(event)" class="tag" id="tag-{{ id }}" style="background-color: {{ color }}">{{ name }}</span>
                                    {% endfor %}
                                    </div>
                                </article>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div id="zone-5" ondrop="drop(event, 'meeting-tags')" ondragover="allowDrop(event)">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Tags</p>
                    </div>
                    <div id="meeting-tags">
                        {% for tag in tags %}
                            {% set color = tag.t_color %}
                            {% set name = tag.t_name %}
                            {% set id = tag.t_id %}
                            <span draggable="true" ondragstart="drag(event)" class="tag" id="tag-{{ id }}" style="background-color: {{ color }}">{{ name }}</span>
                        {% endfor %}
                        <span class="tag" id="new-tag">
                            <i class="fas fa-plus-circle"></i>
                            NEW TAG
                        </span>
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endblock %}
{% endblock %}