@extends('layouts.admin')

@section('page_header')
<div class="page-header" style="margin-top: 0; margin-bottom: 20px;">
    <h1 class="page-title my-auto">Dashboard</h1>
    <div>
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<style>
  .chart-wrap {
    position: relative;
    height: 280px;
  }
  @media (max-width: 576px) {
    .chart-wrap { height: 220px; }
  }
</style>
@php
    // Durumlara rozet rengi
    $statusColors = [
        'pending'   => 'warning',
        'approved'  => 'primary',
        'rejected'  => 'danger',
        'cancelled' => 'secondary',
        'expired'   => 'dark',
        'completed' => 'success',
    ];
@endphp

{{-- KPI CARDS --}}
<div class="row g-3">
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Toplam Araç</small>
            <h3 class="mb-0 fs-1">{{ number_format($totalVehicles) }}</h3>
        </div></div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Müsait Araç</small>
            <h3 class="mb-0 fs-1">{{ number_format($availableVehicles) }}</h3>
        </div></div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Kullanımda</small>
            <h3 class="mb-0 fs-1">{{ number_format($inUseVehicles) }}</h3>
        </div></div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Serviste</small>
            <h3 class="mb-0 fs-1">{{ number_format($serviceVehicles) }}</h3>
        </div></div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Onay Bekleyen</small>
            <h3 class="mb-0 fs-1">{{ number_format($pendingReservationsCount) }}</h3>
        </div></div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card h-90"><div class="card-body">
            <small class="text-muted">Bugünkü Rezervasyon</small>
            <h3 class="mb-0 fs-1">{{ number_format($todayReservationsCount) }}</h3>
        </div></div>
    </div>
</div>

{{-- CHARTS --}}
<div class="row g-3 mt-1">
    <div class="col-12 col-xl-8">
        <div class="card h-100">
            <div class="card-body">
                <div class="mb-2">Reservation Trend (14 days)</div>
                <div class="chart-wrap">
                <canvas id="reservationsTrendChart" height="120"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="mb-2">Monthly Fuel Expense (6 months)</div>
                <div class="chart-wrap">
                <canvas id="fuelCostChart" height="120"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
{{-- LISTS --}}
<div class="row g-3 mt-1 mb-4">
    <div class="col-12 col-xl-6">
        <div class="card h-100">
            <div class="card-body">
                <div class="mb-2">Today's Reservations ({{ $todayReservationsCount }})</div>
                <div class="table-responsive">
                    <table class="table text-nowrap table-bordered mb-0 table-sm align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Driver</th>
                                <th>Vehicle</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($todayReservations as $r)
                                @php $badge = $statusColors[$r->status] ?? 'secondary'; @endphp
                                <tr>
                                    <td>{{ $r->id }}</td>
                                    <td>{{ $r->user->name ?? '-' }}</td>
                                    <td>{{ $r->vehicle->plate ?? '-' }}</td>
                                    <td>{{ optional($r->start_at)->format('d.m H:i') }}</td>
                                    <td>{{ optional($r->end_at)->format('d.m H:i') ?? '-' }}</td>
                                    <td><span class="badge bg-{{ $badge }}">{{ ucfirst($r->status) }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-muted p-3 text-center">- No records found -</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer text-end">
                <a href="/dashboard" class="btn btn-light btn-sm">All</a>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-xl-6">
        <div class="card h-100">
            <div class="card-body">
                <div class="mb-2">Son Yakıt Kayıtları</div>
                
            </div>
            <div class="card-footer text-end">
                <a href="/dashboard" class="btn btn-light btn-sm">Tümü</a>
            </div>
        </div>
    </div>
</div>
-->

{{-- CHART.JS --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" crossorigin="anonymous"></script>
<script>
    // PHP'den gelen veriler
    const reservationsTrendLabels = @json($reservationsTrendLabels);
    const reservationsTrendData   = @json($reservationsTrendData);
    const fuelMonthsLabels        = @json($fuelMonthsLabels);
    const fuelMonthsData          = @json($fuelMonthsData);

    // Global chart ref'leri (sayfa yeniden yüklense bile aynı isimde dursun)
    window.__PGCharts = window.__PGCharts || {};

    // Rezervasyon Trend (Line)
    const ctx1 = document.getElementById('reservationsTrendChart').getContext('2d');
    if (window.__PGCharts.reservations) {
        window.__PGCharts.reservations.destroy();
    }
    window.__PGCharts.reservations = new Chart(ctx1, {
        type: 'line',
        data: {
        labels: reservationsTrendLabels,
            datasets: [{
                label: 'Rezervasyon',
                data: reservationsTrendData,
                tension: 0.35,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true }
            },
            scales: {
                y: { beginAtZero: true, ticks: { precision: 0 } }
            }
        }
    });

    // Yakıt Gideri (Bar)
    const ctx2 = document.getElementById('fuelCostChart').getContext('2d');
    if (window.__PGCharts.fuel) {
        window.__PGCharts.fuel.destroy();
    }
    window.__PGCharts.fuel = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: fuelMonthsLabels,
            datasets: [{
                label: 'Tutar',
                data: fuelMonthsData,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>

@endsection