@extends('layouts.app')

@section('title', 'Cargo Volume Report')
@section('page-title', 'Cargo Volume Report')

@section('content')
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <form action="{{ route('reports.cargo-volume') }}" method="GET" class="flex items-center gap-4">
        <label class="text-sm font-medium text-gray-700">View By:</label>
        <div class="flex gap-2">
            <button type="submit" name="period" value="daily" class="px-4 py-2 rounded-md {{ $period == 'daily' ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
                Last 30 Days
            </button>
            <button type="submit" name="period" value="monthly" class="px-4 py-2 rounded-md {{ $period == 'monthly' ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }}">
                Last 12 Months
            </button>
        </div>
    </form>
</div>

<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Cargo Weight Analysis (kg)</h3>
    <div class="relative h-96">
        <canvas id="volumeChart"></canvas>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">Detailed Data</h3>
        <button onclick="window.print()" class="text-gray-600 hover:text-gray-800">
            <i class="fas fa-print mr-2"></i> Print Report
        </button>
    </div>
    <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">Period</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Weight (kg)</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($labels as $index => $label)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">{{ $label }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ number_format($data[$index], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('volumeChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($labels),
                datasets: [{
                    label: 'Total Weight (kg)',
                    data: @json($data),
                    backgroundColor: 'rgba(99, 102, 241, 0.5)',
                    borderColor: 'rgb(99, 102, 241)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
@endsection