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

{% block content %}
<div class="container">
    <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>
    <!-- Empty toast to show the message -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="toast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div id="toast-body" class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <div class="row" style="padding-bottom: 20px;">
        <div class="col-md-2">
            <a href="/app/listapren_libreria/{{annoscol}}/" class="btn btn-primary">Prenotazioni</a>                            
        </div>
        <div class="col-md-2">            
            <a href="/app/get_fatture_libreria/{{annoscol}}/" class="btn btn-primary">Fatture caricate</a>                  
        </div>        
        <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">
            <button  id="predisporreFatturaButton" hx-get="/app/prepfattura/" hx-trigger="click" hx-target="#dialog" class="btn btn-success btn-md" data-bs-toggle="modal" data-bs-target="#modal">
                Predisporre fattura
            </button>
        </div> 
        <div class="col-md-4">
            <a href="/app/azzera_lista_selezionate/" class="btn btn-danger" onclick="return getConfirmation('Sei sicuro di voler svuotare la lista dei selezionati?')">Azzera lista</a>            
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h4>Cedole fatturabili</h4>
            <div style="margin-bottom: 10px;">
                
                <form id="classeFilterForm" action="/app/selprenxfattura_xclasse/" method="POST">
                    {% csrf_token %}
    
                    <label for="classeFilter">Filtra per classe: </label>
                    <select id="classeFilter" name="classe" class="form-control" style="width: auto; display: inline-block;">
                        <option value="all" {% if classe_selezionata == 'all' %}selected{% endif %}>Tutte</option>
                        <option value="1" {% if classe_selezionata == '1' %}selected{% endif %}>1</option>
                        <option value="2" {% if classe_selezionata == '2' %}selected{% endif %}>2</option>
                        <option value="3" {% if classe_selezionata == '3' %}selected{% endif %}>3</option>
                        <option value="4" {% if classe_selezionata == '4' %}selected{% endif %}>4</option>
                        <option value="5" {% if classe_selezionata == '5' %}selected{% endif %}>5</option>
                    </select>
                    
                    <button id="setSelectedButton" class="btn btn-primary" style="margin-left: 10px;">Seleziona per fattura</button>
                </form>
            </div>
                     
            <table id="selectableTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th style="width: 30%;">Codice</th>
                        <th>Codice fiscale</th>
                        <th style="width: 10%;">Classe</th>
                        <th style="width: 20%;">Facoltativo</th>
                        <th style="width: 30%;">Spesa</th>
                        <th style="width: 10%;">Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ris in righe_selezionabili %}
                    <tr data-id="{{ ris.id }}">
                        <td style="text-align: center;">{{ ris.pk }}</td>
                        <td>{{ ris.pr_codfiscale }}</td>
                        <td style="text-align: center;">{{ ris.pr_classe }}</td>
                        <td>{% if ris.pr_facoltativo %}SI{% endif %}</td>
                        <td style="text-align: right;" >{{ ris.pr_spesa|floatformat:2 }}</td>
                        <td style="text-align: right;">
                            <button class="btn btn-lg moveToStato1" data-id="{{ ris.id }}">
                                <i class='fas fa-arrow-alt-circle-right'></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="3" style="text-align:right">Totale cedole in lista:</th>
                        <th id="selectableTableTotal">0.00</th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="col-md-6">
            <h4>Selezionate per fatturare</h4>        
            <div id="rightTable">
                {% include 'prenxfatturare.html' %}
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    $(document).ready(function() {
            // Imposta il valore della lista a tendina in base ai parametri dell'URL
            function setClasseFilterValue() {
                var selectedClasse = '{{ classe_selezionata }}' || 'all';
                $('#classeFilter').val(selectedClasse);
            }

            // Chiamare la funzione per impostare il valore della lista a tendina quando il documento è pronto
            setClasseFilterValue();

            // Aggiungi un evento per gestire il cambio della selezione nella lista a tendina
            $('#classeFilter').change(function() {
                $('#classeFilterForm').submit();
            });

            $('#setSelectedButton').click(function(event) {
                event.preventDefault(); // Previeni il comportamento predefinito del click
                if (confirm("Sei sicuro di voler fatturare i record filtrati?")) {
                    var formData = $('#classeFilterForm').serialize(); // Serializza i dati del modulo
                    $.ajax({
                        url: '/app/set_filtrati_selezionati/',
                        type: 'POST',
                        data: formData, // Invia i dati del modulo serializzati
                        success: function(response) {
                            // Gestisci la risposta qui, se necessario
                            location.reload(); // Ricarica la pagina dopo l'aggiornamento
                        },
                        error: function(xhr, status, error) {
                            console.error('Si è verificato un errore durante l\'invio del modulo:', error);
                        }
                    });
                }
            });            

            if ($('#selectedTable tbody tr').length > 0) {
                // Se la tabella contiene righe, abilita il bottone
                $('#predisporreFatturaButton').prop('disabled', false);
            } else {
                // Altrimenti, lascia il bottone disabilitato
                $('#predisporreFatturaButton').prop('disabled', true);
            };


         
            var prenfatturabiliTable = $('#selectableTable').DataTable({
                "autoWidth": true,
                "paging": true,
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
                },
                "drawCallback": function(settings) {
                    updateTableTotal('#selectableTable', '#selectableTableTotal', 4);
                }
            });

            var preninfatturaTable = $('#selectedTable').DataTable({
                "autoWidth": true,
                "paging": true,
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
                },
                "drawCallback": function(settings) {
                    updateTableTotal('#selectedTable', '#selectedTableTotal', 5);
                }
        });

        // Aggiungi eventi alle frecce
        $('#selectableTable').on('click', '.moveToStato1', function() {
            var recordId = $(this).data('id');
            aggiornaStato(recordId, 1);
        });

        $('#selectedTable').on('click', '.moveToStato0', function() {
            var recordId = $(this).data('id');
            aggiornaStato(recordId, 0);
        });

        function aggiornaStato(recordId, nuovoStato) {
            $.ajax({
                url: '/app/aggiorna_stato_pren/',
                type: 'POST',
                data: {
                    'record_id': recordId,
                    'nuovo_stato': nuovoStato,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function(response) {
                    location.reload();
                },
                error: function(xhr, status, error) {
                    console.error('Si è verificato un errore durante l\'aggiornamento dello stato:', error);
                }
            });
        }

        function updateTableTotal(tableSelector, totalSelector, spesaColIdx) {
            var table = $(tableSelector).DataTable();
            var total = 0;
            table.rows({ search: 'applied' }).every(function() {
                var data = this.data();
                total += parseFloat(data[spesaColIdx].replace(',', '.')) || 0;
            });
            $(totalSelector).text('€ ' + total.toFixed(2));
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var urlParams = new URLSearchParams(window.location.search);
        var selectedClasse = urlParams.get('classe') || 'all';
        document.getElementById('classeFilter').value = selectedClasse;
    });
</script>
    
<script>
    document.addEventListener("htmx:afterRequest", function(evt) {
        try {
            var data = JSON.parse(evt.detail.xhr.response);
            if (data.success) {
                var toastElement = document.getElementById('toast');
                var toastBody = document.getElementById('toast-body');
                toastBody.textContent = data.message;
                var toast = new bootstrap.Toast(toastElement);
                toast.show();
    
                // Chiudi la modale
                var modalElement = document.getElementById('modal');
                var modal = bootstrap.Modal.getInstance(modalElement);
                modal.hide();
                // Aggiorna la tabella di destra
                htmx.ajax('GET', '/app/aggiorna_lista_dafatturare/', {target: '#selectedTable'});
                                        
            } else if (data.errors) {
                console.error('Form errors:', data.errors);
            }
        } catch (e) {
            console.error('Errore nel parsing della risposta JSON', e);
        }
    });
</script>
    
   
{% endblock extra_js %}
{% endblock %}