{% extends 'stela_control/base_list.html' %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}
    <h1 class="oxanium mx-4 text-dark pt-3">{% trans "Comments" %} <i class="fa-solid fa-comment"></i></h1>
{% endblock  %}
{% block side_title %}
    <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Content" %}</b></h3>
{% endblock  %}
{% block topButtons %}
    <div class="col-lg-2 col-md-6">
        <button type="submit" class="btn btn-danger btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
    </div>
{% endblock  %}
{% block listTitle %}
        
{% endblock  %}
{% block thead %}
    <th style="width: 5%;">Id</th>
    <th style="width: 25%;">{% trans "Post" %}</th>
    <th style="width: 10%;" class="text-center">{% trans "Status" %}</th>
    <th style="width: 15%;">{% trans "Email" %}</th>
    <th style="width: 15%;">{% trans "Host" %}</th>
    <th style="width: 15%;">{% trans "View" %}</th>
    <th style="width: 10%;" class="text-center"> <input type="checkbox"  name="" id="parent"></th>          
{% endblock  %} 
{% block tbody %}
    {% for item in comments %}
    <script>  
        function newbtnDisabled() {
            const formBtn1 = document.querySelector('.new-btn-form')
            formBtn1.innerHTML = "<div class='loader'></div>";
            formBtn1.disabled = true;
          }
        const url = '/comments-blog'
        function update{{item.id}}() {
            document.getElementById('update').innerHTML = preloaderQuery
            $.ajax({
              url: url,
              method:"POST",
              data: {
                  objid: $('#data-{{item.id}}').val(),
                  csrfmiddlewaretoken:CSRF_TOKEN,
                  action: 'data'
                },
              success:function(json){
                    document.getElementById('update').innerHTML = json.response
                    document.getElementById('token').value = CSRF_TOKEN
              }
            })
          }
    </script>
        <tr>
            <td>{{item.id}}</td>
            <td class=text-link>{{item.post.title}}</td>
            {% if item.status == 'Published' %}
                <td class="text-center">{% trans "Publish" %} <i class="fa-solid fa-circle-check color-green"></i></td>
            {% else %}
                <td class="text-center">{% trans "Draft" %} <i class="fa-solid fa-exclamation color-red"></i></td>
            {% endif %}
            <td>{{item.email}}</td>
            <td>{{item.host}}</td>
            <input type="hidden" id="data-{{item.id}}" value="{{item.id}}">
            <td class="my-1"><button class="btn btn-shappire" onclick="update{{item.id}}()" data-bs-toggle="modal" data-bs-target="#update-form"><i class="fa-solid fa-right-to-bracket"></i></button></td>
            <td class="text-center check-product"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
            <script>
                $(function(){
                    $('#parent').on('change',function(){
                       $('.child').prop('checked',$(this).prop('checked'));
                       var checkboxTrigger = document.getElementById("parent");
                       if (checkboxTrigger.checked== true)
                       document.getElementById('delete_btn').classList.remove('hide')
                       else{
                        document.getElementById('delete_btn').classList.add('hide')
                       }
                    });
                    $('.child').on('change',function(){
                       $('#parent').prop('checked',$('.child:checked').length ? true: false);
                       var checkboxTrigger = document.getElementById("parent");
                       if (checkboxTrigger.checked== true)
                       document.getElementById('delete_btn').classList.remove('hide')
                       else{
                        document.getElementById('delete_btn').classList.add('hide')
                       }
                    });
                
                    });
                    
                    $(document).ready(function(){
                        $('#delete_btn').click(function(){
                            Swal.fire({
                                title: confirmTitle,
                                text: '{% trans "This option cannot be reversed!" %}',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#050225',
                                cancelButtonColor: '#d33',
                                confirmButtonText: '{% trans "Yes, delete it!" %}',
                                cancelButtonText: '{% trans "Cancel" %}'
                              }).then((result) => {
                                if (result.isConfirmed) {
                                    $('.child:checked').each(function(i){
                                        id[i]=$(this).val()
                                      }) 
                                        $.ajax({
                                            url:url,
                                            method:"POST",
                                            data:{
                                                id,
                                                csrfmiddlewaretoken:CSRF_TOKEN,
                                                action: 'deleteComments'
                                            },
                                            success:function(json){
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: '{% trans "Selection removed." %}',
                                                    text:'{% trans "The records were erased." %}',
                                                    confirmButtonText: '{% trans "Continue" %}',
                                                    confirmButtonColor: '#050225',
                                                  })
                                                window.location.replace(url)
                                            }
                                        }) 
                                }
                              })
                            })
                        });
            </script>
        </tr>
    {% endfor %}
{% endblock  %}
{% block errors %}
{% endblock  %}
{% block extratable %}
        
{% endblock  %}
{% block modals %}
    <div class="modal fade" id="update-form" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title oxanium" id="staticBackdropLabel">{% trans "Update Item Form" %}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="update">
                
            </div>
        </div>
        </div>
    </div>
{% endblock  %}
{% block addScript %}

{% endblock  %}