@extends('layouts.admin')

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

@section('content')
@php
    $perSelected = (int) ($filters['per_page'] ?? 25);
    $qValue = $filters['q'] ?? '';
    $start  = $filters['start'] ?? now()->startOfMonth()->toDateString();
    $end    = $filters['end']   ?? now()->toDateString();
@endphp

{{-- KPI CARDS --}}
<div class="row g-3 mb-2">
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Total KM</small>
            <h3 class="mb-0">{{ number_format((int)$stats['tot_km']) }}</h3>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Real Fuel (L)</small>
            <h3 class="mb-0">{{ number_format((float)$stats['tot_actual'], 2) }}</h3>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Expected Fuel (L)</small>
            <h3 class="mb-0">{{ number_format((float)$stats['tot_expected'], 2) }}</h3>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Total Amount (₺)</small>
            <h3 class="mb-0">{{ number_format((float)$stats['tot_amount'], 2) }}</h3>
        </div></div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Fleet Actual Consumption</small>
            <h6 class="mb-0">{{ is_null($stats['fleet_l100']) ? '—' : number_format($stats['fleet_l100'], 2).' L/100km' }}</h6>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Deflection (L)</small>
            @php $dL = (float)$stats['fleet_delta_l']; @endphp
            <h6 class="mb-0 {{ $dL>0 ? 'text-danger' : ($dL<0 ? 'text-success' : '') }}">
                {{ number_format($dL, 2) }}
            </h6>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Deflection (%)</small>
            @php $dP = $stats['fleet_delta_pct']; @endphp
            <h6 class="mb-0 {{ $dP>0 ? 'text-danger' : ($dP<0 ? 'text-success' : '') }}">
                {{ is_null($dP) ? '—' : number_format($dP, 2).' %' }}
            </h6>
        </div></div>
    </div>
    <div class="col-12 col-md-3">
        <div class="card h-100"><div class="card-body">
            <small class="text-muted">Period</small>
            <h6 class="mb-0">{{ \Carbon\Carbon::parse($start)->format('d.m.Y') }} – {{ \Carbon\Carbon::parse($end)->format('d.m.Y') }}</h6>
        </div></div>
    </div>
</div>

