{% 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 Investment Education</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="f-22 bold mb-2">Add Investment Education</h2>
	    			</div>
	    		</div>
				<form action='/add-investment-education' id="add-investment-education" method="post" class="form-reset" enctype="multipart/form-data">
	    		{% csrf_token %}
					<div class="card dashboard-card p-4">
							<div class="col-12 col-md-12">
									<div class="top-card px-0">
										<p class="f-18 mt-4"> Investment Education Information</p>	    						
									</div>
									<div class="updateDetail row">
										<form class="row gx-5">
                                        
										{% comment %} <div class="row blogimg">
												<div class="col-12">
													<div class="p-4">
														<div class="picUpdate d-flex align-items-center justify-content-center">
															<div class="profile-pic">
																<div class="align-items-center">
																	<div class="text-center">
																		<img src="/static/admin/images/user-default.png"  id="profile-image"/>
																	</div>
																	<div class="pt-3 ">
																		<input type="file" name='blog_image' 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> {% endcomment %}
											
                                        	<div class="col-6 mb-3">
												<label class="form-label">Category*</label>
                                                <select name="category" id="category">
                                                {% for cat in category %}
                                                    <option value="{{cat.id}}">{{cat.name}}</option>
                                                {% endfor %}
                                                </select>
											</div>	
											<div class="col-6 mb-3">
												<label class="form-label">Title*</label>
												<input type="text" class="form-control mb-0" name='title'>
											</div>	
                                            <div class="col-12 mb-3">
												<label class="form-label">Content*</label>
												<textarea class= 'ckeditor' type="texteditor" name='content'></textarea>
											</div>
                                            <div id="errorContainer" class="errorContainer" style="color: red;"></div>
                                           <div class="col-12 mb-3">
											<label class="form-label">Video</label>
												<input type="file" class="form-control mb-0" name='video' accept="video/mp4,video/x-m4v,video/*" 
                                                >
											</div>
											<div class="col-12 my-4 text-center">
												<button type="submit" class="btn dark-btn rounded text-black border-0" onclick="validateForm()">Add Education</button>
											</div>
										</form>
									</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://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<script>
function validateForm() {
  var content = CKEDITOR.instances.content.getData().trim();

  if (content === '') {
    $('#errorContainer').text("Please fill in the content field.").show();
    return false;
  } else {
    $('#errorContainer').hide();
  }
}

function loadfile(event){
	var image = document.getElementById('profile-image');
	image.src = URL.createObjectURL(event.target.files[0]);
};

</script>

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