@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Laporan Bahan Bakar</h1>
        <div class="flex space-x-2">
            <button onclick="exportToPDF()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-file-pdf mr-2"></i>Export PDF
            </button>
            <button onclick="exportToExcel()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-file-excel mr-2"></i>Export Excel
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-800">Filter Laporan</h2>
        <form action="{{ route('reports.fuel') }}" method="GET" class="w-full">
            <div class="flex flex-col lg:flex-row lg:items-end gap-4">
                <div class="flex-1">
                    <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
                    <input type="date" id="start_date" name="start_date" value="{{ $startDate }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="flex-1">
                    <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Akhir</label>
                    <input type="date" id="end_date" name="end_date" value="{{ $endDate }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div class="flex-1">
                    <label for="truck_id" class="block text-sm font-medium text-gray-700 mb-1">Plat Nomor</label>
                    <select id="truck_id" name="truck_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">Semua Truk</option>
                        @foreach($trucks as $truck)
                            <option value="{{ $truck->id }}" {{ $truckId == $truck->id ? 'selected' : '' }}>{{ $truck->plate_number }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- TAMBAHAN: Filter Alat Berat -->
                <div class="flex-1">
                    <label for="heavy_equipment_id" class="block text-sm font-medium text-gray-700 mb-1">Alat Berat</label>
                    <select id="heavy_equipment_id" name="heavy_equipment_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">Semua Alat Berat</option>
                        @foreach($heavyEquipments as $equipment)
                            <option value="{{ $equipment->id }}" {{ $heavyEquipmentId == $equipment->id ? 'selected' : '' }}>{{ $equipment->equipment_number }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex-1">
                    <label for="fuel_type" class="block text-sm font-medium text-gray-700 mb-1">Tipe Bahan Bakar</label>
                    <select id="fuel_type" name="fuel_type" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">Semua Tipe</option>
                        @foreach($fuelTypes as $type)
                            <option value="{{ $type }}" {{ $fuelType == $type ? 'selected' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-end">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                        <i class="fas fa-filter mr-2"></i>Filter
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TAMBAHAN: Ringkasan Data -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Total Pembelian</h3>
            <p class="text-2xl font-bold text-blue-600">{{ number_format($totalVolume, 2) }} L</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Pemasukan Manual</h3>
            <p class="text-2xl font-bold text-green-600">{{ number_format($totalAddition, 2) }} L</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Total Pemakaian</h3>
            <p class="text-2xl font-bold text-red-600">{{ number_format($totalUsage ?? 0, 2) }} L</p>
            <p class="text-xs text-gray-500 mt-1">BBM yang digunakan</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Total Penggunaan</h3>
            <p class="text-2xl font-bold text-red-600">{{ number_format($totalReduction, 2) }} L</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Total Biaya</h3>
            <p class="text-2xl font-bold text-purple-600">Rp {{ number_format($totalCost, 0, ',', '.') }}</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-gray-500 mb-2">Sisa Stok</h3>
            <p class="text-2xl font-bold text-orange-600">{{ number_format(($totalVolume + $totalAddition) - $totalReduction, 2) }} L</p>
        </div>
    </div>

    <!-- PINDAH: Chart ke atas tabel riwayat -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">Total Pemakaian BBM per Truk (Pembelian + Penggunaan)</h3>
            <div id="google_fuel_truck_chart" style="width: 100%; height: 350px;"></div>
        </div>
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">Pemakaian BBM per Alat Berat</h3>
            <div id="google_fuel_equipment_chart" style="width: 100%; height: 350px;"></div>
        </div>
    </div>

    <!-- TAMBAHAN: Tabel Gabungan Riwayat BBM -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <h3 class="text-lg font-semibold p-6 border-b">Riwayat Lengkap Bahan Bakar</h3>
        @if($allFuelData->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jenis</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipe BBM</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plat Nomor</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No. Unit Alat Berat</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume (L)</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pemakaian (L)</th>

                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Biaya</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($allFuelData as $data)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ \Carbon\Carbon::parse($data['date'])->format('d/m/Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    @if($data['type'] == 'purchase')
                                        <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Pembelian</span>
                                    @elseif($data['type'] == 'addition')
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Pemasukan Manual</span>
                                    @else
                                        <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Penggunaan</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $data['fuel_type'] }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $data['truck_plate'] ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $data['equipment_number'] ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ number_format($data['quantity'], 2) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    @if($data['type'] == 'reduction' && $data['usage'] > 0)
                                        <span class="text-red-600 font-medium">{{ number_format($data['usage'], 2) }}</span>
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </td>

                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    @if($data['cost'] > 0)
                                        Rp {{ number_format($data['cost'], 0, ',', '.') }}
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-6 text-center text-gray-500">
                Tidak ada data bahan bakar sesuai filter.
            </div>
        @endif
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <h3 class="text-lg font-semibold p-6 border-b">Daftar Pembelian Bahan Bakar</h3>
        @if($fuelPurchases->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Truk</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipe Bahan Bakar</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lokasi</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume (Liter)</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Harga Total</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SPBU</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($fuelPurchases as $fuel)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $fuel->purchase_date->format('d/m/Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ optional($fuel->truck)->plate_number ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $fuel->fuel_type }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $fuel->station_name ?? '-' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $fuel->quantity }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rp {{ number_format($fuel->total_cost, 0, ',', '.') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-6 text-center text-gray-500">
                Tidak ada data pembelian bahan bakar sesuai filter.
            </div>
        @endif
    </div>
</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawCharts);

    function drawCharts() {
        // Chart Fuel per Truck
        var truckArr = [
            ['Plat Nomor', 'Volume (Liter)'],
            @php $hasTruckData = false; @endphp
            @foreach($fuelByTruck as $truckId => $volume)
                @php $hasTruckData = true; @endphp
                [
                    '{{ optional($trucks->first(fn($t) => $t->id == $truckId))->plate_number ?? $truckId }}',
                    {{ is_numeric($volume) ? $volume : 0 }}
                ]@if(!$loop->last),@endif
            @endforeach
            @if(!$hasTruckData)
                ['Tidak ada data', 0]
            @endif
        ];
        console.log('truckArr', truckArr);
        
        // Tambahkan kode yang hilang untuk menggambar chart truck
        var truckData = google.visualization.arrayToDataTable(truckArr);
        var truckOptions = {
            title: 'Total Pemakaian BBM per Truk (Pembelian + Penggunaan)',
            height: 350,
            colors: ['#3B82F6'],
            chartArea: {width: '70%'},
            legend: { position: 'none' },
            hAxis: {
                title: 'Volume (Liter)'
            },
            vAxis: {
                title: 'Plat Nomor'
            }
        };
        var truckChart = new google.visualization.BarChart(document.getElementById('google_fuel_truck_chart'));
        truckChart.draw(truckData, truckOptions);
        
        // Chart Fuel per Month
        // ... existing code ...
        
        // Chart Fuel per Equipment
        var equipmentArr = [
            ['No. Unit', 'Pemakaian (Liter)'],
            @php $hasEquipmentData = false; @endphp
            @foreach($usageByEquipment as $equipmentId => $usage)
                @php $hasEquipmentData = true; @endphp
                [
                    '{{ optional($heavyEquipments->first(fn($e) => $e->id == $equipmentId))->equipment_number ?? "Unit #" . $equipmentId }}',
                    {{ is_numeric($usage) ? $usage : 0 }}
                ]@if(!$loop->last),@endif
            @endforeach
            @if(!$hasEquipmentData)
                ['Tidak ada data', 0]
            @endif
        ];
        console.log('equipmentArr', equipmentArr);
        var equipmentData = google.visualization.arrayToDataTable(equipmentArr);
        var equipmentOptions = {
            title: 'Pemakaian BBM per Alat Berat',
            height: 350,
            colors: ['#10B981'],
            chartArea: {width: '70%'},
            legend: { position: 'none' },
            hAxis: {
                title: 'Pemakaian (Liter)'
            },
            vAxis: {
                title: 'No. Unit'
            }
        };
        var equipmentChart = new google.visualization.BarChart(document.getElementById('google_fuel_equipment_chart'));
        equipmentChart.draw(equipmentData, equipmentOptions);
    }

    function exportToPDF() {
        window.location.href = '{{ route("reports.fuel.export.pdf") }}' + window.location.search;
    }

    function exportToExcel() {
        window.location.href = '{{ route("reports.fuel.export.excel") }}' + window.location.search;
    }
</script>
@endsection