{% extends 'layouts/mobile.jinja2' %}
{% block title %}My Call List{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="body-layout">
	<div class=" d-flex sub-nav">
		<a href="#" id="nav-details" class="active">Details</a>
		<a href="#" id="nav-timeline">Timeline</a>
		<a href="#" id="nav-notes">Notes</a>
	</div>
	<div class="inner-body-content inner-body-leadsdetails">
		<div class="save-btn-wrapper d-flex justify-content-between">
			<a href="#" id="back-to-contact"><img src="{{ asset_url_for('images/mobile/top-arw-bk.svg') }}" alt="">
				<span>Contacts</span></a>
			<button type="button" class="btn save-btn" hidden><img
					src="{{ asset_url_for('images/mobile/save-android.svg') }}" alt=""></button>
		</div>
		<form id="contact-edit-form">
			<div class="leadsdetails-top-section">
				<div class="name-wrapper date-wrapper d-flex">
					<div class="date ml-auto">
						{{contact.created_on.astimezone(time_zone).strftime("%d %b %Y, %I:%M %p EST")}}
					</div>
				</div>

				<div class="contact-number-wrapper name-wrapper d-flex">
					<div class="contact-block d-flex">
						<div class="contact-block-sub">
							<div class="form-group">
								<label>First Name</label>
								<input type="text" name="firstname" class="edit-input" value="{{contact.firstname}}"
									readonly>
							</div>
						</div>
						<div class="contact-block-sub">
							<div class="form-group">
								<label>Last Name</label>
								<input type="text" name="lastname" class="edit-input" value="{{contact.lastname}}"
									readonly>
							</div>
						</div>
					</div>
					<div class="contact-edit-btn">
						<button type="button" class="content-edit-btn"><img
								src="{{ asset_url_for('images/mobile/edit-sm.svg') }}" alt=""></button>
					</div>
				</div>
				<div class="contact-number-wrapper d-flex">
					<div class="contact-block d-flex">
						<div class="contact-block-sub">
							<div class="form-group">
								<label>Primary</label>
								<input type="text" name="phonenumber_1" class="edit-input"
									value="{{contact.formatted_phonenumber_1}}" readonly>
							</div>
						</div>
						<div class="contact-block-sub">
							<div class="form-group">
								<label>Secondary</label>
								<input type="text" name="phonenumber_2" class="edit-input"
									value="{{contact.formatted_phonenumber_2}}" readonly>
							</div>
						</div>
					</div>
					<div class="contact-edit-btn">
						<button type="button" class="content-edit-btn"><img
								src="{{ asset_url_for('images/mobile/edit-sm.svg') }}" alt=""></button>
					</div>
				</div>
				<div class="details-inp-wrapper details-caller-id">
					<label>Caller Id</label>
					<p>{{contact.caller_id}}</p>
				</div>
				<div class="details-inp-wrapper">
					<label>Email</label>
					<div class="input-group details-inp-group">
						<input type="email" name="email" value="{{contact.email}}" readonly=""
							class="details-input form-control edit-input" aria-describedby="basic-addon2">
						<div class="input-group-append">
							<button type="button" class="inp-edit-btn">
								<img src="{{ asset_url_for('images/mobile/edit-sm.svg') }}" alt="">
							</button>
						</div>
					</div>
				</div>
				<div class="details-inp-wrapper">
					<label>Assigned Agent</label>
					<div class="custom-selectbox">
						<select name="agent_assigned" class="details-input edit-input">
						    <option value="">Unassigned </option>
							{% for agent in agents %}
							<option value="{{agent.id}}" {% if agent.id == contact.agent_id %}
								selected {% endif %}>
								{{agent.full_name}}
							</option>
							{% endfor %}
						</select>
					</div>
				</div>

				<div class="status-wrapper d-flex">
				    <div class="status-col">
					    <div class="details-inp-wrapper">
						    <label>Status</label>
							<div class="custom-selectbox">
							    <select name="status" class="details-input edit-input">
								    {% for key, value in status_choices.items() %}
							        <option value="{{key}}" {% if key == contact.status %} selected {% endif %}>
								        {{value}}
							        </option>
							        {% endfor %}
								</select>
							</div>
						</div>
					</div>

					<div class="status-col">
					    <div class="details-inp-wrapper">
						    <label>BDC Status</label>
							<div class="custom-selectbox">
							    <select name="bdc_status" class="details-input edit-input">
								    {% for key, value in bdc_status_choices.items() %}
							        <option value="{{key}}" {% if key == contact.bdc_status %} selected {% endif %}>
								        {{value}}
							        </option>
							        {% endfor %}
								</select>
							</div>
						</div>
					</div>

					{# <div class="status-col">
					    <div class="details-inp-wrapper">
						    <label>Marketing Source</label>
							<div class="input-group details-inp-group">
							    <input type="text" name="marketing_source" value="{{contact.marketing_source}}" readonly="" class="details-input form-control edit-input">
								<div class="input-group-append">
								    <button type="button" class="inp-edit-btn">
									    <img src="{{ asset_url_for('images/mobile/edit-sm.svg') }}" alt="">
									</button>
								</div>
							</div>
						</div>
					</div> #}
				</div>

				<div class="marketing-source-wrapper d-flex">
					<div class="marketing-source-col">
					    <div class="details-inp-wrapper">
						    <label>Marketing Source</label>
							<div class="custom-selectbox">
							    <select name="marketing_source" class="details-input edit-input">
								    {% for key, value in sources_choices.items() %}
							        <option value="{{key}}" {% if key == contact.marketing_source %} selected {% endif %}>
								        {{value}}
							        </option>
							        {% endfor %}
								</select>
							</div>
						</div>
					</div>
					<div class="marketing-source-col">
					</div>
				</div>

				{# <div class="details-inp-wrapper">
					<label>Status</label>
					<div class="custom-selectbox">
						<select name="status" class="details-input edit-input">
							{% for key, value in status_choices.items() %}
							<option value="{{key}}" {% if key == contact.status %} selected {% endif %}>
								{{value}}
							</option>
							{% endfor %}
						</select>
					</div>
				</div> #}
				<div class="details-inp-wrapper d-flex">
					<div class="contact-details-left">
						<div class="contact-number-wrapper d-flex">
							<div class="contact-block d-flex">
								<div class="contact-block-sub">
									<div class="form-group">
										<label>Address Line 1</label>
										<input type="text" class="edit-input" name="address_1" value="{{contact.address_1}}"
											readonly>
									</div>
								</div>
								<div class="contact-block-sub">
									<div class="form-group">
										<label>Address Line 2</label>
										<input type="text" class="edit-input" name="address_2" value="{{contact.address_2}}"
											readonly>
									</div>
								</div>
							</div>
						</div>
						<div class="contact-number-wrapper d-flex">
							<div class="contact-block d-flex">
								<div class="contact-block-sub">
									<div class="form-group">
										<label>City</label>
										<input type="text" class="edit-input" name="city" value="{{contact.city}}" readonly>
									</div>
								</div>
								<div class="contact-block-sub">
									<div class="form-group">
										<label>State</label>
										<input type="text" class="edit-input" name="state" value="{{contact.state}}" readonly>
									</div>
								</div>
								<div class="contact-block-sub">
									<div class="form-group">
										<label>Zipcode</label>
										<input type="text" class="edit-input" name="zip" value="{{contact.zip}}" readonly>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="contact-edit-btn">
						<button type="button" class="address-edit-btn content-edit-btn"><img
								src="{{ asset_url_for('images/mobile/edit-sm.svg') }}" alt=""></button>
					</div>
				</div>
			</div>
			<div class="content-toggle-section">
				<div class="d-flex toggle-btn-wrapper">
					<div class="toggle-btn-block">
						<div class="checkbox switcher">
							<label for="test1">
								<input type="checkbox" name="is_do_not_call" class="edit-input" id="test1" value=""
									{% if contact.is_do_not_call%} checked {% endif %}>
								<span><small></small></span>
								<small class="label-text">Do not Contact</small>
							</label>
						</div>
					</div>
					<div class="toggle-btn-block">
						<div class="checkbox switcher">
							<label for="test2">
								<input type="checkbox" name="is_unsubscribe" class="edit-input" id="test2" value=""
									{% if contact.is_unsubscribe%} checked {% endif %}>
								<span><small></small></span>
								<small class="label-text">SMS Unsubscribed</small>
							</label>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="total-count-wrapper d-flex">
			<div class="total-count-block">
				<p class="count-label">Forms</p>
				<p class="counter">{{contact.form_count}}</p>
			</div>
			<div class="total-count-block">
				<p class="count-label">Messages</p>
				<p class="counter">{{contact.sms_count}}</p>
			</div>
			<div class="total-count-block">
				<p class="count-label">Calls</p>
				<p class="counter">{{contact.phone_count}}</p>
			</div>
			<div class="total-count-block">
				<p class="count-label">Notes</p>
				<p class="counter">{{contact.note_count}}</p>
			</div>
		</div>
		<div class="contact-btn-wrapper d-flex">
			<div class="contact-btn-block">
				<a href="{{call_uri}}:{{contact.phonenumber_1}}?dialAction=voiceCall">
					<p><img src="{{ asset_url_for('images/mobile/call-blue.svg') }}" alt=""></p>
					<p>Call Contact</p>
				</a>
			</div>
			<div class="contact-btn-block">
				<a href="{{call_uri}}:{{contact.phonenumber_1}}?dialAction=text">
					<p><img src="{{ asset_url_for('images/mobile/chat-blue.svg') }}" alt=""></p>
					<p>Message Contact</p>
				</a>
			</div>
		</div>
	</div>
</div>
<!-- Modal -->
<div class="modal fade custom-modal custom-modal-apply" data-backdrop="static" id="backToModal" tabindex="-1" role="dialog" aria-labelledby="backToModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-body text-center">
				{# <div class="warning-wrapper">
					<span>!</span>
				</div> #}
				<p>Are you sure you want to <br>exit without saving?</p>
			</div>
			<div class="modal-footer modal-footer-btn-wrapper">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
				<a href="#" type="button" class="btn btn-secondary" id="modal-ok-link">Ok</a>
			</div>
		</div>
	</div>
</div>
<!-- Number modal -->
<div class="modal fade custom-modal viewLeads-modal" id="numberModal1" 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="{{call_uri}}:{{contact.phonenumber_1}}?dialAction=voiceCall">Call Contact</a></p>
				<p><a href="{{call_uri}}:{{contact.phonenumber_2}}?dialAction=text">Message Contact</a></p>
			</div>
		</div>
	</div>
</div>
<!-- Secondary Number 2 Modal -->

<div class="modal fade custom-modal viewLeads-modal" id="numberModal2" 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="{{call_uri}}:{{contact.phonenumber_2}}?dialAction=voiceCall">Call Contact</a></p>
				<p><a href="{{call_uri}}:{{contact.phonenumber_2}}?dialAction=text">Message Contact</a></p>
			</div>
		</div>
	</div>
</div>

<!-- Modal Error android -->
<div class="modal fade custom-modal modal-error" id="validationError" data-backdrop="static" 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 id="error-msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn error-close" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ javascript_tag('contact_detail_js') | safe }}
{% endblock %}