@extends('layouts.dashboard.app')

@section('content')
<div class="container-fulied">
    <!-- <nav aria-label="breadcrumb">
        <ol class="breadcrumb @lang('theme.breadcrumb')">
            <li class="breadcrumb-item active"  aria-current="page">{{-- __('Home')--}}</li>
        </ol>
        <ol class="breadcrumb py-0 my-0" style="@lang('theme.actionline')">
        </ol>
    </nav> -->
    <div class="container">
        <div class="row justify-content-center pt-4 px-4">
            <div class="container">
                <div class="card card-shadow sharp-corners mt-4 @lang('theme.card_outline_color')"> 
                    <div class="card-body px-4 pt-4">
                        <div class="row justify-content-center">
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <h1 class="text-center text-bold text-light pl-2" style="-webkit-text-stroke: 2px #17a2b8;/*color: white;*/text-shadow: 2px 4px 4px #17a2b8;">Epidemiology Unit</h1>
                                <!-- <h5 class="text-center text-bold text-light pl-2" style="-webkit-text-stroke: 1px #dc3545;/*color: white;*/text-shadow: 2px 3px 4px #6c757d;"> </h5> -->
                                <div class="text-center py-2">
                                <img src="{{ asset('img/log2.png') }}" alt="DAPH Logo" class="text-center" height="380" 
                                    style="opacity: 0.9;  
                                            -webkit-filter: drop-shadow(5px 5px 5px #222);
                                            filter: drop-shadow(5px 5px 5px #6c757d);   
                                            height: auto; width: 100%;  
                                            max-height:380px; /*max-width:420px;*/">
                            </div>
                            @if (session('status'))
                                <div class="alert alert-success pt-4">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <h6 class="text-center text-bold text-info pt-4"> {{ __('Hi!') }} </h6>
                            <h6 class="text-center text-bold text-info"> {{ Auth::user()->name}} </h6>
                            <h6 class="text-center text-bold text-info">{{ __('You are logged in!') }} </h6>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card card-shadow sharp-corners mt-4"> 
                <div class="container-fluid pt-4 px-4">
                    <div class="row">
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ Visitor::getTotalVisitCount() }}</h3>
                                    <p>Annual Visitors </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ Visitor::getLastMonthVisitors() }}</h3>
                                    <p>Monthly Visitors</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-pie-graph"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{ Post::getTotalPostsCount() }}</h3>
                                    <p>Posts</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-document"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection