{% 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>Investment Edu | Add Event</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12 mb-3">
	    				<h2 class="f-22 bold mb-2">Add Event</h2>
	    			</div>	    			
	    		</div>	    		
				<form action="/add-event" id="add-event" 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="/static/admin/images/blogdumy.jpg" id="profile-image">
				                        </div>
				                        <div class="px-3">
				                            <input type="file" name="event_image" id="myFileInput" onchange="loadfile(event)" accept="image/*">
				                            <input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()" value="Upload a Event Image">
				                        </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">Event Name</label>
										<input type="text" placeholder="Event Name" name="event_name" class="form-control" value="">
									</div>
									<div class="col-12 col-md-6">
										<label class="col-form-label">Location</label>
										<input type="text" placeholder="Location" name="location" class="form-control" value="">
									</div>
									<div class="col-12 col-md-4">
										<label class="col-form-label d-block">Event Date</label>
										<input type="date" name="date" class="form-control" value="">
									</div>
                                    <div class="col-12 col-md-4">
                                        <label class="col-form-label">Event Start Time</label>
										<input type="time" placeholder="Event Start Time" name="start_time" class="form-control" value="">
									</div>
                                    <div class="col-12 col-md-4">
                                        <label class="col-form-label">Event End Time</label>
										<input type="time" placeholder="Event End Time" name="end_time" class="form-control" value="">
									</div>									
									<div class="col-12">
										<label class="col-form-label">Event Description</label>
										<textarea class= 'ckeditor' type="texteditor" name='description'></textarea>
									</div>	
									<div class="col-12">
										<div class="save-btn text-center mt-4">
											<button type="submit" class="btn dark-btn rounded text-black border-0">Submit</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 src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

 <script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
                console.log( editor );
        } )
        .catch( error => {
                console.error( error );
    } );
 </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,
		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 %}