{% extends 'sales/base.html' %}
{% load staticfiles %}
{% load paginate %}
{% load thumbnail %}
{% block extralinks %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<style>
  .form-group label {
    font-weight: 800;
  }
</style>
{% endblock %}
{% block content %}
<!-- main_container starts here -->
<div class="main_container">
  <!-- heading_create starts here -->
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'marketing:add_email_for_campaigns'%}"><i class="fa fa-plus"></i>
          Add Contact</a></span>
    </div>
  </div>
  <!-- heading_create ends here -->
  <div class="filter_row list_filter_row row marl">
    <!-- filter form
        <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="leads_filter" action="" method="POST">
            <div class="card-body ">
              <div class="card-title">Filters</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Team Name</label>
                    <input type="text" class="form-control" placeholder="Team Name" name="team_name"
                      value="{{request.POST.team_name}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Created By</label>
                    <select name="created_by" id="created_by" class="assigned_users_ form-control">
                      <option value="">
                        ------------------</option>
                      {% for user in created_by_users %}
                      <option value="{{user.id}}" {% if user.id|slugify == request.POST.created_by %} selected=""
                        {% endif %}>
                        {{user.email}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Assigned Users</label>
                    <select class="assigned_users form-control" name="assigned_to" multiple="multiple">
                      {% for user in users %}
                      <option value="{{user.id}}" {% if user.id|slugify in assigned_to %} selected="" {% endif %}>
                        {{user.email}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <div class="filter_col col-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'teams:teams_list' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>  filter form -->
  </div>
  <div class="col-md-12 col-lg-12 col-xl-12">
    <div class="table_container_row row marl no-gutters">
      <div class="col-md-12">
        <!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open"
              aria-selected="true">Open ({{open_leads|length}})</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close"
              aria-selected="false">Closed ({{close_leads|length}})</a>
          </li>
        </ul> -->
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-right">
                  <span class="float-left">Contacts - {% if show_pageitems %}
                    {% show_pageitems %}{% else %}
                    {{ contacts|length }}{% endif %}</span>
                  <span class="">
                    <a href="#" class="primary_btn" style="padding: 0px 10px;"></a>
                  </span>
                </div>
                <div class="table-responsive">
                  <table class="table ">
                    <thead>
                      {% if contacts|length > 0 %}
                      <tr>
                        <th width="5%">ID</th>
                        <th width="15%"> Name</th>
                        <th width="15%">Email</th>
                        <th width="15%">Created by</th>
                        <th width="15%">Created On</th>
                        <th width="10%">Actions</th>
                      </tr>
                      {% endif %}
                    </thead>
                    <tbody>
                      {% if per_page %}
                      {% paginate per_page contacts %}
                      {% else %}
                      {% paginate 10 contacts %}
                      {% endif %}
                      {% for contact in contacts %}
                      <tr class="text-center">
                        <td scope="row">{{ forloop.counter }}</td>
                        <td>{{ contact.name }}</td>
                        <td class="">
                            {{contact.email}}
                        </td>
                        <td>
                          {% if contact.created_by %}
                          {% if contact.created_by.profile_pic %}
                          {% thumbnail contact.created_by.profile_pic "40x40" crop="center" as im %}
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                            title="{{ contact.created_by }}" style="border-radius: 50%" />
                          {% endthumbnail %}
                          {% else %}
                          <img src="{% static 'images/user.png' %}" style="width: 40px;height: 40px;border-radius: 50%;"
                            title="{{ contact.created_by }}" />
                          {% endif %}
                          {% else %}
                          <img src="{% static 'images/user.png' %}" style="width: 40px;height: 40px;border-radius: 50%;"
                            title="{{ contact.created_by }}" />
                          {% endif %}
                        </td>
                        <td title="{{ contact.created_on }}">{{ contact.created_on_arrow }}</td>
                        <td class="actions">
                          {% if request.user.role == 'ADMIN' or reques.user.is_superuser %}
                          <a href="{% url 'marketing:edit_email_for_campaigns' contact.id %}" class="btn btn-success edit"><i
                              class="fas fa-pencil-alt"></i></a>
                          <a href="{% url 'marketing:delete_email_for_campaigns' contact.id %}"
                            class="btn btn-danger delete remove_document"><i class="fas fa-trash-alt"></i></a>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {%ifequal contacts|length 0%}
                <h6 class="text-center">No Contacts Found</h6>
                {%endifequal%}
                <div class="marl row text-center">
                  {% show_pages %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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


{% endblock %}
{% block js_block %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    // $('.assigned_users').select2();
    // $('#id_tag').select2();
    // $('#created_by').select2();
    // $(".filter_toggle").click(function () {
    //   $(".list_filter_row").toggle();
    // });
  });

//   search = "{{search}}"

//   if (search == 'True') {
//     $(".list_filter_row").show();
//   }

//   $("#close-tab").click(function (e) {
//     $("#tab_status").val('Closed')
//   })

//   $("#open-tab").click(function (e) {
//     $("#tab_status").val('Open')
//   })

//   tab_status = "{{tab_status}}"
//   if (tab_status == 'Closed') {
//     $("#close-tab").click()
//   } else {
//     $("#open-tab").click()
//   }

  $('.delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#leads_filter').attr("action", $(this).attr("href"));
    $('#leads_filter').submit();
  });
</script>
{% endblock js_block %}