@extends('admin.layouts.layout')

@section('content')
    <div class="row match-height">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title text-primary">Arquivos ou Documentos</h4>
                    <p class="text-muted">Cadastro de Arquivos e Documentos no Sistema</p>
                    <a class="btn btn-outline-primary btn-block w-100" type="button" href="{{ route('arquivos.create') }}"
                        role="button">Novo arquivo</a>

                    <!-- Tabela de Arquivos -->
                    <form id="mergeDiarios" method="POST" action="{{ route('arquivos.merge-diarios') }}">
                        @csrf
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <!-- Cabeçalho da Tabela -->
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <input type="checkbox" id="select-all">
                                        </th>
                                        <th scope="col">Código</th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Publicação</th>
                                        <th scope="col">Título</th>
                                        <th scope="col">Nome</th>
                                        <th scope="col">Ações</th>
                                    </tr>
                                </thead>
                                <!-- Corpo da Tabela -->
                                <tbody>
                                    @foreach ($arquivos as $arquivo)
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="selected_files[]" value="{{ $arquivo->id }}"
                                                    class="file-checkbox">
                                            </td>
                                            <td>{{ $arquivo->id }}</td>
                                            <td>{{ date('d/m/Y', strtotime($arquivo->data)) }}</td>
                                            <td>{{ date('d/m/Y', strtotime($arquivo->publicacao)) }}</td>
                                            <td>{{ $arquivo->titulo }}</td>
                                            <td>{{ $arquivo->nome }}</td>
                                            <td>
                                                <!-- Link para visualizar o arquivo -->
                                                <a href="{{ asset('assets/site/uploads/' . $entidade->id_tce . '/dom/diario/' . $arquivo->nome) }}"
                                                    target="_blank" class="btn btn-sm btn-outline-success">Visualizar</a>

                                                <!-- Link para editar o arquivo -->
                                                <a href="{{ route('arquivos.edit', $arquivo->id) }}"
                                                    class="btn btn-sm btn-outline-primary">Editar</a>

                                                <!-- Formulário para excluir o arquivo -->
                                               

                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- Botão para abrir o modal -->
                        <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal"
                            data-bs-target="#mergeModal" id="generateButton" disabled>
                            Gerar Diário Oficial
                        </button>

                        <!-- Modal para Mesclar Arquivos -->
                        <!-- Modal para Mesclar Arquivos -->
                        <div class="modal fade" id="mergeModal" tabindex="-1" aria-labelledby="mergeModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="mergeModalLabel">Gerar Diário Oficial</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Formulário para Mesclar Arquivos -->
                                        <div class="mb-3">
                                            <label for="diario_edicao" class="form-label">Número da Edição</label>
                                            <input type="text" id="diario_edicao" name="diario_edicao"
                                                class="form-control" required placeholder="Informe a Edição" pattern="\d+"
                                                title="Somente números inteiros são permitidos">
                                        </div>
                                        <div class="mb-3">
                                            <label for="diario_date" class="form-label">Data</label>
                                            <input type="date" id="diario_date" name="diario_date" class="form-control"
                                                required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="descricao" class="form-label">Descrição</label>
                                            <input type="text" id="descricao" name="descricao" class="form-control"
                                                style="text-transform: uppercase;"
                                                oninput="removerCaracteresEspeciais(this)">
                                        </div>
                                        <script>
                                            function removerCaracteresEspeciais(element) {
                                                // Substitui caracteres especiais por suas versões sem acento
                                                let texto = element.value;

                                                // Remove caracteres com acento, ç, e outros caracteres especiais
                                                texto = texto.replace(/[áàãâäå]/g, 'a')
                                                    .replace(/[éèêë]/g, 'e')
                                                    .replace(/[íìîï]/g, 'i')
                                                    .replace(/[óòõôö]/g, 'o')
                                                    .replace(/[úùûü]/g, 'u')
                                                    .replace(/[ç]/g, 'c')
                                                    .replace(/[ÁÀÃÂÄÅ]/g, 'A')
                                                    .replace(/[ÉÈÊË]/g, 'E')
                                                    .replace(/[ÍÌÎÏ]/g, 'I')
                                                    .replace(/[ÓÒÕÔÖ]/g, 'O')
                                                    .replace(/[ÚÙÛÜ]/g, 'U')
                                                    .replace(/[ç]/g, 'c') // Remove qualquer outro caractere que não seja uma letra ou número
                                                    .replace(/[Ç]/g, 'C') // Remove qualquer outro caractere que não seja uma letra ou número

                                                // Atualiza o valor do campo
                                                element.value = texto.toUpperCase(); // Garante que o texto sempre será maiúsculo
                                            }
                                        </script>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-secondary w-100"
                                            data-bs-dismiss="modal">Cancelar</button>
                                        <!-- Remover o type="submit" aqui -->
                                        <button type="button" class="btn btn-outline-success w-100"
                                            id="submitGenerate">Gerar e Imprimir</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <script>
                            document.getElementById("submitGenerate").addEventListener("click", function() {
                                // Aqui você pode submeter o formulário de geração de diário, se necessário
                                document.getElementById("mergeDiarios").submit(); // Submete o formulário de mesclagem
                            });
                        </script>

                    </form>

                    {{ $arquivos->links() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Adicionando o SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Exibe a mensagem de sucesso usando SweetAlert2
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Sucesso!',
                text: '{{ session('success') }}',
                confirmButtonText: 'Fechar'
            });
        @endif

        // Selecionar/Deselecionar todos os checkboxes
        const selectAllCheckbox = document.getElementById('select-all');
        const fileCheckboxes = document.querySelectorAll('.file-checkbox');
        const generateButton = document.getElementById('generateButton');

        function toggleGenerateButton() {
            // Habilita o botão se algum checkbox estiver selecionado
            const isChecked = Array.from(fileCheckboxes).some(checkbox => checkbox.checked);
            generateButton.disabled = !isChecked;
        }

        // Listener para o "Select All"
        selectAllCheckbox.addEventListener('click', function() {
            fileCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            toggleGenerateButton();
        });

        // Listener para checkboxes individuais
        fileCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', toggleGenerateButton);
        });

        // Atualiza o botão inicialmente
        toggleGenerateButton();
    </script>
@endsection