@extends('layout.app')
@section('content')
    <div class="container">
        <div class="page-inner">
            <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
                <div>
                    <h3 class="fw-bold mb-3">Dashboard</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-primary bubble-shadow-small">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ms-3 ms-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">Total Pengguna</p>
                                        <h4 class="card-title">{{ $totalUsers }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-info bubble-shadow-small">
                                        <i class="fas fa-layer-group"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ms-3 ms-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">Total Gejala</p>
                                        <h4 class="card-title">{{ $totalGejala}}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-success bubble-shadow-small">
                                        <i class="fas fa-bug"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ms-3 ms-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">Total Penyakit</p>
                                        <h4 class="card-title">{{ $totalPenyakit }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card card-stats card-round">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-icon">
                                    <div class="icon-big text-center icon-secondary bubble-shadow-small">
                                        <i class="fas fa-infinity"></i>
                                    </div>
                                </div>
                                <div class="col col-stats ms-3 ms-sm-0">
                                    <div class="numbers">
                                        <p class="card-category">Total Aturan</p>
                                        <h4 class="card-title">{{ $totalRule }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="card card-round">
                        <div class="card-header">
                            <div class="card-head-row">
                                <div class="card-title">Welcome</div>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="m-0">Selamat Datang kembali Admin!</h5>
                            <p>Anda dapat mengelola seluruh data di SIPAYA</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-round">
                        <div class="card-header" style="padding: 10px;">
                            <div class="card-head-row">
                                <div class="card-title">Riwayat Login</div>
                            </div>
                        </div>
                        <div class="card-body pb-0" style="padding: 10px;">
                            <ul class="list-group list-group-flush" style="padding-left: 0; padding-right: 0;">
                                @foreach ($parsedLogs as $log)
                                    <li class="list-group-item d-flex justify-content-between align-items-center"
                                        style="border-top: none; padding: 5px 10px;">
                                        <div class="d-flex justify-content-between w-100">
                                            <div class="d-flex align-items-center">
                                                {{-- <img src="https://via.placeholder.com/50" alt="User Avatar"
                                                    class="img-circle elevation-2"
                                                    style="width: 50px; height: 50px; margin-right: 10px;"> --}}
                                                <div style="margin: 0;">
                                                    <a href="javascript:void(0)" class="product-title"
                                                        style="color: #007bff; font-weight: bold; margin: 0; padding: 0;">
                                                        {{ $log['fullname'] }}
                                                    </a>
                                                    <br>
                                                    <span class="product-description"
                                                        style="margin-bottom: 5px; display: inline-block;">
                                                        <small>{{ \Carbon\Carbon::parse($log['time'])->format('d M Y') }}</small>
                                                        <small class="text-info">on {{ $log['device'] }}</small>
                                                    </span>
                                                </div>
                                            </div>
                                            <span class="badge badge-success align-self-start"
                                                style="background-color: #28a745;">
                                                {{ $log['role'] }}
                                            </span>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection