<article class="article-main">
    <div class="table-responsive mt-4">
        <table id="bulletinsTable" class="table">
            <tr>
                <th>Data de Publicação</th>
                <th>Mês</th>
                <th>Número</th>
                <th>Título</th>
                <th>Tipo de Edição</th>
                <th></th>
            </tr>
            @php
                            $index = 0;
                            @endphp
            @forelse($boletins as $boletim)
                <tr>
                    <td>{{ date("d/m/Y", strtotime($boletim->publicationDate))  }}</td>
                    <td>
                        @foreach(App\Enums\StatusMonth::cases() as $status)
                                    @if($status->name == $boletim->month)
                                {{ $status->value }}
                            @endif
                        @endforeach
                    </td>
                    <td>{{ $boletim->number }}</td>
                    <td>{{ $boletim->title }}</td>
                    <td>
                        @if($boletim->extraordinaryEdition)
                    Edição Extraordinária
                        @else
                    ---
                        @endif
                    </td>
                    <td class="d-flex flex-row justify-content-center align-items-center">

                        <a data-toggle="tooltip" data-placement="top" title="Ver Boletim" class="text-center text-secondary bg-white p-3 py-2 rounded-5 text-decoration-none d-inline fs-6 mx-2" href='{{ asset($boletim->url) }}' target="_blank"><i class="fa-solid fa-eye"></i>
                        <div class="bulletinsButton"> Visualizar </div>
                    </a>

                    <a download="Boletim {{ $boletim->number }} de {{ $boletim->publicationDate }}.pdf" data-toggle="tooltip" data-placement="top" title="Baixar arquivo de {{ $boletim->fileSizeKB }} KB" class="text-center text-secondary bg-white p-3 py-2 rounded-5 text-decoration-none d-inline fs-6 mx-2" href='{{ asset($boletim->url) }}' target="_blank"><i class="text-secondary fa-solid fa-download"></i>
                    <div class="bulletinsButton"> Download </div>
                </a>

            </td>
        </tr>
        @php
    $index++;
                            @endphp
    @empty
        <tr>
            <td colspan="5">
                <p>Nenhum boletim encontrado.</p>
            </td>
        </tr>
    @endforelse
</table>
</div>
<div id="hiddenPagination" class="row">
    <div class="col-12 my-3">
        <div class="d-flex justify-content-center">{!! $boletins->links() !!} </div>
    </div>
</div>
</article>

<script>
$(document).ready(function() {
    $(".pesquisarBoletim").submit(function(event) {
        event.preventDefault();

        $("html, body").animate({ scrollTop: 0 }, "fast");

        $("#hiddenPagination").addClass("d-none");

        var preload = `
            <tr>
                <th>Data de Publicação</th>
                <th>Mês</th>
                <th>Número</th>
                <th>Tipo de Edição</th>
                <th></th>
            </tr>
            <tr>
                <td colspan="5" class="text-center">
                    <div>
                        <span class="spinner-grow text-primary" role="status"></span>
                        <span class="spinner-grow text-secondary" role="status"></span>
                        <span class="spinner-grow text-success" role="status"></span>
                        <span class="spinner-grow text-danger" role="status"></span>
                        <span class="spinner-grow text-warning" role="status"></span>
                        <span class="d-block mt-2">Carregando, aguarde...</span>
                    </div>
                </td>
            </tr>
        `;

        $("#bulletinsTable").html(preload);

        var form = $(this);
        var formData = form.serialize();

        $.ajax({
            url: form.attr("action"),
            type: "POST",
            data: formData,
            dataType: "html",
            success: function(response) {
                $("#getResultAjaxHTML").html(response);
            },
            error: function(xhr, status, error) {
                console.error("Erro na busca:", error);
                alert("Ocorreu um erro ao buscar os boletins. Tente novamente.");
            }
        });
    });

    $(document).on("click", ".pagination a", function(event) {
        event.preventDefault();

        $("#backToTop").trigger("click");

        $("#hiddenPagination").addClass("d-none");
        
        var preload = `
            <tr>
                <th>Data de Publicação</th>
                <th>Mês</th>
                <th>Número</th>
                <th>Tipo de Edição</th>
                <th></th>
            </tr>
            <tr>
                <td colspan="5" class="text-center">
                    <div>
                        <span class="spinner-grow text-primary" role="status"></span>
                        <span class="spinner-grow text-secondary" role="status"></span>
                        <span class="spinner-grow text-success" role="status"></span>
                        <span class="spinner-grow text-danger" role="status"></span>
                        <span class="spinner-grow text-warning" role="status"></span>
                        <span class="d-block mt-2">Carregando, aguarde...</span>
                    </div>
                </td>
            </tr>
        `;

        $("#bulletinsTable").html(preload);

        var page = $(this).attr("href").split("page=")[1];
        var form = $(".pesquisarBoletim");
        var formData = form.serialize() + "&page=" + page;

        $.ajax({
            url: form.attr("action"),
            type: "POST",
            data: formData,
            dataType: "html",
            success: function(response) {
                $("#getResultAjaxHTML").html(response);
            },
            error: function(xhr, status, error) {
                console.error("Erro na paginação:", error);
                alert("Ocorreu um erro ao carregar a página. Tente novamente.");
            }
        });
    });
});
</script>