{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% load thumbnail %}
{% block extralinks %}

<style>
  .form-group label {
    font-weight: 800;
  }

  #editor-container {
    height: 20rem;
  }
</style>
{% endblock %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'accounts:new_account' %}"><i class="fa fa-plus"></i>
          Add New Account</a></span>
    </div>
  </div>
  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="accounts_filter" method="POST" action="">
            {% csrf_token %}
            <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">Name</label>
                    <input type="text" class="form-control" placeholder="Account Name" name="name" {% if request.POST %}
                      value="{{request.POST.name}}" {%endif%} />
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">City</label>
                    <input type="text" class="form-control" placeholder="City" name="city" {% if request.POST %}
                      value="{{request.POST.city}}" {%endif%} />
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Tags</label>
                    <select class="form-control" id="id_tag" name="tag" multiple>
                      
                      {% for tag in tags %}
                      <option value="{{tag.id}}" {% if request_tags %}
                        {% if tag.id|slugify in request_tags %}selected{% endif %}{% endif %}>{{ tag.name }}
                      </option>
                      {% endfor%}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-lg-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'accounts:list' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="filter_row row marl">
    <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">Active ({{open_accounts|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_accounts|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="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Open Accounts - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}{{open_accounts|length}}{% endif %}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table ">
                      <thead>
                        {% if open_accounts|length > 0 %}
                        <tr>
                          <th width="5%">ID</th>
                          <th width="12%">Name</th>
                          <th width="8%">Created By</th>
                          <th width="5%">City</th>
                          <th width="5%">State</th>
                          <th width="10%">Created On</th>
                          <th width="10%">Tags</th>
                          <th width="10%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page open_accounts %}
                        {% else%}
                        {% paginate 10 open_accounts %}
                        {% endif %}
                        {% for each_account in open_accounts %}
                        <tr id="account_details{{each_account.id}}" class="text-center">
                          <td scope="row" class="s_no" data-id="{{forloop.counter}}">{{ forloop.counter }}</td>
                          
                          <td>{% if each_account.name %}<a data-toggle="modal"
                              data-target="#exampleModalCenter_account{{each_account.id}}"
                              href="#">{{ each_account.name }}</a>{% endif %}
                          </td>
                          <td>
                            {% if each_account.created_by %}
                            {% if each_account.created_by.profile_pic %}
                            {% thumbnail each_account.created_by.profile_pic "40x40" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ each_account.created_by }}">
                            {% endthumbnail %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}" alt="Micro profile pic"
                              style="width: 40px;height: 40px;" title="{{ each_account.created_by }}" />
                            {% endif %}
                            {% else %}
                            None
                            {% endif %}
                          </td>
                          <td>{% if each_account.billing_city %}{{ each_account.billing_city }} {% else %} Not specified
                            {% endif %}</td>
                          <td>{% if each_account.billing_state %}{{ each_account.billing_state }} {% else %} Not
                            specified {% endif %}</td>
                          <td title="{{each_account.created_on}}">{{ each_account.created_on_arrow }}</td>
                          <td style="display: block;">
                            {% with tags=each_account.tags.all %}
                            {% if tags %}
                            {% for tag in tags %}
                            <span class="text-left color{{forloop.counter}} tag_class_acc" id="list_tag"
                              data-link="{{tag.id}}" style="cursor: pointer;">{{ tag.name }}</span>
                            {% endfor %}
                            {% else %}
                            No Tags
                            {% endif %}
                            {% endwith %}
                          </td>
                          <td class="actions">
                            {% if each_account.contacts.all %}
                            <a href="{% url 'accounts:create_mail' %}" class="btn btn-primary edit account_send_mail"
                              data-account="{{each_account.id}}" data-account-email="{{each_account.email}}"
                              data-toggle="modal" data-target="#send_email_to_contacts" title="Send Mail"><i
                                class="fas fa-paper-plane" ></i>
                            </a>
                            {% endif %}
                            <a href="{% url 'accounts:view_account' each_account.id %}" class="btn btn-info edit" title="View"><i
                                class="fas fa-eye"></i></a>
                            <a href="{% url 'accounts:edit_account' each_account.id %}" class="btn btn-success edit" title="Edit"><i
                                class="fas fa-pencil-alt"></i></a>
                            <a href="{% url 'accounts:remove_account' each_account.id %}"
                              class="btn btn-danger delete remove_account" title="Delete"><i class="fas fa-trash-alt"></i></a>
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% ifequal open_accounts|length 0 %}
                  <h6 class="text-center">No Acccount Records Found</h6>
                  {% endifequal %}
                  <div class="text-center row marl">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="close" role="tabpanel" aria-labelledby="close">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Closed Accounts - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}{{close_accounts|length}}{% endif %}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        {% if close_accounts|length > 0 %}
                        <tr>
                          <th width="5%">ID</th>
                          <th width="15%">Name</th>
                          <th width="10%">Created By</th>
                          <th width="10%">City</th>
                          <th width="10%">State</th>
                          <th width="10%">Created On</th>
                          <th width="18%">Tags</th>
                          <th width="15%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page close_accounts %}
                        {% else%}
                        {% paginate 10 close_accounts %}
                        {% endif %}
                        {% for each_account in close_accounts %}
                        <tr id="account_details{{each_account.id}}">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td>{% if each_account.name %}<a href="#" data-toggle="modal"
                              data-target="#exampleModalCenter_account{{each_account.id}}">{{ each_account.name }}</a>{% endif %}
                          </td>
                          <td>
                            {% if each_account.created_by %}
                            {% if each_account.created_by.profile_pic %}
                            {% thumbnail each_account.created_by.profile_pic "40x40" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ each_account.created_by }}">
                            {% endthumbnail %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}" alt="Micro profile pic"
                              style="width: 40px;height: 40px;" title="{{ each_account.created_by }}" />
                            {% endif %}
                            {% else %}
                            None
                            {% endif %}
                          </td>
                          <td>{% if each_account.billing_city %}{{ each_account.billing_city }} {% else %} Not specified
                            {% endif %}</td>
                          <td>{% if each_account.billing_state %}{{ each_account.billing_state }} {% else %} Not
                            specified {% endif %}</td>
                          <td title="{{each_account.created_on}}">{{ each_account.created_on_arrow }}</td>
                          <td style="display: block;">
                            {% with tags=each_account.tags.all %}
                            {% if tags %}
                            {% for tag in tags %}
                            <span class="text-left color{{forloop.counter}} tag_class_acc" data-link="{{tag.id}}"
                              style="cursor: pointer;" id="list_tag">{{ tag.name }}</span>
                            {% endfor %}
                            {% else %}
                            No Tags
                            {% endif %}
                            {% endwith %}
                          </td>
                          <td class="actions">
                            <a href="{% url 'accounts:view_account' each_account.id %}" class="btn btn-info edit" title="View"><i
                                class="fas fa-eye"></i></a>
                            <a href="{% url 'accounts:edit_account' each_account.id %}" class="btn btn-success edit" title="Edit" ><i
                                class="fas fa-pencil-alt"></i></a>
                            <a href="{% url 'accounts:remove_account' each_account.id %}"
                              class="btn btn-danger delete remove_account" title="Delete" ><i class="fas fa-trash-alt"></i></a>
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% ifequal close_accounts|length 0 %}
                  <h6 class="text-center">No Closed Acccount Records Found</h6>
                  {% endifequal %}
                  <div class="text-center row marl">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <br clear="all">
        </div>
      </div>
    </div>
  </div>
  
  
  
