{% extends 'membersmessaging/layouts/membersmessaging.twig' %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="{{ route('admin.messaging.index') }}">Admin</a> /</li>
        <li class="end">View Messages</li>
    </ul>

    <h1>
        Messages for Thread: {{ thread.title }}
    </h1>

    {% include 'membersmessaging/admin/widgets/tabnav.twig' %}

    <!-- Display previous threads along with links to each of them -->
    <!-- Make this collapsable -->

    <div class="mm__view-thread-container">
        <div class="mm__view-thread-left">

            <div class="mm__participants">
                <h1>Participants</h1>
                <div class="mm__participants-list">
                    {% for p in thread.participants() %}
                        <ul>
                            <li>
                                <p>{{ p.getDisplayName() }}</p>
                                <p>{{ p.getDisplayEmail() }}</p>
                                <p>{{ p.getDisplayType() }}</p>
                            </li>
                        </ul>
                    {% endfor %}
                </div>
            </div>
            
            <div class="mm__thread-messages">
                <h1 class="mm__heading">{{ thread.title }}</h1>
                <div name="" class="mm__thread-messages-list">
                    {% for message in thread.messages %}
                        <div class="mm__thread-message {{ message.authorType() }}">
                            <p>{{ message.authorName() }}</p>
                            <div class="mm__message-content">{{ message.text|sanitized_html }}</div>
                            <p><em>Sent: {{ message.created_at|date('d/m/Y H:i') }}</em></p>
                        </div>
                    {% endfor %}
                </div>

                {% if not thread.isClosedOrArchived() %}
                <div class="mm__template-select-wrapper">
                    <select id="template-select" name="template-select" class="mm__template-select no-chosen">
                        <option value="0">No Template</option>
                        {% for template in templates %}
                            <option value="{{ template.id }}" data-index="{{ template.id }}">{{ template.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mm__thread-reply-wrapper">
                    <textarea class="tinymce" id="message_reply" name="text"></textarea>
                    <button name="reply" class="mm__thread-reply-btn">Submit</button>
                </div>
                {% else %}
                <p><em>This thread is closed or archived. You cannot reply.</em></p>
                {% endif %}


            </div>
        </div>

        <div class="mm__view-thread-right">
            <h1>Order For Current Thread</h1>
            <div class="mm__order">
                        {% if not thread.order or not thread.order.id %}
                            <p>No orders for this thread.</p>
                        {% else %}
                <table class="mm__orders-table">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Date</th>
                            <th>Items</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                            {% set order = thread.order %}
                            <tr>
                                <td>{{ order.id }}</td>
                                <td>{{ order.created_at|date('d/m/Y') }}</td>
                                <td>
                                    <ul>
                                        {% for item in order.items %}
                                            <li>{{ item.item_name }} (x{{ item.quantity }})</li>
                                        {% endfor %}
                                    </ul>
                                </td>
                                <td>{{ order.getStatusName() }}</td>
                                <td><a href="{{ order.getAdminUrl() }}">View Order</a></td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>            
            <h1>Other Orders for This Customer</h1>

            {% set otherOrders = thread.member.getOtherOrders(thread.order.id) %}
            
            <table class="mm__orders-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Date</th>
                        <th>Items</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% if otherOrders is empty %}
                        <tr>
                            <td colspan="5">No other orders for this customer.</td>
                        </tr>
                    {% else %}
                        {% for order in otherOrders %}
                            <tr>
                                <td>{{ order.id }}</td>
                                <td>{{ order.created_at|date('d/m/Y') }}</td>
                                <td>
                                    <ul>
                                        {% for item in order.items %}
                                            <li>{{ item.item_name }} (x{{ item.quantity }})</li>
                                        {% endfor %}
                                    </ul>
                                    {# TODO: Add CSS later to style the list nicely inside the table cell #}
                                </td>
                                <td>{{ order.getStatusName() }}</td>
                                <td><a href="{{ order.getAdminUrl() }}">View Order</a></td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
            <div class="mm__other-threads">
                <h1 class="mm__heading">{{ thread.getThreadMemberName() }}'s Other Threads</h1>
                <div class="mm__other-threads-list">
                    {% if thread.otherThreads() is empty %}
                        <p>No other threads for this member.</p>
                    {% else %}
                    {% for t in thread.otherThreads() %}
                        <a href="{{ route('admin.messaging.view_thread', t.url) }}">
                            <ul>
                                <li>
                                    <p>{{ t.status_name }}</p>
                                    <p>{{ t.title | default('Missing Title') }}</p>
                                    <p>{{ t.updated_at|date('d/m/Y H:i') }}</p>
                                </li>
                            </ul>
                        </a>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>


{% endblock %}
