@section('title')
    {{ 'Business Insights' }}
@endsection

<x-app-layout>
 <div class="max-[100%] mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">Business Insights</h1>
    
    <!-- Date Range Filter Form -->
    <form method="GET" class="flex flex-wrap gap-3 mb-6 items-end bg-white p-4 rounded shadow">
        <div>
            <label for="from" class="block text-sm text-gray-700">From</label>
            <input type="date" id="from" name="from" value="{{ $from }}" class="px-3 py-2 rounded border border-gray-300 text-sm" />
        </div>
        <div>
            <label for="to" class="block text-sm text-gray-700">To</label>
            <input type="date" id="to" name="to" value="{{ $to }}" class="px-3 py-2 rounded border border-gray-300 text-sm" />
        </div>
        <div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition text-sm mt-5">Filter</button>
        </div>
    </form>

      <!-- TOTAL COUNT -->
    <div class="mb-3 text-sm text-gray-700 font-semibold">
        Showing {{ $businesses->total() }} business{{ $businesses->total() === 1 ? '' : 'es' }}
        @if($from || $to)
            for 
            @if($from)
                <span class="text-blue-700">From: {{ $from }}</span>
            @endif
            @if($to)
                <span class="text-blue-700 ml-1">To: {{ $to }}</span>
            @endif
        @endif
    </div>

    <div class="bg-white shadow rounded-lg overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-blue-600">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Place ID</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Category</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Address</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Email</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Phone</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Town / Region</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Website</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Created At</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">USER</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-white uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($businesses as $business)
                <tr>
                    <td class="px-4 py-3 font-semibold text-gray-900">{{ $business->name }}</td>
                    <td class="px-4 py-3 text-gray-700">{{ $business->place_id }}</td>
                    <td class="px-4 py-3 text-gray-700">
                        {{ $business->category1 }}{{ $business->category2 ? ' / '.$business->category2 : '' }}
                    </td>
                    <td class="px-4 py-3 text-gray-700">{{ $business->address }}</td>
                    <td class="px-4 py-3 text-gray-700">{{ $business->email }}</td>
                    <td class="px-4 py-3 text-gray-700">{{ $business->phone }}</td>
                    <td class="px-4 py-3 text-gray-700">{{ $business->town }}, {{ $business->region }}</td>
                    <td class="px-4 py-3 text-gray-700 w-[150px] max-w-[150px] truncate">
                        @if($business->website)
                            <a href="{{ $business->website }}" class="text-blue-600 underline" title="{{ $business->website }}" target="_blank">{{ $business->website }}</a>
                        @else
                            <span class="text-gray-400">N/A</span>
                        @endif
                    </td>
                    
                    <td class="px-4 py-3 text-gray-700">{{ $business->created_at->format('Y-m-d') }}</td>
                <td class="px-4 py-3 text-gray-700">
    @if($businessOwners[$business->id]->count())
        @foreach($businessOwners[$business->id] as $user)
            <div>
                {{ $user->name ?? $user->email }}
                <span class="ml-1 px-2 py-0.5 rounded bg-yellow-200 text-xs text-yellow-800">Owner</span>
                <span class="ml-1 px-2 py-0.5 rounded bg-green-200 text-xs text-black">{{ $user->source }}</span>
                <span class="ml-1 px-2 py-0.5 rounded bg-blue-100 text-xs text-blue-800">
            {{ $user->subscription?->plan?->name ?? 'No Plan' }}
        </span>
            </div>
        @endforeach
    @else
        <span class="text-gray-400">None</span>
    @endif
</td>


                    <td class="px-4 py-3">
                        <a href="{{ url('top3maps') . '?pid=' . $business->place_id }}
" target="_blank" class="inline-block text-sm px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="11" class="px-4 py-3 text-center text-gray-500">No businesses found for this date range.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-8">
        {{ $businesses->links() }}
    </div>
</div>
</x-app-layout>