</div>



{% for account_record in open_accounts %}

<div class="modal fade" id="exampleModalCenter_account{{account_record.id}}" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{account_record.name}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal_body_ajax">

        </div>
        
        
        <div class="" id="">
          <div class="">
            <div class="col-md-12" id="">
              <div class="card">
                <div class="card-body" id="datashow" style="margin: 0; padding: 0;">
                  <div class="card-title text-right">
                    <h5>
                      
                      <span style="margin-top: 0px">
                        
                      </span>
                    </h5>
                  </div>
                  <div class="row marl">
                    <div class="col-md-4">
                      {% if account_record.name %}
                      <div class="filter_col col-md-12" id="iname">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_name" data-name="name">Name</label>
                          <div class="account_field" id="account_name" data-name="name">{{ account_record.name }}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.phone %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_phone" data-name="name">Phone</label>
                          <div class="account_field" id="account_phone" data-name="name">{{ account_record.phone }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.status %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_status" data-name="name">Status</label>
                          <div class="account_field" id="account_status" data-name="name">{{ account_record.status }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      {% if account_record.email %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_email" data-name="name">Email</label>
                          <div class="account_field" id="account_email" data-name="name">{{ account_record.email }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.website %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Website</label>
                          <div class="account_field" id="account_website" data-name="name">{{ account_record.website }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.contacts.all %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Contacts</label>
                          {% for contact in account_record.contacts.all %}
                          <div class="account_field" id="account_website" data-name="name">{{ contact }}</div>
                          {% endfor %}
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.lead %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">lead</label>
                          <div class="account_field" id="account_website" data-name="name">{{ account_record.lead }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      {% if account_record.billing_address_line or account_record.billing_street or  account_record.billing_city or   account_record.billing_state or account_record.billing_postcode or account_record.billing_country %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_billing_address" data-name="name">Billing
                            Address</label>
                          <div class="account_field" id="account_billing_address" data-name="name">
                            {{account_record.get_complete_address}}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      <div class="filter_col col-md-12">
                        {% if account_record.assigned_to.all %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_contact" data-name="name">Assigned To</label>
                          <div class="case_field" id="case_contact" data-name="name">
                            {% for user in account_record.get_team_and_assigned_users %}
                            <div>
                              <a href="{% url 'common:view_user' user.id %}">{{user}}</a>
                            </div>
                            {% endfor %}
                          </div>
                        </div>
                        {% endif %}
                      </div>
                      {% if account_record.description %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_description" data-name="name">Description</label>
                          <div class="account_field" id="account_description" data-name="name">
                            {{ account_record.description }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.tags.all %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_tags" data-name="name">Tags</label>
                          <div class="account_field" id="account_tags" data-name="name">
                            {% for tag in account_record.tags.all %}
                            <span class="text-left" id="list_tag">{{ tag.name }}</span>
                            {% endfor %}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-12">
                      <div class="created_information">
                        Created by <b>{{ account_record.created_by }}</b> created on
                        <b title="{{ account_record.created_on }}">{{ account_record.created_on_arrow }}</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

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

{% endfor %}



{% for account_record in close_accounts %}

<div class="modal fade" id="exampleModalCenter_account{{account_record.id}}" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{account_record.name}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal_body_ajax">

        </div>
        
        
        <div class="" id="">
          <div class="">
            <div class="col-md-12" id="">
              <div class="card">
                <div class="card-body" id="datashow" style="margin: 0; padding: 0;">
                  <div class="card-title text-right">
                    <h5>
                      
                      <span style="margin-top: 0px">
                        
                      </span>
                    </h5>
                  </div>
                  <div class="row marl">
                    <div class="col-md-4">
                      {% if account_record.name %}
                      <div class="filter_col col-md-12" id="iname">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_name" data-name="name">Name</label>
                          <div class="account_field" id="account_name" data-name="name">{{ account_record.name }}</div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.phone %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_phone" data-name="name">Phone</label>
                          <div class="account_field" id="account_phone" data-name="name">{{ account_record.phone }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.status %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_status" data-name="name">Status</label>
                          <div class="account_field" id="account_status" data-name="name">{{ account_record.status }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      {% if account_record.email %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_email" data-name="name">Email</label>
                          <div class="account_field" id="account_email" data-name="name">{{ account_record.email }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.website %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Website</label>
                          <div class="account_field" id="account_website" data-name="name">{{ account_record.website }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.contacts.all %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">Contacts</label>
                          {% for contact in account_record.contacts.all %}
                          <div class="account_field" id="account_website" data-name="name">{{ contact }}</div>
                          {% endfor %}
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.lead %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_website" data-name="name">lead</label>
                          <div class="account_field" id="account_website" data-name="name">{{ account_record.lead }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-4">
                      {% if account_record.billing_address_line or account_record.billing_street or  account_record.billing_city or   account_record.billing_state or account_record.billing_postcode or account_record.billing_country %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_billing_address" data-name="name">Billing
                            Address</label>
                          <div class="account_field" id="account_billing_address" data-name="name">
                            {{account_record.get_complete_address}}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      <div class="filter_col col-md-12">
                        {% if account_record.assigned_to.all %}
                        <div class="form-group">
                          <label class="case_field_label" for="id_contact" data-name="name">Assigned To</label>
                          <div class="case_field" id="case_contact" data-name="name">
                            {% for user in account_record.get_team_and_assigned_users %}
                            <div>
                              <a href="{% url 'common:view_user' user.id %}">{{user}}</a>
                            </div>
                            {% endfor %}
                          </div>
                        </div>
                        {% endif %}
                      </div>
                      {% if account_record.description %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_description" data-name="name">Description</label>
                          <div class="account_field" id="account_description" data-name="name">
                            {{ account_record.description }}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if account_record.tags.all %}
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="acc_field_label" for="id_tags" data-name="name">Tags</label>
                          <div class="account_field" id="account_tags" data-name="name">
                            {% for tag in account_record.tags.all %}
                            <span class="text-left" id="list_tag">{{ tag.name }}</span>
                            {% endfor %}
                          </div>
                        </div>
                      </div>
                      {% endif %}
                    </div>
                    <div class="col-md-12">
                      <div class="created_information">
                        Created by <b>{{ account_record.created_by }}</b> created on
                        <b title="{{ account_record.created_on }}">{{ account_record.created_on_arrow }}</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

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

{% endfor %}

<div id="send_email_to_contacts" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
  aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="col-md-12">
        <form id="add_form_mail" method="POST" action="{% url 'accounts:create_mail' %}" novalidate>
          {% csrf_token %}
          <div class="overview_form_block row marl justify-content-center">
            <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <div class="card-title text-center">
                    Send Mail
                  </div>
                  <form>
                    {% csrf_token %}
                    <div class="row marl">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="">From Email</label>
                          
                          
                          <input class="form-control" type="text" placeholder="From Email" name="from_email" id="set_from_email">
                        <span id="id_from_email"></span>
                        </div>
                        <span id="id_recipientsa"></span>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="">Contacts</label>
                          
                          
                          <input type="text" placeholder="Contacts" name="recipients" id="_id_recipients">
                        </div>
                        <span id="id_recipients"></span>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label for="">Subject</label>
                          <input type="text" class="form-control" name="message_subject" placeholder="Enter Subject">
                        </div>
                        <span id="id_message_subject"></span>
                        <input type="hidden" value="" name="account_id" id="mail_account_id">
                      </div>
                      <div class="col-md-12">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label><input type="checkbox" name="scheduled_later" value="true" class="scheduled_later">
                                Schedule Later</label>
                              <span id="id_schedule_later"></span>
                            </div>
                          </div>
                          <div class="col-md-4 timezone-div" style="display: none;">
                            <div class="form-group">
                              <label>Timezone</label>
                              <select name="timezone" id="timezone"
                                class="form-control timezone-select js-example-basic-single">
                                <option value="">Select a Timezone</option>
                                {% for timezone in timezones %}
                                <option value="{{timezone.0}}"
                                  {% if timezone.0 == settings_timezone %}selected{% endif %}>{{timezone.1}}</option>
                                {% endfor %}
                              </select>
                              <span id="id_timezone"></span>
                            </div>
                          </div>
                          <div class="col-md-4 timezone-div" style="display: none;">
                            <div class="form-group">
                              <label for="">Schedule Date Time</label><span class="error_marker" style="color:red">
                                *</span>
                              <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input"
                                  data-target="#datetimepicker1" name="scheduled_date_time" />
                                <div class="input-group-append" data-target="#datetimepicker1"
                                  data-toggle="datetimepicker">
                                  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                              </div>
                              
                              <span id="id_scheduled_date_time"></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                          <label>Message</label>
                          <div id="editor-container"></div>
                        </div>
                        <input type="hidden" name="message_body" id="html_content">
                        <span id="id_message_body"></span>
                      </div>
                      
                      <div class="col-md-12">
                        <div class="heading">Personalization tags</div>
                        <p class="desc">The following tags can be used on both Plain text or HTML. Add these tags to
                          customize the email template, these tags will be replaced with the associated contact details
                          while the mails are sent.</p>
                        <ul>
                          <li>
                            <strong>Name: </strong>
                            <code>{% templatetag openvariable %} name {% templatetag closevariable %}</code>
                          </li>
                          <li>
                            <strong>Email: </strong>
                            <code>{% templatetag openvariable %} email {% templatetag closevariable %}</code>
                          </li>
                          
                        </ul>
                      </div>
                      <div class="col-md-12 text-center">
                        <button type="submit" class="primary_btn mar_btm save_btn">Send</button>
                        <a href="#" class="primary_btn" data-dismiss="modal">Cancel</a>

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

{% endblock %}
{% block js_block %}

<script type="text/javascript">
  $("#close-tab").click(function (e) {
    $("#tab_status").val('Closed');
  })
  $(".tag_class_acc").click(function () {
    // $(".tag_class_acc").css('cursor', 'pointer')
    url = "{% url 'accounts:list' %}"
    url = url + "?tag=" + $(this).attr('data-link')
    window.location.href = url;
  });

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

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


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

  $(".reset").click(function (e) {
    window.location = "{% url 'accounts:list'%}"
  });


  search = "{{search}}"

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

  $(document).ready(function () {
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
    $('#id_tag').select2();

    ////////////////////////
    $.urlParam = function (name) {
      var results = new RegExp('[\?&]' + name + '=([^&#]*)')
        .exec(window.location.search);
      return (results !== null) ? results[1] || 0 : false;
    }

    if ($.urlParam('page')) {
      $('.s_no').each(function (i, e) {
        pageNum = $.urlParam('page')
        if (!$(this).attr('data-id').endsWith('0')) {
          serialNumber = parseInt((pageNum - 1) + $(this).attr('data-id'))
          console.log(serialNumber)
        }
        else {
          serialNumber = parseInt($(this).attr('data-id')) * pageNum
          console.log(serialNumber)
        }
      })
    }
    ////////////////////////

  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#accounts_filter').attr("action", $(this).attr("href"));
    $('#accounts_filter').submit();
  });


  $(".timezone-select").select2({
    placeholder: "Select a Timezone",
  });

  $('.scheduled_later').on('change', function () {
    // console.log('changed')
    if ($('.check_delete:checked').length > 1) {
      $('.timezone-div').show();
    }
    else {
      $('.timezone-div').hide();
    }
    if ($(this).is(":checked")) {
      $('.timezone-div').show();
    } else {
      $('.timezone-div').hide();
    }
    console.log($(this))
    console.log($(this).is(':checked'))
  })

  $.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
    icons: {
      time: 'fa fa-clock',
      date: 'fa fa-calendar',
      up: 'fa fa-arrow-up',
      down: 'fa fa-arrow-down',
      previous: 'fa fa-chevron-left',
      next: 'fa fa-chevron-right',
      today: 'far fa-calendar-check-o',
      clear: 'fa fa-trash',
      close: 'fa fa-times'
    }
  });
  $('#datetimepicker1').datetimepicker({
    format: "YYYY-MM-DD HH:mm"
  });

  var selectedAccountId = '';
  var contactOptions = [];
  // $("#id_contacts").select2();
  $('.account_send_mail').click(function (e) {
    // console.log($(this).attr('data-account'))
    selectedAccountId = $(this).attr('data-account')
    $('#mail_account_id').val(selectedAccountId)
    $('#set_from_email').val($(this).attr('data-account-email'))
    $.ajax({
      url: "{% url 'accounts:get_contacts_for_account' %}",
      type: 'POST',
      dataType: 'json',
      data: {
        'account_id': selectedAccountId,
      },
      error: function (err) {
        console.log(err)
      },
      success: function (res) {
        contactOptions = [];
        contactOptions = res;
        $('#_id_recipients').selectize({
          valueField: 'id',
          labelField: 'name',
          searchField: ['name', 'email'],
          // options: [
          // {email: 'brian@thirdroute.com', name: 'Brian Reavis'},
          // {email: 'nikola@tesla.com', name: 'Nikola Tesla'},
          // {email: 'someone@gmail.com'}
          // ],
          options: res,
          render: {
            item: function (item, escape) {
              return '<div class="selectize_options_remove">' +
                (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
                (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
                '</div>';
            },
            option: function (item, escape) {
              var label = item.name || item.email;
              var caption = item.name ? item.email : null;
              return '<div class="selectize_options_remove">' +
                '<span class="label">' + escape(label) + '</span>' +
                (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
                '</div>';
            }
          },
        });
      }
    });
  })

  $("#send_email_to_contacts").on('hidden.bs.modal', function () {
    $('#_id_recipients')[0].selectize.destroy()
    $('p.failure').remove();
    $('#_id_recipients').val('')

  })

  $("#send_email_to_contacts").on('shown.bs.modal', function () {
  });

  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['code-block', 'link']
      ]
    },
    placeholder: 'Compose mail...',
    theme: 'snow' // or 'bubble'
  });

  var preciousContent = document.getElementById('myPrecious');
  var justTextContent = document.getElementById('justText');
  var justHtmlContent = document.getElementById('justHtml');

  quill.on('text-change', function () {
    var delta = quill.getContents();
    var text = quill.getText();
    var justHtml = quill.root.innerHTML;
    /*preciousContent.innerHTML = JSON.stringify(delta);
    justTextContent.innerHTML = text;
    justHtmlContent.innerHTML = justHtml;*/
    $('#html_content').val(justHtml);
    $('.ql-syntax').css({"background-color":"#23241f","color":"#f8f8f2","overflow":"visible","border-radius":"3px","white-space":"pre-wrap","margin-bottom":"5px","margin-top":"5px","padding":"5px 10px"})

  });


  $('.save_btn').click(function (e) {
    e.preventDefault();
    $("form#add_form_mail").submit()
  })

  $('form#add_form_mail').ajaxForm({
    type: 'POST',
    dataType: 'json',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    beforeSend: function (e) {
      $('.ql-syntax').css({"background-color":"#23241f","color":"#f8f8f2","overflow":"visible","border-radius":"3px","white-space":"pre-wrap","margin-bottom":"5px","margin-top":"5px","padding":"5px 10px"})
    },
    success: function (data) {
      console.log("data", data)
      if (data.error == false) {
        window.location = "{% url 'accounts:list' %}";
      } else {
        /*$(document).ajaxStop($.unblockUI);*/
        // $.unblockUI();
        $('p.failure').remove();
        for (var key in data.errors) {
          $('#id_' + key).html('<p class="error failure"> *' + data.errors[key] + '</p>');
        }
      }
    },
    error: function (xhr, errmsg, err) {
      console.log('error data', errmsg, err)
    }

  })

</script>
{% endblock js_block %}