@extends('layouts._admin.main')
@section('title', 'Painel de Análises e Estatísticas')
@section('content')

    <div class="nxl-content">
        <!-- [ page-header ] start -->
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">Dashboard</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item">Análises e Estatísticas</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex d-md-none">
                        <a href="javascript:void(0)" class="page-header-right-close-toggle">
                            <i class="feather-arrow-left me-2"></i>
                            <span>Back</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    </div>
                </div>
                <div class="d-md-none d-flex align-items-center">
                    <a href="javascript:void(0)" class="page-header-right-open-toggle">
                        <i class="feather-align-right fs-20"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- [ page-header ] end -->

        <!-- [ Main Content ] start -->
        <div class="main-content">
            <div class="row">

                <!-- [Mini Card] start -->
                <div class="col-12">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="hstack justify-content-between mb-4 pb-">
                                <div>
                                    <h5 class="mb-1">Relatório de Notícias</h5>
                                    <span class="fs-12 text-muted">Relatório de todas as notícias registrados</span>
                                </div>
                                <a href="{{ route('admin.news.index') }}" class="btn btn-light-brand">Ver Todos</a>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope fs-3 text-primary"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $totalNews ?? 'N/A' }}</div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Total Notícias</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope-plus fs-3 text-warning"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $pendentNews ?? 'N/A' }}
                                            </div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Notícias Arquivadas</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope-check fs-3 text-success"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $publishedNews ?? 'N/A' }}
                                            </div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Notícias Publicadas</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope-open fs-3 text-indigo"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $profileNews ?? 'N/A' }}
                                            </div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Perfil Inspirador</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope-heart fs-3 text-teal"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $projects ?? 'N/A' }}</div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Projectos Divulgados</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="card stretch stretch-full border border-dashed border-gray-5">
                                        <div class="card-body rounded-3 text-center">
                                            <i class="bi bi-envelope-slash fs-3 text-danger"></i>
                                            <div class="fs-4 fw-bolder text-dark mt-3 mb-1">{{ $detachNews ?? 'N/A' }}</div>
                                            <p class="fs-12 fw-medium text-muted text-spacing-1 mb-0 text-truncate-1-line">
                                                Notícias Destaque</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [Mini Card] end -->

                <!-- [Visitors Overview] start -->
                <div class="col-xxl-12">
                    <div class="card stretch stretch-full">
                        <div class="card-header">
                            <h5 class="card-title">Gráfico de Audiências</h5>
                            <div class="card-header-action">
                                <div class="card-header-btn">
                                    <div data-bs-toggle="tooltip" title="Collapse/Expand">
                                        <a href="#" class="avatar-text avatar-xs bg-gray-300"
                                            data-bs-toggle="collapse"> </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Delete">
                                        <a href="#" class="avatar-text avatar-xs bg-danger" data-bs-toggle="remove">
                                        </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Refresh">
                                        <a href="#" class="avatar-text avatar-xs bg-warning" data-bs-toggle="refresh">
                                        </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                        <a href="#" class="avatar-text avatar-xs bg-success" data-bs-toggle="expand">
                                        </a>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="#" class="avatar-text avatar-sm" data-bs-toggle="dropdown"
                                        data-bs-offset="25, 25">
                                        <div data-bs-toggle="tooltip" title="Options">
                                            <i class="feather-more-vertical"></i>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end">
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-at-sign"></i>New</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-calendar"></i>Event</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-bell"></i>Snoozed</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-trash-2"></i>Deleted</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-settings"></i>Settings</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-life-buoy"></i>Tips & Tricks</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body custom-card-action">
                            <div id="visitors-overview-statistics-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- [Visitors Overview] end -->

                {{-- Start Ranking de Notícias --}}
                {{-- <div class="col-xxl-4">
                    <div class="card stretch stretch-full">
                        <div class="card-header">
                            <h5 class="card-title">Ranking das Notícias</h5>
                            <div class="card-header-action">
                                <div class="card-header-btn">
                                    <div data-bs-toggle="tooltip" title="Collapse/Expand">
                                        <a href="#" class="avatar-text avatar-xs bg-gray-300"
                                            data-bs-toggle="collapse"> </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Delete">
                                        <a href="#" class="avatar-text avatar-xs bg-danger"
                                            data-bs-toggle="remove"> </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Refresh">
                                        <a href="#" class="avatar-text avatar-xs bg-warning"
                                            data-bs-toggle="refresh"> </a>
                                    </div>
                                    <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                        <a href="#" class="avatar-text avatar-xs bg-success"
                                            data-bs-toggle="expand"> </a>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="#" class="avatar-text avatar-sm" data-bs-toggle="dropdown"
                                        data-bs-offset="25, 25">
                                        <div data-bs-toggle="tooltip" title="Options">
                                            <i class="feather-more-vertical"></i>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end">
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-at-sign"></i>New</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-calendar"></i>Event</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-bell"></i>Snoozed</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-trash-2"></i>Deleted</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-settings"></i>Settings</a>
                                        <a href="javascript:void(0);" class="dropdown-item"><i
                                                class="feather-life-buoy"></i>Tips & Tricks</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body custom-card-action p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <tbody>
                                        @foreach ($newsRanking as $data)
                                            <tr>
                                                <td>
                                                    <a href="{{ route('admin.news.edit', ['news' => $data->id]) }}">
                                                        <i class="fa-brands fa-chrome fs-16 text-primary me-2"></i>
                                                        <span>{{ Str::limit($data->title, 10, '...') }}</span>
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="text-end d-flex align-items-center m-0">
                                                        <span class="me-3">{{ $data->views }}%</span>
                                                        <span class="progress w-100 ht-5">
                                                            <span class="progress-bar bg-success"
                                                                style="width: {{ $data->views }}%"></span>
                                                        </span>
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <a href="{{ route('admin.news.index') }}"
                            class="card-footer fs-11 fw-bold text-uppercase text-center">
                            Visualizar todas as notícias
                        </a>
                    </div>
                </div> --}}
                {{-- End Ranking de Notícias --}}

                <!-- [Mini Card] start -->
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body p-0">
                            <div class="d-flex justify-content-between p-4 mb-4">
                                <div>
                                    <div class="fw-bold mb-2 text-dark text-truncate-1-line">Notícias Políticas</div>
                                    <div class="fs-11 text-muted">Notícias sobre a política nacional</div>
                                </div>
                                <div class="text-end">
                                    <div class="fs-24 fw-bold mb-2 text-dark"><span
                                            class="counter">{{ $politicPercent ?? 0 }}</span>%</div>
                                    {{-- <div class="fs-11 text-success">(+ 22.85%)</div> --}}
                                </div>
                            </div>
                            <div id="bounce-rate"></div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body p-0">
                            <div class="d-flex justify-content-between p-4 mb-4">
                                <div>
                                    <div class="fw-bold mb-2 text-dark text-truncate-1-line">Notícias Sociais</div>
                                    <div class="fs-11 text-muted">Notícias sobre a sociedade</div>
                                </div>
                                <div class="text-end">
                                    <div class="fs-24 fw-bold mb-2 text-dark"><span
                                            class="counter">{{ $nationalPercent ?? 0 }}</span>%</div>
                                    {{-- <div class="fs-11 text-danger">(- 34.25%)</div> --}}
                                </div>
                            </div>
                            <div id="page-views"></div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body p-0">
                            <div class="d-flex justify-content-between p-4 mb-4">
                                <div>
                                    <div class="fw-bold mb-2 text-dark text-truncate-1-line">Tecnologias & Inovações</div>
                                    <div class="fs-11 text-muted">Notícias sobre tecnologias e inovações</div>
                                </div>
                                <div class="tx-right">
                                    <div class="fs-24 fw-bold mb-2 text-dark"><span
                                            class="counter">{{ $technologyPercent ?? 0 }}</span>%</div>
                                    {{-- <div class="fs-11 text-success">(+ 42.72%)</div> --}}
                                </div>
                            </div>
                            <div id="site-impressions"></div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body p-0">
                            <div class="d-flex justify-content-between p-4 mb-4">
                                <div>
                                    <div class="fw-bold mb-2 text-dark text-truncate-1-line">Economia</div>
                                    <div class="fs-11 text-muted">Notícias sobre economia</div>
                                </div>
                                <div class="tx-right">
                                    <div class="fs-24 fw-bold mb-2 text-dark"><span
                                            class="counter">{{ $economyPercent ?? 0 }}</span>%</div>
                                    {{-- <div class="fs-11 text-success">(+ 35.47%)</div> --}}
                                </div>
                            </div>
                            <div id="conversions-rate"></div>
                        </div>
                    </div>
                </div>

                @if ($filedNews->count() > 0)
                    <!-- [Notícias Arquivadas] start -->
                    <div class="col-xxl-6">
                        <div class="card stretch stretch-full">
                            <div class="card-header">
                                <h5 class="card-title">Notícias Arquivadas</h5>
                                <div class="card-header-action">
                                    <div class="card-header-btn">
                                        <div data-bs-toggle="tooltip" title="Delete">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-danger"
                                                data-bs-toggle="remove"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Refresh">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-warning"
                                                data-bs-toggle="refresh"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-success"
                                                data-bs-toggle="expand"> </a>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="javascript:void(0);" class="avatar-text avatar-sm"
                                            data-bs-toggle="dropdown" data-bs-offset="25, 25">
                                            <div data-bs-toggle="tooltip" title="Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-at-sign"></i>New</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-calendar"></i>Event</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-bell"></i>Snoozed</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-trash-2"></i>Deleted</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-settings"></i>Settings</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-life-buoy"></i>Tips & Tricks</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body custom-card-action p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th scope="col">Título</th>
                                                <th scope="col">Destaque</th>
                                                <th scope="col">Data</th>
                                                <th scope="col">Processo</th>
                                                <th scope="col" class="text-end">Ação</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($filedNews as $data)
                                                <tr>
                                                    <td>
                                                        <div class="hstack gap-2">
                                                            <span
                                                                class="wd-10 ht-10 bg-gray-400 rounded-circle d-inline-block me-2 lh-base"></span>
                                                            <div class="border-3 border-start rounded ps-3">
                                                                <a href="javascript:void(0);" class="mb-2 d-block">
                                                                    <span>{{ Str::limit($data->title, 50, '...') }}</span>
                                                                </a>
                                                                <p class="fs-12 text-muted mb-0">
                                                                    {{ Str::limit($data->subtitle, 70, '...') }}</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if ($data->detach == 'normal')
                                                            <span
                                                                class="badge bg-soft-primary text-primary">{{ $data->detach }}</span>
                                                        @elseif($data->detach == 'destaque')
                                                            <span
                                                                class="badge bg-soft-warning text-warning">{{ $data->detach }}</span>
                                                        @elseif($data->detach == 'urgente')
                                                            <span
                                                                class="badge bg-soft-danger text-danger">{{ $data->detach }}</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ date('d/m/Y H:i', strtotime($data->date)) }}
                                                    </td>
                                                    <td>
                                                        <div class="hstack gap-1">
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-warning rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-warning rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-gray-300 rounded-pill"></div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a href="javascript:void(0);"
                                                            class="avatar-text avatar-md ms-auto">
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a href="javascript:void(0);"
                                                            class="avatar-text avatar-md ms-auto">
                                                            <i class="feather-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="card-footer">
                                    <ul class="list-unstyled d-flex align-items-center gap-2 mb-0 pagination-common-style">
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-arrow-left"></i></a>
                                        </li>
                                        <li><a href="javascript:void(0);" class="active">1</a></li>
                                        <li><a href="javascript:void(0);">2</a></li>
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-dot"></i></a>
                                        </li>
                                        <li><a href="javascript:void(0);">8</a></li>
                                        <li><a href="javascript:void(0);">9</a></li>
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-arrow-right"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [Notícias Arquivadas] end -->
                @endif

                @if ($draftedNews->count() > 0)
                    <!-- [Notícias Rascunho] start -->
                    <div class="col-xxl-6">
                        <div class="card stretch stretch-full">
                            <div class="card-header">
                                <h5 class="card-title">Notícias Rascunho</h5>
                                <div class="card-header-action">
                                    <div class="card-header-btn">
                                        <div data-bs-toggle="tooltip" title="Delete">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-danger"
                                                data-bs-toggle="remove"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Refresh">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-warning"
                                                data-bs-toggle="refresh"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-success"
                                                data-bs-toggle="expand"> </a>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="javascript:void(0);" class="avatar-text avatar-sm"
                                            data-bs-toggle="dropdown" data-bs-offset="25, 25">
                                            <div data-bs-toggle="tooltip" title="Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-at-sign"></i>New</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-calendar"></i>Event</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-bell"></i>Snoozed</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-trash-2"></i>Deleted</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-settings"></i>Settings</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i
                                                    class="feather-life-buoy"></i>Tips & Tricks</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body custom-card-action p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th scope="col">Título</th>
                                                <th scope="col">Destaque</th>
                                                <th scope="col">Data</th>
                                                <th scope="col">Processo</th>
                                                <th scope="col" class="text-end">Ação</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach ($draftedNews as $data)
                                                <tr>
                                                    <td>
                                                        <div class="hstack gap-2">
                                                            <span
                                                                class="wd-10 ht-10 bg-gray-400 rounded-circle d-inline-block me-2 lh-base"></span>
                                                            <div class="border-3 border-start rounded ps-3">
                                                                <a href="javascript:void(0);" class="mb-2 d-block">
                                                                    <span>{{ Str::limit($data->title, 50, '...') }}</span>
                                                                </a>
                                                                <p class="fs-12 text-muted mb-0">
                                                                    {{ Str::limit($data->subtitle, 70, '...') }}</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if ($data->detach == 'normal')
                                                            <span
                                                                class="badge bg-soft-primary text-primary">{{ $data->detach }}</span>
                                                        @elseif($data->detach == 'destaque')
                                                            <span
                                                                class="badge bg-soft-warning text-warning">{{ $data->detach }}</span>
                                                        @elseif($data->detach == 'urgente')
                                                            <span
                                                                class="badge bg-soft-danger text-danger">{{ $data->detach }}</span>
                                                        @endif
                                                    </td>

                                                    <td>
                                                        {{ date('d/m/Y H:i', strtotime($data->date)) }}
                                                    </td>

                                                    <td>
                                                        <div class="hstack gap-1">
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-success rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-warning rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-warning rounded-pill opacity-75">
                                                            </div>
                                                            <div class="wd-15 ht-4 bg-gray-300 rounded-pill"></div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <a href="javascript:void(0);"
                                                            class="avatar-text avatar-md ms-auto">
                                                            <i class="feather-arrow-right"></i>
                                                        </a>
                                                        <a href="javascript:void(0);"
                                                            class="avatar-text avatar-md ms-auto">
                                                            <i class="feather-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="card-footer">
                                    <ul class="list-unstyled d-flex align-items-center gap-2 mb-0 pagination-common-style">
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-arrow-left"></i></a>
                                        </li>
                                        <li><a href="javascript:void(0);" class="active">1</a></li>
                                        <li><a href="javascript:void(0);">2</a></li>
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-dot"></i></a>
                                        </li>
                                        <li><a href="javascript:void(0);">8</a></li>
                                        <li><a href="javascript:void(0);">9</a></li>
                                        <li>
                                            <a href="javascript:void(0);"><i class="bi bi-arrow-right"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [Notícias Rascunho] end -->
                @endif
            </div>
        </div>
        <!-- [ Main Content ] end -->
    </div>
@endsection