{% 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>Music | Admin Profile</title>
	    <div class="main-content h-100 p-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="f-20 bold pb-2">Admin Profile</h2>
	    			</div>
	    		</div>
				<form action='/admin-profile' id="admin-profile" method="post" class="form-reset" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="row justify-content-center">
						<div class="col-12 col-md-12">
							<div class="card dashboard-card p-4">
								<div class="picUpdate">
									<div class="profile-pic text-center">
											<div>
												<img src="{% if admin_obj.image %}{{ admin_obj.image}}{% else %}/static/admin/images/user-default.png{% endif %}"  id="profile-image"/>
											</div>
											<div class="px-3 mt-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 class="top-card px-0 mt-4">
									<p class="f-18 bold pb-2">Personal Information</p>	    						
								</div>
								<div class="new-user-table bookings">
									<div class="updateDetail row">
											<form class="row gx-5">
												<div class="col-6 mb-3">
													<label class="form-label">First Name*</label>
													<input type="text" class="form-control mb-0" name='first_name' value="{{admin_obj.firstName}}">
												</div>	
												<div class="col-6 mb-3">
													<label class="form-label">Last Name*</label>
													<input type="text" class="form-control mb-0" name='last_name' value="{{admin_obj.lastName}}">
												</div>	
												<div class="col-6 mb-3">
													<label class="form-label">Email address*</label>
													<input type="email" class="form-control mb-0" name='email'  value="{{admin_obj.email}}">
												</div>
												<div class="col-6 mb-3">
													<label class="form-label">Phone Number*</label>
													<input id="jquery-intl-phone" name="intel_phone_number" type="tel" class="form-control mb-0" value="{{admin_obj.phoneNumber}}"  required>
													<input type="hidden" name="phone_number" id="phone_number" value="{{admin_obj.phoneNumber}}">    
												</div>
			
												<div class="col-6 mb-3">
													<label class="form-label">Address</label>
													<input
														type="text" name="address"
														placeholder="Enter your address"
														class="form-control mb-0"
														id="autocomplete" value="{{admin_obj.address}}"
													/>
													{% comment %} <textarea class="form-control mb-0" placeholder="address" name="address">{{admin_obj.address}}</textarea>							           {% endcomment %}
												</div> 
												<div class="col-12 my-4 text-end">
													<button type="submit" class="update-btn btn-primary">Update Profile</button>
												</div>
											</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
	    	</div>
	    </div>

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

{%block js%}
<!-- js code -->
{ <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<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 src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBZ09dtOd8YHF_ZCbfbaaMHJKiOr26noY8"></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",
		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>
<script>

	new google.maps.places.Autocomplete(
		document.getElementById("autocomplete"), {
		}
	 )
  
</script> 


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