{%include "header.html"%}

<!-- Header Layout Content -->
<div class="mdk-header-layout__content">

    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container page__heading-container">
                <div class="page__heading">
                    <!-- <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#"><i
                                                class="material-icons icon-20pt">home</i></a></li>
                                    
                                    <li class="breadcrumb-item active" aria-current="page">Live Lectures</li>
                                </ol>
                            </nav> -->
                </div>

                <div class="row mb-3 mt-4">
                    <div class="col-6">
                        <h1 class="heading">Live Lectures</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Live Lectures</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn" data-toggle="modal"
                                data-target="#Add-live-lecture">Add Lectures</button>
                        </div>
                    </div>
                </div>

                <div class="row mb-3 mt-4">
                    <div class="card card-body mb-3">
                        <h4>Filters</h4>
                        <form method="GET">
                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-12">
                                    <input type="hidden" name="page" value="{{page}}" />
                                    <div class="form-group">
                                        <label>Title</label>
                                        <input type="text" name="title" id="" {% if title != None %} value="{{title}}"
                                        {% else %}
                                        value="" 
                                        {% endif %}class="form-control" placeholder="Title">

                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-12">
                                    <div class="form-group">
                                        <label>Subject</label>
                                        <select class="form-control" name="section">
                                            <option value="">Select Subject</option>
                                        {% for section1 in section_list %} 
                                <option value="{{ section1.id }}" {% if section == section1.id|stringformat:"i" %} selected {% endif %}>{{ section1.section_name }}</option>
                                {% endfor %}
                            </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-12">
                                    <div class="form-group">
                                        <label>Faculty</label>
                                        <select class="form-control" name="faculty">
                                            <option value="">Select faculty</option>

                                            {% for faculty1 in faculty_list %}
                                            <option value="{{ faculty1.id }}"{% if faculty == faculty1.id|stringformat:"i" %} selected {% endif %}>{{ faculty1.faculty_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-12">
                                    <div class="form-group">
                                        <label>Select Batch</label>
                                        <select class="form-control" name="batch">
                                            <option value="">Select batch</option>
                                            <option value="open_for_all" {% if batch == 'open_for_all' %} selected {% endif %}>Open For all </option>
                                            <option value="all_batches"  {% if batch == 'all_batches' %} selected {% endif %}>All Batches</option>
                                            {% for batch1 in batch_list %}
                                                <option value="{{ batch1.id }}" {% if batch == batch1.id|stringformat:"i" %} selected {% endif %}>{{ batch1.batch_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-9 col-md-9 col-12">
                                    <div class="form-group row">
                                        <!-- <label for="name col-md-12">Select Dates</label> -->
                                        <div class="col-md-6">
                                            <label for="">From Dates</label>
                                            <input type="date" class="form-control" name="from_date" value="{{from_date}}"/>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">To Dates</label>
                                            <input type="date" class="form-control" name="to_date" value="{{to_date}}"/>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="name">Select Status</label>
                                                <select class="form-control" name="status" id="status">
                                                    <option value="">Select status</option>
                                                    <option value="Active" {% if status == 'Active' %} selected {% endif %}>Active</option>
            
                                                    <option value="Inactive" {% if status == 'Inactive' %} selected {% endif %}>Inactive</option>
                                                    
                                                </select>
                                            </div>
                                        </div> -->

                                        <div class="col-lg-3 col-md-3  col-12">
                                            <div class="justify-content-center m-top-18px">
                                                <label for="name" class="form-label"></label>
                                                <button class="btn add-btn" type="submit">Filter</button>
                                                <a class="btn btn-refresh" href="{{SITE_URL}}/admin/live_lecture"><i class="fas fa-sync-alt"></i></a>
                                            </div>
                                            
                                        </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>



            <div class="container page__container exam-module">
                <div class="card card-body pt-0">
                    <div class="container mt-5">
                        
                      </div>

                    <div class="row no-gutters">

                        <div class="col-lg-12 card-body">

                            <div class="table-responsive border-bottom" data-toggle="lists"
                                data-lists-values='["js-lists-values-employee-name"]'>

                                <table class="table thead-border-top-0">
                                    <thead class="table-heading">
                                        <tr>
                                            <th class="table-head text-center">Sr.No.</th>
                                            <th class="table-head">Title</th>
                                            <!-- <th class="table-head">Batches</th> -->
                                            <th class="table-head">Subject</th>
                                            <th class="table-head">Batches</th>
                                            <!-- <th class="table-head">Image</th> -->
                                            <th class="table-head">Faculty</th>
                                            <th class="table-head">Video</th>
                                            <th class="table-head">Lecture date</th>
                                            <!-- <th class="table-head">Start time</th>
                                                    <th class="table-head">End time</th>  -->
                                            <!-- <th class="table-head">Lecture url</th> -->
                                            <!-- <th class="table-head">password</th> -->
                                            <!-- <th class="table-head"> modified date</th>  -->
                                            <th class="table-head w-200px text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list" id="staff">
                                        {% for lecture in all_lectures %}
                                        <tr class="">
                                            <td class="text-center">{{forloop.counter}}</td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name"><a
                                                            href="./lecture-details/{{lecture.id}}">{{lecture.title}}</a></span>
                                                    </div>
                                                </div>
                                            </td>

                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{lecture.batch.batch_name}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                            <td class="">
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{lecture.section.section_name}}</span>
                                                    </div>
                                                </div>
                                            </td>


                                            <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                {% if lecture.lecture_type == 'selected_batches' %}
                                                                {% for batch in lecture.batches.all %}
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{ batch.batch_name }}</span>,
                                                                    <input type="hidden" name="batch_ids_{{lecture.id}}[]" value="{{batch.id}}"/>
                                                            {% endfor %}
                                                            {% else %}
                                                            {{lecture.lecture_type}}
                                                            {% endif %}
                                                                </div>
                                                        </div>
                                                        
                                                    </td>


                                            <!-- <td class="img">
                                                        <span class="badge">
                                                            <img src="{{ lecture.image.url }}"/>
                                                        </span> 
                                                    </td> -->


                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{lecture.faculty.faculty_name}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                            {% if lecture.videos %}
                                            <div class="media align-items-center">
                                                <div class="media-body">
                                                    
                                            <a href="#play-video-modal" class="play-video badge badge-warning icon"
                                            data-toggle="modal" data-video="{{lecture.videos.url}}" data-toggle="tooltip"
                                            data-placement="left" title="Upload Video"><i class="fa fa-play"></i></span></a>
                                                </div>
                                            </div>
                                            {% else %}
                                            <div class="media align-items-center">
                                                <div class="media-body">
                                                    <span
                                                        class="js-lists-values-exam-name exam-name">-</span>
                                                </div>
                                            </div>
                                            {% endif %}
                                        </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{lecture.lacture_date}} {{lecture.start_time}}</span>
                                                    </div>
                                                </div>
                                            </td>


                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{lecture.start_time}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{lecture.end_time}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{lecture.lacture_url}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{lecture.password}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->


                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{lecture.updated_at}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                            <td class="text-center">
                                                <a href="./lecture-details/{{lecture.id}}" > <i
                                                    class="fas fa-eye delete"></i></a>
                                                <a href="#modal-delete" class="delete-button badge badge-danger"
                                                    data-toggle="modal" data-id="{{lecture.id}}"> <i
                                                        class="fas fa-trash delete"></i></a>
                                                <a href="#Edit-live-lecture"
                                                    class="edit-button badge badge-warning edit" data-toggle="modal"
                                                    data-id="{{lecture.id}}" data-url="{{lecture.url}}"
                                                    data-title="{{lecture.title}}"
                                                    data-lecturetype="{{lecture.lecture_type}}"
                                                    data-batch="{{lecture.batches_id}}"
                                                    data-subject="{{lecture.section_id}}"
                                                    data-topic="{{lecture.topic_id}}" data-image="{{lecture.image}}"
                                                    data-faculty="{{lecture.faculty_id}}"
                                                    data-lactureid="{{lecture.lacture_id}}"
                                                    data-lacture-date="{{lecture.lacture_date|date:'Y-m-d'}}"
                                                    data-start-time="{{lecture.start_time|time:'H:i:s'}}"
                                                    data-end-time="{{lecture.end_time|time:'H:i:s'}}"
                                                    data-password="{{lecture.password}}"><i class="fas fa-edit"></i></a>

                                                <a href="#Add-video-modal" class="upload-video badge badge-warning icon"
                                                    data-toggle="modal" data-id="{{lecture.id}}" data-toggle="tooltip"
                                                    data-placement="left" title="Upload Video"><i
                                                        class="fas fa-upload"></i> </a>
                                            </td>
                                        </tr>
                                        {% endfor%}


                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-12 p-0">
                    <ul class="pagination m-0">
              
                        {% if all_lectures.has_previous %}
                        <li class="page-item ">
                            <a class="page-link" href="?page={{ all_lectures.previous_page_number }}{{filter}}"
                                aria-label="Previous">
                                <span aria-hidden="true" class="material-icons">chevron_left</span>
                                <span>Prev</span>
                            </a>
                        </li>
                        {% endif %}

                        <li class="page-item active ">
                            <a class="page-link" href="?page={{ all_lectures.number }}{{filter}}" aria-label="1">
                                <span>{{ all_lectures.number }}</span>
                            </a>
                        </li>

                        {% if all_lectures.has_next %}

                        <li class="page-item">
                            <a class="page-link" href="?page={{ all_lectures.next_page_number }}{{filter}}" aria-label="Next">
                                <span>Next</span>
                                <span aria-hidden="true" class="material-icons">chevron_right</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>

        </div>
        <!-- // END drawer-layout__content -->

        <!-- drawer -->
        {%include "sidebar.html"%}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->

</div>
<!-- // END header-layout__content -->

</div>
<!-- // END header-layout -->


{%include "footer.html"%}
<script>
    (function () {
        'use strict';
        // ENABLE sidebar menu tabs
        $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    })()
</script>





<!-- play video modal  -->
<div id="play-video-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-lg">
        <div class="modal-content">
            <div class="modal-body text-center ">
                <video controls id="video" style="width: 100%;">
                    <source src="" id="mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</div>
<!-- add  live lectures modal  -->
<div id="Add-live-lecture" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <h4 class="modal-heading">Add Live Lectures</h4>
                    <form id="add_live_lecture_form" method="post" enctype="multipart/form-data" class="modal-form">

                        {% csrf_token %}
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input class="form-control" type="text" name="title" placeholder="Title" />
                        </div>

                        <div class="form-group">
                            <label for="url">Lecture URL</label>
                            <input class="form-control" type="text" name="url" placeholder="Title" />
                        </div>

                        <div class="form-group">
                            <label for="lecture_type">Lecture Type: </label>
                            <select name="lecture_type" data-toggle="select" class="form-control" id="lecture_type">
                                <option value="open_for_all">Open For all </option>
                                <option value="all_batches">All Batches</option>
                                <option value="selected_batches">Selected Batches</option>
                            </select>
                        </div>

                        <div class="form-group" id="select_batch" style="display: none;">
                            <label for="batches">Select Batches: </label>
                            <select data-toggle="select" class="form-control select_field_class" name="batch"
                                multiple="multiple">
                                {% for batch in batch_list %}
                                <option value="{{ batch.id }}" multiple>{{ batch.batch_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="subject">Select Subject : </label>
                            <select name="section" id="section" data-toggle="select" class="form-control">
                                {% for section in section_list %} 
                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="topic">Select Topic : </label>
                            <select data-toggle="select" class="form-control select_field_class topic" id="topic" name="topic"
                                >
                                <option value="">Select topic</option>
                                {% for topic in topics_list %}
                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- <div class="form-group">
                                <label for="image">Images:</label>
                                <input class="form-control" type="file" 
                                name="image" />
                            </div> -->

                        <div class="form-group">
                            <label for="faculty">Select Faculty: </label>
                            <select data-toggle="select" class="form-control" name="faculty" name="faculty">
                                {% for faculty in faculty_list %}
                                <option value="{{ faculty.id }}">{{ faculty.faculty_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- <div class="form-group">
                                <label for="lacture_id">Lectures Url</label>
                                <input class="form-control" type="text" 
                                name="lacture_id"
                                    />
                            </div> -->

                        <!-- <div class="form-group">
                                <label for="password">Password</label>
                                <input class="form-control" type="password"  
                                name="password" />
                            </div> -->

                        <div class="form-group">
                            <label for="lecture-date">Lecture Date</label>
                            <input class="form-control" type="date" name="lacture_date" placeholder="Lectures Date" />
                        </div>

                        <div class="form-group">
                            <label for="start-time">Start Time</label>
                            <input class="form-control" type="time" name="start_time" placeholder="Start Time" />
                        </div>

                        <div class="form-group">
                            <label for="end-time">End Time</label>
                            <input class="form-control" type="time" name="end_time" placeholder="End Time" />
                        </div>
                        <div id="msg" class="mt-4 mb-4"></div>
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Add </button>
                            <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>

                        </div>
                    </form>
                </div>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->



<!-- edit live lectures modal  -->
<div id="Edit-live-lecture" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <h4 class="modal-heading">Edit Live Lectures</h4>
                    <form id="edit_live_lecture_form" method="post" enctype="multipart/form-data" class="modal-form">

                        {% csrf_token %}

                        <input type="hidden" name="id" id="lecture_id" value="" />
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input class="form-control" type="text" id="e_title" name="title" placeholder="Title" />
                        </div>

                        <div class="form-group">
                            <label for="url">lecture URL</label>
                            <input class="form-control" type="text" id="e_url" name="url" placeholder="Title" />
                        </div>

                        <div class="form-group">
                            <label for="lecture_type">Lecture Type: </label>
                            <select name="lecture_type" data-toggle="select" class="form-control" id="e_lecture_type">
                                <option value="open_for_all">Open For all </option>
                                <option value="all_batches">All Batches</option>
                                <option value="selected_batches">Selected Batches</option>
                            </select>
                        </div>

                        <div class="form-group d-none" id="e_select_batch">
                            <label for="batches">Select Batches: </label>
                            <select data-toggle="select" class="form-control select_field_class" name="batch"
                                id="e_batch" multiple="multiple">
                                {% for batch in batch_list %}
                                <option value="{{ batch.id }}">{{ batch.batch_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="subject">Select Subject : </label>
                            <select name="section" id="e_subject" data-toggle="select" class="form-control">
                                {% for section in section_list %} 
                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="topic">Select Topic : </label>
                            <select data-toggle="select" id="e_topic" class="form-control topic"
                                name="topic">
                                {% for topic in topics_list %}
                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <!-- <div class="form-group">
                                <label for="image">Images:</label>
                                <input class="form-control" id="e_image" type="file" 
                                name="image" />
                            </div> -->

                        <div class="form-group">
                            <label for="faculty">Select Faculty: </label>
                            <select data-toggle="select" id="e_faculty" class="form-control" name="faculty"
                                name="faculty">
                                {% for faculty in faculty_list %}
                                <option value="{{ faculty.id }}">{{ faculty.faculty_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- <div class="form-group">
                                <label for="lecture-id">Lectures Url</label>
                                <input class="form-control" id="e_lacture_id" type="text" 
                                name="lacture_id"
                                     />
                            </div> -->

                        <!-- <div class="form-group">
                                <label for="password">Password</label>
                                <input class="form-control" type="password"  
                                name="password" id="e_password"
                                     />
                            </div> -->

                        <div class="form-group">
                            <label for="lecture-date">Lecture Date</label>
                            <input class="form-control" type="date" id="e_lacture_date" name="lacture_date" />
                        </div>

                        <div class="form-group">
                            <label for="start-time">Start Time</label>
                            <input class="form-control" type="time" id="e_start_time" name="start_time" />
                        </div>


                        <div class="form-group">
                            <label for="end-time">End Time</label>
                            <input class="form-control" type="time" id="e_end_time" name="end_time" />
                        </div>
                        <div id="edit_msg" class="mt-4 mb-4"></div>

                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Save </button>
                            <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>

                        </div>
                    </form>
                </div>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->



<!-- delete modal  -->
<div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <form method="post" enctype="multipart/form-data" id="delete_form">
                    {% csrf_token %}
                    <h4 class="">Are you sure you want to delete?</h4>
                    <input type="hidden" name="id" id="delete_id" />
                    <button type="submit" class="btn btn-danger">Yes</button>
                    <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- delete modal  -->



<!-- add  live lectures video  modal  -->
<div id="Add-video-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <h4 class="modal-heading">Add Video</h4>
                    <form id="add_video_form" method="post" enctype="multipart/form-data" class="modal-form">

                        {% csrf_token %}
                        <input type="hidden" name="id" id="video_id" value="" />

                        <div class="form-group">
                            <label for="thumbnail">Thumbnail</label>
                            <input class="form-control" type="file" required name="thumbnail" />
                        </div>

                        <div class="form-group">
                            <label for="lacture_id">Video Description</label>
                            <input class="form-control" type="text" required name="video_description" />
                        </div>
                        <div class="form-group">
                            <label for="thumbnail">Select Video </label>
                            <input class="form-control" type="file" required accept="video/mp4,video/x-m4v,video/*"
                                name="video-lecture" />
                        </div>
                        <div class="progress mb-3 d-none" id="progressBarContainer">
                            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                          </div>


                        <div id="video_msg" class="mt-4 mb-4"></div>
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Add </button>
                            <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->

</body>





<script>
   $('.play-video').click(function () {

var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();

mp4.src = $(this).data('video');

video.load();
video.play();
})
    // Listen for the form submission event
    $('#add_live_lecture_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "addLiveLecture" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#Add-live-lecture').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'live lecture scheduled successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>

<script>
    // set dynamic value in modal on button click
    $('.edit-button').click(function () {
        // alert($(this).data('lacture_date'));
        var id = $(this).data('id');
        $('#lecture_id').val(id);
        // $('#e_lacture_id').val($(this).data('lecture_id'));

        // $('#e_password').val($(this).data('password'));
        $('#e_title').val($(this).data('title'));
        $('#e_url').val($(this).data('url'));
        $('#e_lecture_type').val($(this).data('lecturetype'));
        if($(this).data('lecturetype')=="selected_batches"){
            $('#e_select_batch').removeClass("d-none");
            var values = $("input[name='batch_ids_"+id+"[]']")
              .map(function(){return ($(this).val());}).get();
              console.log(values);
        $('#e_batch').select2('val',values);
        //$('#e_batch').val(values);
        }
        else{
            $('#e_select_batch').addClass("d-none");
        $('#e_batch').val('');
        }
        $('#e_subject').val($(this).data('subject'));
        $('#e_topic').val($(this).data('topic'));

        // $('#e_image').val($(this).data('image'));
        $('#e_faculty').val($(this).data('faculty'));
        //console.log();
        var lecture_date = $(this).data('lacture-date').split(',')
        $('#e_lacture_date').val($(this).data('lacture-date'));

        $('#e_start_time').val($(this).data('start-time'));
        $('#e_end_time').val($(this).data('end-time'));
        //    $('#e_image').attr('src')=$(this).data('image');
    })

    // edit exam category event
    $('#edit_live_lecture_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "editLiveLecture" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#Edit-live-lecture').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'lecture details updated successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#edit_msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>

<script>
    $('.delete-button').click(function () {
        var id = $(this).data('id');
        $('#delete_id').val(id);
    })
    //    var delete_id = $('#category_id').val(id);
    //debugger
    // var category_id = $(this).val();
    $('#delete_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "deleteLiveLecturebyId" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#modal-delete').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'lecture deleted Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                    //    $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#delete_msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>

<script>
    // Function to simulate file upload progress with a delay
    function simulateUploadProgress() {
      const progressBar = $("#progressBar");
      let progress = 0;

      function updateProgress() {
        progress += 10;
        if (progress <= 100) {
          progressBar.width(progress + "%").text(progress + "%");
          setTimeout(updateProgress, 500); // Simulate a 500ms delay between updates
        } else {
          progressBar.parent().addClass("d-none");
        }
      }

      updateProgress();
    }

    // Handle form submit to show the progress bar and simulate upload progress
    // $("#add_video_form").submit(function (event) {
    //   event.preventDefault();

    //   // Show progress bar container
    // //   $("#progressBarContainer").removeClass("d-none");

    // //   // Simulate upload progress
    // //   simulateUploadProgress();
    // });
</script>

<script>
    $('.upload-video').click(function () {
        var id = $(this).data('id');
        $('#video_id').val(id);
    })
$('#add_video_form').submit(function (event) {
    // Prevent the default form submission behavior
    event.preventDefault();
    $('#video_msg').html('<div class="alert alert-primary"><i class="class="fa fa-spinner fa-spin"></i> Please wait uploading...</div>');
    // Show progress bar container
    $("#progressBarContainer").removeClass("d-none");

    // Simulate upload progress (optional)
    simulateUploadProgress();

    var formData = new FormData($(this)[0]);

    // Send the Ajax request
    $.ajax({
      url: '{% url "uploadVideobyLectureId" %}',
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      xhr: function () {
        // Create an XMLHttpRequest object with progress tracking
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            var percent = (e.loaded / e.total) * 100;
            updateProgressBar(percent); // Update progress bar based on real upload progress
          }
        });
        return xhr;
      },
      success: function (response) {
        if (response.status == 'success') {
          $('#Add-video-modal').modal('hide');
          setTimeout(function () {
            Swal.fire({
              icon: 'success',
              title: 'Success!',
              text: 'video lecture uploaded successfully.',
              confirmButtonColor: '#3085d6',
              confirmButtonText: 'OK'
            });
          }, 1000);
          setTimeout(function () {
            location.reload();
          }, 2000);
        } else {
          $('#video_msg').html('<div class="text-danger">' + response.msg + '</div>');
        }
      },
      error: function (xhr, status, error) {
        // Handle the error response
        console.log(error);
      }
    });
});   
</script>

<script>
    $('.select_field_class').select2({ placeholder: "Select here", maximumSelectionSize: 100 });
</script>

<script>
    $(document).ready(function () {
        $('#lecture_type').change(function () {
            if ($(this).val() === 'selected_batches') {
                $('#select_batch').show();
            }
            else {
                $('#select_batch').hide();

            }

        });
    });

    $(document).ready(function () {
        $('#e_lecture_type').change(function () {
            if ($(this).val() === 'selected_batches') {
                $('#e_select_batch').show();
            }
            else {
                $('#e_select_batch').hide();

            }

        });
    });
</script>

<script>
     $("#section").change(function() {
            var section = $(this).find("option:selected").val();
            
           // var category_level = $(this).attr("data-id");
            var html = '';
            if (section != "") {
                $("#sub-section").empty();
                $.ajax({
                    url: '{% url "Select_section_topic" %}',
                    method: "GET",
                    data: {
                        section: section,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(response) {
                        // alert(response);
                        $('.topic').html(response);
                    
                    },
                });
            }
        });
        $("#sub-section").change(function() {
          //  alert();
            var sub_section = $(this).find("option:selected").val();
            
           // var category_level = $(this).attr("data-id");
            var html = '';
            if (sub_section != "") {
                $("#topic").empty();
                $.ajax({
                    url: '{% url "subsection_select" %}',
                    method: "GET",
                    data: {
                        sub_section: sub_section,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(response) {
                        // alert(response);
                        $('#topic').html(response);
                    
                    },
                });
            }
        });
</script>

</html>

</html>