@extends('admin.layouts.layout')
@section('content')
    @if (strtotime('now') < strtotime('01-09-2024 00:00:00'))
        <!-- Modal de URGENTE  -->
        <div class="modal fade" id="modalUrgente" tabindex="-1" aria-labelledby="modalUrgenteLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title text-danger" id="modalUrgenteLabel">URGENTE - Hoje {{ date('d/m/Y') }}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="text-center">
                            <h6 class="text-danger">É fundamental que a Transparência Municipal seja atualizada
                                IMEDIATAMENTE, conforme a recomendação do Tribunal de Contas do Estado da Paraíba.
                                <br>Essa ação é imprescindível para garantir a conformidade e a confiança da população em
                                nossa Gestão.
                                <br>Não deixe essa tarefa para depois! Para quaisquer dúvidas, estamos à disposição:
                            </h6>
                            <h1 class="text-primary">e-Municípios</h1>
                            <h5 class="text-danger"><i class="fa-solid fa-phone"></i> (83) 99966-3000
                                <h5 class="text-danger"><i class="fa-brands fa-whatsapp text-success"></i> <a
                                        href="https://wa.me/5583999663000" target="_blank">(83) 99966-3000</a></h5>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-block btn-primary" data-bs-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- Modal de Avisos -->
    <div class="modal fade" id="modalAvisos" tabindex="-1" aria-labelledby="modalAvisosLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="modalAvisosLabel">Notas de Versão - Versão:
                        {{ env('APP_VERSION') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <ul>
                        <h6 class="text-primary">01/01/2025</h6>
                        <li class="text-danger">Lançamento Oficial da Versão </li>
                        <small>Lançamento Oficial da Versão {{env('APP_VERSION')}}</small>
                        <hr>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-block btn-primary" data-bs-dismiss="modal">Fechar</button>
                </div>
                <div class="modal-footer">
                    <small id="countdown">Fechando em <span id="countdown-number">10</span> segundos.</small>
                </div>

            </div>
        </div>
    </div>
    <!-- Adicionar SweetAlert2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

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



    <script>
        document.getElementById('deleteButton').addEventListener('click', function() {
            Swal.fire({
                title: 'Você tem certeza?',
                text: "Essa ação não pode ser desfeita!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sim, deletar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('deleteForm').submit();
                }
            });
        });
    </script>
    <!-- Final das Manutenções do Sistema -->
    <div class="page-content">
        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        </div>
        <section class="row">
            <div class="col-12 col-lg-9">
                <div class="row">
                    <div class="col-6 col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon purple mb-2">
                                            <i class="fa-regular fa-newspaper"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Notícias</h6>
                                        <h6 class="font-extrabold mb-0">{{ $noticias->count() }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon blue mb-2">
                                            <i class="fa-solid fa-house-circle-check"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Secretarias</h6>
                                        <h6 class="font-extrabold mb-0">{{ $secretarias->count() }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon green mb-2">
                                            <i class="fa-regular fa-folder-open"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Arquivos</h6>
                                        <h6 class="font-extrabold mb-0">{{ $arquivos->count() }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon red mb-2">
                                            <i class="fa-solid fa-file-circle-check"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Protocolos</h6>
                                        <h6 class="font-extrabold mb-0">{{ $protocolos->count() }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="col-12 col-lg-3">
                <div class="card">
                    <div class="card-body px-4 py-4-5">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-xl">
                                <i class="fa-solid fa-3x fa-user text-primary"></i>
                            </div>
                            <div class="ms-3 name">
                                <h5 class="font-bold">{{ Auth::user()->name }}</h5>
                                <h6 class="text-muted mb-0">Administrador</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Últimas notícias</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Id</th>
                                    <th scope="col">Data</th>
                                    <th scope="col">Título</th>
                                    <th scope="col">Categoria</th>
                                    <th scope="col">Total Visualizações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($noticias->sortByDesc('id')->take(5) as $noticia)
                                    <tr>
                                        <th scope="row">{{ $noticia->id }}</th>
                                        <td>{{ date('d/m/Y', strtotime($noticia->data)) }}</td>
                                        <td>{{ $noticia->titulo }}</td>
                                        <td>{{ $noticia->id_categoria }}</td>
                                        <td>{{ $noticia->total_visualizacoes }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-8">
                    <div class="card">
                        <div class="card-header">
                            <h4>Últimas notícias</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="chartAbastVeiculos" width="1280" height="300"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card">
                        <div class="card-header">
                            <h4>Últimos Protocolos</h4>
                        </div>
                        <div class="card-body">

                        </div>
                    </div>
                </div>
            </div>

        </section>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var modal = new bootstrap.Modal(document.getElementById('modalAvisos'));
                modal.show();

                var countdownNumberEl = document.getElementById('countdown-number');
                var countdown = 10;

                function updateCountdown() {
                    countdown--;
                    countdownNumberEl.textContent = countdown;
                    if (countdown === 0) {
                        modal.hide();
                    } else {
                        setTimeout(updateCountdown, 1000); // Chama a função a cada segundo (1000 milissegundos)
                    }
                }
                setTimeout(updateCountdown, 1000); // Inicia a contagem regressiva
            });
            document.addEventListener('DOMContentLoaded', function() {
                var modal = new bootstrap.Modal(document.getElementById('modalUrgente'));
                modal.show();

                var countdownNumberEl = document.getElementById('countdown-number');
                var countdown = 10;


            });
        </script>
    @endsection