<?php
require '../conexao/conexao.php';
//require '../sessao.php';
require '../conexao/acesso.php';
require '../configuacoes.php';
require '../configuracao/consulta_banco_dados.php';
require '../configuracao/filtros.php';
require '../logs/gera-log.php';

gerarLog(
    1, // tipo de log (acesso)
    $basePath, // módulo
    $_SESSION['CodUsuario'],
    $_SESSION['NomeUsuario']
);

// Instancia a classe de consulta_bb ao banco de dados
$consulta_bb = new ConsultaBancoDeDados();
$filtros = new Filtros();
$result = null; // Definindo $result como null

$filiais = $consulta_bb->get_filiais();
//$setores = $consulta_bb->get_setor_vendas();


// Obtendo os parâmetros de forma segura
$DataInicial = $_GET['DataInicial'] ?? null;
$DataFinal = $_GET['DataFinal'] ?? null;
$ids = array_column($filiais, 'ID');
array_unshift($ids, 'x');
$ids_filial = implode(',', $ids);
$filialselect = !empty($_GET['filial']) ? $_GET['filial'] : null;
$filial = explode(',', $filialselect);

$filial = array_filter($filial, function ($item) {
    return $item !== 'x';
});
$filial = array_values($filial);
$filial = implode(',', $filial);
$grupoSelecionado = $_GET['grupo'] ?? null;
$setorSelecionado = $_GET['setor'] ?? null;


$sql_base = "SELECT
 A3.CODIGO_PRODUTO as CDPRO,
  EG.NOMEPRODUTO as PRODUTO,
  sum(A3.QUANTIDADE) as soma,
  cast(SUM(A3.VALORVENDA_DESC) as numeric (18,2)) as valor

from ATENDIMENTO_A3 A3
  inner join ATENDIMENTO_A1 A1 ON A3.CODIGO_ATEND_A1 = A1.CODIGO
  inner join CLIENTE CL ON CL.CODIGO = A1.CODIGO_CLIENTE
  left join ATENDIMENTO_CF CF ON A1.CODIGO_ATEND_FL = CF.CODIGO_ATEND_FL and CF.CANCELAMENTO_CF is null
  inner join ESTOQUE_GERAL EG ON A3.CODIGO_PRODUTO = EG.CODIGO
where A1.TIPO_ATENDIMENTO = 2 AND A3.EXCLUIRPRODUTO_CF is null and A3.QUANTIDADE > 0
AND CAST(A1.entregue_dt as date) BETWEEN ? AND ? ";


$params = [$DataInicial, $DataFinal];

if ($grupoSelecionado && $grupoSelecionado != "Todos") {
    // Suporta múltiplos IDs de grupo separados por vírgula e vincula como parâmetros
    $grupoArray = array_map('intval', explode(',', $grupoSelecionado));
    if (count($grupoArray) > 0) {
        $placeholders = implode(',', array_fill(0, count($grupoArray), '?'));
        $sql_base .= " AND EG.movimentoestoque IN ($placeholders)";
        $params = array_merge($params, $grupoArray);
    }
}

// if ($setorSelecionado) {
//     // Adicionar aspas simples para tratar múltiplos setores de forma segura
//     $setoresArray = array_map('intval', explode(',', $setorSelecionado)); // Tratar e converter para inteiro
//     $placeholders = implode(',', array_fill(0, count($setoresArray), '?')); // Criar placeholders para cada setor
//     $sql_base .= " AND p.setor IN ($placeholders)";
//     $params = array_merge($params, $setoresArray);
// }

if ($filial && $filial != "Todos") {
    $sql_base .= " AND A1.aviada_lj IN($filial)";
}

// Adicionar cláusula GROUP BY
$sql_base .= " GROUP BY A3.CODIGO_PRODUTO,EG.NOMEPRODUTO, EG.UNIDADE ORDER BY EG.NOMEPRODUTO";

// Preparar e executar a consulta de forma segura
$stmt = ibase_prepare($connection, $sql_base);
$result = ibase_execute($stmt, ...$params);

if (!$result) {
    die('Erro na consulta: ' . ibase_errmsg());
}
//echo $sql_base;
?>

<style>
    /* Outros estilos */

    .dataTables_length {
        float: left;
        /* Alinha o seletor de registros por página à esquerda */
    }

    .dataTables_filter {
        float: right;
        /* Alinha o campo de busca à direita */
        text-align: right;
        /* Alinha o texto dentro da busca à direita */
    }

    .dataTables_info {
        float: left;
        /* Alinha a informação de paginação à esquerda */
    }



    /* Mais estilos */
