@extends('layouts.master')
@section('title')
    Painel Admin
@endsection
@section('css')
    <!-- jsvectormap css -->
    <link href="{{ URL::asset('build/libs/jsvectormap/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- gridjs css -->
    <link rel="stylesheet" href="{{ URL::asset('build/libs/gridjs/theme/mermaid.min.css') }}">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Dashboards
        @endslot
        @slot('title')
            Dashboard Tud Kabir
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-xl-6">
            <div class="d-flex flex-column h-100">
                <div class="row">
                    <div class="col-xl-6 col-md-6">
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                    height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Produtos</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalProdutos }}">{{ $totalProdutos }}</span>
                                        </h4>
                                        <p class="text-muted mb-0">
                                            <span class="badge bg-light text-success mb-0">
                                                +{{ number_format($percentagemProdutos, 2) }}% 
                                            </span> desde o mês passado
                                        </p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="total_jobs" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div><!-- end card -->
                    </div>
                    <!--end col-->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                    height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Serviços</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalServicos }}">{{ $totalServicos }}</span>
                                        </h4>
                                        <p class="text-muted mb-0">
                                            <span class="badge bg-light text-success mb-0">
                                                +{{ number_format($percentagemServicos, 2) }}% 
                                            </span> desde o mês passado
                                        </p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="apply_jobs" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                    height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1 ;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Informais</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalInformais }}">{{ $totalInformais }}</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="new_jobs_chart" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" width="200"
                                    height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Formais</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalFormais }}">{{ $totalFormais }}</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="interview_chart" data-colors='["--vz-danger"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                    <div class="col-xl-6 col-md-6">
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120"
                                    width="200" height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Usuários</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalUsuarios }}">{{ $totalUsuarios }}</span>
                                        </h4>
                                    </div>
                                    
                                    <div class="flex-shrink-0">
                                        <div id="hired_chart" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div><!-- end card body -->
                            
                        </div><!-- end card -->
                    </div>
                    <!--end col-->
                    <div class="col-xl-6 col-md-6">
                        <!-- card -->
                        <div class="card card-animate overflow-hidden">
                            <div class="position-absolute start-0" style="z-index: 0;">
                                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120"
                                    width="200" height="120">
                                    <style>
                                        .s0 {
                                            opacity: .05;
                                            fill: var(--vz-secondary)
                                        }
                                    </style>
                                    <path id="Shape 8" class="s0"
                                        d="m189.5-25.8c0 0 20.1 46.2-26.7 71.4 0 0-60 15.4-62.3 65.3-2.2 49.8-50.6 59.3-57.8 61.5-7.2 2.3-60.8 0-60.8 0l-11.9-199.4z" />
                                </svg>
                            </div>
                            <div class="card-body" style="z-index:1;">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total de Categorias</p>
                                        <h4 class="fs-22 fw-bold ff-secondary mb-0">
                                            <span class="counter-value" data-target="{{ $totalCategorias }}">{{ $totalCategorias }}</span>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div id="rejected_chart" data-colors='["--vz-danger"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                </div>
                <!--end row-->
            </div>
        </div>
        <!--end col-->
        <div class="col-xl-6">
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Empresas em destaque</h4>
                    <div class="flex-shrink-0">
                        <a href="#!" class="btn btn-soft-primary btn-sm">Ver todas as empresas <i
                                class="ri-arrow-right-line align-bottom"></i></a>
                    </div>
                </div><!-- end card header -->

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table class="table table-centered table-hover align-middle table-nowrap mb-0">
                            <tbody>
                                @foreach ($empresasFormais as $empresa)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-xs me-2 flex-shrink-0">
                                                    <div class="avatar-title bg-secondary-subtle rounded">
                                                        
                                                        <img src="{{ $empresa->user->profile_image }}" alt="Imagem da Empresa" height="40">

                                                     </div>
                                                </div>
                                                <h6 class="mb-0">{{ $empresa->name }}</h6> <!-- Nome da empresa -->
                                            </div>
                                        </td>
                                        <td>
                                            <i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> {{ $empresa->location }}
                                        </td>
                                        <td>
                                            <ul class="list-inline mb-0">
                                                <li class="list-inline-item">
                                                    <a href="{{ $empresa->facebook }}" class="link-secondary"><i class="ri-facebook-fill"></i></a>
                                                </li>
                                                <li class="list-inline-item">
                                                    <a href="mailto:{{ $empresa->email }}" class="link-danger"><i class="ri-mail-line"></i></a>
                                                </li>
                                                <li class="list-inline-item">
                                                    <a href="{{ $empresa->website }}" class="link-primary"><i class="ri-global-line"></i></a>
                                                </li>
                                                <li class="list-inline-item">
                                                    <a href="{{ $empresa->twitter }}" class="link-info"><i class="ri-twitter-line"></i></a>
                                                </li>
                                            </ul>
                                        </td>
                                        <td>
                                            <a href="#!" class="btn btn-link btn-sm">View More <i class="ri-arrow-right-line align-bottom"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        
                    </div>
                    <div class="align-items-center mt-4 pt-2 justify-content-between d-flex">
                        <div class="flex-shrink-0">
                            <div class="text-muted">
                                Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">25</span> Results
                            </div>
                        </div>
                        <ul class="pagination pagination-separated pagination-sm mb-0">
                            <li class="page-item disabled">
                                <a href="#" class="page-link">←</a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link">1</a>
                            </li>
                            <li class="page-item active">
                                <a href="#" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link">3</a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link">→</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div> <!-- .card-->
        </div>
        <!--end col-->
    </div>
    <!--end row-->

    <div class="row">
        <div class="col-xxl-8">
            <div class="card card-height-100">
                <!--div class="card-header border-0 align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Applications Statistic</h4>
                    <div>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            ALL
                        </button>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            1M
                        </button>
                        <button type="button" class="btn btn-soft-secondary btn-sm">
                            6M
                        </button>
                        <button type="button" class="btn btn-soft-primary btn-sm">
                            1Y
                        </button>
                    </div>
                </div!--><!-- end card header -->

                <!--div class="card-header p-0 border-0 bg-light-subtle">
                    <div class="row g-0 text-center">
                        <div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1"><span class="counter-value" data-target="3364">0</span></h5>
                                <p class="text-muted mb-0">New Applications</p>
                            </div>
                        </div!-->
                        <!--end col-->
                        <!--div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1"><span class="counter-value" data-target="2804">0</span></h5>
                                <p class="text-muted mb-0">Interview</p>
                            </div>
                        </div!-->
                        <!--end col-->
                        <!--div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0">
                                <h5 class="mb-1"><span class="counter-value" data-target="2402">0</span></h5>
                                <p class="text-muted mb-0">Hired</p>
                            </div>
                        </div!-->
                        <!--end col-->
                        <!--div class="col-6 col-sm-3">
                            <div class="p-3 border border-dashed border-start-0 border-end-0">
                                <h5 class="mb-1 text-success"><span class="counter-value" data-target="8">0</span>k</h5>
                                <p class="text-muted mb-0">Total Applications</p>
                            </div>
                        </div!-->
                        <!--end col-->
                    </div>
                </div--><!-- end card header -->

                <!--div class="card-body p-0 pb-2">
                    <div class="w-100">
                        <div id="line_chart_dashed" data-colors='["--vz-success", "--vz-secondary", "--vz-primary"]'
                            class="apex-charts" dir="ltr"></div>
                    </div>
                </div!--><!-- end card body -->
            </div><!-- end card -->
        </div!--><!-- end col -->
        <div class="col-xxl-4">
            <!--div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <h6 class="card-title mb-0 flex-grow-1">Popular Candidates</h6>
                        <div class="flex-shrink-0">
                            <a href="apps-job-candidate-lists" class="link-primary">View All <i
                                    class="ri-arrow-right-line"></i></a>
                        </div>
                    </div>
                </div>
                <div class="row g-0">
                    <div class="col-lg-6">
                        <div class="card-body border-end">
                            <div class="search-box">
                                <input type="text" class="form-control bg-light border-light" autocomplete="off"
                                    id="searchList" placeholder="Search candidate...">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                            <div data-simplebar style="max-height: 190px" class="px-3 mx-n3">
                                <ul class="list-unstyled mb-0 pt-2" id="candidate-list">
                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-10.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Tonya
                                                        Noble</span> <span class="text-muted fw-normal">@tonya</span></h5>
                                                <div class="d-none candidate-position">Web Developer</div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-1.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Nicholas
                                                        Ball</span> <span class="text-muted fw-normal">@nicholas</span>
                                                </h5>
                                                <div class="d-none candidate-position">Assistant / Store Keeper</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-9.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Zynthia
                                                        Marrow</span> <span class="text-muted fw-normal">@zynthia</span>
                                                </h5>
                                                <div class="d-none candidate-position">Full Stack Engineer</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-2.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Cheryl
                                                        Moore</span> <span class="text-muted fw-normal">@Cheryl</span></h5>
                                                <div class="d-none candidate-position">Product Designer</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-5.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Jennifer
                                                        Bailey</span> <span class="text-muted fw-normal">@Jennifer</span>
                                                </h5>
                                                <div class="d-none candidate-position">Marketing Director</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" class="d-flex align-items-center py-2">
                                            <div class="flex-shrink-0 me-2">
                                                <div class="avatar-xs">
                                                    <img src="{{ URL::asset('build/images/users/avatar-8.jpg') }}"
                                                        alt="" class="img-fluid rounded-circle candidate-img">
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 class="fs-13 mb-1 text-truncate"><span class="candidate-name">Hadley
                                                        Leonard</span> <span class="text-muted fw-normal">@hadley</span>
                                                </h5>
                                                <div class="d-none candidate-position">Executive, HR Operations</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card-body text-center">
                            <div class="avatar-md mb-3 mx-auto">
                                <img src="{{ URL::asset('build/images/users/avatar-10.jpg') }}" alt=""
                                    id="candidate-img" class="img-thumbnail rounded-circle shadow-none">
                            </div>

                            <h5 id="candidate-name" class="mb-0">Tonya Noble</h5>
                            <p id="candidate-position" class="text-muted">Web Developer</p>

                            <div class="d-flex gap-2 justify-content-center mb-3">
                                <button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Google">
                                    <span class="avatar-title rounded-circle bg-light text-body">
                                        <i class="ri-google-line"></i>
                                    </span>
                                </button>

                                <button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Linkedin">
                                    <span class="avatar-title rounded-circle bg-light text-body">
                                        <i class="ri-linkedin-line"></i>
                                    </span>
                                </button>
                                <button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Dribbble">
                                    <span class="avatar-title rounded-circle bg-light text-body">
                                        <i class="ri-dribbble-fill"></i>
                                    </span>
                                </button>
                            </div>

                            <div>
                                <button type="button" class="btn btn-success custom-toggle w-100"
                                    data-bs-toggle="button" aria-pressed="false">
                                    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
                                    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i>
                                        Unfollow</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div-->
            <!-- end card -->
            <!--div class="card overflow-hidden shadow-none">
                <div class="card-body bg-danger-subtle">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-danger-subtle text-danger rounded-circle fs-17">
                                    <i class="ri-gift-line"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fs-16">Invite your friends to Velzon</h6>
                            <p class="text-muted mb-0">Nor again is there anyone who loves or pursues or desires to obtain
                                pain of itself, because it is pain, but because occasionally.</p>
                        </div>
                    </div>
                    <div class="mt-3 text-end">
                        <a href="#!" class="btn btn-danger">Invite Friends</a>
                    </div>
                </div>
            </div-->
        </div><!-- end col -->
    </div>
    <!--end row-->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row g-4 align-items-center">
                        <div class="col-sm-auto">
                            <h4 class="card-title mb-0">Registros de Logs</h4>
                        </div>
                        <div class="col-sm">
                            <div class="d-flex justify-content-sm-end">
                                <div class="search-box ms-2">
                                    <input type="text" class="form-control" id="searchLogs"
                                        placeholder="Pesquisar logs...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="log-details" class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Usuário</th>
                                    <th>Evento</th>
                                    <th>Origem</th>
                                    <th>IP</th>
                                    <th>Mensagem</th>
                                </tr>
                            </thead>
                            <tbody id="logTable">
                                @foreach($logs as $log)
                                <tr>
                                    <td><a href="#" class="text-primary">#{{ $log->id }}</a></td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="ms-2">{{ $log->user ? $log->user->name : 'N/A' }}</span>
                                        </div>
                                    </td>
                                    <td>{{ ucfirst($log->event_type) }}</td>
                                    <td>{{ ucfirst($log->source) }}</td>
                                    <td>{{ $log->ip_address }}</td>
                                    <td>{{ Str::limit($log->message, 50) }}</td> <!-- Limita tamanho da mensagem -->
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
    
                    <!-- Paginação -->
                    <div class="d-flex justify-content-center mt-3">
                        {{ $logs->links('pagination::bootstrap-5') }}
                    </div>
                    
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById("searchLogs").addEventListener("keyup", function() {
            let searchValue = this.value.toLowerCase();
            let tableRows = document.querySelectorAll("#logTable tr");
    
            tableRows.forEach(row => {
                let rowText = row.innerText.toLowerCase();
                row.style.display = rowText.includes(searchValue) ? "" : "none";
            });
        });
    </script>
    
    <!--end row-->

    <div class="row">
        <div class="col-xxl-8">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Usuários Recentes</h4>
                    <a href="{{ route('generate.report') }}" class="btn btn-soft-info btn-sm">
                        <i class="ri-file-list-3-line align-bottom"></i> Gerar relatório
                    </a>
                    
                    
                    
                </div><!-- end card header -->
            
                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                            <thead class="text-muted table-light">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Imagem</th>
                                    <th scope="col">Nome</th>
                                    <th scope="col">Tipo</th>
                                    <th scope="col">Telefone</th>
                                    <th scope="col">Criado </th>
                                    <th scope="col">Status </th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usuariosRecentes as $user)
                                    <tr>
                                        <td><a href="#!" class="fw-medium link-primary">{{ $user->id }}</a></td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    @php
                                                        $userAvatar = $user->avatar 
                                                            ? (Str::startsWith($user->avatar, ['http://', 'https://']) 
                                                                ? $user->avatar 
                                                                : asset('storage/users/' . $user->avatar)) 
                                                            : asset('images/default-avatar.png'); // caminho da imagem default
                                                    @endphp
                                            
                                                    <img src="{{ $userAvatar }}" alt="Avatar do usuário" class="avatar-xs rounded-circle" />
                                                </div>
                                            </div>
                                            
                                        </td>
                                        <td>{{ $user->name  }}</td>

                                        <td>{{ $user->userType->name ?? 'Sem Tipo' }}</td>
                                        <td>{{ $user->phone  }}</td>
                                        <td>{{ $user->created_at->format('d/m/Y') }}</td>
                                        <td>{{ $user->status  }}</td>

                                    </tr>
                                @endforeach
                            </tbody>
                            
                        </table>
                    </div>
                </div>
            </div> <!-- .card-->
            
        </div> <!-- .col-->
        <div class="col-xxl-4">
            <!-- card -->
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Paises a usar</h4>
                    <div class="flex-shrink-0">
                        <button type="button" class="btn btn-soft-primary btn-sm">
                            Exportar 
                        </button>
                    </div>
                </div>
            
                <!-- Corpo do Card -->
                <div class="card-body">
                    <!-- Mapa -->
            
                    <!-- Lista de Acessos por País -->
                    <div class="px-2 py-2 mt-4">
                        @foreach($paisesPorcentagem as $pais => $percentagem)
                            <p class="mb-1">{{ $pais }} <span class="float-end">{{ round($percentagem, 2) }}%</span></p>
                            <div class="progress mt-2" style="height: 6px;">
                                <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                                style="width: {{ round($percentagem, 2) }}%" aria-valuenow="{{ round($percentagem, 2) }}" 
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
                    
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    am5.ready(function() {
                        var root = am5.Root.new("mapa-paises");
                        root.setThemes([am5themes_Animated.new(root)]);
                
                        var chart = root.container.children.push(am5map.MapChart.new(root, {
                            panX: "rotateX",
                            projection: am5map.geoMercator()
                        }));
                
                        var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                            geoJSON: am5geodata_worldLow
                        }));
                
                        polygonSeries.mapPolygons.template.setAll({
                            tooltipText: "{name}",
                            interactive: true
                        });
                
                        polygonSeries.mapPolygons.template.states.create("hover", {
                            fill: am5.color(0x6771dc)
                        });
                
                        var bubbleSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
                        var circleTemplate = am5.Template.new({
                            tooltipText: "{name}: {value}%",
                            fill: am5.color(0xff0000),
                            stroke: am5.color(0xffffff),
                            strokeWidth: 2
                        });
                
                        var paises = @json($paisesPorcentagem);
                
                        var countryCodes = {
                            "United States": "US",
                            "Canada": "CA",
                            "Brazil": "BR",
                            "United Kingdom": "GB",
                            "Russia": "RU",
                            "India": "IN",
                            "China": "CN",
                            "Germany": "DE",
                            "France": "FR",
                            "Japan": "JP",
                            "Australia": "AU",
                            "Mexico": "MX"
                        };
                
                        Object.keys(paises).forEach(function(pais) {
                            if (countryCodes[pais]) {
                                bubbleSeries.bullets.push(function() {
                                    return am5.Bullet.new(root, {
                                        sprite: am5map.MapPoint.new(root, {
                                            latitude: am5map.getCountryCenter(countryCodes[pais]).latitude,
                                            longitude: am5map.getCountryCenter(countryCodes[pais]).longitude,
                                            name: pais,
                                            value: paises[pais]
                                        }, circleTemplate)
                                    });
                                });
                            }
                        });
                
                        chart.appear(1000, 100);
                    });
                });
                </script>
                            
            
                <!-- end card body -->
            </div>
            <!-- end card -->
            
            
        </div>

        
        <!-- end col -->
    </div> <!-- end row-->
@endsection
@section('script')
    <!-- apexcharts -->
    <script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>

    <!-- Vector map-->
    <script src="{{ URL::asset('build/libs/jsvectormap/jsvectormap.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
    <!-- gridjs js -->
    <script src="{{ URL::asset('build/libs/gridjs/gridjs.umd.js') }}"></script>

    <!-- Dashboard init -->
    <script src="{{ URL::asset('build/js/pages/dashboard-job.init.js') }}"></script>

    <!-- App js -->
    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection

<script src="https://www.amcharts.com/lib/5/index.js"></script>
<script src="https://www.amcharts.com/lib/5/map.js"></script>
<script src="https://www.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/5/themes/Animated.js"></script>