<head>
    <link rel="stylesheet" href="/stylesheets/edital.css">
</head>

<main>
    <div id="content" , name="content" , class="container">
        <div class="row justify-content-center">
            <div class="box-bar">
                <div class="row row-cols-auto">
                    <p class="col-8">Filtrando por: <span><%- (filtro.order === "recentes"
                                                            || !filtro.order)
                                                            ? "Mais recentes" 
                                                            : "Mais antigos" %></span></p>
                    <button class="btn btn-filter" id="filter-btn">
                        <span class="col"><i class="bi bi-filter"></i> Filtrar</span>
                    </button>
                    <div class="filter-container hidden" id="filter">
                        <form enctype="application/x-www-form-urlencoded"
                        autocomplete="off">
                            <input type="hidden" name="b" value="<%= busca || "" %>">
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="filterOrder">Filtrar por:</label>
                                    <select name="flt" id="filterOrder">
                                        <option value="recentes">Mais recentes</option>
                                        <option value="antigos">Mais antigos</option>
                                    </select>
                                </div>
                            </div>
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="dataPrazo">Prazo de Inscrição:</label>
                                    <input type="date"name="dt" id="dataPrazo"
                                    value="<%= filtro.prazo || "" %>">
                                </div>
                            </div>
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="apoioTipo">Tipo de apoio:</label>
                                    <select name="ap" id="apoioTipo">
                                        <option value="" selected>Selecione uma opção</option>
                                        <option value="FINANCIAL">Financeiro</option>
                                        <option value="LOGISTIC">Logístico</option>
                                    </select>
                                </div>
                            </div>
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="categoriaArtistica">Categoria Artística:</label>
                                    <select name="cta" id="categoriaArtistica">
                                        <option value="" selected>Selecione uma opção</option>
                                        <option value="MUSIC">Música</option>
                                        <option value="THEATER">Teatro</option>
                                        <option value="DANCE">Dança</option>
                                        <option value="ARTS">Artes Visuais</option>
                                    </select>
                                </div>
                            </div>
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="valor-minimo">Financiamento mínimo:</label>
                                    <input type="text" name="vlrmn" id="valor-minimo"
                                    value="<%= filtro.valorMin || "" %>">
                                </div>
                            </div>
                            <div class="filter-row">
                                <div class="filter-item">
                                    <label for="valor-maximo">Financiamento máximo:</label>
                                    <input type="text" name="vlrmx" id="valor-maximo"
                                    value="<%= filtro.valorMax || "" %>">
                                </div>
                            </div>
                            <div class="filter-row" style="justify-content: flex-end;">
                                <button type="button" onclick="clearFilter()"
                                class="btn btn-danger" style="margin-right: .5rem;">Limpar</button>
                                <button type="submit" class="btn btn-success">Salvar</button>
                            </div>
                        </form>
                    </div>
                    <form class="d-flex col-3" role="search" id="buscar-edital"
                        enctype="application/x-www-form-urlencoded"
                        autocomplete="off">
                        <input class="form-control me-2" type="search" id="busca" name="b"
                            placeholder="Buscar por editais" aria-label="Search" id="busca-parametro" 
                            value="<%= busca || "" %>" />
                        <input type="hidden" name="flt" value="<%= filtro.order || "" %>">
                        <input type="hidden" name="dt" value="<%= filtro.prazo || "" %>">
                        <input type="hidden" name="ap" value="<%= filtro.apoio || "" %>">
                        <input type="hidden" name="cta" value="<%= filtro.categoria || "" %>">
                        <input type="hidden" name="vlrmn" value="<%= filtro.valorMin || "" %>">
                        <input type="hidden" name="vlrmx" value="<%= filtro.valorMax || "" %>">
                        <button class="btn btn-outline-success" type="submit">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="container-edital m-2">
                <div>
                    <ul class="list-group list-group-flush" id="editais">
                        <span class="list-group-item rounded-top" style="background-color: #64375e; color: white">
                        </span>
                        <li class="list-group-item list-group-item-secondary rounded-bottom" aria-current="true">
                            <h4>Editais publicados - <%= editais.length %> Resultado<%- (editais.length > 1) ? "s" : "" %></h4>
                        </li>
                        <% if (!editais.length) { %>
                            <li class="list-group-item">
                                <p>Nenhum edital encontrado</p>
                            </li>
                        <% } else { %>
                            <% editais.forEach((el, i)=> { %>
                                <ul class="list-group">
                                    <li class="list-group-item rounded  mt-2 notice-item shadow-sm"
                                        onclick="openNotice(Number('<%= i %>'))">
                                        <p href="#" class="link-underline link-underline-opacity-0 mb-0">
                                        <h4 class="text-light mb-0">Edital n° <%= el.id %> - <%= el.title %>
                                        </h4>
                                        </p>
                                        <p class="text-light" style="font-size: 16px;">
                                            <%= el.description %>
                                        </p>
                                    </li>
                                </ul>
                            <% }); %>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="editalOverlay" class="overlay hidden">
        <div class="overlay-content">
            <span class="close-btn" onclick="closeNotice()">&times;</span>
            <form>
                <div class="form-row" style="margin-top: 35px;">
                    <div class="form-item">
                        <label style="font-weight: bold" for="noticeTitle">Edital:</label>
                        <span id="noticeTitle"></span>
                        <hr>
                    </div>
                    <div class="form-item">
                        <label style="font-weight: bold" for="vaga">Categoria:</label>
                        <span id="artisticCategory"></span>
                        <hr>
                    </div>
                </div>
                <div class="furm p-2" style="width: 100%;">
                    <label for="subscriptionDeadline" style="font-weight: bold">Prazo de Inscrição:</label>
                    <span id="subscriptionDeadline"></span>
                </div>
                <hr>
                <div class="furm p-2">
                    <label for="description" style="font-weight: bold">Descrição:</label>
                    <span id="description"></span>
                    
                </div>
                <div class="form-row hidden" id="hidden">
                    <div class="furm p-2" style="width: 100%;">
                        <label for="processoInscricao" style="font-weight: bold">Processo de inscrição:</label>
                        <span id="processoInscricao"></span>
                    </div>
                    <div class="furm p-2" style="width: 100%;">
                        <label for="criteriosSelecao" style="font-weight: bold">Critérios de seleção:</label>
                        <span id="criteriosSelecao"></span>
                    </div>
                </div>
                <hr>
                <div style="display: flex; gap: 30px; align-items: center; margin-top: 2rem;">
                    
                    <button type="button" class="btn btn-danger shadow-lg"
                    style="background-color: #64375E; border: none">Inscrever</button>
                  
                    <button type="button" id="showMore" class="btn btn-danger shadow-lg"
                    style="background-color: #64375E; border: none">Mais informações</button>
                    <button type="button" class="btn btn-danger shadow-lg"
                    style="background-color: #64375E; border: none" id="favoritar" onclick="">Favoritar</button>
                </div>
                
            </form>
            <h4 id="editalTitle"></h4>
            <p id="editalDescription"></p>
                <div class="fb">
                    <a id="feedback" style="color: black; margin-left: 93%;"><i
                    class="bi bi-chat-right-text-fill"></i></a>
                </div>
        </div>
    </div>
</main>
<script>
    const cleanJson = '<%- JSON.stringify(editais) %>'.replace(/[\x00-\x1F\x7F-\x9F]/g, '\\n');
    const editais = JSON.parse(cleanJson);
    const filterDrops = [
        `<%= filtro.order || "recentes" %>`, 
        `<%= filtro.apoio || "" %>`, 
        `<%= filtro.categoria || "" %>`
    ];
</script>
<script src="/javascripts/notice.js"></script>