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

{% block title %}
    Respostas
{% endblock %}
{% block body %}
    <link rel="stylesheet" href="/css/styles-ccm-cabecalho.css">
    <link rel="stylesheet" href="/css/styles-ccm-response.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" href="{{ path('ccm_images', {'id': id}) }}" >Imagens/Anexos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="{{ path('ccm_response', {'id': id}) }}" >Respostas</a>
        </li>
    </ul>
    <div class="box">
        <div class="title">
            <form action="{{path('ccm_response', {'id': id})}}" method="post">
                <table>
                    <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>
                </table>
                
                <div class="response-record">
                    <p for="response">Cadastre uma Resposta</p>
                    <div class="response-content">
                        <div class="input-wrapper">
                            <textarea id="response" name="response" maxlength="255" {{isDisabled ? 'disabled' : ''}}></textarea>
                            <div class="register-response">
                                <button type="submit" id="button-sendFile" class="button-sendFile" {{isDisabled ? 'disabled' : ''}}><span class="button-select-include-plus fas fa-plus"></span>Cadastrar Resposta</button>
                            </div>
                        </div>
                        <div class="content-right">
                            <div class="status-response">
                                <div class="label-row">
                                    <label>Status</label>
                                </div>
                                <div class="select-row">
                                    <select name="status" id="status-select" style="width: 100%" {{isDisabled ? 'disabled' : ''}}>
                                        <option value="PENDENTE" {%if situation is same as('PENDENTE')%}selected{%endif%}>PENDENTE</option>
                                        <option value="PENDENTE CLIENTE" {%if situation is same as('PENDENTE CLIENTE')%}selected{%endif%}>PENDENTE CLIENTE</option>
                                        <option value="EM ABERTO" {%if situation is same as('EM ABERTO')%}selected{%endif%}>EM ABERTO</option>
                                        <option value="CONCLUÍDO" {%if situation is same as('CONCLUÍDO')%}selected{%endif%}>CONCLUÍDO</option>
                                        <option value="CANCELADO" {%if situation is same as('CANCELADO')%}selected{%endif%}>CANCELADO</option>
                                    </select>
                                </div>
                            </div>
                            <div class="check-transfer">
                                <div class="select-row transfer">
                                    <button type="button" id="transferButton" class="checkbox-button" {{ isDisabled ? 'disabled' : '' }}></button>
                                    <div class="label-row">
                                        <label>Transferir</label>
                                    </div>
                                </div>
                                <div class="select-row">
                                    <select name="transfer" id="responsibleSelect" style="display: none;">
                                        <option value="" disabled selected hidden>Selecione um responsável...</option>
                                        {% for item in usersTqm %}
                                            <option value="{{ item.user_client_id }}">{{ item.user_client_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </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">Resposta</td>
                                <td class="image-subtitles-2 resp">Responsável</td>
                                <td class="image-subtitles-2 status">Status</td>
                                <td class="image-subtitles-2 date">Data/Hora</td>
                            </tr>
                        </thead>
                        <tbody id="image-table-body"></tbody>
                    </table>
                </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_images', {'id': id}) }}">
                        <i class="mr-1 fas fa-arrow-alt-circle-left"></i>
                        Voltar
                    </a>
                    <input type="submit" class="button-info-salvar" value="Salvar"/>
                </div>
            </form>
        </div>
    </div>

    <script>
        function goToCCM() {
            window.location.replace("{{ path('ccm') }}");
        }
    
        document.addEventListener("DOMContentLoaded", function () {
            const form = document.querySelector("form");
            const responseContainer = document.getElementById("image-table-body");
            const headerRow = document.getElementById("image-table-container");
            const responseInput = document.getElementById("response");
            const buttonSendFile = document.getElementById("button-sendFile");
            const responsibleSelect = document.getElementById("responsibleSelect");

            var responseContent = {{ responseContent | json_encode | raw }};

            function renderTableIfNotEmpty(responseList) {
                if (Array.isArray(responseList) && responseList.length > 0) {
                    responseList.sort((a, b) => b.id - a.id);
                    renderResponses(responseList);
                    headerRow.style.display = "table";
                }
            }

            renderTableIfNotEmpty(responseContent);

            document.getElementById("transferButton").addEventListener("click", function() {
                const responsibleSelect = document.getElementById("responsibleSelect");
                const checkboxButton = document.getElementById("transferButton");

                if (responsibleSelect.style.display === "none") {
                    responsibleSelect.style.display = "block";
                    checkboxButton.classList.add("checked");
                } else {
                    responsibleSelect.style.display = "none";
                    checkboxButton.classList.remove("checked");
                }
            });

            buttonSendFile.addEventListener("click", function (event) {
                event.preventDefault();

                const responseInput = document.getElementById("response");
                const transferSelect = document.getElementById("responsibleSelect");

                 if (transferSelect.style.display === "block" && transferSelect.value === "") {
                    const flashMessageContainer = document.querySelector(".flash-message-container");
                    flashMessageContainer.innerHTML = '<div class="alert alert-danger">Por favor, selecione um responsável antes de cadastrar a resposta.</div>';

                    setTimeout(function () {
                        flashMessageContainer.innerHTML = "";
                    }, 3000);
                    return;
                }

                if (!responseInput.value.trim()) {
                    $('.flash-message-container').html('<div class="alert alert-danger">' + 'Por favor, preencha o campo de resposta.' + '</div>');

                    setTimeout(function () {
                        $('.flash-message-container').empty();
                    }, 3000);
                    return;
                }

                const response = responseInput.value;
                const status = document.querySelector("select[name='status']").value;
                const responsible = {{ user_id | json_encode | raw }}

                let responseText = response;
                if (responsibleSelect.style.display === "block") {
                    const transferOption = document.querySelector("select[name='transfer']");
                    const transferText = transferOption.options[transferOption.selectedIndex].text;
                    responseText += ` [Transferido para: ${transferText}]`;
                }

                const formData = new FormData();
                formData.append('response', responseText);
                formData.append('status', status);
                formData.append('responsible', responsible);
                formData.append('transferId', responsibleSelect.value);

                fetch(form.action, {
                    method: "POST",
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data && data.success) {
                        responseContainer.innerHTML = ""
                        const responseList = data.responseData;

                        if (Array.isArray(responseList)) {
                            responseList.sort((a, b) => b.id - a.id);

                            responseList.forEach(responseData => {
                                const responseItem = document.createElement("tr");
                                responseItem.innerHTML = `
                                    <td name="response2" class="image-subtitles-3 ans">${responseData.responseText}</td>
                                    <td class="image-subtitles-3 resp">${responseData.responsible}</td>
                                    <td class="image-subtitles-3 status">${responseData.status}</td>
                                    <td class="image-subtitles-3 date">${responseData.createdAt}</td>
                                `;
                                responseContainer.appendChild(responseItem);
                            })
                        }

                        headerRow.style.display = "table";
                        responseInput.value = "";

                        const userId = data.userId
                        formData.append('userId', userId);

                        if (responsibleSelect.value) {
                            const enviarEmailUrl = `{{ path('ccm_response_notify', {"id": id }) }}`
                            fetch(enviarEmailUrl, {
                                method: "POST",
                                body: formData
                            })
                            .then(response => response.json())
                            .then(emailData => {
                                console.log('Email enviado com sucesso:', emailData);
                            })
                            .catch(error => {
                                console.error('Erro ao enviar email:', error);
                            });
                        }

                    } else {
                        console.error('Erro no servidor:', data.error);
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                });
            });
        });

        function renderResponses(responseList) {
            const responseContainer = document.getElementById("image-table-body");
            const headerRow = document.getElementById("image-table-container");

            responseList.forEach(responseData => {
                const responseItem = document.createElement("tr");
                responseItem.innerHTML = `
                    <td name="response2" class="image-subtitles-3 ans">${responseData.responseText}</td>
                    <td class="image-subtitles-3 resp">${responseData.responsible}</td>
                    <td class="image-subtitles-3 status">${responseData.status}</td>
                    <td class="image-subtitles-3 date">${responseData.createdAt}</td>
                `;
                responseContainer.appendChild(responseItem);
            });
        }

    </script>
    
{% endblock %}