{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% set active_menu = 'services' %}

{% 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'|url}}">{{ '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 %}
    {{ wysiwyg('.editor-textarea') }}
{% endblock %}

{% block content %}
    {{ render_widgets('client.order.manage.content.start', { 'order': order }) }}

    <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|format_currency(order.currency ?? default_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>
                                {{ mf.status_badge(order.status, 'order') }}
                            </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_to_html }}</td>
                            </tr>
                        {% endif %}

                        {% if order.active_tickets > 0 %}
                            <tr>
                                <td><label>{{ 'Active Support Tickets'|trans }}</label></td>
                                <td>
                                    <div class="num"><a href="{{ 'support'|url }}" class="redNum">{{ order.active_tickets }}</a></div>
                                    {# <div class="num"><a href="{{ 'support'|url }}" class="greenNum">{{ order.active_tickets }}</a></div> #}
                                    {# <div class="num"><a href="{{ 'support'|url }}" class="bludNum">{{ order.active_tickets }}</a></div> #}
                                </td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>
                    {{ render_widgets('client.order.manage.details.after', { 'order': order }) }}
                </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 %}
                    {{ render_widgets('client.order.manage.actions.end', { 'order': order }) }}
                </div>
            </div>

            {# Service management #}
            {% set service = null %}
            {{ render_widgets('client.order.manage.service.before', { 'order': order, 'service': service }) }}
            {% if order.status == 'active' and guest.system_template_exists({ 'file': service_partial }) %}
                {% set service = client.order_service({ 'id': order.id }) %}
                {{ include(service_partial, { 'order': order, 'service': service }) }}
            {% endif %}
            {{ render_widgets('client.order.manage.service.after', { 'order': order, 'service': service }) }}

            {# 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|format_currency(addon.currency ?? default_currency) }}</td>
                                    <td>{{ addon.period|period_title }}</td>
                                    <td>{% if addon.expires_at %}{{ addon.expires_at|format_date }}{% else %}-{% endif %}</td>
                                    <td>
                                        {{ mf.status_badge(addon.status, 'order') }}
                                    </td>
                                    <td class="actions">
                                        <a class="btn btn-outline-primary btn-sm" href='{{ "order/service/manage/#{addon.id}"|url }}'>{{ '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="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="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="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>
        document.addEventListener("DOMContentLoaded", function() {
            const cancelRequestForm = document.getElementById('cancel-request-form');
            const upgradeRequestForm = document.getElementById('upgrade-request-form');
            const openTicketForm = document.getElementById('open-ticket-form');

            cancelRequestForm.addEventListener('submit', function(event) {
                event.preventDefault();

                FOSSBilling.api.client.post('support/ticket_create', FOSSBilling.tools.serializeFormDataToObject(new FormData(cancelRequestForm)),
                    () => {
                        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', function(event) {
                event.preventDefault();

                FOSSBilling.api.client.post('support/ticket_create', FOSSBilling.tools.serializeFormDataToObject(new FormData(upgradeRequestForm)),
                    () => {
                        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', function(event) {
                event.preventDefault();

                FOSSBilling.api.client.post('support/ticket_create', FOSSBilling.tools.serializeFormDataToObject(new FormData(openTicketForm)),
                    () => {
                        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')
                    });
            });

        });

        const renewalButton = document.getElementById('renewal-button');
        if (renewalButton) {
            renewalButton.addEventListener('click', function (event) {
                event.preventDefault();

                if (confirm("This will generate new invoice. Are you sure you want to continue?")) {
                    FOSSBilling.api.client.post('invoice/renewal_invoice', { order_id: {{ order.id }} },
                        (result) => {
                            window.location = "{{ 'invoice'|url }}" + '/' + result;
                        });
                }
            });
        }
    </script>
{% endautoescape %}
{% endblock %}
