{% set template_title = "C4S_B2B_ACCOUNT_BASKETS_USER"|translate %}
{% capture append = "oxidBlock_title" %}
    <h1 class="c4s-account-page-header">{{ template_title }}</h1>
{% endcapture %}

{% capture append = "oxidBlock_content" %}
    {% block c4s_b2b_user_baskets_styles %}
        {{ style({ include: oViewConf.getVersionedModuleUrl('c4s_b2b_approvals', 'out/src/css/c4s_b2b_approval.css')}) }}
    {% endblock %}

    {% block c4s_b2b_user_baskets_scripts %}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_b2b_approvals", "out/src/js/c4s_b2b_approval_filter.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
    {% endblock %}

    {% set oB2BAccount = oxcmp_user.getB2BAccount() %}
    {% set oBaskets = oView.getB2BBaskets() %}

    {% ifcontent ident "c4s_b2b_approval_usr_basket_info" set oCont %}
        <div class="mb-3 c4s-approval-user-baskets-info" data-snippet-ident="c4s_b2b_approval_usr_basket_info">
            {{ oCont.oxcontents__oxcontent.value|raw }}
        </div>
    {% endifcontent %}

    {# TODO: JS with FILTER OPTIONS ! #}
    {% if oBaskets|length > 0 %}
        <div class="c4s-b2b-approval-filter">
            <div class="card c4s-approval-filter-card">
                <div class="card-body d-flex align-items-center">
                    <div class="me-auto c4s-filter-title">
                        <strong><i class="fa-solid fa-filter"></i> {{ translate({ ident: "C4S_B2B_BASKET_FILTER" }) }}</strong>
                    </div>

                    {# reset filter button #}
                    <button class="btn btn-sm btn-link c4s-filter-reset"
                            data-bs-toggle="tooltip"
                            data-bs-trigger="hover"
                            data-bs-container="body"
                            data-bs-html="true"
                            title="{{ translate({ ident: "C4S_B2B_BASKET_BTN_FILTER_RESET" }) }}">
                        <i class="fa-solid fa-repeat fa-flip-horizontal"></i>
                    </button>

                    {# status filter #}
                    <div class="dropdown c4s-filter">
                        <button class="btn btn-sm btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ translate({ ident: "C4S_B2B_BASKET_STATUS" }) }}
                            <span class="selected"></span>
                            <i class="fa-solid fa-chevron-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-type="status" data-value="submitted">{{ translate({ ident: "C4S_B2B_BASKET_SUBMITTED" }) }}</a></li>
                            <li><a class="dropdown-item" href="#" data-type="status" data-value="approved">{{ translate({ ident: "C4S_B2B_BASKET_APPROVED" }) }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="c4s-b2b-basket-list">
        {% for oBasket in oBaskets %}
            {% set blShowPositionsNotItemsInMinibasket = oViewConf.isFunctionalityEnabled("blShowPositionsNotItemsInMinibasket") %}
            {% set oUserBasket = oBasket.getUserBasket() %}
            {% set blIsApproved = oUserBasket.getIsApproved() %}   {# Status ob der Warenkorb bereits freigegeben wurde #}
            {% set oInitialUser = oUserBasket.getInitialUser() %}  {# User welcher Warenkorb zur Freigabe eingereicht hat #}
            {% set oApprover = oUserBasket.getApprover() %}        {# User welcher Freigabe durchführen soll #}
            {% set aBasketItems = oBasket.getContents() %}
            {% set aUserBasketItems = oUserBasket.getItems() %}
            {% set blIsRejected = false %}

            {% if not blIsApproved and not oUserBasket.getNeedApproval() %}
                {% set blIsRejected = true %}
            {% endif %}

            {% set iBasketPositionsCount = aBasketItems|length %}   {# Anzahl der Positionen im Warenkorb #}
            {% set iArticleAmountCount = 0 %}                        {# Anzahl der Artikel im Warenkorb #}

            {% for oBasketItem in aBasketItems %}
                {% set iArticleAmountCount = iArticleAmountCount+oBasketItem.getAmount() %}
            {% endfor %}

            {% if not blIsRejected %}
                <div class="card c4s-approval-basket-card" data-status="{% if blIsApproved %}approved{% else %}submitted{% endif %}">

                    <div class="card-header{% if oUserBasket.isLinked() %} linked{% endif %}">
                        <div class="c4s-b2b-card-head-info float-start">
                            <div>{{ translate({ ident: "C4S_B2B_BASKET_STATUS" }) }}</div>
                            <div class="c4s-b2b-card-head-info-status{% if blIsApproved %} c4s-b2b-status-approved{% else %} c4s-b2b-status-submitted{% endif %}"
                                  data-bs-toggle="tooltip"
                                  data-bs-trigger="hover"
                                  data-bs-container="body"
                                  title="{% if blIsApproved %}{{ translate({ ident: "C4S_B2B_BASKET_APPROVED" }) }}{% else %}{{ translate({ ident: "C4S_B2B_BASKET_SUBMITTED" }) }}{% endif %}"
                            ></div>
                        </div>

                        <div class="c4s-b2b-card-head-info float-start">
                            <div>{{ translate({ ident: "C4S_B2B_BASKET_ASK_DATE" }) }}</div>
                            <div>{{ oUserBasket.oxuserbaskets__oxtimestamp.value|date_format("%d.%m.%Y") }}</div>
                        </div>

                        {% block c4s_b2b_approvlas_user_baskets_head_approver %}
                            <div class="d-none d-md-block c4s-b2b-card-head-info c4s-b2b-card-head-info-person float-start">
                                <div>{{ translate({ ident: "C4S_B2B_BASKET_APPROVER" }) }}</div>
                                <div>
                                    {% if oApprover %}
                                        <a href="mailto:{{ oApprover.oxuser__oxusername.value }}">{{ oApprover.oxuser__oxfname.value }}&nbsp;{{ oApprover.oxuser__oxlname.value }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                        {% endblock %}

                        <div class="c4s-b2b-card-head-info btn-group float-end">
                            <button class="btn btn-xs btn-link" data-bs-toggle="collapse" href="#c4s-collapse-{{ loop.index0 }}"><i class="fa-solid fa-lg fa-chevron-down"></i></button>
                        </div>

                        <div class="c4s-b2b-card-head-info float-end text-end">
                            <div>{{ translate({ ident: "C4S_B2B_BASKET_TOTAL_NETTO_AMOUNT" }) }}</div>
                            <div>
                                {{ format_price(oUserBasket.getTotalPrice(), { currency: currency }) }}
                            </div>
                        </div>

                        <div class="d-none d-md-block float-end text-end c4s-b2b-card-head-info">
                            <div>
                                {% if blShowPositionsNotItemsInMinibasket %}
                                    {{ translate({ ident: "C4S_B2B_BASKET_TOTAL_NO_POSITIONS" }) }}
                                {% else %}
                                    {{ translate({ ident: "C4S_B2B_BASKET_TOTAL_NO_ARTICLES" }) }}
                                {% endif %}
                            </div>
                            <div>
                                {% if blShowPositionsNotItemsInMinibasket %}
                                    {{ iBasketPositionsCount }}
                                {% else %}
                                    {{ iArticleAmountCount }}
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    {# card body #}
                    <div id="c4s-collapse-{{ loop.index0 }}" class="collapse{% if oUserBasket.isLinked() %} show{% endif %}">
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table table-hover c4s-basket-table">
                                    <thead>
                                        <tr>
                                            <th>{{ translate({ ident: "C4S_B2B_BASKET_AMOUNT" }) }}</th>
                                            <th>{{ translate({ ident: "C4S_B2B_BASKET_ARTICLE" }) }}</th>
                                            <th>{{ translate({ ident: "C4S_B2B_BASKET_ARTICLE_NUMBER" }) }}</th>
                                            <th>{{ translate({ ident: "C4S_B2B_BASKET_ATTRIBUTES" }) }}</th>
                                            <th class="text-end">{{ translate({ ident: "PRICE" }) }}</th>
                                        </tr>
                                    </thead>

                                    {% for itemKey, oUserBasketItem in aUserBasketItems %}
                                        {% set oArticle = oUserBasketItem.getArticle(itemKey) %}
                                        {% set oParentArticle = oArticle.getParentArticle() %}
                                        <tbody>
                                            <tr>
                                                <td>{{ oUserBasketItem.getAmount() }}</td>
                                                <td>
                                                    <a href="{{ oArticle.getLink()|raw }}">
                                                        {% if oParentArticle.oxarticles__oxtitle.value %}
                                                            {{ oParentArticle.oxarticles__oxtitle.value|striptags|truncate(70) }}
                                                        {% else %}
                                                            {{ oArticle.oxarticles__oxtitle.value|striptags|truncate(70) }}
                                                        {% endif %}
                                                    </a>
                                                </td>
                                                {% block c4s_b2b_user_baskets_artnum %}
                                                    <td>{{ oArticle.oxarticles__oxartnum.value }}</td>
                                                {% endblock %}
                                                <td>{{ oArticle.oxarticles__oxvarselect.value|striptags }}</td>
                                                <td class="text-end">{{ format_price(oUserBasketItem.getPositionPrice(), { currency: currency }) }}</td>
                                            </tr>
                                        </tbody>
                                    {% endfor %}

                                </table>
                            </div>

                        </div>
                        {% if blIsApproved %}
                            <div class="card-footer d-flex justify-content-end">
                                <a href="{{ oViewConf.getSslSelfLink()|raw }}cl=c4s_b2b_approvals_user_baskets&fnc=takeBasket&oxid={{ oUserBasket.getId() }}"
                                   class="btn btn-primary take-basket"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="top"
                                   data-bs-container="body"
                                   data-bs-trigger="hover"
                                   title="{{ translate({ ident: "C4S_B2B_BASKET_TOOLTIP_TAKE_BASKET" }) }}"
                                >
                                    {{ translate({ ident: "C4S_B2B_BASKET_BTN_TAKE_BASKET" }) }}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}

        {% if oBaskets|length == 0 %}
            <div class="alert alert-info no-basket-info">
                {{ translate({ ident: "C4S_B2B_NO_BASKET_INFO" }) }}
            </div>
        {% else %}
            <div class="alert alert-info no-basket-in-filter-info" style="display: none;">
                {{ translate({ ident: "C4S_B2B_NO_BASKET_IN_FILTER_INFO" }) }}
            </div>
        {% endif %}
    </div>
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% capture append = "oxidBlock_sidebar" %}
    {% include "page/account/inc/account_menu.html.twig" with {active_link: "c4s_b2b_approvals_user_baskets"} %}
{% endcapture %}

{% include "layout/page.html.twig" with {sidebar: "left", blHideBreadcrumb: true} %}