
{% include 'header.twig' %}
<div class="wrapper-content">
    <div class="wrapper-content__header">
    </div>
    <div class="wrapper-content__body">
        <div id="block_69">
            <div class="text-block">
                <div class="bg"></div>
                <div class="divider-top"></div>
                <div class="divider-bottom"></div>
    
                <div class="row ticket-form__alignment">
                    <div class="col-lg-6">
                        <div class="component_card">
                            <div class="card">
                                <div>

                                    {% if error %}
                                    <div class="alert alert-dismissible alert-danger">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        {{ errorText }}
                                    </div>
                                    {% endif %}
                                    {% if success %}
                                    <div class="alert alert-dismissible alert-success">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        {{ successText }}
                                    </div>
                                    {% endif %}

                                    <div class="ticket-dialog__title">
                                        <h3>{{ messageList['ticket']['subject'] }}</h3>
                                        {% if messageList["ticket"]["canmessage"] == 1 %}
                                        <span class="badge"> This Ticket has been closed by the administrator</span>
                                        {% endif %}
                                    </div>

                                    {% if messageList %}
                                    {% for message in messageList %}
                                    {% if message["support"] == 1 %}
                                    <div class="ticket-dialog__body component_ticket_messages">
                                        <div class="col-md-12">
                                            <div class="ticket-dialog__row ticket-dialog__row-admin">
                                                <div class="ticket-dialog__row-message">{{ message["message"]|replace({'\r\n': '<br>', '\n': '<br>'}) }}</div>
                                                {% if message["image_url"] %}
                                                <div class="ticket-dialog__row-image">
                                                    <img src="uploads/{{ message['image_url'] }}" alt="Uploaded Image" style="max-width: 60%;">
                                                </div>
                                                {% endif %} 
                                                <div class="ticket-dialog__row-bottom">
                                                    <div class="ticket-dialog__row-bottom-name">{{ user["username"] }}</div>
                                                    <div class="ticket-dialog__row-bottom-date">{{ message["time"] }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% elseif message["subject"] %}
                                    {% else %}
                                    <div class="ticket-dialog__row ticket-dialog__row-user">
                                        <div class="ticket-dialog__row-message">{{ message["message"]|replace({'\r\n': '<br>', '\n': '<br>'}) }}</div>
                                        <div class="ticket-dialog__row-bottom">
                                            <div class="ticket-dialog__row-bottom-name">Support Team <img src="https://cdn.mypanel.link/08ed14/2behggr3l6cn74dd.png" width="20"></div>
                                            <div class="ticket-dialog__row-bottom-date">{{ message["time"] }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                    {% endif %}

                                    {% if messageList['ticket']['canmessage'] == 2 %}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form method="post" action="tickets/{{ messageList['ticket']['ticket_id'] }}" enctype="multipart/form-data">
                                                <div class="form-group panel-border-top"><br>
                                                    <label for="message" class="control-label">Message</label>
                                                    <textarea id="message" rows="5" class="form-control" name="message">{{ data["message"] }}</textarea>
                                                </div>
                                                <div class="form-group">
                                                    <label for="imageInput" class="control-label">Upload Image</label>
                                                    <input type="file" accept=".jpg, .jpeg, .png" class="form-control" id="imageInput" name="image">
                                                </div>

                                                <div class="form-group">
                                                    <img id="previewImage" src="" alt="Preview Image" style="max-width: 100%; display: none;">
                                                </div>

                                                <button type="submit" id="submitButton" class="btn btn-block btn-big-primary">Submit</button>
                                            </form>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

{% include 'footer.twig' %} 
<script>
    function uploadImage() {
        const fileInput = document.getElementById('imageInput');
        const previewImage = document.getElementById('previewImage');
        const file = fileInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                previewImage.src = event.target.result;
                previewImage.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            previewImage.style.display = 'none'; // Hide the preview if no file is selected
        }
    }
</script>