</style>

<style>
    .dataTables_length,
    .dataTables_filter {
        margin-bottom: 0 !important;
    }

    .dataTables_info {
        padding-top: 10px;
    }

    .dataTables_paginate {
        padding-top: 10px;
    }
</style>

<style>
    div.dataTables_wrapper div.dataTables_length {
        padding-top: 10px;
    }
</style>

<style>
    /* Garante alinhamento bonito e espaçamento */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        margin: 0 !important;
        padding: 0 !important;
    }

    div.dataTables_wrapper .text-center {
        text-align: center !important;
    }

    div.dataTables_wrapper .text-end {
        text-align: right !important;
    }
</style>

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

<?php
$pageTitle = "Produtos de Varejo"; // Definir o título da página aqui
include('../geral/header.php');
?>

<body>

    <!-- Navigation Bar-->
    <?php
    include('../geral/menu.php');
    ?>
    <!-- End Navigation Bar-->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="wrapper candidato">
        <div class="container-fluid">

            <div class="card-box mt-3">
                <div class="row">

                    <div class="col-6 text-left">
                        <h4 class="page-title">Consultar Produtos</h4>

                    </div>

                    <div class="col-12">
                        <hr>
                    </div>

                    <div class="col-12">
                        <form method="get" action="" id="indexForm" onsubmit="return validarFormulario()">
                            <div class="form-row mb-3">
                                <!-- Filial -->
                                <?php
                                echo $filtros->filtroFilialSimples($filialselect, $filiais, true, null, 2);
                                ?>

                                <!-- Grupo -->
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="grupo" class="col-form-label">Grupo</label>
                                    <select name="grupo" id="grupo" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="1" <?php echo (isset($grupoSelecionado) && $grupoSelecionado == "1") ? "selected" : ""; ?>>Alopatia</option>
                                        <option value="2" <?php echo (isset($grupoSelecionado) && $grupoSelecionado == "2") ? "selected" : ""; ?>>Homeopatia</option>
                                        <option value="3" <?php echo (isset($grupoSelecionado) && $grupoSelecionado == "3") ? "selected" : ""; ?>>Revenda</option>
                                        <option value="4" <?php echo (isset($grupoSelecionado) && $grupoSelecionado == "4") ? "selected" : ""; ?>>Embalagem</option>
                                        <option value="9" <?php echo (isset($grupoSelecionado) && $grupoSelecionado == "9") ? "selected" : ""; ?>>Outros</option>
                                    </select>
                                </div>

                                <!-- Data Inicial -->
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="DataInicial" class="col-form-label">Data Inicial</label>
                                    <input type="date" id="DataInicial" name="DataInicial" class="form-control" value="<?php echo isset($DataInicial) ? $DataInicial : ''; ?>" oninput="validarCampo('DataInicial',this.value)">
                                </div>

                                <!-- Data Final -->
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="DataFinal" class="col-form-label">Data Final</label>
                                    <input type="date" id="DataFinal" name="DataFinal" class="form-control" value="<?php echo isset($DataFinal) ? $DataFinal : ''; ?>" oninput="validarCampo('DataFinal',this.value)">
                                </div>

                                <?php
                                // echo $filtros->filtroCheckBox('setor', $setores);
                                ?>


                                <input type="hidden" name="form_submitted" value="1" />

                                <div class="col-12 col-md-8 col-lg-4 d-flex mt-2" style="align-items:center;justify-content: end;">
                                    <div>
                                        <a href="index.php" class="btn btn-warning mr-2"><i class="mdi mdi-plus"></i> Limpar</a>
                                    </div>
                                    <div>
                                        <button type="submit" class="btn btn-primary"><i class="mdi mdi-magnify"></i> Pesquisar</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <?php if (isset($_GET['form_submitted'])) { ?>
                    <div class="col-12">
                        <h6>Lista de Produtos de Varejo por vendas</h6>

                        <div class="row">
                            <div class="col-12">
                                <table id="minhaTabela" class="table table-bordered table-hover table-sm" style="width:100%;">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Código</th>
                                            <th>Produto</th>
                                            <th>Quantidade</th>
                                            <th>Valor</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        $total = 0;
                                        $hasResults = false; // Variável para verificar se há resultados válidos

                                        if ($result) { // Verifica se $result é válido antes de iterar sobre ele
                                            while ($row = ibase_fetch_assoc($result)) {
                                                ///$row['PRODUTO'] =  mb_convert_encoding($row['PRODUTO'], 'UTF-8', 'ISO-8859-1');

                                                $hasResults = true; // Indica que encontrou ao menos um resultado
                                                echo '<tr>';
                                                echo '<td>' . htmlspecialchars($row['CDPRO'])  . '</td>';
                                                echo '<th scope="row">' . ($row['PRODUTO']) . '</th>';
                                                echo '<td>' . htmlspecialchars(number_format($row['SOMA'], 0, '.', '')) . ' </td>';
                                                echo '<td data-order="' . number_format($row['VALOR'], 2, '.', '') . '"> R$ ' . number_format($row['VALOR'], 2, ',', '.') . ' </td>';

                                                echo "<td>
                                                <a href=\"buscar_detalhes_produto.php?id=" . urlencode($row['CDPRO']) .
                                                    "&filial=" . urlencode($filial) .
                                                    "&DataInicial=" . urlencode($DataInicial) .
                                                    "&DataFinal=" . urlencode($DataFinal) .
                                                    "&produto=" . urlencode($row['PRODUTO']) . "\"

                                                class=\"table-actions link-view\">
                                                <i class=\"mdi mdi-account-search\"></i>
                                                </a>
                                            </td>";

                                                echo '</tr>';

                                                $total += $row['VALOR'];
                                            }
                                        }

                                        if (!$hasResults) {
                                            echo "<tr><td colspan='5' class='text-center'>Sem resultado para a consulta</td></tr>";
                                        }

                                        ?>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4>Total: R$ <?php echo number_format($total, 2, ',', '.'); ?></h4>
                                    </div>
                                </div>

                            </div>

                        </div>


                    </div>
                <?php } ?>

            </div>

        </div> <!-- end container -->
    </div>



    <!-- end wrapper -->

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
    <!-- Footer Start -->
    <?php
    include('../geral/footer.php');
    ?>
    <!-- end Footer -->

    <?php
    include('../geral/mensagens_modais.php');
    ?>

    <!-- Vendor js -->
    <script src="../../assets/js/vendor.min.js"></script>

    <!-- knob plugin -->
    <script src="../../assets/libs/jquery-knob/jquery.knob.min.js"></script>
    <!-- App js-->
    <script src="../../assets/js/app.min.js"></script>
    <!-- No final do seu documento, antes dos scripts, adicione: -->




    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">



    <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>

    <script src="../geral/javascript.js"></script>
    <script src="../../assets/js/funcoes.js"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">

    <link rel="stylesheet" href="../../assets/css/resetedatatable.css">

    <script>
        // initDropdownFilter('setor', false, 'grupo');

        $(document).ready(function() {
            var order = [
                [2, "DESC"]
            ];

            $('#minhaTabela').DataTable({
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                },
                "order": order,
                "ordering": true,
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"]
                ],
                "buttons": [
                    //'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    // 'pdfHtml5'
                ],
                dom: '<"d-flex justify-content-between align-items-center mb-2"Bf>t<"datatable-footer d-flex justify-content-between align-items-center mt-2 w-100"<"footer-left"l><"footer-center"i><"footer-right"p>>', // Adicionando "l" para incluir a opção de seleção de quantidade de registros por página

            });
        });
    </script>

    <!-- Modal
    <div class="modal fade" id="Modal3" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="standard-modalLabel">Lista de Clientes que Compraram o Produto Selecionado</h4>
                    <button type="button" id="fecharModalBtn" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="detalhes-produto-container">
                        <?php
                        //include('buscar_detalhes_produto.php');
                        ?>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal" id="fecharModalBtn">Fechar</button>
                </div>
            </div>
        </div>
    </div> -->

