{%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">Course Students</li>
                            <!-- <li class="breadcrumb-item active" aria-current="page">Exam Category</li> -->
                        </ol>
                    </nav>
                </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-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <h1 class="heading">Course Students</h1>
                                </div>
                                <div class="col-lg-6 col-md-6 ">
                                    <!-- <form method="GET">
                                                <div class="d-flex justify-content-md-end">
                                                    <input type="serach" name="search" id="search" value="{{search}}" placeholder="Serach by mobile....">
                                                    <button type="submit" class="btn add-btn"><i class="fa fa-search"></i></button>
                                                </div>
                                            </form> -->
                                </div>

                            </div>
                            <div class="card card-body">
                                <form method="GET" class="mb-3">
    <div class="row">

        <!-- Search -->
        <div class="col-md-3 mb-2">
            <input type="text" name="search" value="{{ search }}"
                   class="form-control" placeholder="Search name/email/mobile...">
        </div>

        <!-- Access Filter -->
        <div class="col-md-3 mb-2">
            <select name="access_filter" class="form-control">
                <option value="">Filter by Access</option>
                <option value="books" {% if access_filter == "books" %}selected{% endif %}>Books</option>
                <option value="lecture" {% if access_filter == "lecture" %}selected{% endif %}>Lecture</option>
                <option value="recorded_lecture" {% if access_filter == "recorded_lecture" %}selected{% endif %}>Recorded Lecture</option>
                <option value="area_test" {% if access_filter == "area_test" %}selected{% endif %}>Area Test</option>
                <option value="sectional_test" {% if access_filter == "sectional_test" %}selected{% endif %}>Sectional Test</option>
                <option value="full_mock_test" {% if access_filter == "full_mock_test" %}selected{% endif %}>Full Mock Test</option>
                <option value="advance_mock_test" {% if access_filter == "advance_mock_test" %}selected{% endif %}>Advance Mock Test</option>
            </select>
        </div>

        <!-- Date From -->
        <div class="col-md-2 mb-2">
            <input type="date" name="date_from" value="{{ date_from }}" class="form-control">
        </div>

        <!-- Date To -->
        <div class="col-md-2 mb-2">
            <input type="date" name="date_to" value="{{ date_to }}" class="form-control">
        </div>

        <!-- Submit -->
        <div class="col-md-2 mb-2">
            <button class="btn btn-primary w-100">Apply</button>
        </div>
    </div>
</form>

                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="group-1">
                                        <div class="mb-3" id="bulkActionBar" style="display: none;">
                                            <button type="button" class="btn btn-primary add-btn border-0"
                                                id="editAccessBtn" data-bs-toggle="modal"
                                                data-bs-target="#editAccessBtnmodal" data-access="{{ access }}"
                                                data-course-id="{{ course_id }}">
                                                Edit Access</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive border-bottom" data-toggle="lists"
                                data-lists-values='["js-lists-values-employee-name"]'>

                                <table class="table table-stripped mb-0 thead-border-top-0">
                                    <thead class="table-heading">
                                        <tr>
                                            <th class="table-head text-center">
                                                <input type="checkbox" id="selectAll">
                                            </th>
                                            <th class="table-head">SR. No.</th>
                                            <th class="table-head">Name</th>
                                            <th class="table-head">Email</th>
                                            <th class="table-head">mobile</th>
                                            <th class="table-head">Whatsapp</th>
                                            <th class="table-head">Access</th>
                                            <th class="table-head">Courses</th>
                                            <th class="table-head"> added date </th>
                                            <!-- <th class="table-head">Action</th> -->

                                        </tr>
                                    </thead>
                                    <tbody class="list" id="staff">
                                        {% for student in student_list %}
                                        <tr class="">
                                            <td>
                                                <input type="checkbox" class="student-checkbox"
                                                    value="{{ student.student.id }}">
                                            </td>
                                            <td>{{ forloop.counter }}</td>


                                            <td><a href="{{SITE_URL}}/admin/student_profile/{{student.student.id}}">
                                                    {{student.student.first_name }} {{ student.student.last_name }}</a>
                                            </td>


                                            <td>{{ student.student.email }}</td>

                                            <td>{{ student.student.mobile }}</td>
                                            <td>{{ student.student.whatsapp_number }}</td>

                                            <td>{{ student.display_access }}</td>
    <td>
                                                            {% if student.courses %}
                                                                {% for course in student.courses %}
                                                                    <span class="badge bg-primary m-1">{{ course }}</span>
                                                                {% endfor %}
                                                            {% else %}
                                                                -
                                                            {% endif %}
                                                        </td>

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

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


                                            <td>{{ student.created_at }}</td>



                                            <!-- <td span="2">
                                                    {% if student.student.status == "Active" %}
                                                    <a href="#block-student" class="badge badge-danger block-button block"
                                                data-toggle="modal" data-id="{{student.student.id}}" >Block</a>
                                                    {% comment %} <span class="badge badge-success status active">{{student.student.status}}</span> {% endcomment %}
                                                    {% else %}
                                                    <a href="#block-student" class="badge badge-danger block-button unblock"
                                                data-toggle="modal" data-id="{{student.student.id}}" >UnBlock</a>
                                                    {% comment %} <span
                                                        class="badge badge-warning text-white status inactive">{{student.student.status}}</span> {% endcomment %}
                                                   
                                                    {% endif %}
                                                    <a href="#modal-delete" class="badge badge-danger delete-button"
                                                        data-toggle="modal"  data-id="{{student.student.id}}" ><i class="fas fa-trash delete"></i></a>
                                                    <a href="#Faculty-Module-edit" class="badge badge-warning edit-student"
                                                        data-id="{{student.student.id}}" 
                                                        data-fname="{{student.student.first_name}}" 
                                                        data-lname="{{student.student.last_name}}" 
                                                        data-email="{{student.student.email}}" 
                                                        data-mobile="{{student.student.mobile}}" 
                                                        data-address="{{student.student.address}}" 
                                                        data-city="{{student.student.city}}" 
                                                        data-state="{{student.student.state}}" 
                                                        data-pincode="{{student.student.pincode}}" 
                                                        data-toggle="modal"><i class="fas fa-edit"></i></a>
                                                </td> -->





                                        </tr>
                                        {% endfor %}


                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-3">
    <nav aria-label="Page navigation">
        <ul class="pagination">

            {% if student_list.has_previous %}
            <li class="page-item">
                <a class="page-link"
                   href="?page={{ student_list.previous_page_number }}&search={{ search }}&access_filter={{ access_filter }}&date_from={{ date_from }}&date_to={{ date_to }}">
                    Previous
                </a>
            </li>
            {% endif %}

            {% for page in student_list.paginator.page_range %}
            <li class="page-item {% if student_list.number == page %}active{% endif %}">
                <a class="page-link"
                   href="?page={{ page }}&search={{ search }}&access_filter={{ access_filter }}&date_from={{ date_from }}&date_to={{ date_to }}">
                    {{ page }}
                </a>
            </li>
            {% endfor %}

            {% if student_list.has_next %}
            <li class="page-item">
                <a class="page-link"
                   href="?page={{ student_list.next_page_number }}&search={{ search }}&access_filter={{ access_filter }}&date_from={{ date_from }}&date_to={{ date_to }}">
                    Next
                </a>
            </li>
            {% endif %}

        </ul>
    </nav>
</div>

                        </div>
                    </div>
                </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 -->



<!-- Edit Access Modal -->
<div class="modal fade" id="editAccessBtnmodal" tabindex="-1" role="dialog" aria-labelledby="editAccessLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <form id="accessForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Access</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Select access permissions for the selected students:</p>

                    <div class="d-flex flex-wrap gap-3">
                      {% for access in course_access %}
<div class="form-check align-items-center">
    <input class="form-check-input" 
           type="checkbox" 
           name="access_type" 
           value="{{ access.key }}"
           {% if access.value == 1 %}checked{% endif %}>

    <label class="form-check-label">{{ access.label }}</label>
</div>
{% endfor %}

                    </div>

                    <!-- Hidden input to store student IDs -->
                    <input type="hidden" name="student_ids" id="selectedStudentIds">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary add-btn border-0">Save Access</button>
                </div>
            </div>
        </form>
    </div>
</div>



{%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>

<script>
    $(document).ready(function () {
        // Toggle all checkboxes
        $('#selectAll').on('change', function () {
            $('.student-checkbox').prop('checked', this.checked);
            toggleBulkActionBar();
        });

        // Toggle "more" button based on selection
        $('.student-checkbox').on('change', function () {
            // If not all are checked, uncheck the "select all"
            if (!this.checked) {
                $('#selectAll').prop('checked', false);
            }

            // If all checkboxes are checked, check "select all"
            if ($('.student-checkbox:checked').length === $('.student-checkbox').length) {
                $('#selectAll').prop('checked', true);
            }

            toggleBulkActionBar();
        });

        // Show/hide action bar
        function toggleBulkActionBar() {
            const selectedCount = $('.student-checkbox:checked').length;
            $('#bulkActionBar').toggle(selectedCount > 0);
        }

        // Example: Handling edit access button click
        $('#editAccessBtn').on('click', function () {
            const selectedIds = $('.student-checkbox:checked').map(function () {
                return $(this).val();
            }).get();

            console.log('Selected Student IDs:', selectedIds);

            // You can open a modal or make an AJAX call with selectedIds here
        });
    });
</script>

<script>
    $(document).ready(function () {
        $('#accessForm').on('submit', function (e) {
            e.preventDefault();

            const selectedIds = $('.student-checkbox:checked').map(function () {
                return $(this).val();
            }).get();

            const selectedAccess = $('input[name="access_type"]:checked').map(function () {
                return $(this).val();
            }).get();

            if (selectedIds.length === 0 || selectedAccess.length === 0) {
                alert('Please select students and at least one access permission.');
                return;
            }

            // Send data via AJAX to backend
            $.ajax({
                url: '{% url "update_student_access" %}',
                type: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                data: {
                    student_ids: JSON.stringify(selectedIds),
                    access_list: JSON.stringify(selectedAccess),
                    course_id: "{{ course_id }}"
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Access Updated',
                        text: 'Student access updated successfully!',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        $('#editAccessBtnmodal').modal('hide');
                        location.reload();
                    });
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Something went wrong while updating access!',
                    });
                }
            });

        });
    });
</script>

<script>
    $('#editAccessBtnmodal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var accessData = button.data('access'); // Get access string e.g. "Books,Lecture"

        // First uncheck all checkboxes
        //$('#editAccessBtnmodal input[name="access_type"]').prop('checked', true);

        // Check only the relevant ones
        if (accessData) {
            var accessArray = accessData.split(',');
            accessArray.forEach(function (access) {
                $('#editAccessBtnmodal input[name="access_type"][value="' + access + '"]').prop('checked', true);
            });
        }
    });
</script>







</body>

</html>