{% extends 'admin_dash/base.html' %}


{% load static %}
{% load humanize %}
{% block content %}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div class="content-wrapper">
    <div class="content">
        <div class="row">
            {% for field in form %}
            {% for error in field.errors %}
            <label class="text-{{msg.tags}} text-center text-danger col-12" style="text-align: center;">{{error}}</label>
            {% endfor %}
            {% endfor%}
            {% for msg in messages %}

            <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{msg}}</label>

            {% endfor%}
            <div class="col-xl-6 col-lg-6 col-12">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="550">
                    <div class="card-header ">
                    <div class="row col-12">
                        <h2 class="col-6  px-0">Webinar Courses</h2>
                        <a class="ms-auto col-6 text-right px-0" onClick="changeForm('webinar')">Add New webinar</a>
                    </div>
                    </div>
                    <div class="card-body slim-scroll py-0">
                        <table class="table ">
                            <tbody>
                                {% for course in courses %}
                                {% if course.course_tab == 'Webinar' %}
                                <tr>
                                    <td class="text-dark col-6">{{course.title}}<br><small>{{course.last_updated}}</small></td>
                                    
                                    <td class="text-suceess"><a href="{% url 'edit_course' course.id %}">edit course</a></td>
                                    <td class="text-suceess"><a href="#" data-toggle="modal" data-target="#course_del{{course.id}}">delete course</a></td>
                                </tr>
                                {% endif %}
                                 <div class="modal fade" id="course_del{{course.id}}" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Course Deletion</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        {{course.title}}<br><br>
                                        Are you sure you want to delete this course?
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-danger" href="#">Cancel</a>
                                        <a class="btn btn-success" href="{% url 'delete_course' course.id %}">Delete
                                            Now</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                                {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-12">
                <!-- Notification Table -->
                <div class="card card-default" data-scroll-height="550">
                    <div class="card-header justify-content-between ">
                        <div class="row col-12">
                        <h2 class="col-6  px-0">Free Courses</h2>
                        <a class="ms-auto col-6 text-right px-0" onClick="changeForm('free')">Add New Free Course</a>
                        
                    </div>
                    </div>
                    <div class="card-body slim-scroll">
                        {% for course in courses %}
                        {% if course.course_tab == 'Free'%}
                        <div class="media pb-3 align-items-center justify-content-between">
                            {% comment %} <div
                                class="d-flex align-items-center justify-content-center mr-3 media-icon iconbox-45  text-white">
                                <img src="{% if course.sm_thubmnail.%} {{course.sm_thubmnail.url}} {% else %} {{course.thubmnail.url}} {% endif %}" class="img-circle img-fluid rounded" alt="User Image" />
                            </div> {% endcomment %}
                            <div class="media-body pr-3 ">
                                <a class="mt-0 mb-1 font-size-15 text-dark" href="#">{{course.title}}</a>
                                <p><i class="mdi mdi-calendar"></i> {{course.last_updated|naturalday}}</p>
                                <a href="{% url 'edit_course' course.id %}">edit course</a>
                            </div>
                            <span class=" font-size-12 d-inline-block">Files?{% if course.files %} Yes {% else %} No {% endif %}
                                <br>
                                <span class="text-success">Video_link? {% if course.video_link %} Yes {% else %} No {% endif %}
                                    </span>

                        </div>
                        {% endif %}
                       
                        {% endfor %}
                    </div>
                    <div class="mt-3"></div>
                </div>
            </div>


             <div class="col-xl-6 col-12">
                <!-- Notification Table -->
                <div class="card card-default" data-scroll-height="550">
                    <div class="card-header justify-content-between ">
                        <div class="row col-12">
                        <h2 class="col-6  px-0">Premiumn Courses</h2>
                        <a class="ms-auto col-6 text-right px-0" onClick="changeForm('premium')">Add New Premium Course</a>
                        
                    </div>


                    </div>
                    <div class="card-body slim-scroll">
                        {% for course in courses %}
                        {% if course.course_tab == 'Premium'%}
                        <div class="media pb-3 align-items-center justify-content-between">
                            {% comment %} <div
                                class="d-flex align-items-center justify-content-center mr-3 media-icon iconbox-45  text-white">
                                <img src="{% if course.sm_thubmnail.%} {{course.sm_thubmnail.url}} {% else %} {{course.thubmnail.url}} {% endif %}" class="img-circle img-fluid rounded" alt="User Image" />
                            </div> {% endcomment %}
                            <div class="media-body pr-3 ">
                                <a class="mt-0 mb-1 font-size-15 text-dark" href="#">{{course.title}}</a>
                                <p><i class="mdi mdi-calendar"></i> {{course.last_updated|naturalday}}</p>
                                <a href="{% url 'edit_course' course.id %}">edit course</a>
                            </div>
                            <span class=" font-size-12 d-inline-block">Files?{% if course.files %} Yes {% else %} No {% endif %}
                                <br>
                                <span class="text-success">Video_link? {% if course.video_link %} Yes {% else %} No {% endif %}
                                    </span>

                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <div class="mt-3"></div>
                </div>
            </div>

            <div class="col-12" id="webinar">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="">
                    <div class="card-header">
                        <h4>Add New Webinar Course</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'admin_courses' %}?form=webinar" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Title</label>
                                    <input type="text" class="form-control" name="title" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Duration Per Day</label>
                                    <input type="number" class="form-control" name="duration" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Number of Days</label>
                                    <input type="number" class="form-control" name="number_of_days" required>
                                    
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Code</label>
                                    <input type="text" class="form-control" name="course_code" required>
                                    <small>This is the course code for the course e.g ASH for Aspen Hysys</small>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Rating Stars</label>
                                    <input type="text" class="form-control" name="rating_star" required>
                                    <small>This is the rating number e.g 4.5</small>
                                    
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Rating Number</label>
                                    <input type="number" class="form-control" name="rating_number" required>
                                    <small>This is the rating number e.g 200</small>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Price</label>
                                    <input type="number" class="form-control" name="price" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Venue</label>
                                    <input type="text" class="form-control" name="venue" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Registration End Date</label>
                                    <input type="datetime-local" class="form-control" name="reg_end_date" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Time for course per day</label>
                                    <input type="text" class="form-control" name="time" required>
                                    <snmall>This is the time for the course per day e.g 01:00 - 03:00</small>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Training Software</label>
                                    <input type="text" class="form-control" name="training_software" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Start Date</label>
                                    <input type="date" class="form-control" name="course_start_date" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course End Date</label>
                                    <input type="date" class="form-control" name="course_end_date" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Tab</label>
                                    <select class="form-control" name="course_tab" >

                                        <option >Webinar</option>
                                        <option >Free</option>
                                        <option>Premium</option>
                                        <option>E-books</option>
                                    </select>
                                </div>
                            
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Image</label>
                                    <input type="file" class="form-control" name="image" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Category</label>
                                    <select class="form-control" name="category" required>

                                        <option>Basic Course</option>
                                        <option>Intermediate Course</option>
                                        <option>Professional Course</option>
                                    </select>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Audience</label>
                                    <textarea class="form-control" required name="audience" rows="3">
                                    </textarea>
                                    <small>separate course audience with a comma</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Prerequisites</label>
                                    <textarea class="form-control" required name="prerequisites" rows="3">
                                    </textarea>
                                    <small>separate course Prerequisites with a comma</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Course Objectives</label>
                                    <textarea class="form-control" required name="course_objectives" rows="3">
                                    </textarea>
                                    <small>separate course objectives with a comma</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Course Overview</label>
                                    <textarea class="form-control" name="overview" rows="3" required>
                                    </textarea>
                                    
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Video Link</label>
                                    <textarea class="form-control" name="video_link" rows="3" required>
                                    </textarea>
                                    <small>Embeded youtube link for the webinar intro</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea placeholder="write full blog content here" class="form-control"
                                        name="meta_tag" required>
                                    </textarea>
                                    
                                </div>
                                <div class="form-group col-6">
                                    <label for="title" class="">Activate Course</label>
                                    <input type="checkbox" class="" name="active_course" checked required>
                                </div>
                                <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                    </div>
                                

                                

                            </div>
                        </form>

                    </div>
                    
                </div>
            </div>
            <div class="col-12" id="free">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="">
                    <div class="card-header">
                        <h4>Add New Free Course</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'admin_courses' %}?form=free" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Title</label>
                                    <input type="text" class="form-control" name="title" required>
                                </div>
                                
                               <div class="form-group col-6">
                                    <label for="title" class="">Course Tab</label>
                                    <select class="form-control" name="course_tab" >

                                        <option >Webinar</option>
                                        <option >Free</option>
                                        <option>Premium</option>
                                        <option>E-book</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Video Duration</label>
                                    <input type="text" class="form-control" name="vid_duration" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Training Software</label>
                                    <input type="text" class="form-control" name="training_software" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Files</label>
                                    <input type="file" class="form-control" name="files" required>
                                </div>
                
                                
                                
                                <div class="form-group col-12">
                                    <label for="title" class="">Course Overview</label>
                                    <textarea class="form-control" name="overview" rows="3" required>
                                    </textarea>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Video Link</label>
                                    <textarea class="form-control" name="video_link" rows="3" required>
                                    </textarea>
                                    <small>Embeded youtube link for the free cpourse</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea placeholder="write full blog content here" class="form-control"
                                        name="meta_tag" required>
                                    </textarea>
                                    
                                </div>
                                <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                    </div>
                                

                                

                            </div>
                        </form>

                    </div>
                    
                </div>
            </div>
            <div class="col-12" id="premium">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="">
                    <div class="card-header">
                        <h4>Add New Premium Course</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'admin_courses' %}?form=premium" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Title</label>
                                    <input type="text" class="form-control" name="title" required>
                                </div>
                                
                               <div class="form-group col-6">
                                    <label for="title" class="">Course Tab</label>
                                    <select class="form-control" name="course_tab" >

                                        <option >Webinar</option>
                                        <option >Free</option>
                                        <option>Premium</option>
                                        <option>E-books</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Video Duration</label>
                                    <input type="text" class="form-control" name="vid_duration" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Training Software</label>
                                    <input type="text" class="form-control" name="training_software" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Files</label>
                                    <input type="file" class="form-control" name="files">
                                </div>
                
                                <div class="form-group col-6">
                                    <label for="title" class="">Big Image</label>
                                    <input type="file" class="form-control" name="thubmnail" required>
                                </div>

                                <div class="form-group col-6">
                                    <label for="title" class="">Small Image</label>
                                    <input type="file" class="form-control" name="sm_thubmnail" required>
                                </div>
                                
                                <div class="form-group col-12">
                                    <label for="title" class="">Course Overview</label>
                                    <textarea class="form-control" name="overview" rows="3" required>
                                    </textarea>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Video Link</label>
                                    <textarea class="form-control" name="video_link" rows="3" required>
                                    </textarea>
                                    <small>Embeded youtube link for the free cpourse</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea placeholder="write full blog content here" class="form-control"
                                        name="meta_tag" required>
                                    </textarea>
                                    
                                </div>
                                <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                    </div>
                                

                                

                            </div>
                        </form>

                    </div>
                    
                </div>
            </div>
            <div class="col-12" id="ecourse">
                <!-- Top Sell Table -->
                <div class="card card-table-border-none" data-scroll-height="">
                    <div class="card-header">
                        <h4>Add New E-Course</h4>

                    </div>
                    <div class="card-body slim-scroll mt-2">
                        <form action="{% url 'admin_courses' %}?form=e-books" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="title" class="">Title</label>
                                    <input type="text" class="form-control" name="title" required>
                                </div>
                                
                               <div class="form-group col-6">
                                    <label for="title" class="">Course Tab</label>
                                    <select class="form-control" name="course_tab" >

                                        <option >Webinar</option>
                                        <option >Free</option>
                                        <option>Premium</option>
                                        <option>E-books</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Video Duration</label>
                                    <input type="text" class="form-control" name="vid_duration" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Training Software</label>
                                    <input type="text" class="form-control" name="training_software" required>
                                </div>
                                
                                <div class="form-group col-6">
                                    <label for="title" class="">Course Files</label>
                                    <input type="file" class="form-control" name="files" required>
                                </div>


                                <div class="form-group col-6">
                                    <label for="title" class="">Files</label>
                                    <input type="file" class="form-control" name="files" multiple required>
                                </div>
                
                                
                                
                                <div class="form-group col-12">
                                    <label for="title" class="">Course Overview</label>
                                    <textarea class="form-control" name="overview" rows="3" required>
                                    </textarea>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title" class="">Video Link</label>
                                    <textarea class="form-control" name="video_link" rows="3" required>
                                    </textarea>
                                    <small>Embeded youtube link for the free cpourse</small>
                                </div>
                                <div class="form-group col-12">
                                    <label for="title">Meta</label>
                                    <textarea placeholder="write full blog content here" class="form-control"
                                        name="meta_tag" required>
                                    </textarea>
                                    
                                </div>
                                <div class="row justify-content-end col-12  ms-3">

                                        <button type="submit" class="btn border rounded text-white mt-4 col-2 py-3"
                                            style="background-color: #754C28;">Submit</button>
                                </div
                            </div>
                        </form>

                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let webForm = document.getElementById("webinar")
    let freeForm = document.getElementById("free")
    let premiumForm = document.getElementById("premium")
    let ecourseform = document.getElementById("ecourse")
    webForm.classList.add("d-none")
    freeForm.classList.add("d-none")
    premiumForm.classList.add("d-none")
    ecourseform.classList.add("d-none")
    function changeForm(form){
        if (form == 'webinar'){
            webForm.classList.remove("d-none")
            freeForm.classList.add("d-none")
        }else if(form == 'free'){
            freeForm.classList.remove("d-none")
            webForm.classList.add("d-none")
        }else if(form == 'premium'){
            freeForm.classList.add("d-none")
            webForm.classList.add("d-none")
            premiumForm.classList.remove("d-none")
        }else if(form == 'ecourse'){
            freeForm.classList.add("d-none")
            webForm.classList.add("d-none")
            premiumForm.classList.remove("d-none")
            ecourseform.classList.remove("d-none")
        }   
    }
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });

    ClassicEditor
        .create(document.querySelector('#editor1'))
        .catch(error => {
            console.error(error);
        });
        
</script>



{% endblock content %}