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

{% block meta_title %}{{ 'Client Area'|trans }}{% endblock %}
{% block page_header %}{{ 'Dashboard'|trans }}{% endblock %}

{% block body_class %}dashboard{% endblock %}
{% block breadcrumbs %}
    {% if not settings.hide_dashboard_breadcrumb %}
        <ul class="breadcrumb">
            <li><a href="{{ '/'|link }}">{{ 'Home'|trans }}</a> <span class="dropdown-divider">/</span></li>
            <li class="active">{{ 'Dashboard'|trans }}</li>
        </ul>
    {% endif %}
{% endblock %}

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

{% block content %}
    {% if settings.showcase_enabled %}
        <div class="alert alert-info" role="alert">
            <p>{{ settings.showcase_text |markdown }}</p>

            {% if (settings.showcase_button_url) and (settings.showcase_button_title) %}
                <a class="btn btn-primary btn-large"
                   href="{{ settings.showcase_button_url }}">{{ settings.showcase_button_title }}</a>
            {% endif %}
        </div>
    {% endif %}

    {% if client %}
        {% set tickets = client.support_ticket_get_list({ "status": 'on_hold' }) %}
        {% if tickets.total > 0 %}
            <div class="row">
                <div class="col-md-12">
                    {% for i, ticket in tickets.list %}
                        <div class="alert alert-info d-flex justify-content-between" role="alert">
                            <span>Ticket <strong>#{{ ticket.id }}</strong> was replied to {{ ticket.updated_at|timeago }} {{ 'ago'|trans }}.</span><a
                                href="{{ 'support/ticket'|link }}/{{ ticket.id }}"
                                class="alert-link">{{ 'Reply'|trans }}</a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span class="h6 m-0 pt-1">{{ 'Profile'|trans }}</span>
                            <div class="py-2">
                                <a class="btn btn-sm btn-dark"
                                   href="{{ 'client/profile'|link }}">{{ 'Update'|trans }}</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Client ID'|trans }}</dt>
                                <dd class="col-sm-8">#{{ profile.id }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Email'|trans }}</dt>
                                <dd class="col-sm-8">{{ profile.email }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Balance'|trans }}</dt>
                                <dd class="col-sm-8">{{ profile.balance | money(profile.currency) }}</dd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span class="h6 m-0 pt-1">{{ 'Invoices'|trans }}</span>
                            <div class="py-2">
                                <a class="btn btn-sm btn-dark"
                                   href="{{ 'invoice'|link }}">{{ 'All Invoices'|trans }}</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Total'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.invoice_get_list().total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Paid'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.invoice_get_list({ "status": "paid" }).total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Unpaid'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.invoice_get_list({ "status": "unpaid" }).total }}</dd>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span class="h6 m-0 pt-1">{{ 'Orders'|trans }}</span>
                            <div class="py-2">
                                <a class="btn btn-sm btn-primary order-button"
                                   href="{{ 'order'|link }}">{{ 'New order'|trans }}</a>
                                <a class="btn btn-sm btn-dark"
                                   href="{{ 'order/service'|link }}">{{ 'All orders'|trans }}</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Total'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.order_get_list({ "hide_addons": 1}).total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Active'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.order_get_list({ "hide_addons": 1, "status": "active" }).total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Expiring'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.order_get_list({ "expiring": 1 }).total }}</dd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span class="h6 m-0 pt-1">{{ 'Tickets'|trans }}</span>
                            <div class="py-2">
                                <a class="btn btn-sm btn-primary"
                                   href="{{ 'support'|link({ 'ticket': 1 }) }}">{{ 'New ticket'|trans }}</a>
                                <a class="btn btn-sm btn-dark" href="{{ 'support'|link }}">{{ 'All tickets'|trans }}</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Total'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.support_ticket_get_list().total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'Open'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.support_ticket_get_list({ "status": 'open' }).total }}</dd>
                                <dt class="col-sm-4 text-muted small fw-normal">{{ 'On Hold'|trans }}</dt>
                                <dd class="col-sm-8">{{ client.support_ticket_get_list({ "status": 'on_hold' }).total }}</dd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header py-3">
                            <span class="h6 m-0 pt-1">{{ 'Recent orders'|trans }}</span>
                        </div>
                        <div class="card-body p-1">
                            {% if client.order_get_list({ "per_page": 5, "page": request.page, "hide_addons": 1 }).list %}
                                <div class="list-group list-group-flush">
                                    {% for i, order in client.order_get_list({ "per_page": 5, "page": request.page, "hide_addons": 1 }).list %}
                                        <a href="{{ 'order/service/manage'|link }}/{{ order.id }}"
                                           class="list-group-item d-flex justify-content-between align-items-center" aria-current="true">
                                            <div>
                                                <div>
                                                    <span><strong>#{{ order.id }}</strong></span>&nbsp;<span>{{ order.title|truncate(45) }}</span>
                                                </div>
                                                <span class="text-secondary small" title="{{ order.updated_at|format_date }}">{{ order.updated_at|timeago }} {{ 'ago'|trans }}</span>
                                            </div>
                                            <div>
                                                <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>
                                            </div>
                                        </a>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="d-flex justify-content-center my-2 p-2">
                                    <span class="m-0">{{ 'No recent orders'|trans }}</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header py-3">
                            <span class="h6 m-0 pt-1">{{ 'Support tickets'|trans }}</span>
                        </div>
                        <div class="card-body p-1">
                            {% if client.support_ticket_get_list({ "per_page": 5 }).list %}
                                <div class="list-group list-group-flush">
                                    {% for i, ticket in client.support_ticket_get_list({ "per_page": 5 }).list %}
                                        <a href="{{ 'support/ticket'|link }}/{{ ticket.id }}"
                                           class="list-group-item d-flex justify-content-between align-items-center" aria-current="true">
                                            <div>
                                                <div>
                                                    <span><strong>#{{ ticket.id }}</strong></span>&nbsp;<span>{{ ticket.subject|truncate(45) }}</span>
                                                </div>
                                                <span class="text-secondary small" title="{{ ticket.updated_at|format_date }}">{{ ticket.updated_at|timeago }} {{ 'ago'|trans }}</span>
                                            </div>
                                            <div>
                                                <span class="badge {% if ticket.status == 'open' %}bg-success{% elseif ticket.status == 'on_hold' %}bg-warning{% elseif ticket.status == 'closed' %}bg-secondary{% endif %}">{{ mf.status_name(ticket.status) }}</span>
                                            </div>
                                        </a>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="d-flex justify-content-center my-2 p-2">
                                    <span class="m-0">{{ 'No recent support tickets'|trans }}</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header h6 py-3">{{ 'Profile'|trans }}</div>
                    <div class="card-body">
                        <p>{{ 'You are currently logged out'|trans }}</p>
                        <div class="d-flex gap-2">
                            <a class="btn btn-sm  btn-primary" href="{{ '/login'|link }}">{{ 'Login'|trans }}</a>
                            <a class="btn btn-sm btn-dark" href="{{ '/signup'|link }}">{{ 'Register'|trans }}</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header h6 py-3">{{ 'Order'|trans }}</div>
                    <div class="card-body">
                        <p>{{ 'Order new products and services'|trans }}</p>
                        <div class="d-flex gap-2">
                            <a class="btn btn-sm btn-dark" href="{{ '/order'|link }}">{{ 'Order'|trans }}</a>
                        </div>
                    </div>
                </div>
            </div>

            {% if guest.extension_is_on({"mod":"news"}) %}
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header h6 py-3">{{ 'News'|trans }}</div>
                        <div class="card-body">
                            <p>{{ 'Latest news and announcements' | trans }}</p>
                            <div class="d-flex gap-2">
                                <a class="btn btn-sm btn-dark" href="{{ '/news'|link }}">{{ 'Announcements'|trans }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if guest.support_kb_enabled() %}
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header h6 py-3">{{ 'Knowledge Base'|trans }}</div>
                        <div class="card-body">
                            <p>{{ 'Find answers to frequent questions' | trans }}</p>
                            <div class="d-flex gap-2">
                                <a class="btn btn-sm btn-dark" href="{{ '/support/kb'|link }}">{{ 'Knowledge Base'|trans }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}
