<?php
require '../../conexao/conexao.php';
//require '../sessao.php';
require '../../configuacoes.php';
require '../../conexao/acesso.php';
require_once '../../conexao/logs.php';
require_once '../../querys/query_personalizacao.php';

if (isset($_SESSION['CodUsuario']) && isset($_SESSION['NomeUsuario'])) {
    registrarLogAcesso(95, $_SESSION['CodUsuario'], $_SESSION['NomeUsuario']);
}
$resultmeta = null;

$personalizacao = new Personalizacao($connectionmysql);

// Processa os uploads quando o formulário é enviado
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Processa cada tipo de logo separadamente
    $messages = [];

    // Logo principal
    if (isset($_FILES['logo']) && !empty($_FILES['logo']['name'])) {
        $msg = $personalizacao->processFileUpload('logo', 'logo');
        if ($msg) $messages[] = $msg;
    }

    // Logo Login
    if (isset($_FILES['logo_login']) && !empty($_FILES['logo_login']['name'])) {
        $msg = $personalizacao->processFileUpload('logo_login', 'logo_login');
        if ($msg) $messages[] = $msg;
    }

    // Imagem Cabeçalho PDF
    if (isset($_FILES['imagem_cabecalho_pdf']) && !empty($_FILES['imagem_cabecalho_pdf']['name'])) {
        $msg = $personalizacao->processFileUpload('imagem_cabecalho_pdf', 'imagem_cabecalho_pdf');
        if ($msg) $messages[] = $msg;
    }

    // Imagem Rodapé PDF
    if (isset($_FILES['imagem_rodape_pdf']) && !empty($_FILES['imagem_rodape_pdf']['name'])) {
        $msg = $personalizacao->processFileUpload('imagem_rodape_pdf', 'imagem_rodape_pdf');
        if ($msg) $messages[] = $msg;
    }

    // Armazena as mensagens na sessão para exibição
    if (!empty($messages)) {
        $_SESSION['upload_messages'] = $messages;
    }

    // Redireciona para evitar reenvio do formulário
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

?>

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

<?php
$pageTitle = "Personalização"; // Definir o título da página aqui

include('../header.php'); ?>

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

<head>
    <link rel="icon" href="/mandareceita/pages/configuracoes/logo-sm.png">
    <link rel="shortcut icon" href="/mandareceita/pages/configuracoes/logo-sm.png">

</head>

