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

{% block title %}My Call List{% endblock %}
{% block heading %}{% endblock %}
{% block body %}
<div class="body-layout">
    <div class="inner-body-content inner-body-leadsdetails inner-body-addleadsdetails">
        <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 class="btn save-btn"><img src="{{ asset_url_for('images/mobile/save-android.svg') }}" alt=""></button>
        </div>
        <form id="add-contact-form">
            <div class="leadsdetails-top-section">
                {# <div class="name-wrapper d-flex">
                    <div class="name">
                        <input type="text" name="first_name" value="" placeholder="Enter Name">
                    </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 name="firstname" type="text" value="" placeholder="First Name">
                            </div>
                        </div>
                        <div class="contact-block-sub">
                            <div class="form-group">
                                <label>Last Name</label>
                                <input type="text" name="lastname" value="" placeholder="Last Name">
                            </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>Primary</label>
                                <input name="phonenumber_1" type="text" placeholder="Contact Number 1">
                            </div>
                        </div>
                        <div class="contact-block-sub">
                            <div class="form-group">
                                <label>Secondary</label>
                                <input name="phonenumber_2" type="text" placeholder="Contact Number 2">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="details-inp-wrapper">
                    <label>Email</label>
                    <div class="input-group details-inp-group">
                        <input type="email" name="email" placeholder="Enter Email" class="details-input form-control">
                    </div>
                </div>
                <div class="details-inp-wrapper">
                    <label>Assigned Agent</label>
                    <div class="custom-selectbox">
                        <select name="agent_assigned" class="details-input">
                            <option value="">Unassigned</option>
                            {% for agent in agents %}
                            <option value="{{agent.id}}" {% if agent.id == current_agent %}
								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}}">{{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}}">{{value}}</option>
							        {% endfor %}
								</select>
							</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}}">{{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">
                            {% for key, value in status_choices.items() %}
                            <option value="{{key}}">{{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" name="address_1" placeholder="Address Line 1">
                                    </div>
                                </div>
                                <div class="contact-block-sub">
                                    <div class="form-group">
                                        <label>Address Line 2</label>
                                        <input type="text" name="address_2" placeholder="Address Line 2">
                                    </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" name="city" placeholder="City">
                                    </div>
                                </div>
                                <div class="contact-block-sub">
                                    <div class="form-group">
                                        <label>State</label>
                                        <input type="text" name="state" placeholder="State">
                                    </div>
                                </div>
                                <div class="contact-block-sub">
                                    <div class="form-group">
                                        <label>Zipcode</label>
                                        <input type="text" name="zip" placeholder="Zipcode">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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('add_contact_js') | safe }}
{% endblock %}