{% extends 'base-simple.html.twig' %}

{% block title %}DIGIStack - Devis {{ devis.devisID }}{% endblock %}
{% block body %}
<style>
    @page { margin: 10% };
@media print {
    body {
        font-size: 12px;
    }
    h1, h2, h3, h4 {
        page-break-after:avoid;
        break-after: avoid;
    }
    h2 { 
        page-break-before: always 
    }

    .no-print {
        display: none;
    }

    .digi-invoice-banner {
        padding: 20px; 
        background-color: #06668C; 
        color: #ffffff; 
        border-radius: 20px; 
        margin-top: 5%;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust:exact !important;
    }
    .dataTable {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust:exact !important;
        font-size: 12px;
        border: 
    }
    .dataTable header {
        background-color:  #06668C;
        color: #ffffff;
    }
    .note-container {
        border: 1px solid #06668C; width: 40%; height: 100px; padding: 10px;
    }


    .row{
        margin-left: calc(5% - 20px);
    }
    
}
    .btn-digi {
        background-color: #06668C;
        color: aliceblue;
        border-radius: 10px;
        -webkit-box-shadow: 2px 3px 14px -4px rgba(0,0,0,0.79); 
        box-shadow: 2px 3px 14px -4px rgba(0,0,0,0.79);
        cursor: pointer;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .btn-digi:hover {
        background-color: #000000;
        color: aliceblue;
        border-radius: 12px;
        box-shadow: none;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .dataTable 
</style>
<script>
  var app_stop_ticket = "{{ url('app_stop_ticket') }}";
</script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Mes devis");
        $(".bandeau-img img").attr("src","/uploads/users/{{ user_image }}");
        $(".bandeau-img img").attr("height",84);


        /* Datatable des chiffrages */
        $('#QuotationTable').DataTable({
            "columnDefs": [
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/quotation/ajax-list-print/' + {{ devis.id }},
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            bInfo : false,
            columns: [
                { data: 'Description' },
                { data: 'Quantity' },
                { data: 'TJM' },
                { data: 'Cost' }
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();
        
                // Remove the formatting to get integer data for summation
                /*var intVal = function (i) {
                    return typeof i === 'string'
                        ? i.replace(/[\$,]/g, '') * 1
                        : typeof i === 'number'
                        ? i
                        : 0;
                };*/
        
                // Total over all pages
                total = api
                    .column(3)
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
        
                // Total over this page
                pageTotal = api
                    .column(3, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
        
                // Update footer
                /*$(api.column(4).footer()).html(
                    '$' + pageTotal + ' ( $' + total + ' total)'
                );*/

                var tva = $('#devis_devisTVA').val();
                var remise = $('#devis_devisRemise').val();

                var ttc = pageTotal + (tva/100) * pageTotal - remise;

                $('#devis_devisTotalHT').val(pageTotal);
                $('#devis_devisTotalTTC').val(ttc);
            }
        });

        $('#btn-generate-pdf').click(function() {
            var pdfContent = document.getElementById("kt_app_content").innerHTML;
            var windowObject = window.open();

            windowObject.document.write(pdfContent);

            windowObject.print();
            windowObject.close();
        })

        //$('#QuotationTable').DataTable().column(3).visible( false );
        //$('#QuotationTable').DataTable().column(1).visible( false );
    })
</script>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">                                               
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
            <div class="row">
                <a id="btn-generate-pdf" class="btn btn-digi no-print" href="/devis" style="color: #ffffff; width: 150px; ">
                    <i class="fa-solid fa-arrow-left"></i>                        
                    <!--begin::Indicator label-->
                    <span class="indicator-label">Retour</span>
                    <!--end::Indicator label-->
                </a>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <div id="company-logo" height=400 width=400 style="margin-left:5%; margin-top: 5%;"><img src="/uploads/companies/digitiles-logo-round-658d802253df5.png"></div>
                </div>
                <div class="col-sm-4">
                    <div class="digi-invoice-banner" style="print-color-adjust: exact !important; -webkit-print-color-adjust:exact !important;">
                        <div style="font-weight: bold; ">DEVIS {{ devis.devisID }}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div>
                        <div style="font-weight: bold;">{{ my_company.companyName }}</div>
                        <div>{{ my_company.companyAddress }}</div>
                        <div>{{ my_company.companyZipcode }} {{ my_company.companyCity }}</div>
                        <div>SIRET : {{ my_company.companySIRET }}</div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div style="padding: 20px; ba">
                        <div style="font-weight: bold;">{{ devis.client.companyName }}</div>
                        <div>{{ devis.client.companyAddress }}</div>
                        <div>{{ devis.client.companyZipcode }} {{ devis.client.companyCity }}</div>
                        <div>SIRET : {{ devis.client.companySIRET }}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container  container-xxl ">
                    <div class="card-header align-items-center py-2 gap-2 gap-md-5">
                            
                    </div>
                    <div class="card-body pt-0">
                        <!-- Users Datatable -->
                        <table id="QuotationTable" class="dataTable hover striped cell-border" style="width: 70%; print-color-adjust: exact !important; -webkit-print-color-adjust:exact !important;">
                            <thead style="background-color: #06668C;">
                                <tr>
                                    <th>Activité</th>
                                    <th>Qté</th>
                                    <th>Prix unitaire HT</th>
                                    <th>Montant HT</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

                        <table class="dataTable striped cell-border" style="width: 30% !important; float: right; print-color-adjust: exact !important; -webkit-print-color-adjust:exact !important; box-shadow: none !important; -webkit-box-shadow: none !important;">
                        <thead>
                            <tr>
                                <th>TOTAL</th>
                                <th>TVA 20%</th>
                                <th>TOTAL TTC</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ devis.totalHT }}€</td>
                                <td>{{ devis.tva }}€</td>
                                <td>{{ devis.totalttc }}€</td>
                            </tr>
                        </tbody>
                        </table>

                        <div class="note-container" style=" border: 1px solid #06668C; width: 40%; height: 100px; padding: 10px; ">
                            Remarque : {{ devis.note }}
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                </div>
                <div class="col-lg-2">
                </div>
                <div class="col-lg-2">
                    
                </div>
            </div>
            <!--div class="row"-->
                
            <!--/div-->
		</div>
	</div>
</div>
<!--end::Row-->  
{% endblock %}