{% extends 'stela_control/inventory/index.html' %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}
            <h1 class="oxanium mx-4 text-dark pt-3">{% trans "Stela Templates" %} <i class="fa-solid fa-window-restore"></i></h1>
{% endblock  %}
{% block side_title %}
            <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Inventory" %}</b></h3>
{% endblock  %}
{% block topButtons %}
    <div class="col-lg-2 col-md-6">
        <button type="button" class="btn btn-shappire btn-block px-3 mb-3 mx-2" data-bs-toggle="modal" data-bs-target="#new-form">{% trans "New Template" %} <i class="fas fa-plus"></i></button>
    </div>
    <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 %}
        <h3 class="text-center fw-bold oxanium fs-4 my-2">{% trans "Template List" %}</h3>
{% endblock  %}
{% block thead %}
    <th style="width: 5%;">Id</th>
    <th style="width: 35%;">{% trans "Title" %}</th>
    <th style="width: 20%;" class="text-center">{% trans "Status" %}</th>
    <th style="width: 5%;">{% trans "Image" %}</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 stock %}
    <script>
        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.title}}</td>
            {% if item.status == 'Active' %}
                <td class="text-center">{% trans "Active" %} <i class="fa-solid fa-circle-check color-green"></i></td>
            {% else %}
                <td class="text-center">{% trans "Inactive" %} <i class="fa-solid fa-exclamation color-red"></i></td>
            {% endif %}
            <td>{{item.image_tag}}</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: "This option cannot be reversed!",
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#050225',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Yes, delete it!',
                                cancelButtonText: '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: 'deleteTemplate'
                                            },
                                            success:function(json){
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: 'Selection removed.',
                                                    text:'The records were erased.',
                                                    confirmButtonText: 'Continue',
                                                    confirmButtonColor: '#050225',
                                                  })
                                                window.location.replace(url)
                                            }
                                        }) 
                                }
                              })
                            })
                        });
            </script>
        </tr>
    {% endfor %}
{% endblock  %}
{% block modals %}
<div class="modal fade" id="new-form" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" 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 "New Template Form" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
        <form action="" method="post" enctype="multipart/form-data" onsubmit="btnDisabled()">
            {% csrf_token %}
            <div class="modal-body mid-modal-scroll modal1">    
                <div id="formset">
                    {{ formset.management_form }}
                        {% for form in formset %}
                        <div id="form-0" class="formset pt-2">
                            {{form|crispy}}
                            {{form|as_crispy_errors}}
                        </div>
                        {% endfor %}
                    <div id="empty-form" class="d-none">
                        {{formset.empty_form.media}}
                        {{formset.empty_form|crispy}}
                    </div>
                </div>
                <div class="d-flex justify-content-between my-3">
                    <button class="btn-clear" id="add-formset" type="submit"><i class="fa-solid fa-plus"></i>{% trans " Add" %}</button>
                    <button class="btn-clear" id="erase-formset"><i class="fa-solid fa-minus"></i> {% trans "Remove" %}</button>
                </div>
                <p class="response-footer text-link fw-bold oxanium"></p>
                <input type="hidden" name="form-id" value="newForm">
                <div class="row justify-content-end p-3">
                    <div class="col-lg-4">
                        <button type="submit" id="btn-footer" name="btn-footer" class="btn btn-shappire center-btn btn-block btn-form d-flex">{% trans "Send" %} <i class="fa-solid fa-paper-plane mx-2"></i></button>      
                    </div>
                </div>
            </div>    
        </form>
    </div>
    </div>
</div>
<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 Template 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 %}
<script>
    const url = '/inventory-control/templates'
</script>
<script src="{% static 'js/stela/inventory/templates/functions.js' %}"></script>
{% endblock  %}