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

{% block title %} 
    Adicionar Reclamação
{% endblock %}

{% block body %}
    <link rel="stylesheet" href="/css/styles-ccm-cabecalho.css">
    <link rel="stylesheet" href="/css/styles-ccm-new.css">
    <link rel="stylesheet" href="/css/styles-ccm-new-register.css">

    <div class="container-fluid box-no-bkg-color">
        <nav class="hide-on-mobile" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="page-directory-previous breadcrumb-item">
                    <a href="{{ path('ccm_index_complaint', {'id': id_index }) }}">Reclamações</a>
                </li>
                <li aria-current="page" class="page-directory breadcrumb-item active">Adicionar Reclamação</li>
            </ol>
        </nav>
        <div class="box">
            <div class="title">

                <form id="ccmForm" action="{{path('ccm_new_complaint')}}" method="post">
                    {# Inserir um Reclamação #}
                    <div class="row">
                        <div class="col-lg-7">
                            <h1 class="page-title">Adicionar Reclamação</h1>
                        </div>
                    </div>

                    <div class="primary-content">
                        <div class="first-line-cadastro">
                            <div class="input-container-CnpjNome">
                                <label>Código do Reclamação</label>
                                <input name="complaint_code" id="complaint_code"/>
                            </div>
                            <div class="input-container">
                                <label>Descrição do Reclamação</label>
                                <input name="complaint_description" id="complaint_description"/>
                            </div>
                        </div>                       
                    </div>

                    <div id="flash-messages-complaint"></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_index_complaint', {'id': id_index}) }}">
                            <i class="mr-1 fas fa-arrow-alt-circle-left"></i>
                            Voltar
                        </a>
                        <button type="submit" class="button-info-salvar">Salvar Reclamação</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function goToCCM() {
            window.location.replace("{{ path('ccm') }}");
        }

        document.addEventListener("DOMContentLoaded", function() {
            var formData = new FormData();

            var ccmForm = document.getElementById("ccmForm");
            ccmForm.addEventListener('submit', function(event) {
                event.preventDefault();

                formData.append('complaint_code', document.getElementById("complaint_code").value);
                formData.append('complaint_description', document.getElementById("complaint_description").value);

                fetch(ccmForm.action, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                        if (response.ok) {
                        return response.json()
                    }
                    throw new Error('Erro ao processar a solicitação.');
                })
                .then(data => {
                        displayFlashMessages(data);
                })
                .catch(error => {
                    console.error('Erro:', error);
                });
            });
        }) 

        function displayFlashMessages(data) {
            var flashContainerComplaint = document.getElementById('flash-messages-complaint');
            flashContainerComplaint.innerHTML = ''; 

            for (var key in data.flashMessages) {
                var messages = data.flashMessages[key];
                var hasSuccessMessages = key.includes('success');
                var alertClass;

                switch (true) {
                        case key.includes('error'):
                            alertClass = 'alert-danger';
                            setTimeout(function() {
                                flashContainerComplaint.innerHTML = '';
                            }, 3000);
                            break;
                        case key.includes('warning'):
                            alertClass = 'alert-warning';
                            setTimeout(function() {
                                flashContainerComplaint.innerHTML = '';
                            }, 3000);
                            break;
                        default:
                            alertClass = 'alert-success';
                    }

                var alertElement = document.createElement('div');
                alertElement.classList.add('alert', alertClass);
                alertElement.textContent = messages;
                flashContainerComplaint.appendChild(alertElement);

                if(hasSuccessMessages && data.redirectUrl) {
                    window.location.href = data.redirectUrl;
                }
            }
        } 
    </script>

{% endblock %}