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

{% block title %}
    Itens
{% endblock %}
{% block body %}
    <link rel="stylesheet" href="/css/styles-ccm-cabecalho.css">
    <link rel="stylesheet" href="/css/styles-ccm-items.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 active" 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" href="{{ path('ccm_response', {'id': id}) }}" >Respostas</a>
        </li>
    </ul>
    <div class="box">
        <div class="title">
            <form action="{{path('ccm_items_post', {'id': id})}}" method="post">
                <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="product-content">
                    <p>Escolha um Produto</p>
                    <div class="select-product-content">
                        <select name="product" id="product" {{isDisabled ? 'disabled' : ''}}>
                            <option value="" disabled selected hidden>Selecione um item...</option>
                        </select>
                        <select name="complaint" id="complaint" {{isDisabled ? 'disabled' : ''}}>
                            <option value="" disabled selected hidden>Selecione a Reclamação...</option>
                        </select>
                        <button class="button-select-include" {{isDisabled ? 'disabled' : ''}}>
                            <span class="button-select-include-plus new fas fa-plus"></span>
                            Inserir Produto
                        </button>
                    </div>
                </div>

                <!-- Botão de redicionamento para a página de inserção de novo produto -->
                <a href="{{ isDisabled ? '#' : path('ccm_index_product', {'id': id}) }}" 
                class="button-redirect {{ isDisabled ? 'disabled' : '' }}">
                    <span class="button-redirect-span"></span>
                    Criar/Editar Produto
                </a>

                <!-- Botão de redicionamento para a página de inserção de nova reclamação -->
                <a href="{{ isDisabled ? '#' : path('ccm_index_complaint', {'id': id}) }}" 
                class="button-redirect {{ isDisabled ? 'disabled' : '' }}">
                    <span class="button-redirect-span"></span>
                    Criar/Editar Reclamação
                </a>

                <div class="product-list">
                    <table>
                    </table>
                </div>

                <div id="saved-items-container" class="items-insertion saved" style="display: none">
                    <p>Itens Adicionados</p>
                    <div class="items-insertion-2">
                        <table class="saved-items-table">
                            <thead>
                                <tr>
                                    <td class="items-subtitles">Produto</td>
                                    <td class="items-subtitles">Reclamação</td>
                                    <td class="items-subtitles-2">Registrado em</td>
                                </tr>
                                {% for productComplaintInfo in productComplaintInfo %}
                                    <tr>
                                        <td class="saved-items-text">{{ productComplaintInfo.product_code }} - {{ productComplaintInfo.product_name }}</td>
                                        <td class="saved-items-text">{{ productComplaintInfo.complaint_code }} - {{ productComplaintInfo.complaint_name }}</td>
                                        <td class="saved-items-date">{{ productComplaintInfo.created_at }}</td>
                                    </tr>
                                {% endfor %}
                            </thead>
                            <tbody id="saved-items-body"></tbody>
                        </table>
                    </div>
                </div>

                <div class="flash-message-container">
                </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_info', {'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>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>

        //Redirecionando para a rota de home
        function goToCCM() {
            window.location.replace("{{ path('ccm') }}");
        }

        document.addEventListener("DOMContentLoaded", function() {
            var productComplaintInfo = {{ productComplaintInfo | json_encode | raw}}
            var savedItemsContainer = document.getElementById("saved-items-container");
            if (productComplaintInfo.length > 0) {
                savedItemsContainer.style.display = "block";
            } else {
                savedItemsContainer.style.display = "none";
            }
        })

        //Renderizando as opções de produtos e reclamações 
        var productList = {{ product_list|json_encode|raw}}
        var productSelect = document.getElementById('product')

        var complaintList = {{ complaint_list|json_encode|raw}}
        var complaintSelect = document.getElementById('complaint')

        var selectedProduct, selectedComplaint;

        //Adicionando as opções ao select
        productList.forEach(function(product) {
            var option = document.createElement('option');
            option.value = product.code;
            option.text = product.code + ' - ' + product.name;
            productSelect.add(option);
        })

        complaintList.forEach(function(complaint) {
            var option = document.createElement('option');
            option.value = complaint.code;
            option.text = complaint.code + ' - ' + complaint.name;
            complaintSelect.add(option);
        })

        //Capturando o select
        productSelect.addEventListener('change', function() {
            var productCodeSelected = productSelect.value;
            selectedProduct = productList.find(function(product) {
                return product.code === productCodeSelected
            })
        })

        complaintSelect.addEventListener('change', function() {
            var codeSelected = complaintSelect.value;
            selectedComplaint = complaintList.find(function(complaint) {
                return complaint.code === codeSelected;
            });
        });

        //Função para salvar os itens no banco de dados
        
        function saveItemsToDatabase(items) {
            //Realizar a chamada AJAX para o back-end
            $.ajax({
                type: 'POST',
                url: '{{ path('ccm_items_post', {'id': id}) }}',
                contentType: 'application/json',
                data: JSON.stringify({ items: items}),
                success: function(response) {
                    // Verifica se a resposta inclui a URL de redirecionamento
                    if (response.redirectUrl) {
                        // Redireciona para a nova página
                        window.location.href = response.redirectUrl;
                    }
                },
                error: function(error) {
                    var errorMessage = 'Selecione ao menos um produto e uma reclamação.';
                    $('.flash-message-container').html('<div class="alert alert-danger">' + errorMessage + '</div>');

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

                }
            });
        }

        $(document).ready(function() {
            $('.button-select-include').click(function(event) {
                event.preventDefault();
                
                // Obter os valores selecionados dos selects
                var productValue = $('select[name="product"]').val();
                var complaintValue = $('select[name="complaint"]').val();

                // Verificar se ambos os selects foram realmente selecionados
                if (productValue && complaintValue) {
                    // Adicionar uma nova linha à tabela
                    if ($('.product-list table tr.product-list-items').length === 0) {
                        // Se não houver nenhuma linha, adicionar os títulos da tabela
                        $('.product-list table').append('<tr class="product-list-title">'
                            + '<td class="product-list-title-left-id">ID</td>'
                            + '<td class="product-list-title-left-product">Produto</td>'
                            + '<td class="product-list-title-right-issue">Reclamação</td>'
                            + '<td class="product-list-title-right-delete">Remover</td>'
                            + '</tr>');
                    }

                    var newRow = '<tr class="product-list-items">';
                    newRow += '<td class="product-list-items-id">' + selectedProduct.code + '</td>';
                    newRow += '<td class="product-list-items-product">' + selectedProduct.name + '</td>';
                    newRow += '<td class="product-list-items-issue">' + selectedComplaint.code + ' - ' + selectedComplaint.name + '</td>';
                    newRow += '<td class="product-list-items-delete">';
                    newRow += '<button class="button-product-list">';
                    newRow += '<span class="button-product-list-x fas fa-times"></span>';
                    newRow += '</button>';
                    newRow += '</td>';
                    newRow += '</tr>';

                    $('.product-list table').append(newRow);

                    // Limpar os campos select após o envio
                    $('select[name="product"]').val('');
                    $('select[name="complaint"]').val('');
                }

                //Obter os itens da tabela
                itemsToSave = [];
                $('product-list table tr.product-list-items').each(function(){
                    var productCode = $(this).find('.product-list-items-id').text();
                    var complaintCode = $(this).find('.product-list-items-issue').text().split(' - ')[0];

                    itemsToSave.push({ product: {code: productCode}, complaint: {code: complaintCode} });
                });

            });

            // Adiciona um evento de clique para os botões de remoção
            $(document).on('click', '.button-product-list', function() {
                //Marcar a linha como removida
                $(this).closest('tr').addClass('removed');

                // Remover a linha da tabela
                $(this).closest('tr').remove();

                // Verificar se há mais linhas após a remoção
                if ($('.product-list table tr.product-list-items').length === 0) {
                    // Se não houver, oculta os títulos da tabela
                    $('.product-list table tr.product-list-title').remove();
                }
            });
        });

         $('.button-info-salvar').click(function(event) {
                event.preventDefault();

                var itemsToSave = []
                $('.product-list table tr.product-list-items:not(.removed)').each(function() {
                    var productCode = $(this).find('.product-list-items-id').text();
                    var complaintCode = $(this).find('.product-list-items-issue').text().split(' - ')[0];

                    var item = {product: {code: productCode}, complaint: {code: complaintCode}}
                    itemsToSave.push(item);
                })

                // Enviar dados para o back-end
                saveItemsToDatabase(itemsToSave);
            });

    </script>


{% endblock %}