Sindbad~EG File Manager

{% extends 'Backoffice/bo_layout.html' %}
{% block title %}Page View{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
            <div class="alert alert-success text-center mt-3" id="successMessage">
                <h4>{{ mesg }}</h4>
            </div>
            {% endfor %}
            <div id="flashCt"></div>
        </div>
    </div>
    <div class="row ">

        <div class="col-5 btn-group mt-3">
            <button type="button" class="visible_btn btn btn-outline-primary" data-status="active" id="active_btn">
                ACTIVE
            </button>
            <button type="button" class="visible_btn btn btn-outline-primary" data-status="all" id="all_btn">
                ALL
            </button>
            <button type="button" class="visible_btn btn btn-outline-primary" data-status="inactive" id="inactive_btn">
                INACTIVE
            </button>
        </div>

        <div class="col-7 mt-3 text-end">
                <a href="{{url_for('backoffice.PageForm',as_id=as_id)}}" class="btn btn-primary">Add</a>
        </div>

    </div>
    <div class="row mt-2">
        <div class="col-12">
            <h5 id="rowCount"></h5>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="mobile-responsive table-responsive">
                <table class="table table-bordered table-striped mt-3 ">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col" class="text-center">S.No</th>
                            <th scope="col" class="text-center"><input type="checkbox" id="select_All" class="mx-2">Select all<button  type="button" id="delete_All" class="btn btn-danger ms-3"><i class="fa fa-trash" aria-hidden="true"></i></button></th>
                            <th scope="col" class="text-center">Action</th>
                            <th scope="col" class="text-center">Page name</th>
                            <th scope="col" class="text-center">Page type</th>
                            <th scope="col" class="text-center">IsVisible</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if data %}
                        {% for d in data %}
                        <tr class="all_status_{{d.is_visible}} allCount">
                            <td data-label="S.No">{{loop.index}}</td>
                            <td data-label="check"> <input type="checkbox" name="{{d.page_id}}" id="checkbox_{{d.page_id}}" class="form-check-input page_Select_all"></td>
                            <td data-label="Action" class="text-center">
                                <a href="{{url_for('backoffice.EditPage',page_id=d.page_id,as_id=as_id)}}" class="btn btn-primary"><i class="fa fa-edit"></i></a>
                                <a href="{{url_for('backoffice.DeletePage',page_id=d.page_id,as_id=as_id)}}" data-id="{{d.page_id}}" class="btn btn-danger delete-link"><i class="fa fa-trash" aria-hidden="true"></i></a>

                            </td>
                            <td data-label="Page Name">{{d.page_name or ""}}</td>
                            <td data-label="Page type">{{d.page_type or ""}}</td>
                            <td data-label="IsVisible">{% if d.is_visible==1%}<span class="badge bg-success">Active</span>{% else %}<span class="badge bg-danger">Inactive</span>{% endif %}</td>
                        </tr>

                        {% endfor %}
                        {% endif %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}

<!-- <script src="/static/js/jquery.min.js" charset="utf-8"></script>
    <script src="/static/js/jquery.validate.js" charset="utf-8"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script> -->

<script>
    $(document).ready(function () {

        $(".delete-link").on("click", function (e) {
            e.preventDefault();
            const itemId = $(this).data('id');
            const userConfirmed = confirm("Are you sure you want to delete?");
            if (userConfirmed) {
                window.location.href = $(this).attr('href');
            } else {}
        })
        
        $("#rowCount").html("ALL MENU - COUNT(" +  $(".allCount").length + ")");
        $("#all_btn").addClass("active")
        $(".visible_btn").click(function () {
            var all = $(".allCount").length;
            var active = $(".all_status_1").length;
            var inactive = $(".all_status_0").length;
            var status = $(this).attr('data-status')
            $('#btn_status').val(status);
            if (status == 'active') {
                $("#inactive_btn").removeClass("active")
                $("#all_btn").removeClass("active")
                $("#active_btn").addClass("active")
                $(".all_status_0").hide();
                $(".all_status_1").show();
                $("#rowCount").html("ACTIVE MENU - COUNT(" + active + ")");
            }
            if (status == 'inactive') {
                $("#active_btn").removeClass("active")
                $("#all_btn").removeClass("active")
                $("#inactive_btn").addClass("active")
                $(".all_status_1").hide();
                $(".all_status_0").show();
                $("#rowCount").html("INACTIVE MENU - COUNT(" + inactive + ")");
            }
            if (status == 'all') {
                $("#active_btn").removeClass("active")
                $("#inactive_btn").removeClass("active")
                $("#all_btn").addClass("active")
                $(".all_status_1").show();
                $(".all_status_0").show();
                $("#rowCount").html("ALL MENU - COUNT(" + all + ")");
            }
        });

    });
        var select_all_btn_status = 1;
        $("#select_All").on("click",function(){

            select_all_btn_status ==  0 ? select_all_btn_status = 1:select_all_btn_status = 0;
            if(select_all_btn_status == 0){
               $('input#select_All').prop('checked', true);
            }
            else{
                $('input#select_All').prop('checked', false);
            }
            if($('input#select_All').prop('checked')==true){
                $('input.page_Select_all').prop('checked', true);
                }else{
                $('input.page_Select_all').prop('checked', false);
            }
        })
          
        var checkboxes = [];
        var deleteData = [];
        $("#delete_All").on("click",function () {
            const userConfirmed = confirm("Are you sure you want to delete all?");
            if (userConfirmed) {
                checkboxes = [];
                    $("input.page_Select_all:checked").each(function () {
                        if (!checkboxes.includes($(this).attr("id"))) {
                          checkboxes.push($(this).attr("id"));
                        }
                    })
                    $.each(checkboxes, function(index, value) {
                        var number = value.replace('checkbox_', ''); 
                        deleteData.push(parseInt(number)); 
                    });
                    console.log(deleteData)
                    let as_id = "{{as_id}}";
                    // let conf_key = "{{conf_key}}";
                    let pageid = 0
                    $.ajax({
                        type: "POST",
                        url: "/delete_page_all/"+ pageid +"/" + as_id,
                        contentType: 'application/json',
                        data : JSON.stringify({ deleteData: deleteData,action: "bulk_delete" }),
                        dataType: "json",
                        success: function(response) {
                           if(response.msg2 == "Success"){
                            let flash_msg =  `
                                                <div class="alert alert-success text-center mt-3" id="successMessage">
                                                    <h4 id="successMessage2">${response.msg}</h4>
                                                </div>
                            
                            
                                             `
                            // $("#successMessage").hide()
                            // $("#flashCt").html(flash_msg);
                            location.reload();
                           }
                            console.log('Response from server:', response);
                            // remove_images(checkboxes)
                        },
                    });

            } else {
                $('input#select_All').prop('checked', false);
                $("#select_All").trigger("click")
                // $('input.page_Select_all').prop('checked', false);
            }
        })

</script>
{% endblock %}