<body>

    <!-- ============================================================== -->
    <!-- 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">Escolha como sera sua Personalização</h4>
                    </div>

                    <div class="col-12">
                        <?php
                        // Exibe mensagens de upload se existirem
                        if (isset($_SESSION['upload_messages']) && !empty($_SESSION['upload_messages'])) {
                            foreach ($_SESSION['upload_messages'] as $message) {
                                echo "<div class='alert alert-success alert-dismissible fade show' role='alert'>";
                                echo "<i class='mdi mdi-check-circle'></i> " . htmlspecialchars($message);
                                echo "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>";
                                echo "<span aria-hidden='true'>&times;</span>";
                                echo "</button>";
                                echo "</div>";
                            }
                            // Remove as mensagens da sessão após exibir
                            unset($_SESSION['upload_messages']);
                        }
                        ?>
                    </div>

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

                    <div class="col-12">
                        <form method="get" action="">
                            <div class="form-row mb-3">


                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-12">
                    <form method="post" enctype="multipart/form-data">
                        <div class="form-row mb-3">
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap">
                                <thead>
                                    <tr class="text-center">
                                        <th width="97">Logo cabeçalho</th>
                                    </tr>
                                    <tr class="text-center">
                                        <th>
                                            <input type="file" name="logo" id="logo" class="form-control" accept="image/jpeg, image/png, image/gif">
                                            <small class="form-text text-muted">Formatos aceitos: JPG, PNG, GIF (Máx. 30MB)</small>
                                            <small class="form-text text-info"><strong>Tamanho máximo: 470 x 196 pixels</strong></small>
                                            <div id="logoError" class="text-danger" style="display:none;">Por favor, selecione um arquivo de imagem válido (.jpg, .jpeg, .png, .gif).</div>
                                        </th>

                                    </tr>
                                </thead>
                            </table>

                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-plus"></i> Inserir Dados</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    <form method="post" enctype="multipart/form-data">
                        <div class="form-row mb-3">
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap">
                                <thead>
                                    <tr class="text-center">
                                        <th width="97">Logo Login</th>
                                    </tr>
                                    <tr class="text-center">
                                        <th>
                                            <input type="file" name="logo_login" id="logo_login" class="form-control" accept="image/jpeg, image/png, image/gif">
                                            <small class="form-text text-muted">Formatos aceitos: JPG, PNG, GIF (Máx. 30MB)</small>
                                            <small class="form-text text-info"><strong>Tamanho máximo: 808 x 784 pixels</strong></small>
                                            <div id="logoLoginError" class="text-danger" style="display:none;">Por favor, selecione um arquivo de imagem válido (.jpg, .jpeg, .png, .gif).</div>
                                        </th>

                                    </tr>
                                </thead>
                            </table>

                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-plus"></i> Inserir Dados</button>
                            </div>
                        </div>
                    </form>
                </div>


                <div class="col-12">
                    <form method="post" enctype="multipart/form-data">
                        <div class="form-row mb-3">
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap">
                                <thead>
                                    <tr class="text-center">
                                        <th width="97">Imagem Cabeçalho PDF</th>
                                    </tr>
                                    <tr class="text-center">
                                        <th>
                                            <input type="file" name="imagem_cabecalho_pdf" id="imagem_cabecalho_pdf" class="form-control" accept="image/jpeg, image/png, image/gif">
                                            <small class="form-text text-muted">Formatos aceitos: JPG, PNG, GIF (Máx. 30MB)</small>
                                            <small class="form-text text-info"><strong>Tamanho máximo: 800 x 200 pixels</strong></small>
                                            <div id="imagemCabecalhoError" class="text-danger" style="display:none;">Por favor, selecione um arquivo de imagem válido (.jpg, .jpeg, .png, .gif).</div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-plus"></i> Inserir Dados</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-12">
                    <form method="post" enctype="multipart/form-data">
                        <div class="form-row mb-3">
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap">
                                <thead>
                                    <tr class="text-center">
                                        <th width="97">Imagem Rodapé PDF</th>
                                    </tr>
                                    <tr class="text-center">
                                        <th>
                                            <input type="file" name="imagem_rodape_pdf" id="imagem_rodape_pdf" class="form-control" accept="image/jpeg, image/png, image/gif">
                                            <small class="form-text text-muted">Formatos aceitos: JPG, PNG, GIF (Máx. 30MB)</small>
                                            <small class="form-text text-info"><strong>Tamanho máximo: 800 x 150 pixels</strong></small>
                                            <div id="imagemRodapeError" class="text-danger" style="display:none;">Por favor, selecione um arquivo de imagem válido (.jpg, .jpeg, .png, .gif).</div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-plus"></i> Inserir Dados</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

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

    <script>
        // Função para validar a extensão, tamanho e dimensões do arquivo
        function validateFile(input, errorElementId, maxWidth, maxHeight) {
            const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
            const maxSize = 30 * 1024 * 1024; // 30MB
            const file = input.files[0];
            const fileError = document.getElementById(errorElementId);

            if (file) {
                // Verifica a extensão do arquivo
                const fileName = file.name;
                const fileExtension = fileName.split('.').pop().toLowerCase();

                if (!allowedExtensions.includes(fileExtension)) {
                    fileError.textContent = 'Formato de arquivo não suportado. Use JPG, PNG ou GIF.';
                    fileError.style.display = 'block';
                    fileError.className = 'text-danger';
                    input.value = '';
                    return false;
                }

                // Verifica o tamanho do arquivo
                if (file.size > maxSize) {
                    fileError.textContent = 'O arquivo é muito grande. O tamanho máximo permitido é 30MB.';
                    fileError.style.display = 'block';
                    fileError.className = 'text-danger';
                    input.value = '';
                    return false;
                }

                // Verifica as dimensões da imagem
                if (file.type.startsWith('image/')) {
                    const img = new Image();
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        img.onload = function() {
                            const width = img.width;
                            const height = img.height;

                            if (width > maxWidth || height > maxHeight) {
                                fileError.innerHTML = `
                                    <div class='alert alert-danger'>
                                        <strong>Dimensões inválidas:</strong> A imagem não pode ser maior que ${maxWidth}x${maxHeight} pixels.
                                        <br>A imagem atual tem ${width}x${height} pixels. Por favor, redimensione a imagem.
                                    </div>
                                `;
                                fileError.style.display = 'block';
                                fileError.className = 'text-danger';
                                input.value = '';
                                return false;
                            } else if (width < 1 || height < 1) {
                                fileError.innerHTML = `
                                    <div class='alert alert-danger'>
                                        <strong>Dimensões inválidas:</strong> A imagem deve ter pelo menos 1x1 pixel.
                                    </div>
                                `;
                                fileError.style.display = 'block';
                                fileError.className = 'text-danger';
                                input.value = '';
                                return false;
                            } else {
                                fileError.style.display = 'none';
                            }
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }

                return true;
            }

            return false;
        }

        // Adiciona os event listeners para cada campo de upload
        document.getElementById('logo').addEventListener('change', function() {
            validateFile(this, 'logoError', 470, 196); 
        });

        document.getElementById('logo_login').addEventListener('change', function() {
            validateFile(this, 'logoLoginError', 808, 784);
        });

        document.getElementById('imagem_cabecalho_pdf').addEventListener('change', function() {
            validateFile(this, 'imagemCabecalhoError', 800, 200);
        });

        document.getElementById('imagem_rodape_pdf').addEventListener('change', function() {
            validateFile(this, 'imagemRodapeError', 800, 150);
        });
    </script>

    <!-- Vendor js -->
    <script src="../../../assets/js/vendor.min.js"></script>
    <!-- App js-->
    <script src="../../../assets/js/app.min.js"></script>
    <script src="../geral/../javascript.js"></script>
    <!-- Mask,dt_table -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <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">
    <!-- Tab pene -->
    <script src="../../../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Remove status and message parameters from URL
            const url = new URL(window.location);
            url.searchParams.delete('status');
            url.searchParams.delete('message');
            window.history.replaceState({}, document.title, url);
        });

        function toggleMeta(id, newStatus) {
            // Remove a classe 'active' de ambos os links
            document.querySelectorAll('#toggle-nav-' + id + ' .nav-link').forEach(link => link.classList.remove('active'));

            // Adiciona a classe 'active' ao link selecionado
            document.querySelector('#toggle-nav-' + id + ' .nav-link[href="#"][onclick*="' + newStatus + '"]').classList.add('active');
            console.log(id)
            console.log(newStatus)
            // Chama o PHP para atualizar o status no banco de dados
            fetch('status.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: id,
                        status: newStatus
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("Status atualizado com sucesso");
                    } else {
                        console.error("Erro ao atualizar status:", data.message);
                    }
                })
                .catch(error => console.error('Erro:', error));
        }
    </script>

    <script>
        $(document).ready(function() {
            var table = $('#datatable-metricas').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                },
                "ordering": true,
                "responsive": true,
                "autoWidth": false,
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"]
                ],
                "dom": 'Bfrtip'
            });
        });
        $(document).ready(function() {
            var table = $('#datatable-resumo').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                },
                "ordering": true,
                "responsive": true,
                "autoWidth": false,
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"]
                ],
                "dom": 'Bfrtip'
            });
        });
    </script>
    <style>
        .bt {
            background-color: #e6e6e6;
            border-radius: 15px;
            padding: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 180px;
        }



        .nav-tabs {
            border: none;
            background-color: #e6e6e6;
            border-radius: 15px;
            padding: 5px;
        }

        .nav-tabs .nav-link {
            background-color: #bfbfbf;
            color: white;
            border: none;
            border-radius: 15px;
            margin: 0 5px;
            padding: 10px 20px;
            transition: background-color 0.3s, color 0.3s;
            text-align: center;
        }

        .nav-tabs .nav-link:hover {
            background-color: #d0d0d0;
            color: #000;
        }

        .nav-tabs .nav-link.active {
            background-color: #fff;
            /*background-color: #35B8E0;*/
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            color: #000;
            font-weight: bold;
        }
    </style>

</body>

</html>
