{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" crossorigin="anonymous" />
<title>Manimaran | Edit Customer Details</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead pb-3">Edit Customer</h2>
	    			</div>	    			
	    		</div>
				<form class="row" action="/edit-customer-details/{{ user_obj.id }}" id="add-user" method="POST" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="row">
						<div class="col-12">
							<div class="card p-4">
								<div class="picUpdate d-flex align-items-center justify-content-between">
									<div class="profile-pic">
										<div class="d-flex align-items-center">
											<div>
												<img src="{% if user_obj.avatar %}{{ user_obj.avatar }}{% else %}/static/admin/images/user-default.png{% endif %}" id="profile-image">
											</div>
											<div class="px-3">
												<input type="file" name="avatar" id="myFileInput" onchange="loadfile(event)" accept="image/*">
												<input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()" value="Upload a New Photo">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row new-user-table bookings mt-3">
						<div class="col-12 col-md-12">
							<div class="card addService fortune dashboard-card">
								<div class="row">
									<div class="col-12 col-md-6">
										<label class="col-form-label">First Name</label>
										<input type="text" placeholder="First Name" name="first_name" class="form-control" value="{{ user_obj.first_name }}" maxlength="15">
									</div>
									<div class="col-12 col-md-6">
										<label class="col-form-label">Last Name</label>
										<input type="text" placeholder="Last Name" name="last_name" class="form-control" value="{{ user_obj.last_name }}" maxlength="15">
									</div>
									<div class="col-12 col-md-6">
										<label class="col-form-label">Email</label>
										<input type="email" placeholder="Enter Email" name="email" class="form-control" maxlength="100" value="{{ user_obj.email }}" readonly>
									</div>
									<div class="col-12 col-md-6">
										<label class="col-form-label d-block">Phone Number</label>
										<input id="jquery-intl-phone" name="intel_phone_number" type="tel" value="{{ user_obj.phone_number }}" style="width:120%;">
										<input type="hidden" name="phone_number" id="phone_number" value="{{ user_obj.phone_number }}">  
									</div>
									<div class="col-12">
										    <div class="form-footer text-center mt-4">
												<button type="submit" class="btn dark-btn" >Update Customer</button>
											</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			    </form>
	    	</div>
	    </div>	

<!-- end of html code -->
{%endblock%}

{%block js%}

<!-- js code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" crossorigin="anonymous"></script>
<script>
	function loadfile(event){
		var image = document.getElementById('profile-image');
		image.src = URL.createObjectURL(event.target.files[0]);
	};
	
	var input = document.querySelector("#jquery-intl-phone");
	window.intlTelInput(input, {
		separateDialCode: true,
		initialCountry: "gb",
		onlyCountries: ["gb"], 
		customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
			return "e.g. " + selectedCountryPlaceholder;
		}
	});

	$("form").submit(function() {
	var iti = window.intlTelInputGlobals.getInstance(input);
	console.log('iti',iti)
	var full_number = iti.getNumber();
	$('#phone_number').val(full_number)
	});
</script>
	

<!-- end of js -->
{% endblock %}