{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<!-- Begin Page Content -->
<title>Investment Edu | Investment Education SubCategory Listing</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h1 class="f-22 bold mb-2">Investment Education SubCategory</h1>
            <!-- <p class="f-13">Welcome to Lorem Ipsum Admin Dashboard</p> -->
        </div>
        <form action="/invest-edu-subcategory" method="get">
        {% csrf_token %}
        <div class="users-top-filters d-flex align-items-end justify-content-between">
            <div class="search-left-box d-flex gap-1 ">
                <div class="search filters-search relative mr-4">
                    <input type="text" class="mb-0" placeholder="Type in to search .." name="search" value="{% if search_post %}{{search_post}}{% endif %}">
                    <div class="search-icons">
                        <button type="button" class="search-icn-btn">
                            <img src="{% static 'admin/img/search.svg' %}" alt="">
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn dark-btn rounded"> Search</button>
                <button type="button" onclick="location.href = '/invest-edu-subcategory'" class="btn dark-btn rounded"> Reset</button>
            </div>
            <div class="search-data">
               
                <button type="button" onclick="location.href = '/add-investedu-subcategory'" class="btn dark-btn rounded"> Add</button>


            </div>
        </div>
        </form>
        <div class="manage-user-data table-customer border-0 mt-4">
            <div class="card px-0">
                <div class="card-header bg-white mb-3 border-btm">
                        <h2 class="f-20 mb-0">SubCategory</h1>
                </div>
                <div class="manage-user-table">
                        <div class="table-responsive">
                {% if cat_obj%}
                <table class="table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Main Category</th>
                            <th>Name</th>
                            <th>Created Date</th>
                            <th>
                               Status
                            </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for cata in cat_obj %}
                        <tr>
                         <td>{{ cata.id }}</td>
                            <td>{{ cata.category.name }}</td>
                            <td>{{ cata.name }}</td>
                            <td>{{ cata.start_date|date:"d M  Y" }}</td>                           
                            <td>
                                <div class="toggle-user">
                                        <input type="checkbox"  name="status" id="switch" {% if cata.status == 1 %} checked {% else %} {% endif %} onchange="changeServiceStatus(this,'{{cata.id}}')">
                                       {% comment %} <input for="switch" type="checkbox" id="switch"  name="status"  {% if cata.status == 1 %} checked {% else %} {% endif %} onchange="changeServiceStatus(this,'{{cata.id}}')" /><label >Toggle</label>  {% endcomment %}
                                </div>
                            </td>
                            <td>
                                <div class="action-btns">
                                    <a href="/edit-investedu-subcategory/{{cata.id}}" class="edit-btn"><img src="{% static 'admin/images/edit.svg' %}"></a>

                                    <a onclick="theFunction({{cata.id}});"  class="edit-btn"><img src="{% static 'admin/images/delete.svg' %}"></a>
                                </div>
                            </td>
                        </tr> 
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                 <p style="text-align: center;">No data found</p>
                {% endif %}
            </div>
                </div>
            </div>
        </div>
        {% if cat_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
                <ul class="pagination">
                    {% if cat_obj.has_previous %}
                        <li><a href="?page={{ cat_obj.previous_page_number }}">&laquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&laquo;</span></li>
                    {% endif %}
        
                    {% if cat_obj.number > 3 %}
                        <li><a class='page-link' data-href="?page=1" href="?page=1">1</a></li>
                        <li class="disabled"><span>...</span></li>
                    {% endif %}
        
                    {% for i in cat_obj.paginator.page_range %}
                        {% if i > cat_obj.number|add:'-3' and i < cat_obj.number|add:'3' %}
                            {% if cat_obj.number == i %}
                                <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                            {% else %}
                                <li><a class='page-link' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
        
                    {% if cat_obj.number < cat_obj.paginator.num_pages|add:'-3' %}
                        <li class="disabled"><span>...</span></li>
                        <li><a class='page-link' data-href="?page={{ cat_obj.paginator.num_pages }}" href="?page={{ cat_obj.paginator.num_pages }}">{{ cat_obj.paginator.num_pages }}</a></li>
                    {% endif %}
        
                    {% if cat_obj.has_next %}
                        <li><a href="?page={{ cat_obj.next_page_number }}">&raquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        
          {% endif %}
          <!--end of Pagination-->
    </div>
    </div>
</div>

    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Do you want to delete this category?</h5>
                    <button class="close" type="button"  data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                         <input type="hidden" id="model_delete_id">
                    </button>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button"  data-bs-dismiss="modal">Cancel</button>
                    <button type="btn btn-secondary" id="delete-customer" class="btn btn-primary">Yes</button>
                </div>
            </div>
        </div>
    </div>

<!-- /.container-fluid -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>


    function theFunction(e){
    $('#model_delete_id').val(e)
        $('#deleteModal').modal('show');
        return false;
    }

    $(document).on('click','#delete-customer',function(e){
        del_id = $('#model_delete_id').val()
        window.location.href='/delete-investedu-subcategory/'+ del_id;
    });

  const startDateInput = document.getElementById('start_date');
  const endDateInput = document.getElementById('end_date');
  
  startDateInput.addEventListener('change', () => {
    console.log("check")
    const startDateValue = new Date(startDateInput.value);
    endDateInput.min = startDateInput.value;
  });

      // pagination
    let pag = document.querySelectorAll('a.page-link')
    console.log(pag.length)
    let url = window.location

    if (url.href.includes("?csrfmiddlewaretoken"))
    {
        for (let i = 0; i < pag.length; i++)
        {
            pag[i].href = url.search + pag[i].getAttribute("data-href").replace("?","&")
            console.log(pag[i].getAttribute("data-href"))
        }
    } else {
        console.log("not included")
    }




function changeServiceStatus(elem,main_id){
    var csrf_token = $('input[name="csrfmiddlewaretoken"]').val()
    var status;
        if(elem.checked) {
            $(elem).prop("checked");
        }
        $('[name="status"]').val(elem.checked);

        if(elem.value == "true"){
            status = 1;
        }else if(elem.value == "false"){
            status = 0;
        }
        $.ajax({
            url:"/change-investedu-subcategory-status",
            type:"POST",
            data:{status:status,csrfmiddlewaretoken:csrf_token,main_id:main_id},
            success:function(res){
                window.location.href = res;	
            }
        });
}

</script>
{% endblock %}