</body>

</html>
<script type="text/javascript">
    function showModal(title, message) {
        const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
        const modalTitle = document.querySelector('.modal-title');
        const modalBody = document.querySelector('.modal-body p');

        modalTitle.textContent = title;
        modalBody.textContent = message;

        modal.show();
    }

    function validarCampo(id) {
        let campo = document.getElementById(id);
        return campo.value.trim(); // Retorna o valor do campo após remover espaços em branco
    }

    function adicionarClasseErro(campo) {
        campo.classList.add('is-invalido');
    }

    function removerClasseErro(campo) {
        campo.classList.remove('is-invalido');
    }

    function validarFormulario() {
        let DataInicial = validarCampo("DataInicial");
        let DataFinal = validarCampo("DataFinal");


        let DataInicialCampo = document.getElementById("DataInicial");
        let DataFinalCampo = document.getElementById("DataFinal");

        if (DataInicial === '' || DataFinal === '') {
            adicionarClasseErro(DataInicialCampo);
            adicionarClasseErro(DataFinalCampo);
            showModal('Informação', 'As datas de inicial e final são obrigatórias para realizar a consulta.');
            return false;
        }

        if (new Date(DataInicial) > new Date(DataFinal)) {
            adicionarClasseErro(DataInicialCampo);
            adicionarClasseErro(DataFinalCampo);
            showModal('Erro', 'A data inicial não pode ser maior que a data final.');
            return false;
        }

        if (!algumPreenchido) {
            showModal('Informação', 'Pelo menos um campo deve estar preenchido para realizar a consulta.');
            return false;
        }

        return true;
    }

    function verificarDatas() {
        let DataInicialCampo = document.getElementById("DataInicial");
        let DataFinalCampo = document.getElementById("DataFinal");
        let DataInicial = DataInicialCampo.value.trim();
        let DataFinal = DataFinalCampo.value.trim();

        if (DataInicial !== '' && DataFinal !== '') {
            removerClasseErro(DataInicialCampo);
            removerClasseErro(DataFinalCampo);

            if (new Date(DataInicial) > new Date(DataFinal)) {
                adicionarClasseErro(DataInicialCampo);
                adicionarClasseErro(DataFinalCampo);
                //showModal('Erro', 'A data inicial não pode ser maior que a data final.');
            }
        }
    }

    document.getElementById("DataInicial").addEventListener('input', function() {
        removerClasseErro(this);
        verificarDatas();
    });

    document.getElementById("DataFinal").addEventListener('input', function() {
        removerClasseErro(this);
        verificarDatas();
    });

    // Verifica a URL quando a página é carregada
    function verificarErroNaURL() {
        const urlParams = new URLSearchParams(window.location.search);
        const errorMessage = urlParams.get('error');
        if (errorMessage) {
            showModal('exampleModal', 'Erro', errorMessage);
        }
    }

    window.onload = verificarErroNaURL;


    // Adicionar event listeners para remover a classe 'is-invalido' quando houver mudanças nos campos




    // document.addEventListener('DOMContentLoaded', function() {
    //     const filterInput = document.getElementById('setor_input');
    //     const dropdown = document.getElementById('setor_dropdown');
    //     const selectAllCheckbox = document.getElementById('select_all');
    //     const hiddenField = document.getElementById('setorselecionados');
    //     let grupo = '<?php echo $grupo; ?>'; // Recebe o valor de PHP para a variável grupo

    //     // Se grupo está definido e não é 'Todos', carrega os setores
    //     if (grupo && grupo !== 'Todos') {
    //         grupo = 'SETOR' + grupo.charAt(grupo.length - 1); // Concatena "SETOR" com a última letra
    //         caregasetores(grupo);
    //     }

    //     // Capturar o evento de mudança no campo de seleção de grupo
    //     document.getElementById('grupo').addEventListener('change', function() {
    //         const selectedValue = this.value; // Obtém o valor selecionado

    //         // Verifica se o valor selecionado não é "Todos"
    //         if (selectedValue !== 'Todos') {
    //             grupo = 'SETOR' + selectedValue.charAt(selectedValue.length - 1); // Concatena "SETOR" com a última letra
    //         } else {
    //             grupo = '0000'; // Reseta o valor do grupo se "Todos" estiver selecionado
    //         }

    //         // Carregar setores com base no grupo selecionado
    //         caregasetores(grupo);
    //     });

    //     function caregasetores(grupo) {
    //         // Enviar requisição AJAX para obter os setores
    //         fetch('get_setor.php', {
    //                 method: 'POST',
    //                 headers: {
    //                     'Content-Type': 'application/x-www-form-urlencoded'
    //                 },
    //                 body: 'grupo=' + encodeURIComponent(grupo)
    //             })
    //             .then(response => response.json())
    //             .then(data => {
    //                 dropdown.innerHTML = ''; // Limpar o dropdown

    //                 // Adicionar os setores ao dropdown
    //                 data.forEach(setor => {
    //                     const nomeSetor = setor.NOME_SETOR;
    //                     const idSetor = setor.COD_SETOR;
    //                     const ref = setor.ARGUMENTO;

    //                     const divItem = document.createElement('div');
    //                     divItem.className = 'dropdown-item';
    //                     divItem.innerHTML = `<input type="checkbox" class="setor-checkbox" data-id="${idSetor}" data-name="${nomeSetor}" id="${idSetor}" data-referencia="${ref}" onchange="updateSelectedSetors()">
    //                              <label for="${idSetor}">${idSetor} - ${nomeSetor}</label>`;
    //                     dropdown.appendChild(divItem);
    //                 });
    //             })
    //             .catch(error => console.error('Erro ao obter setores:', error));
    //     }

    //     // Controle do dropdown e checkboxes
    //     filterInput.addEventListener('click', function() {
    //         dropdown.style.display = (dropdown.style.display === 'block') ? 'none' : 'block';
    //     });

    //     filterInput.addEventListener('input', function() {
    //         const filterValue = this.value.toLowerCase();
    //         const items = dropdown.querySelectorAll('.dropdown-item');
    //         items.forEach(function(item) {
    //             const itemText = item.textContent.toLowerCase();
    //             item.style.display = itemText.includes(filterValue) ? 'block' : 'none';
    //         });
    //         dropdown.style.display = filterValue ? 'block' : 'none';
    //     });

    //     window.toggleSelectAll = function(selectAllCheckbox) {
    //         const checkboxes = document.querySelectorAll('.setor-checkbox');
    //         checkboxes.forEach(checkbox => checkbox.checked = selectAllCheckbox.checked);
    //         updateSelectedSetors();
    //     };

    //     window.updateSelectedSetors = function() {
    //         const selectedNames = Array.from(document.querySelectorAll('.setor-checkbox'))
    //             .filter(checkbox => checkbox.checked)
    //             .map(checkbox => checkbox.getAttribute('data-name')); // Obter os nomes dos setores
    //         const selectedIds = Array.from(document.querySelectorAll('.setor-checkbox'))
    //             .filter(checkbox => checkbox.checked)
    //             .map(checkbox => checkbox.getAttribute('data-id')); // Obter os IDs dos setores

    //         // Exibe os nomes dos setores no campo de entrada
    //         filterInput.value = selectedNames.join(', ');

    //         // Atualiza o campo oculto com os IDs para envio via GET
    //         hiddenField.value = selectedIds.join(',');

    //         const allCheckboxes = document.querySelectorAll('.setor-checkbox');
    //         selectAllCheckbox.checked = selectedIds.length === allCheckboxes.length;
    //     };

    //     document.addEventListener('click', function(e) {
    //         if (!filterInput.contains(e.target) && !dropdown.contains(e.target)) {
    //             dropdown.style.display = 'none';
    //         }
    //     });
    // });
