<x-app-layout>
    <x-slot name="header">
        <div>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ __('Loads & Document History') }}</h2>
            <p class="mt-1 text-sm text-gray-500">Track extracted load data, stored rate snapshots, and profit/loss history for every upload.</p>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto space-y-6 sm:px-6 lg:px-8">
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <div class="rounded-xl border border-cyan-200 bg-cyan-50 p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-cyan-700">Total Loads</p>
                    <p class="mt-2 text-2xl font-bold text-slate-900">{{ $summary['load_count'] }}</p>
                </div>
                <div class="rounded-xl border border-violet-200 bg-violet-50 p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-violet-700">Total Mileage</p>
                    <p class="mt-2 text-2xl font-bold text-slate-900">{{ number_format((float) $summary['total_miles'], 2) }}</p>
                </div>
                <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-700">Revenue</p>
                    <p class="mt-2 text-2xl font-bold text-slate-900">${{ number_format((float) $summary['total_revenue'], 2) }}</p>
                </div>
                <div class="rounded-xl border border-amber-200 bg-amber-50 p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">Profit / Loss</p>
                    <p class="mt-2 text-2xl font-bold text-slate-900">${{ number_format((float) $summary['total_profit'], 2) }}</p>
                </div>
            </div>

            <div class="overflow-hidden rounded-xl border border-emerald-200 bg-gradient-to-br from-white to-emerald-50 shadow">
                <div class="border-b border-emerald-200 bg-gradient-to-r from-emerald-50 to-white px-6 py-4">
                    <h3 class="text-lg font-medium text-gray-900">Company Loads</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-emerald-50/40">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Load</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Company / Commodity</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Driver</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Distance</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Rate Snapshot</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Revenue</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Profit / Loss</th>
                                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Document</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 bg-white">
                            @forelse($loads as $load)
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">
                                        <p class="font-semibold">{{ $load->load_number }}</p>
                                        <p class="text-xs text-gray-500">{{ $load->registration_number ?: 'No registration #' }}</p>
                                        <p class="text-xs text-gray-500">{{ optional($load->pickup_date)->format('M d, Y') ?? 'No pickup date' }}</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600">
                                        <p class="font-medium text-gray-900">{{ $load->broker_company }}</p>
                                        <p>{{ $load->commodity ?: 'General Freight' }}</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600">
                                        <p>{{ $load->driver->name ?? 'Unassigned' }}</p>
                                        <p class="text-xs text-gray-500">{{ $load->truck->number ?? 'No truck' }}</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600">
                                        <p>{{ number_format((float) $load->miles, 2) }} mi</p>
                                        <p class="text-xs text-gray-500">{{ number_format((float) $load->weight, 0) }} lbs</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600">
                                        <p class="font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $load->rate_type ?? 'per_mile')) }}</p>
                                        <p class="text-xs text-gray-500">$ {{ number_format((float) $load->rate_snapshot_per_mile, 2) }}/mi</p>
                                        <p class="text-xs text-gray-500">$ {{ number_format((float) $load->rate_snapshot_additional_charge, 2) }} add-ons</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm font-semibold text-emerald-700">${{ number_format((float) $load->gross_rate, 2) }}</td>
                                    <td class="px-6 py-4 text-sm font-semibold {{ (float) $load->net_profit >= 0 ? 'text-teal-700' : 'text-red-600' }}">${{ number_format((float) $load->net_profit, 2) }}</td>
                                    <td class="px-6 py-4 text-sm">
                                        @if($load->rate_confirmation_path)
                                            <a href="{{ Storage::url($load->rate_confirmation_path) }}" target="_blank" class="font-semibold text-blue-600 hover:text-blue-900">View</a>
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-6 py-12 text-center text-sm text-gray-500">No loads yet. Upload a document to start OCR extraction and profit tracking.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-emerald-200 bg-emerald-50/50 px-6 py-4">
                    {{ $loads->links() }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

