{% extends 'base.html' %}

{% load static %}
{% load humanize %}




{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Add New Customer</h1>
			<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>
		</div>

		{% include 'partials/_messages.html' %}

		<form action="add-customer" method="post" enctype="multipart/form-data" id="main-submit-form-tag">
		{% csrf_token %}
		<div class="col-6 col-xl-6">
			<div class="card">
				<div class="card-header">
					<h5 class="card-title">Customer Registration</h5>
				</div>
				<div class="card-body">

					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">Email Address</label>
						<div class="col-sm-8">
							<input type="email" class="form-control" name="email" id = "txt-unique-email" placeholder="Email" value="{{old_input_field_values.email}}">
						</div>
					</div>

					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">First name</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="first_name" id = "txt-first_name" placeholder="First name" value="{{old_input_field_values.first_name}}">
						</div>
					</div>
					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">Last name</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="last_name" id = "txt-last_name" placeholder="Last name" value="{{old_input_field_values.last_name}}">
						</div>
					</div>
					<!-- Mobile -->
					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">Mobile</label>
						<div class="col-sm-8">
						<input type="text" class="form-control" name="mobile" id="txt-mobile"
								placeholder="Mobile" value="{{ old_input_field_values.mobile }}">
						</div>
					</div>
					
					<!-- Password -->
					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">Password</label>
						<div class="col-sm-8">
						<input type="password" class="form-control" name="password" id="txt-password"
								placeholder="Password" value="{{ old_input_field_values.password }}">
						</div>
					</div>
  

					<div class="mb-3 row form-group required">
						<label class="col-form-label control-label col-sm-4 text-sm-end">Language</label>
						<div class="col-sm-8">
							<select name="language" id="language" class="form-select">
								<option value="">Select language</option>
								{% for lang in language_list %}
								  <option value="{{ lang.id }}">{{ lang.code }} - {{ lang.name }}</option>
								{% endfor %}
							  </select>							  
						</div>
					</div>
				</div>
			</div>

		</div>

		
		<div class="col-6">

			<div class="card">
				<div class="card-body">
					<div class="col-12 text-sm-end">
						<a href="{% url 'add-customer' %}" class="btn btn-secondary mb-3 mt-3">Clear</a>
						<button type="submit" class="btn btn-primary mb-3 mt-3" id="btn-add-item">
						  Add
						</button>
					</div>

				</div>
			</div>

		</div>


		</form>
		

	</div>
</main>

<script src="{% static 'js/number-separator.js' %}"></script>
<script type="text/javascript" src="{% static 'js/customermanagement/add-customer.js' %}"></script>
<!-- <script type="text/javascript" src="{% static 'js/studentmanagement/register-student14.js' %}"></script> -->

{% endblock %}