<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-green-50 px-5 py-4">
            <h2 class="text-xl font-semibold leading-tight text-sky-900">{{ __('Companies') }}</h2>
            <p class="mt-1 text-sm text-sky-700">{{ __('Monitor each company, owner, active plan, and fleet usage from one screen.') }}</p>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-7xl space-y-6 px-4 sm:px-6 lg:px-8">
            <form method="GET" class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-white to-sky-50/70 p-4 shadow-sm">
                <div class="flex flex-col gap-3 md:flex-row">
                    <input type="text" name="search" value="{{ $search }}" placeholder="{{ __('Search name, email, MC, DOT, phone') }}"
                        class="w-full rounded-lg border border-sky-300 bg-white px-4 py-2 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-100">
                    <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700">{{ __('Search') }}</button>
                </div>
            </form>

            <div class="overflow-hidden rounded-2xl border border-sky-200/70 bg-white shadow-sm">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-sky-100">
                        <thead class="bg-sky-50/80">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Company') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Owner') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Plan') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Fleet') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Revenue') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Profit') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-sky-100 bg-white">
                            @forelse ($companies as $company)
                                <tr>
                                    <td class="px-6 py-4 align-top">
                                        <div class="font-medium text-gray-900">{{ $company->name }}</div>
                                        <div class="text-sm text-gray-600">{{ $company->email ?: __('No company email') }}</div>
                                        <div class="mt-1 text-xs text-sky-700/70">MC: {{ $company->mc_number ?: 'N/A' }} | DOT: {{ $company->dot_number ?: 'N/A' }}</div>
                                    </td>
                                    <td class="px-6 py-4 align-top">
                                        <div class="font-medium text-gray-900">{{ $company->owner?->name ?? __('Not assigned') }}</div>
                                        <div class="text-sm text-gray-600">{{ $company->owner?->email ?? __('No owner email') }}</div>
                                    </td>
                                    <td class="px-6 py-4 align-top">
                                        <span class="inline-flex rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-800">
                                            {{ $company->admin_metrics['package_name'] ?? __('No active plan') }}
                                        </span>
                                        <div class="mt-2 text-xs text-sky-700/80">{{ ucfirst($company->admin_metrics['subscription_status'] ?? 'inactive') }}</div>
                                    </td>
                                    <td class="px-6 py-4 align-top text-sm text-gray-700">
                                        <div>{{ $company->trucks_count }} {{ __('trucks') }}</div>
                                        <div>{{ $company->drivers_count }} {{ __('drivers') }}</div>
                                        <div>{{ $company->loads_count }} {{ __('loads') }}</div>
                                    </td>
                                    <td class="px-6 py-4 align-top">
                                        <span class="inline-flex rounded-full bg-sky-100 px-3 py-1 text-sm font-semibold text-sky-800">
                                            ${{ number_format($company->admin_metrics['revenue'], 2) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 align-top">
                                        <span class="inline-flex rounded-full bg-teal-100 px-3 py-1 text-sm font-semibold text-teal-800">
                                            ${{ number_format($company->admin_metrics['profit'], 2) }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-6 text-center text-sm text-sky-700/80">{{ __('No companies matched your filters.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($companies->hasPages())
                    <div class="border-t border-sky-100 bg-sky-50/50 px-6 py-4">
                        {{ $companies->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
