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

{% block content %}

<div class="container" style="padding-top:100px;">
    <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 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>

    <h3>{{ libreria }}&emsp;-&emsp;fatture caricate</h3>

    <div class="row" style="padding-top:60px;">
        <div class="col-md-12">
            <table id="tblFatture" class="table table-striped table-bordered" style="vertical-align: middle;text-align: left;">
                <thead>
                    <tr>
                        <th></th>
                        <th style="text-align: center; width:5%;">id</th>
                        <th style="text-align: center;width: 20%;">Libreria</th>
                        <th style="text-align: center;width: 5%;">Data</th>
                        <th style="text-align: center;width: 10%;">Classe</th>
                        <th style="text-align: center;width: 10%;">Importo</th>
                        <th style="text-align: center;width: 50%;" colspan="3">Note</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ris in risultati %}
                        <tr>
                            <td>

                                <button class="btn btn-primary btn-sm" hx-get="/app/fattura_edit/{{ ris.pk }}/" hx-target="#dialog" data-bs-toggle="modal" data-bs-target="#modal">
                                    <i class="fa-solid fa-eye"></i> 
                                </button>
                            </td>
                            <td style="padding:2px; vertical-align: middle; text-align: center;">{{ ris.pk }}</td>
                            <td style="padding:2px; vertical-align: middle; text-align: center;">{{ ris.fa_data|date:"d/m/Y" }}</td>
                            <td style="padding:2px; vertical-align: middle; text-align: center">{% if ris.fa_classe %}{{ ris.fa_classe }}{% endif %}</td>
                            <td style="padding:2px; vertical-align: middle; text-align: right;">{{ ris.fa_importo|floatformat:2 }}</td>
                            <td style="padding:2px; vertical-align: middle; text-align: center" colspan="3">{% if ris.fa_note %}{{ ris.fa_note }}{% endif %}</td>
                            <td style="padding:2px; vertical-align: middle; text-align: center" >{{ ris.fa_libreria }}</td>
                        </tr>
                    {% endfor %}
                    <tr><td colspan="3" style="text-align: right;"><b>totale fatturato</b></td><td style="text-align: right;"><b>{{ tot_fatturato|floatformat:2 }}</b></td><td></td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" style="padding-top:10px;">

        <div class="col-md-4">
            <a href="/app/listapren_admin/{{ annoscol }}/" class="btn btn-primary">Prenotazioni</a>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    $(document).ready(function() {
        function showMessage(message, success) {
            var toast = $('#toast');
            var toastBody = $('#toast-body');
            toastBody.text(message);
            toast.removeClass('bg-success bg-danger');
            if (success) {
                toast.addClass('bg-success');
            } else {
                toast.addClass('bg-danger');
            }
            toast.toast('show');
        }


    });
</script>
{% endblock extra_js %}
{% endblock content %}