{% extends '@Axisubs/Admin/tabs/tab.twig' %}

{% block body %}
    {% set choose_customer = 0 %}
    {% if data['flag'] == 'choose_customer'  %}
        {% set choose_customer = 1 %}
    {% endif %}
    <div class="axisubs wrap">
        <h1 class="wp-heading-inline">{{ pagetitle }}</h1>
        <a class="page-title-action" href="?page=customers-index&task=edit">Add New Member</a>
        <div class="axisubs_title_description">
          {{ esc_html_e('Manage all your members / customers in this page. You can also view their subscriptions. If multiple subscriptions are found, it will be listed with a comma.', 'axis-subscriptions') }}
        </div>
        {% if choose_customer %}
            <div class="info"><p>Choose customer First</p></div>
        {% endif %}
        <form method="post" action="?page=customers-index{% if choose_customer %}&flag=choose_customer{% endif %}" id="axisubs_list_form">
            <div class="axisubs-customers">
                <div class="axisubs-list">
                    <table class="wp-list-table widefat fixed striped customers" width="100%">
                        <thead>
                          <tr>
                            <th scope="col" width="20%" id="name" class="manage-column column-primary"><span>Name</span></th>
                            <th scope="col" id="subscriptions" class="manage-column column-subscriptions"><span>Subscriptions</span></th>
                            <th scope="col" id="email" class="manage-column column-email">Email</th>
                            <th scope="col" width="10%" id="country" class="manage-column column-country">Country</th>
                            <th scope="col" width="10%" id="phone" class="manage-column column-phone">Phone</th>
                            <th scope="col" id="Action" class="manage-column column-action">Action</th>
                            {% if choose_customer %}
                              <th scope="col" id="created-on" class="manage-column column-created-on"></th>
                            {% endif %}
                          </tr>
                        </thead>
                        <tbody id="the-list">
                        {% for item in items %}
                            {% set metaPrefix = item['ID']~'_'~item['post_type']~'_'  %}
                            <tr id="customer" class="iedit author-self type-customer-list status-publish format-standard hentry">
                              <td class="title column-title has-row-actions column-primary" data-colname="Name">
                                <strong><a class="row-title" href="?page=customers-index&task=edit&id={{ item['meta'][metaPrefix~'user_id'] }}">{{ item['meta'][metaPrefix~'first_name']~' '~item['meta'][metaPrefix~'last_name'] }}</a></strong>
                                <span>{{ esc_html_e('ID', 'axis-subscriptions') }} : {{ item['ID'] }}</span>
                                <button type="button" class="toggle-row"><span class="screen-reader-text">Show more details</span></button>
                              </td>
                              <td class="subscription column-subscription" data-colname="Subscriptions">
                                {% if item['subscription'] is empty %}
                                  {% set customerSubs = 'No subscriptions' %}
                                    <span>{{ customerSubs }}</span>
                                  {% else %}
                                  {% set plan = item['subscription']['0']['plan'] %}
                                  {% set planMeta = item['subscription']['0']['plan']['meta'] %}
                                  {% set subcriptionMeta = item['subscription']['0']['meta'] %}
                                  {% set customerSubs = planMeta[plan['ID']~'_axisubs_plans_name'] %}
                                    <div class="load_more_subscriptions" data-attr="{{ item['meta'][metaPrefix~'user_id'] }}">
                                      <a>{{ customerSubs }}</a><span class="more_subscriptions">...</span>
                                      <span class="more_subscriptions-data-left-arrow"></span>
                                      <div class="more_subscriptions-data">
                                      </div>
                                    </div>
                                  {% endif %}
                                </td>
                                <td class="email column-email" data-colname="Email">
                                  <a href="mailto:{{ item['meta'][metaPrefix~'email'] }}">{{ item['meta'][metaPrefix~'email'] }}</a>
                                </td>
                                <td class="country column-country" data-colname="country">
                                  {% set country = data['countries'][item['meta'][metaPrefix~'country']] %}
                                  <span>{{ country }}</span>
                                </td>
                                <td class="phone column-phone" data-colname="Phone">
                                    <span>{{ item['meta'][metaPrefix~'phone'] }}</span>
                                </td>
                                <td class="created-on column-action" data-colname="Action">
                                    <!-- <span>{{ item['post_date'] }}</span> -->
                                    <a class="button button-primary" href="?page=customers-index&task=edit&id={{ item['meta'][metaPrefix~'user_id'] }}">Edit</a>
                                    <a class="button" href="?page=customers-index&task=delete&id={{ item['meta'][metaPrefix~'user_id'] }}">Delete</a>
                                    <a class="button" href="?page=customers-index&task=view&id={{ item['meta'][metaPrefix~'user_id'] }}">View</a>
                                {% if choose_customer %}
                                <td>
                                    <span class="col-data-content">
                                        <a href="?page=subscriptions-index&task=edit&user_id={{ item['meta'][metaPrefix~'user_id'] }}">Choose customer</a>
                                    </span>
                                </td>
                                {% endif %}
                            </tr>
                            {#<div class="row">#}
                                {#<div class="col-3">#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Customer Id: </span>#}
                                        {#<span class="col-data-content">{{ item['ID'] }}</span>#}
                                    {#</div>#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Subscriptions: </span>#}
                                        {#{% if item['subscription'] is empty %}#}
                                            {#{% set customerSubs = 'No subscriptions' %}#}
                                            {#<span class="col-data-content">{{ customerSubs }}</span>#}
                                        {#{% else %}#}
                                            {#{% set plan = item['subscription']['0']['plan'] %}#}
                                            {#{% set planMeta = item['subscription']['0']['plan']['meta'] %}#}
                                            {#{% set subcriptionMeta = item['subscription']['0']['meta'] %}#}
                                            {#{% set customerSubs = planMeta[plan['ID']~'_axisubs_plans_name'] %}#}
                                            {#<div class="load_more_subscriptions" data-attr="{{ item['meta'][metaPrefix~'user_id'] }}">#}
                                                {#<a>{{ customerSubs }}</a><span class="more_subscriptions">...</span>#}
                                                {#<span class="more_subscriptions-data-left-arrow"></span>#}
                                                {#<div class="more_subscriptions-data">#}
                                                {#</div>#}
                                            {#</div>#}
                                        {#{% endif %}#}
                                    {#</div>#}
                                {#</div>#}
                                {#<div class="col-3">#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Name: </span>#}
                                        {#<span class="col-data-content">{{ item['meta'][metaPrefix~'first_name']~' '~item['meta'][metaPrefix~'last_name'] }}</span>#}
                                    {#</div>#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Email: </span>#}
                                        {#<span class="col-data-content">{{ item['meta'][metaPrefix~'email'] }}</span>#}
                                    {#</div>#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Country: </span>#}
                                        {#{% set country = data['countries'][item['meta'][metaPrefix~'country']] %}#}
                                        {#<span class="col-data-content">{{ country }}</span>#}
                                    {#</div>#}
                                {#</div>#}
                                {#<div class="col-3">#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Phone: </span>#}
                                        {#<span class="col-data-content">{{ item['meta'][metaPrefix~'phone'] }}</span>#}
                                    {#</div>#}
                                    {#<div class="col-data">#}
                                        {#<span class="col-data-title">Created On: </span>#}
                                        {#<span class="col-data-content">{{ item['post_date'] }}</span>#}
                                    {#</div>#}
                                {#</div>#}
                                {#<div class="col-3">#}
                                    {#<div class="col-data">#}
                                        {#{% if choose_customer %}#}
                                            {#<span class="col-data-content">#}
                                                {#<a class="page-title-action" href="?page=subscriptions-index&task=edit&user_id={{ item['meta'][metaPrefix~'user_id'] }}">Choose customer</a>#}
                                            {#</span>#}
                                        {#{% else %}#}
                                        {#<span class="col-data-content">#}
                                            {#<a class="page-title-action" href="?page=customers-index&task=view&id={{ item['meta'][metaPrefix~'user_id'] }}">View</a>#}
                                        {#</span>#}
                                        {#<span class="col-data-content">#}
                                            {#<a class="page-title-action" href="?page=customers-index&task=edit&id={{ item['meta'][metaPrefix~'user_id'] }}">Edit</a>#}
                                        {#</span>#}
                                        {#<span class="col-data-content">#}
                                            {#<a class="page-title-action" href="?page=customers-index&task=delete&id={{ item['meta'][metaPrefix~'user_id'] }}">Delete</a>#}
                                        {#</span>#}
                                        {#{% endif %}#}
                                    {#</div>#}
                                {#</div>#}
                            {#</div>#}
                        {% else %}
                            <tr>
                                <td colspan="7">
                                    <div class="row">
                                        No customer available.
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {{ paginationD['limitbox'] | raw }}
                {{ paginationD['links'] | raw }}
            </div>
            <input type="hidden" id="site_url" name="site_url" value="{{ site_url }}" />
        </form>
    </div>
{% endblock %}