</script>




<script>
    // document.addEventListener("DOMContentLoaded", function() {
    // const modalLinkElements = document.querySelectorAll(".open-modal-link");
    // const modalContainer = document.getElementById("detalhes-produto-container");

    // modalLinkElements.forEach(function(element) {
    // element.addEventListener("click", function(event) {
    // event.preventDefault();
    // const requisicaoId = element.getAttribute("data-produto");

    // // Carregue a modal
    // const modal = new bootstrap.Modal(document.getElementById("Modal3"));
    // modal.show();

    // // Carregue o conteúdo da página buscar_detalhes_requisicao.php na modal
    // modalContainer.innerHTML = '<p>Carregando...</p>';
    // fetch('buscar_detalhes_produto.php?id=' + encodeURIComponent(requisicaoId) + '&filial=<?php echo urlencode($filial); ?>&DataInicial=<?php echo urlencode($DataInicial); ?>&DataFinal=<?php echo urlencode($DataFinal); ?>')

    // .then(response => response.text())
    // .then(data => {
    // modalContainer.innerHTML = data;
    // });
    // });
    // });
    // });


    //REMOVER O CINZA APÓS FECHAR A MODAL E PERMITIR O SCROLL
    var myModalEl = document.getElementById('standard-modal');
    myModalEl.addEventListener('hidden.bs.modal', function(event) {
        var modalsBackdrop = document.getElementsByClassName('modal-backdrop');
        while (modalsBackdrop.length > 0) {
            modalsBackdrop[0].parentNode.removeChild(modalsBackdrop[0]);
        }
        document.body.style.overflow = ''; // Reset overflow
    });
</script>
<style>
    .is-invalido {
        box-shadow: 0 0 5px red !important;
    }

    .dropdown-menu {
        display: none;
        max-height: 300px;
        overflow-y: auto;
        position: absolute;
        z-index: 1000;
    }

    .dropdown-item {
        cursor: pointer;
    }

    .setores {
        position: relative;

        bottom: 30px;

    }
</style>
<style>
    #minhaTabela_length label,
    #minhaTabela_info {
        margin: 0 !important;
        padding: 0 !important;
        align-items: center;
    }
</style>