{#
 # This file is part of SolidInvoice package.
 #
 # (c) Pierre du Plessis <open-source@solidworx.co>
 #
 # This source file is subject to the MIT license that is bundled
 # with this source code in the file LICENSE.
 #}

{% set currency = client.currency %}

{% extends "@SolidInvoiceCore/Layout/default.html.twig" %}

{% block page_title %}
    {{ client.name }}
{% endblock page_title %}

{% block content %}
    {% set totalAddresses = client.addresses|length %}

    <div class="row">
        <div class="col-md-3">
            <div class="card card-primary">
                <div class="card-body box-profile">

                    <h3 class="profile-username text-center">{{ client.name }}</h3>

                    <p class="text-muted text-center">
                        <h4 class="text-center">{{ client_label(client.status) }}</h4>
                    </p>
                    <p>
                        <span>
                            <a href="{{ path('_clients_edit', {'id' : client.id}) }}" class="btn btn-warning btn-sm">
                                {{ icon('edit') }} {{ "client.view.actions.edit"|trans }}
                            </a>
                        </span>
                        <span class="float-right">
                            <a href="{{ path('_xhr_clients_delete', {'id' : client.id}) }}" class="btn btn-danger btn-sm" id="delete-client">
                                {{ icon('trash-o') }} {{ "client.view.actions.delete"|trans }}
                            </a>
                        </span>
                    </p>

                    <ul class="list-group list-group-unbordered">

                        {% if client.website %}
                            <li class="list-group-item">
                                <b>{{ icon('globe') }} {{ 'Website'|trans }}</b> <a href="{{ client.website }}" class="float-right" rel="external">{{ client.website }}</a>
                                <small>{{ icon('external-link') }}</small>
                            </li>
                        {% endif %}

                        {% if client.currency %}
                            <li class="list-group-item">
                                <b>{{ icon('money') }} {{ 'client.view.currency'|trans }}</b> <span class="float-right">
                                    {{ client.currencyCode is empty ? 'System Default' : client.currencyCode }}
                                </span>
                            </li>
                        {% endif %}

                        {% if client.vatNumber is not empty %}
                            <li class="list-group-item">
                                <b>{{ 'tax.vat_number'|trans }}</b> <span class="float-right">{{ client.vatNumber }}</span>
                            </li>
                        {% endif %}

                        <li class="list-group-item">
                            <div class="text-center text-info">
                                <twig:ClientCredit :client="client" />
                            </div>

                        </li>
                    </ul>

                    <a href="{{ path("_quotes_create", {"client" : client.id}) }}" class="btn btn-info btn-block">
                        {{ icon('file-text-o') }} {{ "client.view.actions.create_quote"|trans }}
                    </a>
                    <a href="{{ path("_invoices_create", {"client" : client.id}) }}" class="btn btn-info btn-block">
                        {{ icon('file-text-o') }} {{ "client.view.actions.create_invoice"|trans }}
                    </a>
                </div>
            </div>

            <div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title">{{ icon('bar-chart') }} Stats</h3>
                </div>
                <div class="card-body">
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>{{ total_income(client)|formatCurrency(client.currency) }}</h3>

                            <p>{{ "client.stats.income"|trans }}</p>
                        </div>
                        <div class="icon">
                            {{ icon('money') }}
                        </div>
                    </div>

                    <hr>

                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>{{ total_outstanding(client)|formatCurrency(client.currency) }}</h3>

                            <p>{{ "client.stats.outstanding"|trans }}</p>
                        </div>
                        <div class="icon">
                            {{ icon('money') }}
                        </div>
                    </div>

                    <ul class="list-group list-group-unbordered">
                        <li class="list-group-item">
                            <span rel="tooltip" title="{{ "client.stats.tooltip.total_quotes"|trans }}" class="badge badge-pill bg-aqua">
                                {{ client.quotes|length }}
                            </span>
                            {{ "client.stats.number_quotes"|trans({'%count%': client.quotes|length}) }}
                        </li>
                        <li class="list-group-item">
                            <span rel="tooltip" title="{{ "client.stats.tooltip.total_invoices"|trans }}" class="badge badge-pill bg-aqua">
                                {{ client.invoices|length }}
                            </span>
                            {{ "client.stats.number_invoices"|trans({'%count%': client.invoices|length}) }}
                        </li>
                        <li class="list-group-item">
                            <span class="badge badge-pill bg-aqua" rel="tooltip" title="{{ "client.stats.tooltip.total_outstanding"|trans }}">
                                {{ total_invoices_pending }}
                            </span>
                            {{ "client.stats.outstanding_invoices"|trans }}
                        </li>
                        <li class="list-group-item">
                            <span class="badge badge-pill bg-aqua" rel="tooltip" title="{{ "client.stats.tooltip.total_paid"|trans }}">
                                {{ total_invoices_paid }}
                            </span>
                            {{ "client.stats.paid_invoices"|trans }}
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="col-md-9">
            <div class="widget">
                <div role="tabpanel" class="nav-tabs-custom">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="nav-item">
                            <a href="#client-info" aria-controls="client-info" role="tab" data-toggle="tab" class="nav-link active">
                                {{ 'client.view.tabs.info'|trans }}
                            </a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a href="#quotes" aria-controls="quotes" role="tab" data-toggle="tab" class="nav-link">
                                {{ 'client.view.tabs.quotes'|trans }}
                            </a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a href="#invoices" aria-controls="invoices" role="tab" data-toggle="tab" class="nav-link">
                                {{ 'client.view.tabs.invoices'|trans }}
                            </a>
                        </li>
                        {% if payments|length > 0 %}
                            <li role="presentation" class="nav-item">
                                <a href="#payments" aria-controls="payments" role="tab" data-toggle="tab" class="nav-link">
                                    {{ 'client.view.tabs.payments'|trans }}
                                </a>
                            </li>
                        {% endif %}
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="client-info">
                            <twig:ContactCollection :client="client" count="{{ client.contacts|length }}" />
                            <twig:AddressCollection :client="client" count="{{ client.addresses|length }}" />
                        </div>
                        <div role="tabpanel" class="tab-pane" id="quotes">
                            {% include "@SolidInvoiceClient/quote_list.html.twig" %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="invoices">
                            {% include "@SolidInvoiceClient/invoice_list.html.twig" %}
                        </div>
                        {% if payments|length > 0 %}
                            <div role="tabpanel" class="tab-pane" id="payments">
                                <div class="card no-border">
                                    <div class="card-header">
                                        <h3 class="card-title">
                                            {{ icon('credit-card') }} {{ "payments"|trans }}
                                        </h3>
                                    </div>
                                    <div class="card-body">
                                        {% include "@SolidInvoicePayment/Payment/list.html.twig" with {"data" : {'client': client.id}} only %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
