@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-md-8">
                    <div class="card card-round border-primary" style="border-top: 4px solid #007bff;">
                        <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 di SIPAYA</h5>
                            <h6 class="text-secondary">Sistem Pakar Diagnosa Penyakit Pada Tanaman Pepaya California</h6>
                            <p>Anda dapat melakukan diagnosa penyakit pada pepaya California kapan saja dan dimana saja</p>
                            <a href="{{ route('diagnosa.index') }}" class="btn btn-primary" style="padding: 6px 12px!important;">Mulai Diagnosa</a>
                            <a href="{{ route('diagnosa.riwayat') }}" class="btn btn-success" style="padding: 6px 12px!important;">Riwayat Diagnosa</a>     
                        </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