<div class="card">
    <div class="card-body product-table">
        {{-- FILTER BAR --}}
        <form id="filterForm" method="GET" class="row g-2 justify-content-between mb-3">
            <div class="col-12 col-lg-6 d-flex flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2">
                    <label class="form-label mb-0">Start</label>
                    <input type="date" name="start" class="form-control form-control-sm" value="{{ $start }}" />
                </div>
                <div class="d-flex align-items-center gap-2">
                    <label class="form-label mb-0">End</label>
                    <input type="date" name="end" class="form-control form-control-sm" value="{{ $end }}" />
                </div>

                {{-- İsteğe bağlı: hızlı aralıklar --}}
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-light btn-sm" type="button" id="btnThisMonth">This Month</button>
                    <button class="btn btn-light btn-sm" type="button" id="btnToday">Today</button>
                </div>
            </div>

            <div class="col-12 col-lg-6 d-flex flex-wrap gap-2 justify-content-end">
                <div>
                    <input type="search" name="q" class="form-control form-control-sm" placeholder="Search plate, brand, model..." value="{{ $qValue }}">
                </div>
                <div>
                    <button type="submit" class="btn btn-primary btn-sm">Apply</button>
                    <a href="{{ route('web.fuel.index') }}" class="btn btn-light btn-sm">Clear</a>
                </div>
            </div>
        </form>


        {{-- TABLE --}}
        <div class="table-responsive">
            <table class="table table-bordered text-nowrap mb-0">
                <thead class="border-top">
                    <tr>
                        <th>Driver</th>
                        <th class="text-end">KM</th>
                        <th class="text-end">Estimated Liters</th>
                        <th class="text-end">Estimated Amount (₺)</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($userRows as $u)
                        <tr>
                            <td>{{ $u->user_name }}</td>
                            <td class="text-end">{{ number_format((int)$u->km_used) }}</td>
                            <td class="text-end">{{ number_format((float)$u->liters_est, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$u->amount_est, 2) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="text-muted p-3 text-center">- No records found -</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        {{-- PAGINATION --}}
        <div class="row mt-3 align-items-center">
            <div class="col-sm-12 col-md-6 my-auto">
                @if($rows->total() > 0)
                    <span>Showing {{ $rows->firstItem() }} to {{ $rows->lastItem() }} of {{ $rows->total() }} entries</span>
                @else
                    <span>Showing 0 to 0 of 0 entries</span>
                @endif
            </div>
            <div class="col-sm-12 col-md-6">
                <nav aria-label="Page navigation" class="d-flex justify-content-end">
                    {{ $rows->appends(request()->except('page'))->onEachSide(1)->links('vendor.pagination.sash') }}
                </nav>
            </div>
        </div>
    </div>
</div>

{{-- Kullanıcı bazlı tüketim & maliyet --}}
<!--
<div class="card mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Araç Bazlı Yakıt Tahmini</span>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered text-nowrap mb-0">
                <thead class="border-top">
                    <tr>
                        <th>Plate</th>
                        <th>Brand / Model</th>
                        <th class="text-end">KM</th>
                        <th class="text-end">Avg L/100</th>
                        <th class="text-end">Expected L</th>
                        <th class="text-end">Actual L</th>
                        <th class="text-end">Δ L</th>
                        <th class="text-end">Δ %</th>
                        <th class="text-end">Actual L/100</th>
                        <th class="text-end">Amount (₺)</th>
                        <th class="text-end">₺ / km</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $v)
                        @php
                            $dl  = (float) $v->delta_liters;
                            $dp  = $v->delta_percent;
                            $cls = $dl > 0 ? 'text-danger' : ($dl < 0 ? 'text-success' : '');
                        @endphp
                        <tr>
                            <td><h6 class="mb-0 fs-14 fw-semibold">{{ $v->plate }}</h6></td>
                            <td>{{ $v->brand }} {{ $v->model ? ' - '.$v->model : '' }}</td>
                            <td class="text-end">{{ number_format((int)$v->km_used) }}</td>
                            <td class="text-end">{{ number_format((float)$v->avg_consumption_l_per_100km, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$v->expected_liters, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$v->liters_actual, 2) }}</td>
                            <td class="text-end {{ $cls }}">{{ number_format($dl, 2) }}</td>
                            <td class="text-end {{ $cls }}">{{ is_null($dp) ? '—' : number_format($dp, 2).' %' }}</td>
                            <td class="text-end">{{ is_null($v->actual_l100) ? '—' : number_format((float)$v->actual_l100, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$v->amount_actual, 2) }}</td>
                            <td class="text-end">{{ is_null($v->cost_per_km) ? '—' : number_format((float)$v->cost_per_km, 3) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="11" class="text-center text-muted p-4">- No records found -</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
-->

{{-- canlı arama debounce --}}
<script>
    const q = document.querySelector('input[name="q"]');
    if (q) { let t; q.addEventListener('input', () => { clearTimeout(t); t = setTimeout(() => q.form.requestSubmit(), 500); }); }

    (() => {
        const form  = document.getElementById('filterForm');
        if (!form) return;

        const start = form.querySelector('[name="start"]');
        const end   = form.querySelector('[name="end"]');
        const q     = form.querySelector('input[name="q"]');

        function submitIfValid() {
            // Y-m-d formatında string karşılaştırma güvenli
            if (start.value && end.value && start.value > end.value) {
                const tmp = start.value; start.value = end.value; end.value = tmp;
            }
            form.requestSubmit();
        }

        start.addEventListener('change', submitIfValid);
        end.addEventListener('change', submitIfValid);

        const fmt = (d) => d.toISOString().slice(0,10);
        const today = new Date();
        document.getElementById('btnToday')?.addEventListener('click', () => {
            start.value = fmt(today);
            end.value   = fmt(today);
            form.requestSubmit();
        });
        document.getElementById('btnThisMonth')?.addEventListener('click', () => {
            const first = new Date(today.getFullYear(), today.getMonth(), 1);
            const last  = new Date(today.getFullYear(), today.getMonth()+1, 0);
            start.value = fmt(first);
            end.value   = fmt(last);
            form.requestSubmit();
        });

        // Arama için debounce (mevcut koddaki gibi ama forma bağlı)
        if (q) {
            let t; q.addEventListener('input', () => {
            clearTimeout(t); t = setTimeout(() => form.requestSubmit(), 500);
            });
        }
    })();
</script>
@endsection