{# patch #}
<input type="search" class="form-control input-sm" placeholder="" aria-controls="table-customers" style="display:none">

<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>{{ mt._('admin.menu.users') }} - {{ mt._('admin.menu.customers') }}</h2>
        <div class="clearfix"></div>
      </div>

      <div class="x_content">

        {% if queryString != '' %}
        <div class="row mb-20x">
          <h2 class="col-md-6">{{ mt._('_common.searchresultsfor') }} "{{ queryString }}"</h2>
          <div class="col-md-6 text-right text-capitalize">
            <a href="{{ url('admin/customers') }}" class="btn btn-default w-50">{{ mt._('_common.back') }}</a>
          </div>
        </div>
        {% endif %}

        <div class="row">
          <div class="col-md-8 col-sm-8 col-xs-8">
            <span class="inline-menu-title">{{ mt._('admin.massiveactions') }}:</span> <span class="inline-menu-title"><a class="pointer" id="bulk-enable">{{ mt._('admin.enableusers') }}</a></span> <span class="inline-menu-title"><a class="pointer" id="bulk-disable">{{ mt._('admin.disableusers') }}</a></span> <span class="inline-menu-title"><a class="pointer" id="bulk-create">{{ mt._('admin.createusers') }}</a></span>
          </div>
          <div class="col-md-4 col-sm-4 col-xs-4 right p-0">
            <span class="inline-menu-title"><a href="#" id="export-csv">{{ mt._('admin.exportcsv') }}</a></span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="msg-bulk-error left fl" id="bulk-error"></div>
          </div>
        </div>

        {% if tot_pages > 1 %}
        <div class="paginator my-20x">
          <div class="cust-page">{{ curr_page > 1 ? '<a href="' ~ url('admin/customers/' ~ (curr_page - 1) ) ~ '"><<</a>' : '<<' }}</div>
          {% for i in range(1,tot_pages) %}
          <div class="cust-page {% if curr_page == i %}bold{% endif %}"><a href="{{ url('admin/customers/' ~ i )}}">{{ i }}</a></div>
          {% endfor %}
          <div class="cust-page">{{ curr_page < tot_pages ? '<a href="' ~ url('admin/customers/' ~ (curr_page + 1) ) ~ '">>></a>' : '>>' }}</div>
        </div>
        {% endif %}

        {% if queryString == '' %}
        <div class="row my-20x">
          <div class="col-sm-6"></div>
          <div class="col-sm-6">
            <div class="search-all-pages-container">
              <form autocomplete="off">
                <label class="search-all-pages-label">{{ mt._('_common.searchpages') }}: <input type="text" class="form-control input-sm search-all-pages" autocomplete="false"></label>
                <div class="col-sm-12 search-all-pages-results"></div>
              </form>
            </div>
          </div>
        </div>
        {% endif %}

        {% if customers is defined and customers|length > 0 %}
        <div class="row pt-25x">
          <div class="col-md-12 col-sm-12 col-xs-12">

            <table id="table-customers" class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th class="no-sort"></th>
                  <th>{{ mt._('admin.customers.customercode') }}</th>
                  <th>{{ mt._('admin.customers.name') }}</th>
                  <th>{{ mt._('admin.username') }}</th>
                  <th>{{ mt._('admin.catalogs') }}</th>
                  <th>{{ mt._('_common.shippings') }}</th>
                  <th>{{ mt._('admin.status') }}</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {% for el in customers %}
                <tr id="{{ el.tpanag }}{{ el.cdanag }}" {{ el.tpanag == 'CN' ? 'style="font-style:italic"' : '' }}
                  data-tpanag="{{ el.tpanag }}" data-cdanag="{{ el.cdanag }}"
                  data-descri="{{ el.descri|escape }}" data-ordersenabled="{{ el.orders_enabled }}"
                  {% if el.id_usr != -1 %}data-idusr="{{ el.id_usr }}" data-usrnam="{{ el.usrnam }}" data-enable="{{ el.enable }}"{% endif %}
                  {% if el.catalogs|length > 0 %}data-catalogs="{% for catalog in el.catalogs %}{{ catalog.cdcata }}{% if not loop.last %},{% endif %}{% endfor %}"{% endif %}>
                  <td class="cb">
                    <label class="checkbox-customer checkbox-container">
                      <input type="checkbox" name="status-checkbox[]" value="{{ el.id_usr }}"/>
                      <span class="checkbox-checkmark"></span>
                    </label>
                  </td>
                  <td class="cdanag"><span>{{ el.cdanag }}</span></td>
                  <td><span>{{ el.descri|escape }}{{ el.tpanag == 'CN' ? ' (' ~ mt._('_common.provisional') ~ ')' : '' }}</span></td>
                  <td><span>{{ el.usrnam }}</span></td>
                  <td>
                    {% if el.catalogs|length > 0 %}
                    <span class="lowercase">{{ el.catalogs|length }} {{ el.catalogs|length > 1 ? mt._('admin.catalogs') : mt._('admin.catalog') }}</span>
                    <span class="glyphicon glyphicon-bookmark mytooltip fr fs13 mt-5x" aria-hidden="true">
                      <span class="tooltiptext">{% for catalog in el.catalogs %}{{ catalog.dscata }}<br/>{% endfor %}</span>
                    </span>
                    {% endif %}
                  </td>
                  <td><span>{{ el.shippings }}</span></td>
                  <td>
                    {% if el.id_usr != -1 %}
                    <span>
                      <select class="table-status w-100 p-5x {{ el.enable == 0 ? 'disabled' : 'enabled' }}"
                        {% if el.id_usr != -1 %}data-idusr="{{ el.id_usr }}"{% endif %}>
                        <option value="0" {% if el.enable == 0 %}selected{% endif %} class="disabled">{{ mt._('admin.disabled') }}</option>
                        <option value="1" {% if el.enable == 1 %}selected{% endif %} class="enabled">{{ mt._('admin.enabled') }}</option>
                      </select>
                    </span>
                    <div class="msg-form-error-row left" id="limit-error-{{ el.id_usr }}"></div>
                    {% endif %}
                  </td>
                  <td class="center" style="vertical-align:middle">
                    <span data-toggle='modal' data-target='.modal-modify-user'>
                      <a href="#" class="modify-user" title="{{ mt._('admin.customers.modifycustomer') }}">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                      </a>
                    </span>
                    <span class="pl-20x" data-toggle='modal' data-target='.modal-manage-shippings'>
                      <a href="#" class="manage-shippings" title="{{ mt._('admin.customers.manageshippings') }}">
                        <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
                      </a>
                    </span>
                    {% if enableBudget %}
                    <span class="pl-20x" data-toggle='modal' data-target='.modal-show-budget'>
                      <a href="#" class="show-budget" title="{{ mt._('_common.budget') }}">
                        <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
                      </a>
                    </span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>

          </div>
        </div>
        {% endif %}

        {% if tot_pages > 1 %}
        <div class="paginator mt-20x">
          <div class="cust-page">{{ curr_page > 1 ? '<a href="' ~ url('admin/customers/' ~ (curr_page - 1) ) ~ '"><<</a>' : '<<' }}</div>
          {% for i in range(1,tot_pages) %}
          <div class="cust-page {% if curr_page == i %}bold{% endif %}"><a href="{{ url('admin/customers/' ~ i )}}">{{ i }}</a></div>
          {% endfor %}
          <div class="cust-page">{{ curr_page < tot_pages ? '<a href="' ~ url('admin/customers/' ~ (curr_page + 1) ) ~ '">>></a>' : '>>' }}</div>
        </div>
        {% endif %}
      </div>

      {# This table is needed only to export csv, so it's hidden #}
      <div id="dvData" style="display:none">
        <table>
          <tr>
            <td>Username</td>
            <td>Password</td>
            <td>{{ mt._('admin.customers.shortname') }}</td>
            <td>{{ mt._('_common.email') }}</td>
            <td>{{ mt._('_common.zone') }}</td>
            <td>{{ mt._('_common.catalogs') }}</td>
          </tr>
          {% for el in customers if (substr(el.usrnam, 0, prefix|length) == prefix and substr(el.usrnam, prefix|length) is numeric) %}
          <tr>
            <td>{{ el.usrnam }}</td>
            <td>{{ prefix }}SNG{{ 100000 - substr(el.usrnam, prefix|length) }}</td>
            <td>{{ el.descri }}</td>
            <td>{{ el.indema }}</td>
            <td>{{ el.dszona }}</td>
            <td>{% for catalog in el.catalogs %}{{ catalog.dscata }}{% if not loop.last %}|{% endif %}{% else %}&nbsp;{% endfor %}</td>
          </tr>
          {% endfor %}
        </table>
      </div>

    </div>
  </div>
</div>

<!-- Modal for modify user -->
<div class="modal fade modal-modify-user" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm w-50">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel2">{{ mt._('admin.customers.modifycustomer') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <div class="modal-body">
        <div class="modal-section">
          <div class="row pb-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('_common.code') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8' id="modal-code"></div>
          </div>
          <div class="row pb-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('_common.type') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8' id="modal-type"></div>
          </div>
          <div class="row pb-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('_common.description') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8' id="modal-description"></div>
          </div>
        </div>
        <div class="modal-section">
          <div class="row py-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right' style="line-height:23px">{{ mt._('session.register.username') }}</div>
            <div class='col-md-4 col-sm-4 col-xs-4'><input type="text" value="" id="modal-username"/></div>
            <div class='col-md-4 col-sm-4 col-xs-4 fs11' id="modal-edit-password-box">
              <label class="checkbox-container">
                <input type="checkbox" id="modal-edit-password" checked />  {{ mt._('admin.dontmodifypassword') }}
                <span class="checkbox-checkmark"></span>
              </label>
            </div>
          </div>
          <div class="row pb-10x" id="modal-password-box" style="line-height:18px">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('session.register.password') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" value="" id="modal-password"/></div>
          </div>
          <div class="row pb-10x" id="modal-repeatpassword-box" style="line-height:18px">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('session.register.confirmpassword') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" value="" id="modal-repeatpassword"/></div>
          </div>
        </div>
        <div class="modal-section" id="modal-section-status">
          <div class="row py-10x" style="line-height:18px">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('admin.status') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'>
              <select id="modal-status">
                <option value="0" id="status-disabled" class="disabled">{{ mt._('admin.disabled') }}</option>
                <option value="1" id="status-enabled" class="enabled">{{ mt._('admin.enabled') }}</option>
              </select>
            </div>
          </div>
          <div class="row pb-10x" style="line-height:25px">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right'>{{ mt._('admin.disableorders') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'>
              <label class="checkbox-container">
                <input type="checkbox" id="modal-orders"/>
                <span class="checkbox-checkmark"></span>
              </label>
            </div>
          </div>
        </div>
        <div >
          <div class="row py-10x" style="line-height:25px">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-7x'>{{ mt._('admin.catalogs') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8' style="height:135px;overflow-y:auto">
              <div class="row">
                {% for catalog in catalogs %}
                <div class="col-md-12 col-sm-12 col-xs-12 py-8x px-10x">
                  <label class="checkbox-container">
                    <input type="checkbox" class="catalog-checkbox" name="catalog-checkbox[]" id="checkbox-{{ catalog.cdcata }}" value="{{ catalog.cdcata }}"/>  {{ catalog.dscata }}
                    <span class="checkbox-checkmark"></span>
                  </label>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-default left-btn w-50" data-dismiss="modal">{{ mt._('_common.close') }}</button>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-primary right-btn w-50" id="save-user" data-action="">{{ mt._('_common.save') }}</button>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="msg-form-error"></div>
            <div class="msg-error">{{ mt._('_common.generic.db.error') }}</div>
            <div class="msg-success">{{ mt._('_common.generic.db.success') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal for manage shippings -->
<div class="modal fade modal-manage-shippings" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md w-80">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">{{ mt._('admin.customers.manageshippings') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <input type="hidden" value="false" id="is-changed"/>
      <input type="hidden" value="" id="current-cdanag"/>
      <input type="hidden" value="" id="current-tpanag"/>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-default left-btn w-50" data-dismiss="modal">{{ mt._('_common.close') }}</button>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-primary right-btn w-50" id="new-shipping">{{ mt._('admin.customers.newshipping') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% if enableBudget %}
<div class="modal fade modal-show-budget" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg w-100" role="document" style="max-width:100%">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ mt._('cart.analysis.full') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <input type="hidden" id="budget-tpanag"/>
      <input type="hidden" id="budget-cdanag"/>
      <div class="modal-body">
        <div class="modal-section">
          <div class="row mb-10x">
            <div class="col-md-2 bold text-right" style="line-height:34px">{{ mt._('account.budget.selectseason') }}</div>
            {% if seasons|length > 0 %}
            <div class="col-md-3 form-element form-select">
              <select class="form-control" id="season-budget-selector">
                {% for season in seasons %}
                <option value="{{ season.cdstag }}">{{ season.cdstag }} - {{ season.dsstag }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-2 bold text-right" style="line-height:34px">{{ mt._('account.budget.selectgrouping') }}</div>
            <div class="col-md-3 form-element form-select">
              <select class="form-control" id="grouping-budget-selector">
                <option value="0">{{ mt._('_common.budget.grouping.line') }}</option>
                <option value="1">{{ mt._('_common.budget.grouping.drop') }}</option>
              </select>
            </div>
            <div class="col-md-2" id="load-budget">
              <button type="button" class="btn btn-primary waves-effect waves-light" id="load-budget">{{ mt._('account.budget.load') }}</button>
            </div>
            {% else %}
            {{ mt._('account.customer.noseason') }}
            {% endif %}
          </div>
        </div>
        <div class="py-10x" id="budget-box" style="overflow-x:auto">

        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}