{%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">Exam Module</li> -->
                                    <li class="breadcrumb-item active" aria-current="page">Live Lectures</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="row mb-3">
                            <div class="col-6">
                                <h1 class="heading">Live Lectures</h1>
                            </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">
                            {% comment %} <div class="col-lg-6 col-md-12 col-sm-12">
                                <input type="number" placeholder="10"> <span class="items-pages">Items/Pages</span>
                            </div> {% endcomment %}
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="d-flex justify-content-end">
                                    <input type="serach" id="search" placeholder="Serach....">
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="container page__container exam-module">
                        <div class="card card-form">
                            <div class="row no-gutters">

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

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

                                        <table class="table mb-0 thead-border-top-0">
                                            <thead class="table-heading">
                                                <tr>
                                                    <th class="table-head">Sr.No.</th>
                                                    <th class="table-head">Title</th>
                                                    <th class="table-head">batches</th>
                                                    <th class="table-head text-center">subject</th>
                                                    <th class="table-head">topic</th>
                                                    <th class="table-head">image</th>
                                                    <th class="table-head">faculty</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 id</th>
                                                    <th class="table-head">password</th>
                                                    <th class="table-head"> modified date</th>
                                                    <th class="table-head">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="staff">
                                                {% for lecture in all_lectures %}
                                                <tr class="">
                                                    <td>{{forloop.counter}}</td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{lecture.title}}</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}}</span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td class="text-center">
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{lecture.subject}}</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.topic}}</span>
                                                            </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}}</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_date}}</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_id}}</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 span="2">
                                                        <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-title={{lecture.title}}
                                                             data-batch="{{lecture.batch_id}}" data-subject="{{lecture.subject}}" 
                                                            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}}"
                                                            data-start-time="{{lecture.start_time}}"
                                                            data-end-time="{{lecture.end_time}}"
                                                            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 }}" 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 }}" 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 }}" 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>


   


    <!-- 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="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="subject" data-toggle="select" class="form-control">
                                    <option selected="">CET</option>
                                    <option selected="">MCET</option>
                                    <option selected="">SSC</option>
                                    <option selected="">PCS</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="topic">Select Topic : </label>
                                <select  data-toggle="select" class="form-control select_field_class" name="topic"  multiple="multiple">
                                    {% for topic in topics_list %} 
                                    <option value="{{ topic.id }}" multiple>{{ 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 Id</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"
                                    placeholder="Password" />
                            </div>

                            <div class="form-group">
                                <label for="lecture-date">Lectures 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"></div>
                            <div class="form-group text-center">
                                <button class="btn modal-btn" type="submit">Add </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="batches">Select Batches: </label>
                                <select  data-toggle="select" id="e_batch" class="form-control" name="batch" >
                                    {% 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="subject" id="e_subject" data-toggle="select" class="form-control">
                                    <option value="CET">CET</option>
                                    <option value="MCET">MCET</option>
                                    <option value="SSC">SSC</option>
                                    <option value="PCS">PCS</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="topic">Select Topic : </label>
                                <select  data-toggle="select" id="e_topic" class="form-control" 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 Id</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">Lectures 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"></div>
                            <div class="form-group text-center">
                                <button class="btn modal-btn" type="submit">Save </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 bg-danger">
                <div class="modal-body text-center p-4">
                    <form method="post" enctype="multipart/form-data" id="delete_form" >
                        {% csrf_token %}
                    <i class="material-icons icon-40pt text-white mb-2">report_problem</i>
                    <h4 class="text-white">Ohhh Snap!</h4>
                    <p class="text-white mt-3 text-capitalize">are you sure you want to delete?</p>
                    <input type="hidden" name="id" id="delete_id" />
                    <div id="delete_msg"></div>
                    <button type="submit" class="btn btn-light my-2 rounded-0 ">Delete</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" 
                                name="thumbnail" />
                            </div>

                            <div class="form-group">
                                <label for="lacture_id">Video Description</label>
                                <input class="form-control" type="text" 
                                name="video_description"
                                    />
                            </div>
                            <div class="form-group">
                                <label for="thumbnail">Select Video </label>
                                <input class="form-control" type="file" accept="video/mp4,video/x-m4v,video/*"
                                name="video-lecture" />
                            </div>

                           
                            <div id="video_msg"></div>
                            <div class="form-group text-center">
                                <button class="btn modal-btn" type="submit">Add </button>
                            </div>
                        </form>
                    </div>
                </div> <!-- // END .modal-body -->
            </div> <!-- // END .modal-content -->
        </div> <!-- // END .modal-dialog -->
    </div> <!-- // END .modal -->


</body>



<script>

    // 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'){
            $('#exam-category-modal').modal('hide');
            setTimeout(function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'live lecture Shecduled 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('lactureid'));
      
        $('#e_password').val($(this).data('password'));
        $('#e_title').val($(this).data('title'));
        $('#e_batch').val($(this).data('batch'));
        $('#e_subject').val($(this).data('subject'));
        $('#e_topic').val($(this).data('topic'));
       
        // $('#e_image').val($(this).data('image'));
        $('#e_faculty').val($(this).data('faculty'));
        $('#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'){
                $('#exam-category-modal-edit').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>
        $(document).ready(function () {
    
            $(document).on('keyup', '#search', function () {
                //alert();
                var search = $('#search').val();
                $.ajax({
                    url: '{% url "searchLiveLecture" %}',
                    method: "GET",
                    data: {
                        search: search,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        $('#staff').html(data);
                    }
                })
            });
    
        });
</script>


<script>
    $('.upload-video').click( function() {
        var id = $(this).data('id');
        $('#video_id').val(id);
     })

    // Listen for the form submission event
    $('#add_video_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 "uploadVideobyLectureId" %}',
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      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);
            // $('#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>
    $('.select_field_class').select2( { placeholder: "Select here", maximumSelectionSize: 100  } );
</script>

</html>

</html>