{% extends 'layouts/mobile.jinja2' %}

{% block title %}My Call List{% endblock %}
{% block refresh %} <meta http-equiv="refresh" content="180"/>{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="body-layout">
    <!-- hidden section -->
    <!-- <div class=" d-flex sub-nav">
        <a href="#" class="active">Contacts <span class="subnav-notify">9+</span></a>
        <a href="#">Tasks</a>
        <a href="#">Appoinments</a>
    </div> -->
    <div class="leads-filter-wrapper d-flex">
        <div class="filter-search-block">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><img src="{{ asset_url_for('images/mobile/search.svg') }}"
                            alt=""></span>
                </div>
                <input type="text" class="form-control" aria-label="" placeholder="Type a Name or Number" id="search">
                <button class="input-group-append clr-search">
                    <span class="input-group-text"><img src="{{ asset_url_for('images/mobile/close.svg') }}" alt=""></span>
                </button>
            </div>
        </div>
        <div class="filter-btn-block">
            <button class="filter-btn contact-filter-btn" data-toggle="modal" data-target="#filterLeadsModal">
                <img src="{{ asset_url_for('images/mobile/filter-btn.svg') }}" alt="">
                <span class="" id="filter-span"></span>
            </button>
        </div>
    </div>
    <div class="leads-filter-btn-wrapper d-flex">
        <div class="filter-btn-block">
            <button class="filter-toggle-btn active" id="my-contacts">My Contacts</button>
        </div>
        <div class="filter-btn-block">
            <button class="filter-toggle-btn" id="unassigned-contacts">Unassigned Contacts</button>
        </div>
    </div>
    <div class="inner-body-content inner-body-leads" id="contactsList">
        <!-- contact list-->
    </div>
    <a class="add-note-btn add-btn" href="{{ url_for('mobile.contact_add') }}">
        <img src="{{ asset_url_for('images/mobile/add.svg') }}" alt="">
    </a>
</div>

<!-- Modal -->

<div class="modal fade custom-modal viewLeads-modal" id="viewLeadsModal" tabindex="-1" role="dialog"
    aria-labelledby="viewLeadsModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <p><a href="#" id="modal-call">Call Contact</a></p>
                <p><a href="#" id="modal-text">Message Contact</a></p>
                <p><a href="#" id="modal-detail">View Contact Details</a></p>
            </div>
        </div>
    </div>
</div>
<div class="modal fade custom-modal filterLeads-modal" id="filterLeadsModal" tabindex="-1" role="dialog"
    aria-labelledby="filterLeadsTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="datepiker-wrapper">
                    <h4 class="filter-title">Please Select Contact Filters</h4>
                    <div class="filter-date-wrapper d-flex">
                        <div class="form-group mr-4">
                            <label>From</label>
                            <div class="custom-datepiker">
                                <input type="text" id="leadspickerFrom">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>To</label>
                            <div class="custom-datepiker">
                                <input type="text" id="leadspickerTo">
                            </div>
                        </div>
                    </div>
                    {# <div class="form-group">
                        <label>Assigned Agent</label>
                        <div class="custom-select-box">
                            <select name="agent" id="agent-filter" >
                                <option value="">All</option>
                                {% for agent in agents %}
                                <option value="{{agent.id}}">{{agent.full_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div> #}
                    <div class="form-group">
                        <label>Status</label>
                        <div class="custom-select-box">
                            <select name="status" id="status-filter" >
                                {% for key, value in status_choices.items() %}
                                <option value="{{ key }}" >{{ value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer-btn-wrapper">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-secondary" id="reset-filter">Clear Filters</button>
                <button type="button" class="btn btn-primary" id="filter-apply">Apply</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ javascript_tag('contact_lead_js') | safe }}
{% endblock %}