{% include "header.html" %}
<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"></div>
                <div class="row mb-3">
                    <div class="col-12">
                        <h1 class="heading">Foundation Videos</h1>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn" data-toggle="modal" data-target="#Add-foundation-video">Add Video</button>
                        </div>
                    </div>
                </div>
                <div class="container filter">
                    <form method="GET">
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div>
                                        <label for="" class="form-label">Video Title</label>
                                        <input type="text" class="form-control" name="video_title"  {% if video_title != None %} value="{{ video_title }}"{% else %} value=""{% endif %}  value="" placeholder="Enter video title">
                                    </div>
                                   
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="">
                                        <div class="form-group">
                                            <label>Exam Category : </label>
                                            <select data-toggle="select" name="category_id"  class="form-control category">
                                                <option value="">Select Category</option>
                                                {% for category in categories %} 
                                                <option value="{{ category.id }}" {% if category.id|stringformat:"s" == category_id|stringformat:"s" %}selected{% endif %}>{{ category.exam_category_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="">
                                        <div class="form-group">
                                            <label for="section">Section Name : </label>
                                            <select  data-toggle="select" name="section_id" class="form-control section">
                                                <option value="">Select Section</option>
                                                {% for section in sections %} 
                                                <option value="{{ section.id }}" {% if section.id|stringformat:"s" == section_id|stringformat:"s" %}selected{% endif %}>{{ section.section_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="">
                                        <div class="form-group">
                                            <label for="sub-section">Sub-Section Name : </label>
                                            <select  data-toggle="select" name="sub_section_id" class="form-control sub-section">
                                                <option value="">Select Sub Section</option>
                                                {% for sub_section in sub_sections %} 
                                                <option value="{{ sub_section.id }}"  {% if sub_section.id|stringformat:"s" == sub_section_id|stringformat:"s" %}selected{% endif %}>{{ sub_section.sub_section_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="">
                                        <div class="form-group">
                                            <label for="">Topic Name : </label>
                                            <select  data-toggle="select" name="topic_id" class="form-control topic">
                                               <option value="">Select Topic</option>
                                                {% for topic in topics %} 
                                                <option value="{{ topic.id }}"  {% if topic.id|stringformat:"s" == topic_id|stringformat:"s" %}selected{% endif %}>{{ topic.topic_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>  
                                </div>
                                <!-- <div class="col-md-4 mb-3">
                                    <div class="form-group  mb-2">
                                        <label for="status" class="sr-only">Status</label>
                                        <select name="status" id="status" class="form-control">
                                            <option value="">Select Status</option>
                                            <option value="1" {% if status == "1" %}selected{% endif %}>Active</option>
                                            <option value="0" {% if status == "0" %}selected{% endif %}>Inactive</option>
                                        </select>
                                    </div>
                                </div> -->
                                <div class="col-md-6 mb-3">
                                    <div class="form-group ">
                                        <label for="from_date" class="sr-only">From Date</label>
                                        <input type="date" name="from_date" class="form-control" id="from_date" value="{{ from_date }}">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="form-group ">
                                        <label for="to_date" class="sr-only">To Date</label>
                                        <input type="date" name="to_date" class="form-control" id="to_date" value="{{ to_date }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex  align-items-center justify-content-center">
        
                            <div>
                                <button class="btn add-btn"  type="submit">Filter</button>
                                <a class="btn btn-refresh " href="{% url 'foundation_videos_list' %}"><i class="fas fa-sync-alt"></i></a>
                            </div>
    
                        </div>
                    </div>
                    </form>
                </div>


                <div class="container page__container exam-module">
                    <div class="card card-body">
                        <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 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">Exam Category</th>
                                                <th class="table-head">Section Name</th>
                                                <th class="table-head">Sub Section Name</th>
                                                <th class="table-head">Topic Name</th>
                                                <th class="table-head">Video</th>
                                                <th class="table-head text-center">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody class="list" id="foundation-videos">
                                            {% for video in all_foundation_videos %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{video.video_title}}</td>
                                                <td>
                                                    {% for category in video.category.all %}
                                                        {{ category.exam_category_name }}{% if not forloop.last %} , {% endif %}
                                                    {% endfor %}
                                                </td>
                                                <td>{{ video.section.section_name }}</td>
                                                <td>{{ video.sub_section.sub_section_name }}</td>
                                                <td>{{ video.topic.topic_name }}</td>
                                                <!-- <td>{{ video.description }}</td> -->
                                                <td>
                                                    <div>
                                                        <a href="#play-foundation-video" class="btn play-video add-btn" data-toggle="modal" data-id="{{ video.id }}" data-video-title="{{video.video_title}}" data-video-file="{{ video.video_file }}"><i class="fas fa-play"></i></a>
                                                    </div>
                                                </td>
                                                <td class="d-flex justify-content-center">
                                                    <div>

                                                   
                                                    <a href="#edit-foundation-video" class="badge badge-warning edit edit-video" data-toggle="modal" data-id="{{ video.id }}" data-title="{{ video.video_title }}" data-category_id="{{ video.category.id }}" data-section_id="{{ video.section.id }}" data-sub_section_id="{{ video.sub_section.id }}" data-topic_id="{{ video.topic.id }}"><i class="fas fa-edit"></i></a>
                                                    <a href="#delete-foundation-video" class="badge badge-danger delete-button" data-toggle="modal" data-id="{{ video.id }}"><i class="fas fa-trash delete"></i></a>
                                                </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12 p-0">
                                <ul class="pagination m-0">
                                    {% if all_foundation_videos.has_previous %}
                                    <li class="page-item ">
                                        <a class="page-link" href="?page={{ all_foundation_videos.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_foundation_videos.number }}{{filter}}" aria-label="1">
                                            <span>{{ all_foundation_videos.number }}</span>
                                        </a>
                                    </li>
        
                                    {% if all_foundation_videos.has_next %}
        
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ all_foundation_videos.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>
                </div>
            </div>
        </div>
        {% include "sidebar.html" %}
    </div>
</div>

</div>



<!-- Add Foundation Video Modal -->
<div id="Add-foundation-video" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Foundation Video</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-foundation-video-form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <!-- <input type="hidden" name="topic_id" value="{{topic_id}}"/> -->
                    <div class="form-group">
                        <label for="add-title">Title</label>
                        <input type="text" class="form-control" id="add-title" name="title" placeholder="Enter title">
                    </div>
                  
                    <div class="">
                        <div class="form-group">
                            <label for="">Exam Category : </label>
                            <select data-toggle="select" name="category_id[]" class="form-control category select2"  multiple="multiple">
                                {% for category in categories %} 
                                <option value="{{ category.id }}">{{ category.exam_category_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                  
                    <div class="">
                        <div class="form-group">
                            <label for="section">Section Name : </label>
                            <select  data-toggle="select" name="section_id" class="form-control section">
                               
                                {% for section in section_options %} 
                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="">
                        <div class="form-group">
                            <label for="sub-section">Sub-Section Name : </label>
                            <select  data-toggle="select" name="sub_section_id" class="form-control sub-section">
                               
                                {% for sub_section in sub_sections %} 
                                <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

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

                    <div class="form-group">
                        <label for="add-video">Upload Video</label>
                        <input type="file" class="form-control" id="add-video" name="video" accept="video/*">
                    </div>
                    <div id="msg"></div>
                    <button type="submit" class="btn btn-primary">Add Video</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Foundation Video Modal -->
<div id="edit-foundation-video" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Foundation Video</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="edit-foundation-video-form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <input type="hidden" id="edit-id" name="id">
                    <input type="hidden" name="topic_id" value="{{topic_id}}"/>
                    <div class="form-group">
                        <label for="edit-title">Title</label>
                        <input type="text" class="form-control" id="edit-title" name="title" placeholder="Enter title">
                    </div>

                    <!-- <div class="">
                        <div class="form-group">
                            <label for="e-category-id">Exam Category : </label>
                            <select id="e-category-id" data-toggle="select" name="category_id"  class="form-control category">
                    
                                {% for category in categories %} 
                                <option value="{{ category.id }}">{{ category.exam_category_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div> -->
                    <div class="">
                        <div class="form-group">
                            <label for="">Exam Category : </label>
                            <select id="e-category-id" data-toggle="select" name="category_id[]" class="form-control category select2"  multiple="multiple">
                                {% for category in categories %} 
                                <option value="{{ category.id }}">{{ category.exam_category_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                  
                    <div class="">
                        <div class="form-group">
                            <label for="e-section-id">Section Name : </label>
                            <select id="e-section-id" data-toggle="select" name="section_id" class="form-control section">
                               
                                {% for section in sections %} 
                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="">
                        <div class="form-group">
                            <label for="e-sub-section-id">Sub-Section Name : </label>
                            <select id="e-sub-section-id" data-toggle="select" name="sub_section_id" class="form-control sub-section">
                               
                                {% for sub_section in sub_sections %} 
                                <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="">
                        <div class="form-group">
                            <label for="e-topic-id">Topic Name : </label>
                            <select id="e-topic-id" data-toggle="select" name="topic" class="form-control topic">
                               
                                {% for topic in topics %} 
                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <!-- <div class="form-group">
                        <label for="edit-description">Description</label>
                        <textarea class="form-control" id="edit-description" name="description" rows="3" placeholder="Enter description"></textarea>
                    </div> -->
                    <div class="form-group">
                        <label for="edit-video">Upload Video</label>
                        <input type="file" class="form-control" id="edit-video" name="video" accept="video/*">
                    </div>
                    <div id="e_msg"></div>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Foundation Video Modal -->
<div id="delete-foundation-video" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Foundation Video</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" 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>


<!-- Play Foundation Video Modal -->
<!-- Play Foundation Video Modal -->
<div id="play-foundation-video" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="playVideoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="playVideoModalLabel"></h5>  <!-- This will be dynamically updated -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <video id="foundation-video-player" controls style="width: 100%;">
                    <source id="video-source" src="" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</div>





{% include "footer.html" %}
<script>
    $(document).ready(function() {
        $('.edit-video').click(function(){
            var id = $(this).data('id');
            $('#edit-id').val($(this).data('id'));
            $('#edit-title').val($(this).data('title'));
            $('#e-category-id').val($(this).data('category_id'));
            $('#e-section-id').val($(this).data('section_id'));
            $('#e-sub-section-id').val($(this).data('sub_section_id'));
            $('#e-topic-id').val($(this).data('topic_id'));
        })
        // AJAX for adding a foundation video
        $('#add-foundation-video-form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $('#msg').html('<div class="alert alert-primary">Please wait foundation video uploading...</div>');
            $.ajax({
                url: '{% url "add_foundation_video" %}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {

                    $('#msg').html('');
                    // Handle success response
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Foundation video added successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    $('#Add-foundation-video').modal('hide');

                    setTimeout(function () {
                        location.reload();
                    }, 3000);
                    // Optionally, you can update the video list on the page
                },
                error: function(xhr, status, error) {
                    // Handle error response
                }
            });
        });
        // AJAX for editing a foundation video
        $('#edit-foundation-video-form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $('#e_msg').html('<div class="alert alert-primary">Please wait foundation video updating...</div>');
            $.ajax({
                url: '{% url "edit_foundation_video" %}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#e_msg').html('');
            
                    // Handle success response
                    setTimeout(function () {
               Swal.fire({
                   icon: 'success',
                   title: 'Success!',
                   text: 'Foundation video update successfully.',
                   confirmButtonColor: '#3085d6',
                   confirmButtonText: 'OK'
               });
           }, 1000);
            $('#edit-foundation-video').modal('hide');
                    // Optionally, you can update the edited video on the page
                },
                error: function(xhr, status, error) {
                    // Handle error response
                }
            });
        });
        $('.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
            //alert();
            event.preventDefault();
          
            var formData = new FormData($(this)[0]);
        
            // Send the Ajax request
            $.ajax({
                url: '{% url "delete_foundation_video" %}',
                type: 'POST',
                data: formData,
                processData: false,
                dataType: 'json',
                contentType: false,
                success: function(response) {
                    if(response.status=='success'){
                        setTimeout(function () {
                       Swal.fire({
                           icon: 'success',
                           title: 'Success!',
                           text: 'Video deleted successfully.',
                           confirmButtonColor: '#3085d6',
                           confirmButtonText: 'OK'
                       });
                   }, 1000);
                   setTimeout(function () {
                       location.reload();
                   }, 1000);
                       
                    }
                    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>

$(".category").change(function() {
    var selectedCategories = $(this).val(); // Get selected categories as an array
    
    if (selectedCategories.length > 0) {
        $(".section").empty();
        $.ajax({
            url: '{% url "category_selct" %}', // Adjust the URL as needed
            method: "GET",
            data: {
                categories: selectedCategories, // Send the array of selected categories
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(response) {
                // Populate the sections dropdown with the response
                $('.section').html(response);
            },
        });
    }
});
          
     $(".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 "section_selct" %}',
                    method: "GET",
                    data: {
                        section: section,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(response) {
                        // alert(response);
                        $('.sub-section').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>

<script>
 $(document).on('click', '.play-video', function() {
    var videoFile = $(this).data('video-file');  // Get the video file URL
    var videoTitle = $(this).data('video-title');  // Get the video title from the button's data-title attribute
    var videoPlayer = $('#foundation-video-player');
    var videoSource = $('#video-source');
    
    // Clear the previous video source and update with the new one
    videoSource.attr('src', '');
    videoSource.attr('src', 'https://cet-spaces.sgp1.digitaloceanspaces.com/cet-spaces/media/'+videoFile);
    
    // Update the modal title with the video title
    $('#playVideoModalLabel').text(videoTitle);
    
    // Load the new video and play it
    videoPlayer[0].load();
    videoPlayer[0].play();
    
    // Show the modal (default backdrop behavior will close on outside click)
    $('#play-foundation-video').modal({
        backdrop: true,  // Ensure clicking outside the modal closes it
        keyboard: true   // Allow closing the modal with the keyboard (ESC)
    });
});

</script>


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