@extends('layouts.admin')

@section('content')

<h2 style="margin-bottom:8px;">Selamat Datang, Admin!</h2>
<p style="color:#64748b; margin-bottom:25px;">
Ringkasan sistem dan aktivitas terakhir.
</p>

<!-- TOP KPI CARDS -->
<div class="cards">

<a href="/admin/vehicles" class="card stat-card">
    <h4>Jumlah Kendaraan</h4>
    <p>{{ $vehicleCount }}</p>
</a>

<a href="/admin/requests" class="card stat-card">
    <h4>Perizinan Menunggu</h4>
    <p>{{ $pendingRequests }}</p>
</a>

<a href="/admin/fleet-status" class="card stat-card">
    <h4>Kendaraan yang digunakan</h4>
    <p>{{ $activeTrips }}</p>
</a>

<a href="/admin/employees" class="card stat-card">
    <h4>Total Karyawan</h4>
    <p>{{ $employeeCount }}</p>
</a>

<a href="/admin/fleet-status" class="card stat-card">
    <h4>Kendaraan Tersedia</h4>
    <p>{{ $availableVehicles }}</p>
</a>

<a href="/admin/maintenance" class="card stat-card">
    <h4>Kendaraan Maintenance</h4>
    <p>{{ $maintenanceCount }}</p>
</a>

<a class="card stat-card">
    <h4>Perjalanan Terlambat</h4>
    <p>{{ $lateTrips }}</p>
</a>

</div>

<!-- MAIN CONTENT -->
<div style="display:flex; gap:20px; align-items:stretch;">

<!-- RECENT REQUESTS -->
<div class="card" style="flex:2;">
<h3 style="margin-bottom:15px;">Requests terbaru</h3>

<table>
<tr>
<th>Karyawan</th>
<th>Kendaraan</th>
<th>Rute</th>
<th>Status</th>
<th>Tanggal</th>
</tr>

@foreach($recentRequests as $item)
<tr>
<td>{{ $item->user->name ?? 'User' }}</td>
<td>{{ $item->vehicle->vehicle_name ?? 'Vehicle' }}</td>
<td>
{{ $item->origin ?? '-' }}
→
{{ $item->destination ?? '-' }}
</td>
<td>

@if($item->status == 'maintenance')

<span style="
background:#fef3c7;
color:#92400e;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
">
Maintenance
</span>

@elseif($item->status == 'returned')

<span style="
background:#dcfce7;
color:#166534;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
">
Dikembalikan
</span>

@else

<span style="
background:#dbeafe;
color:#1d4ed8;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
">
{{ ucfirst($item->status) }}
</span>

@endif

</td>
<td>{{ $item->created_at->format('d M Y') }}</td>
</tr>
@endforeach

</table>
</div>

<!-- TRIP SUMMARY -->
<div class="card" style="flex:1; text-align:center;">

<h3 style="margin-bottom:10px;">Ringkasan Penggunaan</h3> 

<p>Total Penggunaan: {{ $totalTrips }}</p>
<p>Total Bahan Bakar Terpakai: {{ $totalFuel }} L</p>
<p>Tinggi Penggunaan: {{ $highFuel }}</p>

@if($highFuel > 0)
    <p style="color:red;">⚠ {{ $highFuel }} Penggunaan bahan bakar boros!</p>
@endif

<hr style="margin:15px 0;">

<h3 style="margin-bottom:10px;">Statistik Bahan Bakar</h3> 

<div style="width:200px; height:200px; margin:auto;">
    <canvas id="fuelChart"></canvas>
</div> 

<hr style="margin:15px 0;">

<h3 style="margin-bottom:10px;">Penggunaan Bahan Bakar Terbanyak</h3>

<table style="width:100%; text-align:left;">
@foreach($vehicleFuelRanking as $index => $v)
<tr>
<td>{{ $index + 1 }}.</td>
<td>{{ $v->vehicle_name }}</td>
<td>{{ round($v->total_fuel, 1) }} L</td>
</tr>
@endforeach
</table>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const ctx = document.getElementById('fuelChart');

new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Penggunaan Normal', 'Penggunaan Berlebih'],
        datasets: [{
            data: [{{ $totalTrips - $highFuel }}, {{ $highFuel }}],
            backgroundColor: ['#4CAF50', '#F44336']
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false   
    }
});
</script>

@endsection