{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ order.title }}{% endblock %}

{% set addons = client.order_addons({ "id": order.id }) %}

{% block body_class %}order-manage{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{{ 'order/service' | link}}">{{ 'Services'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ order.title }}</li>
{% endblock %}

{% set service_partial = "mod_service" ~ order.service_type ~ "_manage.html.twig" %}
{% set upgradables = client.order_upgradables({ 'id': order.id }) %}

{% block head %}
    {{ mf.wysiwyg('.editor-textarea') }}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            {# Order info #}
            <div class="card mb-4">
                <div class="card-header py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-1">{{ 'Service details'|trans }}</h1>
                            <span class="small text-secondary">{{ 'All information about your service'|trans }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-hover table-bordered table-sm">
                        <tbody>
                        <tr>
                            <td><label>{{ 'Order'|trans }}</label></td>
                            <td>#{{ order.id }}</td>
                        </tr>

                        <tr>
                            <td><label>{{ 'Product name'|trans }}</label></td>
                            <td><strong>{{ order.title }}</strong></td>
                        </tr>

                        <tr>
                            <td><label>{{ 'Payment amount'|trans }}</label></td>
                            <td>{{ order.total|money(order.currency) }}</td>
                        </tr>

                        {% if order.period %}
                            <tr>
                                <td><label>{{ 'Billing cycle'|trans }}</label></td>
                                <td>{{ order.period|period_title }}</td>
                            </tr>
                        {% endif %}

                        <tr>
                            <td><label>{{ 'Order status'|trans }}</label></td>
                            <td>
                                <span class="badge {% if order.status == 'active' %}bg-success{% elseif order.status == 'pending_setup' %}bg-warning{% elseif order.status == 'failed_setup' or order.status == 'suspended' or order.status == 'failed_renew' %}bg-danger{% elseif order.status == 'canceled' %}bg-secondary{% endif %}">{{ mf.status_name(order.status) }}</span>
                            </td>
                        </tr>

                        <tr>
                            <td><label>{{ 'Order created'|trans }}</label></td>
                            <td>{{ order.created_at|format_date }}</td>
                        </tr>

                        <tr>
                            <td><label>{{ 'Activated at'|trans }}</label></td>
                            <td>{% if order.activated_at %}{{ order.activated_at|format_date }}{% else %}-{% endif %}</td>
                        </tr>

                        {% if order.period %}
                            <tr>
                                <td><label>{{ 'Renewal date'|trans }} {% if order.expires_at %} in {{ order.expires_at|daysleft }} day(s) {% endif %}</label></td>
                                <td>{% if order.expires_at %}{{ order.expires_at|format_date }}{% else %}-{% endif %}</td>
                            </tr>
                        {% endif %}

                        {% if order.notes %}
                            <tr>
                                <td><label>{{ 'Order notes'|trans }}</label></td>
                                <td>{{ order.notes|markdown }}</td>
                            </tr>
                        {% endif %}

                        {% if order.active_tickets > 0 %}
                            <tr>
                                <td><label>{{ 'Active support tickets'|trans }}</label></td>
                                <td>
                                    <div class="num"><a href="{{ 'support'|link }}" class="redNum">{{ order.active_tickets }}</a></div>
                                    {# <div class="num"><a href="{{ 'support'|link }}" class="greenNum">{{ order.active_tickets }}</a></div> #}
                                    {# <div class="num"><a href="{{ 'support'|link }}" class="bludNum">{{ order.active_tickets }}</a></div> #}
                                </td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    {% if order.period and order.status != 'failed_renew' %}
                        <button class="btn btn-primary btn-sm" type="button" id="renewal-button">{{ 'Renew now'|trans }}</button>
                    {% endif %}
                    {% if upgradables %}
                        <button class="btn btn-success btn-sm" type="button" id="request-upgrade" data-bs-toggle="modal" data-bs-target="#upgrade-request-modal">{{ 'Request Upgrade'|trans }}</button>
                    {% endif %}
                    <button class="btn btn-info btn-sm" type="button" id="open-ticket" data-bs-toggle="modal" data-bs-target="#open-ticket-modal">{{ 'Open ticket'|trans }}</button>
                    {% if order.status == 'active' %}
                        <button class="btn btn-danger btn-sm" type="button" id="request-cancel" data-bs-toggle="modal" data-bs-target="#cancel-request-modal">{{ 'Request cancellation'|trans }}</button>
                    {% endif %}
                </div>
            </div>

            {# Service management #}
            {% if guest.system_template_exists({ 'file': service_partial }) %}
                {% set service = client.order_service({ 'id': order.id }) %}
                {{ include(service_partial, { 'order': order, 'service': service }) }}
            {% endif %}

            {# Order addons #}
            {% if order.group_master == 1 and addons|length > 0 %}
            <div class="card mb-4">
                <div class="card-header py-3 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-1">{{ 'Addons'|trans }}</h1>
                            <span class="small text-secondary">{{ 'Addons you have ordered with this service'|trans }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                        <table class="table table-hover table-bordered table-sm">
                            <thead>
                            <tr>
                                <th>{{ 'Product/Service'|trans }}</th>
                                <th>{{ 'Price'|trans }}</th>
                                <th>{{ 'Billing Cycle'|trans }}</th>
                                <th>{{ 'Next due date'|trans }}</th>
                                <th>{{ 'Status'|trans }}</th>
                                <th>{{ 'Actions'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for i, addon in addons %}
                                <tr>
                                    <td>{{ addon.title }}</td>
                                    <td>{{ addon.total|money(addon.currency) }}</td>
                                    <td>{{ addon.period|period_title }}</td>
                                    <td>{% if addon.expires_at %}{{ addon.expires_at|format_date }}{% else %}-{% endif %}</td>
                                    <td>
                                        <span class="badge {% if addon.status == 'active' %}bg-success{% elseif addon.status == 'pending_setup' %}bg-warning{% endif %}">{{ mf.status_name(addon.status) }}</span>
                                    </td>
                                    <td class="actions">
                                        <a class="btn btn-outline-primary btn-sm" href="{{ '/order/service/manage'|link }}/{{ addon.id }}">{{ 'Manage'|trans }}</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endif %}

            <div class="modal fade" id="cancel-request-modal" tabindex="-1" role="dialog" aria-labelledby="cancel-modal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5">{{ 'Submit cancellation request'|trans }}</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                        </div>
                        <form action="" method="post" id="cancel-request-form" class="request-cancellation">
                            <div class="modal-body">
                                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                                <input type="hidden" name="rel_type" value="order">
                                <input type="hidden" name="rel_id" value="{{ order.id }}">
                                <input type="hidden" name="rel_task" value="cancel">
                                <div class="mb-3">
                                    <label for="support-helpdesk-id" class="form-label">{{ 'Help desk'|trans }}</label>
                                    {{ mf.selectbox('support_helpdesk_id', client.support_helpdesk_get_pairs, request.support_helpdesk_id, 1) }}
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">{{ 'Subject'|trans }}</label>
                                    <input class="form-control" type="text" name="subject" id="subject" value="{{ request.subject|e }}" required/>
                                </div>
                                <div class="mb-3">
                                    <label for="content" class="form-label">{{ 'Reason'|trans }}</label>
                                    <textarea class="form-control" id="content" name="content" rows="5" required>{{ request.content|e }}</textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-danger">{{ 'Request'|trans }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="open-ticket-modal" tabindex="-1" role="dialog" aria-labelledby="ticket-modal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5">{{ 'Submit new support ticket'|trans }}</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                        </div>
                        <form action="" method="post" id="open-ticket-form" class="open-ticket">
                            <div class="modal-body">
                                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                                <input type="hidden" name="rel_type" value="order">
                                <input type="hidden" name="rel_id" value="{{ order.id }}">
                                <div class="mb-3">
                                    <label for="support-helpdesk-id" class="form-label">{{ 'Help desk'|trans }}</label>
                                    {{ mf.selectbox('support_helpdesk_id', client.support_helpdesk_get_pairs, request.support_helpdesk_id, 1) }}
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">{{ 'Subject'|trans }}</label>
                                    <input class="form-control" type="text" name="subject" value="{{ request.subject|e }}" required/>
                                </div>
                                <div class="mb-3">
                                    <label for="content" class="form-label">{{ 'Message'|trans }}</label>
                                    <textarea class="editor-textarea form-control" id="content" name="content" rows="5" required>{{ request.content|e }}</textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">{{ 'Open ticket'|trans }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="upgrade-request-modal" tabindex="-1" role="dialog" aria-labelledby="upgrade-modal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5">{{ 'Submit upgrade request'|trans }}</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                        </div>
                        <form action="" method="post" id="upgrade-request-form" class="request-upgrade">
                            <div class="modal-body">
                                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                                <input type="hidden" name="rel_type" value="order">
                                <input type="hidden" name="rel_id" value="{{ order.id }}">
                                <input type="hidden" name="rel_task" value="upgrade">
                                <div class="mb-3">
                                    <label for="support-helpdesk-id" class="form-label">{{ 'Help desk'|trans }}</label>
                                    {{ mf.selectbox('support_helpdesk_id', client.support_helpdesk_get_pairs, request.support_helpdesk_id, 1) }}
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">{{ 'Subject'|trans }}</label>
                                    <input class="form-control" type="text" name="subject" id="subject" value="{{ request.subject|e }}" required />
                                </div>
                                <div class="mb-3">
                                    <label for="rel_new_value" class="form-label">{{ 'Upgrade to'|trans }}</label>
                                    {{ mf.selectbox('rel_new_value', upgradables, '', 1) }}
                                </div>
                                <div class="mb-3">
                                    <label for="content" class="form-label">{{ 'Notes'|trans }}</label>
                                    <textarea id="content" name="content" rows="5" required class="form-control" placeholder="Your comment">{{ 'I would like to upgrade'|trans }} {{ order.title }}</textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary" id="open-ticket-submit">{{ 'Request'|trans }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
{% autoescape "js" %}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {

            const cancelRequestForm = document.getElementById('cancel-request-form');
            const upgradeRequestForm = document.getElementById('upgrade-request-form');
            const openTicketForm = document.getElementById('open-ticket-form');

            cancelRequestForm.addEventListener('submit', (e) => {
                e.preventDefault();
                API.client.post('support/ticket_create',
                    new FormData(cancelRequestForm).serializeObject(),
                    () => {
                        FOSSBilling.message('Service cancellation request received');
                        const cancelRequestModal = bootstrap.Modal.getInstance(document.getElementById('cancel-request-modal'))
                        cancelRequestModal.hide();
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

            upgradeRequestForm.addEventListener('submit', (e) => {
                e.preventDefault();
                API.client.post('support/ticket_create',
                    new FormData(upgradeRequestForm).serializeObject(),
                    () => {
                        FOSSBilling.message('Service upgrade request received');
                        const upgradeRequestModal = bootstrap.Modal.getInstance(document.getElementById('upgrade-request-modal'))
                        upgradeRequestModal.hide();
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

            openTicketForm.addEventListener('submit', (e) => {
                e.preventDefault();
                API.client.post('support/ticket_create',
                    new FormData(openTicketForm).serializeObject(),
                    () => {
                        FOSSBilling.message('Ticket was submitted. If you want to track conversation please go to support section');
                        let openTicketModal = bootstrap.Modal.getInstance(document.getElementById('open-ticket-modal'));
                        openTicketModal.hide();
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

        });

        $(function () {
            $('#renewal-button').on('click', function (e) {
                e.preventDefault();

                if (confirm("This will generate new invoice. Are you sure you want to continue?")) {
                    bb.post(
                        'client/invoice/renewal_invoice',
                        {order_id: {{ order.id }}, CSRFToken: "{{ CSRFToken }}"},
                        function (result) {
                            bb.redirect("{{ 'invoice'|link }}" + '/' + result);
                        }
                    );
                }
            });
        });
    </script>
{% endautoescape %}
{% endblock %}
