{% extends "base.html.twig" %}

{% block title %}
    Imagens/Anexos
{% endblock %}
{% block body %}
    <link rel="stylesheet" href="/css/styles-ccm-cabecalho.css">
    <link rel="stylesheet" href="/css/styles-ccm-images.css">
    {% set isDisabled = situation == 'CONCLUÍDO' or situation == 'CANCELADO' %}

    <nav aria-label="breadcrumb" class="hide-on-mobile">
        <ol class="breadcrumb">
            <li class="page-directory-previous breadcrumb-item">
				<a href="{{ path('ccm') }}">CCM</a>
			</li>
            <li aria-current="page" class="breadcrumb-item active">Editar</li>
        </ol>
    </nav>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="{{path('ccm_edit', {'id': id}) }}" >Cliente</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ path('ccm_info', {'id': id}) }}" >Informações</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ path('ccm_items', {'id': id}) }}" >Itens</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="{{ path('ccm_info', {'id': id}) }}" >Imagens/Anexos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ path('ccm_response', {'id': id}) }}" >Respostas</a>
        </li>
    </ul>
    <div class="box">
        <div class="title">
            <form id="image-form" action="{{path('ccm_images_post', {'id': id})}}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="{{ csrf_token('image_form') }}" />
                <table>
                    <div class="table-content">
                        <tr>
                            <td class="left-part">ID:</td>
                            <td class="right-part">{{id}}</td>
                        </tr>
                        <tr>
                            <td class="left-part">Cliente:</td>
                            <td class="right-part">{{name}}</td>
                        </tr>
                        <tr>
                            <td class="left-part">Situação:</td>
                            <td class="right-part-situation">
                                <span 
                                    class=" {%if situation is same as('PENDENTE')%}situation-red{%endif%}
                                    {%if situation is same as('PENDENTE CLIENTE')%}situation-blue{%endif%}
                                    {%if situation is same as('EM ABERTO')%}situation-yellow{%endif%}
                                    {%if situation is same as('CONCLUÍDO')%}situation-green{%endif%}
                                    {%if situation is same as('CANCELADO')%}situation-dark-yellow{%endif%}
                                    "
                                >
                                    {{situation}}
                                </span>
                            </td>
                        </tr>
                    </div>
                </table>

                <div class="upload-section">
                    <div class="file-insertion">
                        <p>Envie um arquivo</p>
                        <div class="file-insertion-2">
                            <input type="file" id="image-input" name="image" accept="image/*, .pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain" multiple {{ isDisabled ? 'disabled' : '' }}> 
                            <button class="button-sendFile" type="button" onclick="createTable()" {{isDisabled ? 'disabled' : ''}}> <span class="button-select-include-plus fas fa-plus"></span>Enviar Arquivo</button>
                        </div>
                        <div id="file-names"></div>
                    </div>
                    <div class="flash-message-container"></div>

                    <div id="image-table-container" style="display: none;">
                        <table id="image-table">
                            <thead>
                                <tr>
                                    <td class="image-subtitles-2 id">ID</td>
                                    <td class="image-subtitles">Arquivo</td>
                                    <td class="image-subtitles-2 visualize">Visualizar</td>
                                    <td class="image-subtitles-2 remove">Remover</td>
                                </tr>
                            </thead>
                            <tbody id="image-table-body"></tbody>
                        </table>
                    </div>

                    <div id="saved-images-container" class="file-insertion saved" style="display: none;">
                        <p>Arquivos Enviados</p>
                        <div class="file-insertion-2">
                            <table class="saved-images-table">
                                <thead>
                                    <tr>
                                        <td class="image-subtitles">Arquivo</td>
                                        <td class="image-subtitles-2">Visualizar</td>
                                        <td class="image-subtitles-2">Remover</td>
                                        <td class="image-subtitles-2">Envio</td>
                                    </tr>
                                </thead>
                                <tbody id="saved-images-body">
                                    {% for image in imageInfo %}
                                        <tr>
                                            <td class="saved-images-text center" title="{{ image.imageName }}">
                                                {% if image.imageName %}
                                                    {% if image.imageName|split('.')|last == 'pdf' %}
                                                        <embed src="{{ '/uploads/ccm/' ~ id ~ '/' ~ image.imageName }}" width="200" height="200" style="max-width: 500px;" data-file-name="{{ image.imageName }}">
                                                    {% else %}
                                                        {% if image.imageName|split('.')|last == 'xlsx' or image.imageName|split('.')|last == 'xls' %}
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="currentColor" class="bi bi-filetype-xlsx" viewBox="0 0 16 16">
                                                                <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM7.86 14.841a1.13 1.13 0 0 0 .401.823q.195.162.479.252.284.091.665.091.507 0 .858-.158.355-.158.54-.44a1.17 1.17 0 0 0 .187-.656q0-.336-.135-.56a1 1 0 0 0-.375-.357 2 2 0 0 0-.565-.21l-.621-.144a1 1 0 0 1-.405-.176.37.37 0 0 1-.143-.299q0-.234.184-.384.188-.152.513-.152.214 0 .37.068a.6.6 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.1 1.1 0 0 0-.199-.566 1.2 1.2 0 0 0-.5-.41 1.8 1.8 0 0 0-.78-.152q-.44 0-.777.15-.336.149-.527.421-.19.273-.19.639 0 .302.123.524t.351.367q.229.143.54.213l.618.144q.31.073.462.193a.39.39 0 0 1 .153.326.5.5 0 0 1-.085.29.56.56 0 0 1-.255.193q-.168.07-.413.07-.176 0-.32-.04a.8.8 0 0 1-.249-.115.58.58 0 0 1-.255-.384zm-3.726-2.909h.893l-1.274 2.007 1.254 1.992h-.908l-.85-1.415h-.035l-.853 1.415H1.5l1.24-2.016-1.228-1.983h.931l.832 1.438h.036zm1.923 3.325h1.697v.674H5.266v-3.999h.791zm7.636-3.325h.893l-1.274 2.007 1.254 1.992h-.908l-.85-1.415h-.035l-.853 1.415h-.861l1.24-2.016-1.228-1.983h.931l.832 1.438h.036z"/>
                                                            </svg>
                                                        {% elseif image.imageName|split('.')|last == 'txt' %}
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="currentColor" class="bi bi-filetype-txt" viewBox="0 0 16 16">
                                                                <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-2v-1h2a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.928 15.849v-3.337h1.136v-.662H0v.662h1.134v3.337zm4.689-3.999h-.894L4.9 13.289h-.035l-.832-1.439h-.932l1.228 1.983-1.24 2.016h.862l.853-1.415h.035l.85 1.415h.907l-1.253-1.992zm1.93.662v3.337h-.794v-3.337H6.619v-.662h3.064v.662H8.546Z"/>
                                                            </svg> 
                                                        {% else %}
                                                            <img src="{{ '/uploads/ccm/' ~ id ~ '/' ~ image.imageName }}" alt="{{ image.imageName }}" style="max-width: 500px; height: 200px;" data-file-name="{{ image.imageName }}">
                                                        {% endif %}
                                                    {% endif %}
                                                {% endif %}
                                            </td>
                                            <td class="image-subtitles-2">
                                                {% if image.imageName %}
                                                    {% if image.imageName|split('.')|last not in ['pdf', 'svg', 'png', 'jpg', 'jpeg'] %}
                                                        <a href="{{ '/uploads/ccm/' ~ id ~ '/' ~ image.imageName }}" download class="icon-link">
                                                            <i class="fas fa-search"></i>
                                                        </a>
                                                    {% else %}
                                                        <span class="magnifying-glass" onclick="openImageModal2('{{ image.imageName }}', '{{ image.imageName | split('.') | last in ['pdf'] }}')">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    {% endif %}
                                                {% endif %}
                                            </td>
                                            <td class="image-subtitles-2">
                                                {% if image.imageName %}
                                                    <button class="button-trash delete-button" data-file-id="{{ image.imageId }}" data-file-name="{{ image.imageName }}" {{isDisabled ? 'disabled' : ''}}>
                                                        <span class="button-product-list-x fas fa-times"></span>
                                                    </button>
                                                {% endif %}
                                            </td>
                                            <td class="saved-images-date">{{ image.createdAt }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="button-content">
                    <a class="button-info-ccm" href="#" onClick="goToCCM()">
                        <span class="c-pointer font-white fas fa-home"></span>
                        CCM
                    </a>
                    <a class="button-info-voltar" href="{{ path('ccm_items', {'id': id}) }}">
                        <i class="mr-1 fas fa-arrow-alt-circle-left"></i>
                        Voltar
                    </a>
                    <input type="submit" class="button-info-salvar" value="Salvar e Continuar" {{isDisabled ? 'disabled' : ''}}/>
                </div>
            </form>
        </div>
    </div>

    <div id="image-modal" class="modal">
        <span class="close" onclick="closeImageModal()">&times;</span>
        <img class="modal-content" id="modal-image">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        function goToCCM() {
            window.location.replace("{{ path('ccm') }}");
        }

        document.getElementById('image-input').addEventListener('change', function() {
            displayFileNames();
        });

        function displayFileNames() {
            const fileInput = document.getElementById('image-input');
            const fileNamesContainer = document.getElementById('file-names');
            const files = fileInput.files;
            fileNamesContainer.innerHTML = '';

            for (let i = 0; i < files.length; i++) {
                const fileName = files[i].name;
                const fileNameElement = document.createElement('span');
                fileNameElement.innerText = fileName + (i < files.length - 1 ? ', ' : '');
                fileNamesContainer.appendChild(fileNameElement);
            }
        }

        var imageInfo = {{ imageInfo | json_encode | raw}}

        document.addEventListener("DOMContentLoaded", function() {
            var savedImagesContainer = document.getElementById("saved-images-container");

            if (imageInfo.length > 0) {
                savedImagesContainer.style.display = "block";
            } else {
                savedImagesContainer.style.display = "none";
            }

            //Botão para a exclusão de um arquivo salvo no banco de dados
            const deleteButtons = document.querySelectorAll('.delete-button');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const fileId = button.dataset.fileId;
                    const fileName = button.dataset.fileName;
                    handleRemoveImage(this.parentNode.parentNode, fileId, fileName);
                    removeFromDatabase(fileId, fileName);

                });
            });
        })  

        const FilesDatabase = [];

        function createTable() {
            const fileInput = document.getElementById('image-input');
            const files = fileInput.files;

            // Verificar se há arquivos duplicados
            if (hasDuplicateFiles(files, FilesDatabase)) {
                $('.flash-message-container').html('<div class="alert alert-danger">' + 'Atenção! Este arquivo já foi adicionado.' + '</div>');
                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);
                return;
            }

            // Verificar duplicatas com os arquivos existentes no banco
            const duplicateFileName = hasDuplicateFilesWithDB(files, imageInfo);
            if (duplicateFileName) {
                $('.flash-message-container').html('<div class="alert alert-danger">' + 'Atenção! O arquivo ' + duplicateFileName + ' já foi enviado.' + '</div>');
                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);
                return;
            }

            if (files.length === 0) {
                $('.flash-message-container').html('<div class="alert alert-danger">' + 'Envie pelo menos um arquivo.' + '</div>');
                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);
                return;
            }

            const imageTableContainer = document.getElementById('image-table-container');
            imageTableContainer.style.display = 'block';

            const imageTableBody = document.getElementById('image-table-body');
            const lastRow = imageTableBody.rows[imageTableBody.rows.length - 1];

            let lastId = lastRow ? parseInt(lastRow.cells[0].innerText) : 0;

            // Tipos de arquivo permitidos
            const allowedFileTypes = [
                'image/jpeg', 
                'image/jpg', 
                'image/png',
                'image/svg+xml', 
                'application/pdf', 
                'application/vnd.ms-excel', 
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'text/plain'
                ]; 

            for (let i = 0; i < files.length; i++) {
                const id = ++lastId; 
                const file = files[i];
                const isImageTableContainerEmpty = imageTableBody.rows.length === 0;

                // Verificar o tipo de arquivo
                if (!allowedFileTypes.includes(file.type)) {
                    $('.flash-message-container').html('<div class="alert alert-danger">' + 'O tipo de arquivo ' + file.name + ' não é permitido. Tipos permitidos: JPEG, JPG, PNG, PDF, TXT, XLS, XLSX.' + '</div>');
                    
                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);

                    if(isImageTableContainerEmpty) {
                        imageTableContainer.style.display = 'none';
                    } else {
                        imageTableContainer.style.display = 'block';
                    }
                    continue; // Ignorar este arquivo e passar para o próximo
                }

                // Verificar o tamanho do arquivo (máximo de 2 MB)
                const maxSize = 2 * 1024 * 1024; // 2 MB em bytes
                if (file.size > maxSize) {
                    $('.flash-message-container').html('<div class="alert alert-danger">' + 'O tamanho do arquivo ' + file.name + ' excede o limite permitido de 2MB.' + '</div>');
                    
                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);

                    
                    if(isImageTableContainerEmpty) {
                        imageTableContainer.style.display = 'none';
                    } else {
                        imageTableContainer.style.display = 'block';
                    }
                    continue; // Ignorar este arquivo e passar para o próximo
                }

                const newRow = imageTableBody.insertRow();
                const cellId = newRow.insertCell(0);
                const cellFile = newRow.insertCell(1);
                const cellView = newRow.insertCell(2);
                const cellRemove = newRow.insertCell(3);

                cellId.classList.add('image-subtitles-2');
                cellId.innerText = id;

                if (file.type.includes('image')) {
                    const imgElement = document.createElement('img');
                    imgElement.src = URL.createObjectURL(file);
                    imgElement.onload = function() {
                        if (imgElement.width > 500) {
                            imgElement.classList.add('max-width-500');
                        }
                    };
                    imgElement.style.height = '200px';
                    imgElement.title = file.name;
                    cellFile.appendChild(imgElement);
                } else if (file.type === 'application/pdf') {
                    const embedElement = document.createElement('embed');
                    embedElement.src = URL.createObjectURL(file);
                    embedElement.width = '200';
                    embedElement.height = '200';
                    cellFile.appendChild(embedElement);
                } else if (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                    const xlsIcon = document.createElement('span');
                    xlsIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="currentColor" class="bi bi-filetype-xlsx" viewBox="0 0 16 16" title="${file.name}">
                        <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM7.86 14.841a1.13 1.13 0 0 0 .401.823q.195.162.479.252.284.091.665.091.507 0 .858-.158.355-.158.54-.44a1.17 1.17 0 0 0 .187-.656q0-.336-.135-.56a1 1 0 0 0-.375-.357 2 2 0 0 0-.565-.21l-.621-.144a1 1 0 0 1-.405-.176.37.37 0 0 1-.143-.299q0-.234.184-.384.188-.152.513-.152.214 0 .37.068a.6.6 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.1 1.1 0 0 0-.199-.566 1.2 1.2 0 0 0-.5-.41 1.8 1.8 0 0 0-.78-.152q-.44 0-.777.15-.336.149-.527.421-.19.273-.19.639 0 .302.123.524t.351.367q.229.143.54.213l.618.144q.31.073.462.193a.39.39 0 0 1 .153.326.5.5 0 0 1-.085.29.56.56 0 0 1-.255.193q-.168.07-.413.07-.176 0-.32-.04a.8.8 0 0 1-.249-.115.58.58 0 0 1-.255-.384zm-3.726-2.909h.893l-1.274 2.007 1.254 1.992h-.908l-.85-1.415h-.035l-.853 1.415H1.5l1.24-2.016-1.228-1.983h.931l.832 1.438h.036zm1.923 3.325h1.697v.674H5.266v-3.999h.791zm7.636-3.325h.893l-1.274 2.007 1.254 1.992h-.908l-.85-1.415h-.035l-.853 1.415h-.861l1.24-2.016-1.228-1.983h.931l.832 1.438h.036z"/>
                        </svg>`;
                    xlsIcon.title = file.name;
                    cellFile.appendChild(xlsIcon);
                } else if (file.type === 'text/plain') {
                    const txtIcon = document.createElement('span');
                    txtIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="currentColor" class="bi bi-filetype-txt" viewBox="0 0 16 16" title="${file.name}">
                        <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-2v-1h2a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.928 15.849v-3.337h1.136v-.662H0v.662h1.134v3.337zm4.689-3.999h-.894L4.9 13.289h-.035l-.832-1.439h-.932l1.228 1.983-1.24 2.016h.862l.853-1.415h.035l.85 1.415h.907l-1.253-1.992zm1.93.662v3.337h-.794v-3.337H6.619v-.662h3.064v.662H8.546Z"/>
                        </svg>`;
                    txtIcon.title = file.name;
                    cellFile.appendChild(txtIcon);
                }

                const viewSpan = document.createElement('span');
                viewSpan.classList.add('magnifying-glass');
                viewSpan.innerHTML = '<i class="fas fa-search"></i>';
                viewSpan.onclick = function () {
                    openImageModal(file);
                };
                cellView.appendChild(viewSpan);

                const removeButton = document.createElement('button');
                removeButton.classList.add('button-trash');
                removeButton.innerHTML = '<span class="button-product-list-x fas fa-times"></span>';
                removeButton.onclick = function () {
                    handleRemoveImage(newRow, id, file);
                };
                cellRemove.appendChild(removeButton);

                FilesDatabase.push(file);
            }

            // Limpar o input de arquivo para permitir a seleção de novos arquivos
            fileInput.value = '';

            // Exibir os nomes dos arquivos somente quando há arquivos na tabela
            displayFileNames();
        }

        function hasDuplicateFiles(newFiles, existingFiles) {
            const newFileNames = Array.from(newFiles).map(file => file.name);
            const existingFileNames = Array.from(existingFiles).map(file => file.name);

            // Verificar duplicatas entre novos arquivos
            if (newFileNames.some(name => existingFileNames.includes(name))) {
                return true;
            }
        }

        function hasDuplicateFilesWithDB(newFiles, existingFiles) {
            const newFileNames = Array.from(newFiles).map(file => file.name);
            const existingFileNames = existingFiles.map(imageInfo => imageInfo.imageName);

            // Verificar duplicatas entre novos arquivos e arquivos existentes no banco
            const duplicateFileName = newFileNames.find(name => existingFileNames.includes(name));

            return duplicateFileName;
        }

        function openImageModal(file) {
            if (file.type === 'application/pdf') {
                window.open(URL.createObjectURL(file));
            } else if (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'text/plain') {
                const downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(file);
                downloadLink.download = file.name;
                downloadLink.click();
            } else {
                const modal = document.getElementById('image-modal');
                const modalImage = document.getElementById('modal-image');
                modalImage.src = URL.createObjectURL(file);
                modal.style.display = 'block';
            }
        }

        function openImageModal2(fileName, isPdf = false) {
            const modal = document.getElementById('image-modal');
            const modalImage = document.getElementById('modal-image');

            if (isPdf) {
                window.open('{{ '/uploads/ccm/' ~ id ~ '/' }}' + fileName);
            } else {
                modalImage.src = '{{ '/uploads/ccm/' ~ id ~ '/' }}' + fileName;
                modal.style.display = 'block'; 
            }
        }

        function closeImageModal() {
            const modal = document.getElementById('image-modal');
            modal.style.display = 'none';
        }

        function handleRemoveImage(row, id, file) {
            row.remove();
            const imageTableBody = document.getElementById('image-table-body');

            const indexToRemove = FilesDatabase.indexOf(file);
            if (indexToRemove !== -1) {
                FilesDatabase.splice(indexToRemove, 1);
            }

            if (imageTableBody.rows.length === 0) {
                const imageTableContainer = document.getElementById('image-table-container');
                imageTableContainer.style.display = 'none';
            }
        }

        document.getElementById('image-form').addEventListener('submit', function (event) {
            event.preventDefault();
            sendImagesToServer(FilesDatabase);
        });

       function removeFromDatabase(fileId, fileName) {
            $.ajax({
                url: '{{ path('ccm_delete_image', {'id': id}) }}',
                type: 'POST',
                data: { fileId: fileId, fileName: fileName },
                success: function (response) {
                    const remainingImages = response.remainingImages;
                    updateImageInfo(remainingImages);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('Status da requisição: ' + textStatus);
                    console.log('Erro lançado: ' + errorThrown);
                    alert('Erro ao se comunicar com o servidor.');
                }
            });
        }

        $(document).ready(function() {
            function verificarImagens() {
                if ($('#saved-images-body').children().length === 0) {
                    $('#saved-images-container').hide();
                } else {
                    $('#saved-images-container').show();
                }
            }
            verificarImagens();

            $('.delete-button').click(function() {
                verificarImagens();
            });
        });

        function updateImageInfo(remainingImages) {
            imageInfo = remainingImages;
        }

        function sendImagesToServer(images) {
            const formData = new FormData();
            images.forEach((image, index) => {
                formData.append('image[]', image, image.name);
            });

            $.ajax({
                url: '{{ path('ccm_images_post', {'id': id}) }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                        var url = '{{ path("ccm_response", {"id": id })}}'
                        // Redireciona para a nova página
                        window.location.href = url;
                }
            });
        }

    </script>
    
{% endblock %}