<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        :root {
            --body-bg: rgb(204, 204, 204);
            --white: #ffffff;
            --darkWhite: #ccc;
            --black: #000000;
            --dark: #615c60;
            --themeColor: #560085;
            --pageShadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
        }

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100&display=swap');

        body {
            background-color: var(--body-bg);
            -webkit-print-color-adjust: exact !important;
        }


        .page {
            background: var(--white);
            display: block;
            margin: 0 auto;
            position: relative;
            box-shadow: var(--pageShadow);
        }

        .page[size="A4"] {
            width: 21cm;
            min-height: 29.7cm;
            overflow: hidden;
        }

        .bb {
            border-bottom: 3px solid var(--darkWhite);
        }

        .top-content {
            padding-bottom: 15px;
        }

        .logo img {
            height: 30px;
        }

        .top-left p {
            margin: 0;
        }

        .top-left .graphic-path {
            height: 40px;
            position: relative;
        }

        .top-left .graphic-path::before {
            content: "";
            height: 20px;
            background-color: var(--dark);
            position: absolute;
            left: 15px;
            right: 0;
            top: -15px;
            z-index: 2;
        }

        .top-left .graphic-path::after {
            content: "";
            height: 22px;
            width: 17px;
            background: var(--black);
            position: absolute;
            top: -13px;
            left: 6px;
            transform: rotate(45deg);
        }

        .top-left .graphic-path p {
            color: var(--white);
            height: 40px;
            left: 0;
            right: -100px;
            text-transform: uppercase;
            background-color: var(--themeColor);
            font: 26px;
            z-index: 3;
            position: absolute;
            padding-left: 10px;
        }

        .store-user {
            padding-bottom: 25px;
        }

        .store-user p {
            margin: 0;
            font-weight: 600;
        }

        .store-user .address {
            font-weight: 400;
        }

        .store-user h2 {
            color: var(--themeColor);
            font-family: 'Rajdhani', sans-serif;
        }

        .extra-info p span {
            font-weight: 400;
        }

        .table td,
        .table th {
            text-align: center;
            vertical-align: middle;
        }

        tr th:first-child,
        tr td:first-child {
            text-align: left;
        }

        .media img {
            height: 60px;
            width: 60px;
        }

        .media p {
            font-weight: 400;
            margin: 0;
        }

        .media p.title {
            font-weight: 600;
        }

        .media-body>p {
            font-weight: 600;
        }

        .balance-info .table td,
        .balance-info .table th {
            padding: 0;
            border: 0;
        }

        .balance-info tr td:first-child {
            font-weight: 600;
        }

        tfoot {
            border-top: 2px solid var(--darkWhite);
        }

        tfoot td {
            font-weight: 600;
        }

        footer {
            text-align: center;
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            background: var(--white);
            padding: 3rem;
        }

        footer hr {
            margin-bottom: -22px;
            border-top: 3px solid var(--darkWhite);
        }

        footer a {
            color: var(--themeColor);
        }

        @media print {

            .page,
            .page * {
                visibility: visible;
            }

            .page {
                position: absolute;
                left: 0;
                top: 0;
                box-shadow: none;
            }

            .my-5 {
                margin: 0 !important;
            }

            @page {
                margin: 0;
            }
        }

        .tabela thead td {
            background-color: #0000000d;
        }

        .tabela td {
            text-align: left;
        }

        .tabela-principal thead {
            font-weight: 600;
        }

        .tabela-principal thead td {
            background: none;
            border-bottom: 1px solid #000;
        }

        .tabela-principal td {
            border: none;
        }

        .marca-dagua {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .marca-dagua::before {
            content: var(--content, '');
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 10rem;
            color: #bcbcbc;
        }

    </style>
</head>

<body>
    <div class="my-5 page marca-dagua" size="A4">
        <div class="p-5">
            <section class="top-content d-flex justify-content-between" style="padding-bottom: 0; padding-top: 1.5rem;">
                <div class="col-7">
                    <div class="logo">
                        <img src="logo.svg" alt="" class="img-fluid" id="logotipoDocumento">
                    </div>
                </div>
                <div class="col-5">
                    <p style="font-size: 14pt; font-family: 'Noto Sans', sans-serif; text-align: justify; background-color: #560085; color: #fff; padding-left: .5rem;"><span id="nomeTipoDocumento"></span><span id="codDocumento" style="float: right; padding-right: .5rem;"></span></p>
                </div>
            </section>
            <section class="store-user" style="padding-bottom: 0;">
                <div class="col-12">
                    <div class="row pb-3">
                        <div class="col-7">
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; font-weight: 400;" id="enderecoDocumento"></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; font-weight: 400;">Nº
                                Contribuinte: <span id="nifDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; font-weight: 400;">
                                Telefone: <span id="telefoneDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; font-weight: 400;">Email:
                                <span id="emailDocumento"></span>
                            </p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; font-weight: 400;" id="websiteDocumento"></p>
                        </div>
                        <div class="col-5">
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; margin-bottom: 0.3rem;">
                                CLIENTE: <span style="font-weight: 400;" id="clienteDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify; margin-bottom: 0.3rem;">
                                MORADA: <span style="font-weight: 400;" id="moradaDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">DATA
                                EMISSÃO: <span style="font-weight: 400;" id="dataEmissaoDocumento"></span style="font-weight: 400;"> &nbsp; DATA VENCIMENTO: <span style="font-weight: 400;" id="dataVencimentoDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                DESCONTO: <span style="font-weight: 400;">0,00%</span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                PAGAMENTO: <span style="font-weight: 400;" id="modoPagamentoDocumento"></span></p>
                            <p style="font-size: 6pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">NIF:
                                <span style="font-weight: 400;" id="nifDocumento"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="product-area mt-4">
                <table class="tabela-principal table table-hover table-sm" style="font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                    <thead>
                        <tr>
                            <td>REF.</td>
                            <td>DESCRIÇÃO</td>
                            <td>QTD.</td>
                            <td>PREÇO</td>
                            <td>DESC.</td>
                            <td>IMPOSTO</td>
                            <td>TOTAL</td>
                        </tr>
                    </thead>
                    <tbody id="tabelaDocumento">
                    </tbody>
                </table>
            </section>
            <footer>
                <section class="balance-info">
                    <div class="row">
                        <div class="col-12">
                            
                        <p id="hashPrograma" style="float: left; font-weight: 500; font-size: 9pt; font-family: 'Noto Sans', sans-serif;"></p>
                        </div>
                        <div class="col-12">
                            <p class="m-0 font-weight-bold" style="font-weight: 600; font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                RESUMO DE IMPOSTOS: </p>
                        </div>
                        <div class="col-8">
                            <table class="tabela table border-0 table-hover" style="font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                <thead style="font-weight: 600; color: #0000000d;">
                                    <tr>
                                        <td style="width: 10rem;">DESIGNAÇÃO</td>
                                        <td style="width: 8rem;">TAXA</td>
                                        <td>INCIDÊNCIA</td>
                                        <td>IMPOSTO</td>
                                    </tr>
                                </thead>
                                <tr>
                                    <td>abcd</td>
                                    <td>efgh</td>
                                    <td>ijkl</td>
                                    <td>mnop</td>
                                </tr>
                            </table>
                            <div class="col-12">
                                <p class="m-0 font-weight-bold" style="font-weight: 600; font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                    MODOS DE PAGAMENTO: </p>
                            </div>
                            <table class="tabela table border-0 table-hover" style="font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                <thead style="font-weight: 600; color: #0000000d;">
                                    <tr>
                                        <td style="width: 10rem;">DESCRIÇÃO</td>
                                        <td style="width: 8rem;">TOTAL</td>
                                        <td>INFORMAÇÃO ADICIONAL</td>
                                    </tr>
                                </thead>
                                <tbody id="tabelaModoPagamentoDocumento"></tbody>
                            </table>
                            <div class="col-12">
                                <p class="m-0 font-weight-bold" style="font-weight: 600; font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                    COORDENADAS BANCÁRIAS: </p>
                            </div>
                            <table class="tabela table border-0 table-hover" style="font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                <thead style="font-weight: 600; color: #0000000d;">
                                    <tr>
                                        <td style="width: 10rem;">BANCO</td>
                                        <td style="width: 8rem;">NÚMERO DA CONTA</td>
                                        <td>IBAN</td>
                                    </tr>
                                </thead>
                                <tr>
                                </tr>
                            </table>
                        </div>
                        <div class="col-4">
                            <table class="table border-0 table-hover table-striped" style="font-size: 7pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                <tr>
                                    <td>MERCADORIAS/SERVIÇOS:</td>
                                    <td style="text-align: right;" id="mercadoriaServicoDocumento"></td>
                                </tr>
                                <tr>
                                    <td>DESCONTO GLOBAL:</td>
                                    <td style="text-align: right;" id="descontoGlobalDocumento"></td>
                                </tr>
                                <tr>
                                    <td>LÍQUIDO:</td>
                                    <td style="text-align: right;" id="totalLiquidoDocumento"></td>
                                </tr>
                                <tr>
                                    <td>IMPOSTO IVA:</td>
                                    <td style="text-align: right;" id="impostoIvaDocumento"></td>
                                </tr>
                                <tr>
                                    <td>RETENÇÃO 0,00%:</td>
                                    <td style="text-align: right;" id="retencaoDocumento"></td>
                                </tr>
                                <tr>
                                    <td>TOTAL DO DOCUMENTO:</td>
                                    <td style="text-align: right;" id="totalDocumento"></td>
                                </tr>
                            </table>
                            <div class="col-12">
                                <p id="paragrafoProforma" class="m-0" style="color: #8F8F8F; font-size: 5pt; font-family: 'Noto Sans', sans-serif; text-align: justify;">
                                    Este Documento é válido por oito dias. Valor de Referência para
                                    Luanda e arredores, restantes provincias a negociar. Garantia: Suporte contínuo
                                    enquato
                                    durar a vigência do contracto de prestação de serviço.
                                    Exclusões: Estão excluídos desta proposta, Serviços adicionais que carecem de
                                    concertação prévia antes de serem executados, serviços de manutenção a
                                    infraestrutura de
                                    rede do cliente e ou de computadores que tenha apresentado avarias no seu
                                    funcionamento.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </footer>
        </div>
    </div>

    <script src="template/plugins/jquery/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "includes/read/configuracao.inc.php",
            type: "post",
            dataType: "json",
            success: function(data) {
                logotipoDocumento.src = "./images/logo/" + data[0]['valor'];
                enderecoDocumento.innerText = data[3]['valor'];
                telefoneDocumento.innerText = data[4]['valor'];
                emailDocumento.innerText = data[5]['valor'];
                nifDocumento.innerText = data[6]['valor'];
                websiteDocumento.innerText = data[7]['valor'];
            }
        });

        function codigoDocumento(codigo, tipoDocumento) {
            $.ajax({
                url: "includes/read/queryCodigoDocumentoStock.inc.php",
                type: "post",
                dataType: "json",
                data: {
                    codigo: codigo.split("/")[1],
                    tipoDocumento: tipoDocumento
                },
                success: function(data) {
                    $.ajax({
                        url: "includes/read/queryDocumentoModoPagamento.inc.php",
                        type: "post",
                        dataType: "json",
                        data: {
                            idDocumento: data[0]['idDocumento'],
                        },
                        success: function(data) {
                            let row = "";
                            for (var key in data) {
                                row += `
                                <tr>
                                    <td>${data[key]['nomeMp']}</td>
                                    <td>${data[key]['valor'].replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</td>
                                    <td></td>
                                </tr>`;
                            }
                            $("#tabelaModoPagamentoDocumento").html(row);
                        }
                    });
                    $.ajax({
                        url: "includes/read/queryStockLinha.inc.php",
                        type: "post",
                        dataType: "json",
                        data: {
                            idDocumento: data[0]['idDocumento'],
                        },
                        success: function(data) {
                            console.log("LINHAS: ");
                            let row = "";
                            for (var key in data) {
                                row += `
                            <tr>
                            <td>${data[key]['idArtigo']}</td>
                            <td>${data[key]['descricao']}</td>
                            <td>${parseInt(data[key]['qtd']).toFixed(0).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</td>
                            <td>${parseFloat(data[key]['preco']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</td>
                            <td>${parseFloat(data[key]['desconto']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</td>
                            <td>${parseFloat(data[key]['imposto']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") + "%"}</td>
                            <td>${parseFloat(data[key]['total']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</td>
                        </tr>
                            `;
                            }
                            $("#tabelaDocumento").html(row);
                        }
                    });
                }
            }).done(function(data) {
                $.ajax({
                    url: "includes/read/queryDocumentoStock.inc.php",
                    type: "post",
                    dataType: "json",
                    data: {
                        idDocumento: data[0]['idDocumento'],
                    },
                    success: function(data) {
                        console.log("PEGAR DOCUMENTO: ", data);
                        let marcaDagua = document.querySelector('.marca-dagua');
                        if(data[0]['estadoEmissao'] == 0){
                            marcaDagua.style.setProperty('--content', '"Anulado"');
                        } else if(data[0]['estadoEmissao'] == 1){
                            marcaDagua.style.setProperty('--content', '""');
                        } else if(data[0]['estadoEmissao'] == 2){
                            marcaDagua.style.setProperty('--content', '"Bloqueado"');
                        }
                        
                        //hashPrograma.innerText = data[0]['hashSaft'].substring(0, 4) + "-Processado por programa válido n308/agt";
                        codDocumento.innerText = data[0]['codigoDocumento'];
                        nomeTipoDocumento.innerText = data[0]['nomeTd'];
                        //clienteDocumento.innerText = data[0]['nomeE'].toUpperCase();
                        //moradaDocumento.innerText = data[0]['moradaE'];
                        dataEmissaoDocumento.innerText = data[0]['dataDocumento'];
                        dataVencimentoDocumento.innerText = data[0]['dataDocumento'];
                        modoPagamentoDocumento.innerText = data[0]['nomePp'];
                        nifDocumento.innerText = data[0]['nifE'];
                        mercadoriaServicoDocumento.innerText = data[0]['total'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['total']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        descontoGlobalDocumento.innerText = data[0]['descontoGlobal'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['descontoGlobal']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        totalLiquidoDocumento.innerText = data[0]['totalLiquido'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['totalLiquido']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        impostoIvaDocumento.innerText = data[0]['imposto'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['imposto']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        retencaoDocumento.innerText = data[0]['retencao'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['retencao']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                        totalDocumento.innerText = data[0]['total'] == null ? parseFloat(0).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ") : parseFloat(data[0]['total']).toFixed(2).replace(/\./g, ',').replace(/\B(?=(\d{3})+(?!\d))/g, " ");

                        if(data[0]["natureza"] === "facturaProforma" || data[0]["natureza"] === "facturaProformaC"){
                            paragrafoProforma.style.display = "block";
                        } else {
                            paragrafoProforma.style.display = "none";
                        }
                    }
                });
            });
        }
    </script>
</body>

</html>