{% extends 'default.html' %}

{% set active_page = 'dashboard' %}

{% block title %}
    Support
{% endblock %}

{% block head %}
    <style>
        .card-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 3px;
        }
    </style>
{% endblock %}

{% block script %}
    <script>
        $( document ).ready(function() {
            var app = new Vue({
                el: '#aliasGroup',
                data: {
                    ticketEmail: '{{ ticketEmail }}'
                },
                methods: {
                    generateRandomAlias: async function(event){
                        let result = await fetch('/api/alias/random/new', { method: 'POST'})
                        if(result.ok){
                            let data = await result.json();
                            this.ticketEmail = data.alias;
                        }
                    }
                }
            });

            $('.custom-file input').change(function (e) {
                var files = [];
                for (var i = 0; i < $(this)[0].files.length; i++) {
                    files.push($(this)[0].files[i].name);
                }
                $(this).next('.custom-file-label').html(files.join(', '));
            });


        })
    </script>
{% endblock %}

{% block default_content %}

    <div class="col pb-3">
        <!-- Current plan -->
        <div class="card">
            <div class="card-body">
                <div class="card-title mb-3">Report a problem</div>
                <div class="card-subtitle mt-2 mb-2 pl-3 border-left border-warning" style="border-left-width: 5px !important;" >
                    If an email cannot be delivered to your mailbox, please check <a href="/dashboard/notifications">your notifications</a> for error messages
                </div>
                <div class="mt-2">
                    A support ticket will be created in Zendesk. Please do not include any sensitive information in the ticket.
                </div>
                <form id="supportZendeskForm" method="post" enctype="multipart/form-data">
                    <div class="mt-4 mb-5">
                        <label for="issueDescription" class="form-label">What happened?</label>
                        <textarea class="form-control" name="ticketContents" id="issueDescription" rows="3" placeholder="Please provide as much information as possible. For example which alias(es), mailbox(es) ar affected, if this is a persistent issue...">{{- ticketContents or '' -}}</textarea>
                    </div>
                    <div class="mt-5 font-weight-bold">
                        Attach files to support request
                    </div>
                    <div class="mt-1 text-muted">Only images, text and emails are accepted</div>
                    <div class="custom-file mt-2">
                        <input type="file" class="custom-file-input" name="ticketFiles" id="ticketFileGroup" multiple="multiple">
                        <label class="custom-file-label" for="ticketFileGroup">Choose file</label>
                    </div>
                    <div class="mt-5 font-weight-bold">
                        Where can we reach you?
                    </div>
                    <div class="mt-2">
                        Conversations related to this ticket will be sent to this address. Feel free to use an alias here.
                    </div>
                    <div class="input-group mb-3" id="aliasGroup">
                        <input type="text" class="form-control" placeholder="Email" name="ticketEmail" v-model='ticketEmail' aria-label="Email to send responses to" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" type="button" @click="generateRandomAlias" id="button-addon2">Generate a random alias</button>
                        </div>
                    </div>
                    <div class="mt-5">
                        <button class="btn btn-primary">Create support ticket</button>
                    </div>
                </form>

            </div>
        </div>

    </div>

{% endblock %}