{% extends 'base.html' %}
{% load static %}

{% block content %}
    <div class="container">

        <div class="row" style="padding-top:20px;padding-left: 120px;" >
            <form action="/app/listapren_admin/{{annoscol}}/" method="POST"  enctype="multipart/form-data">{% csrf_token %}
                    
                {{libreriaform}}
                
                <input type="submit" value="Filtra" style="background-color: gray;color: yellow;" />
            </form>
                <br>
            {%  if modo == "filtra" %}<a href="/app/listapren_admin/{{annoscol}}" style="padding-left: 200px;">Lista completa</a> {% endif %}
        </div>
        <div class="row" style="padding-bottom: 20px;">
            <div class="col-md-8">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="complete" checked>
                    <label class="form-check-label" for="flexRadioDefault1">
                        Lista completa prenotazioni&nbsp;"<b>{{libreria}}</b>"               
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="consegnati" >
                    <label class="form-check-label" for="flexRadioDefault2">
                        Solo consegnati
                    </label>
                  </div>         
                </div>
            </div>
        </div>    
        <div class="row" style="padding-bottom: 20px;">
            <div class="col-md-2" >
                <button hx-get="/app/get_totali_libreria/{{annoscol}}" hx-trigger="click" hx-target="#dialog" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
                    Riepilogo su consegnati
                </button>
            </div>
            <div class="col-md-2" style="padding-left: 80px;">
            <a href="/app/listafatture_admin/{{annoscol}}/" class="btn btn-primary">Fatture caricate</a>                  
            </div>

    
        <div class="row" style="padding-left:50px;padding-bottom: 20px;">
            <div class="col-sm-12">
                <table id="myDataTable" class="table table-striped table-bordered" style="width: 90%;">
                    <thead>
                        <tr>
                            <th style="text-align: center">Libreria</th>
                            <th style="text-align: center">codice fiscale</th>
                            <th style="text-align: center">cod.scuola</th>
                            <th style="text-align: center">scuola</th>
                            <th style="text-align: center">classe</th>                            
                            <th style="text-align: center">testo facoltativo</th>
                            <th style="text-align: center">consegnato</th>
                            <th></th>

                         </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    
        <div id="modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div id="dialog" class="modal-body" hx-target="this">
                        <!-- Il contenuto della modale sarà caricato qui da HTMX -->
                    </div>
                </div>
            </div>
        </div>


    </div>        
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal-dialog {
            background-color: whitesmoke;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 800px; /* Limita la larghezza massima */
        }

        .modal-content {
            max-height: 70vh; /* Limita l'altezza massima */
            overflow-y: auto; /* Aggiunge uno scroll verticale se necessario */
        }

        .modal-body {
            max-height: 60vh; /* Limita l'altezza massima del corpo della modale */
            overflow-y: auto; /* Aggiunge uno scroll verticale se necessario */
        }                    
    </style>      
      
    {% block extra_js %}      
        <script src='{% static "js/djalog.js" %}'></script>
        <script src='{% static "js/toast.js" %}'></script>
        <script>
            $(document).ready(function() {
                var myurl = "{{url_ajax}}";
                urlComplete = "/api/allprenotazioni/{{annoscol}}?format=datatables";
                urlConsegnati = "/api/allconsegnati/{{annoscol}}?format=datatables";
                alert("my:"+myurl);

                var prenTable = $('#myDataTable').DataTable({
                    "serverSide": true,
                    "autoWidth": true,
                    "ajax": {
                        "url": myurl,
                        "type": "GET"
                    },
                    "columns": [
                        {"data": "pr_libreria_id"},
                        {"data": "pr_codfiscale"},
                        {"data": "pr_scuola", searchable:false, sortable:false},                        
                        {"data": "pr_scuola_nome", searchable:false, sortable:false},
                        {"data": "pr_classe"},                        
                        {"data": "facoltativoSN", searchable:false, sortable:false},
                        {"data": "consegnatoSN", searchable:false, sortable:false},
                        {"data": "link_del", searchable:false, sortable:false},
                    ],
                    "columnDefs": [
                            { "className": "text-center", "targets": [0, 2, 3, 4, 5, 6, 7] } // Adjust the target indexes as needed
                    ],                    
                    "drawCallback": function(settings) {
                        htmx.process('#myDataTable');
                    },
                    "paging": true,
                    "language": {
                        "url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
                    },
                    "xhr": function() {
                        var json = this.api().ajax.json();
                        if (json.data.length === 0) {
                            $('#myDataTable thead').hide();
                        } else {
                            $('#myDataTable thead').show();
                        }
                    }
                });
                // Funzione per aggiornare l'URL AJAX del DataTable
                function updateDataTableUrl(url) {
                    prenTable.ajax.url(url).load();
                }

                // Event listener per i radio button
                $('input[type=radio][name=flexRadioDefault]').change(function() {
                    if (this.value === 'complete') {
                        updateDataTableUrl(urlComplete);
                        prenTable.column(6).visible(true)
                    } else if (this.value === 'consegnati') {
                        prenTable.column(6).visible(false)
                        updateDataTableUrl(urlConsegnati);
                    }
                });
                // Event listener for reloading the table
                document.body.addEventListener("reloadTable", function(evt){
                    prenTable.ajax.reload(function() {
                        prenTable.column(6).visible(true);
                        htmx.process('#myDataTable');

                    }, false);
                });

                // Reload the table when the modal is hidden
                $('#modal').on('hidden.bs.modal', function (e) {
                    prenTable.ajax.reload(null, false);
                });

                // Additional HTMX and Toast handling code if needed
            });
        </script>
     
    {% endblock extra_js %}    
{% endblock content %}