{% 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 body-layout-ios inner-body-leads">
	<!-- 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>
			<a class="add-leads-btn add-btn" href="{{ url_for('mobile.contact_add') }}">
				<img src="{{ asset_url_for('images/mobile/add-blue.svg') }}" alt="">
			</a>
		</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>
</div>
<!-- Modal -->
<div class="modal fade custom-modal viewLeads-modal-ios" 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 class="title">Please Choose an Action</p>
				<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 class="modal-footer viewLeads-modal-footer">
				<button type="button" class="btn viewLeads-close" data-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>
<!-- Modal filter -->
<div class="modal fade modal-ios filterLeads-modal filterLeads-modal-ios" 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">
				<p class="title">Please Select Contact Filters</p>
				<div class="datepiker-wrapper">
					<div class="filter-date-wrapper d-flex">
						<div class="form-group mr-2">
							<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-primary" id="filter-apply">Apply Filters</button>
				<button type="button" class="btn btn-delete" id="reset-filter">Clear Filters</button>
				<button type="button" class="btn btn-delete" data-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
{{ javascript_tag('contact_lead_js') | safe }}
{% endblock %}