@extends('layouts.admin')

@section('header', 'Clients')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Clients</h1>
        <x-ui.buttons.primary href="{{ route('admin.clients.create') }}" class="w-full sm:w-auto text-center">
            Add New Client
        </x-ui.buttons.primary>
    </div>

    <x-ui.layout.card>
        <x-slot name="header">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">All Clients</h2>
        </x-slot>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                        <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Users</th>
                        <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Events</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($clients as $client)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        <td class="px-3 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $client->id }}</td>
                        <td class="px-3 sm:px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $client->name }}</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 sm:hidden">
                                {{ $client->users_count ?? 0 }} users • {{ $client->events_count ?? 0 }} events
                            </div>
                        </td>
                        <td class="hidden sm:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $client->users_count ?? 0 }}</td>
                        <td class="hidden sm:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $client->events_count ?? 0 }}</td>
                        <td class="px-3 sm:px-6 py-4 text-sm font-medium">
                            <!-- Mobile-first action buttons layout -->
                            <div class="flex flex-col sm:flex-row sm:flex-wrap gap-2">
                                <!-- Primary actions row -->
                                <div class="flex flex-wrap gap-2">
                                    <!-- Analytics button - consistent with events page styling -->
                                    <a href="{{ route('analytics.clients.index', $client->id) }}" class="bg-purple-500 hover:bg-purple-700 text-white text-xs px-2 py-1 rounded">
                                        Analytics
                                    </a>
                                    
                                    <!-- View button -->
                                    <a href="{{ route('admin.clients.show', $client->id) }}" class="bg-blue-500 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded">View</a>
                                    
                                    <!-- Edit button -->
                                    <a href="{{ route('admin.clients.edit', $client->id) }}" class="bg-yellow-500 hover:bg-yellow-700 text-white text-xs px-2 py-1 rounded">Edit</a>
                                </div>
                                
                                <!-- Secondary actions row -->
                                <div class="flex flex-wrap gap-2">
                                    <!-- Management buttons -->
                                    <a href="{{ route('admin.clients.users', $client->id) }}" class="bg-green-500 hover:bg-green-700 text-white text-xs px-2 py-1 rounded">Users</a>
                                    
                                    <a href="{{ route('admin.clients.modules', $client->id) }}" class="bg-indigo-500 hover:bg-indigo-700 text-white text-xs px-2 py-1 rounded">Modules</a>
                                    
                                    <a href="{{ route('admin.clients.tiers', $client->id) }}" class="bg-cyan-500 hover:bg-cyan-700 text-white text-xs px-2 py-1 rounded">Tiers</a>
                                    
                                    <!-- Delete button -->
                                    <form action="{{ route('admin.clients.destroy', $client->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-500 hover:bg-red-700 text-white text-xs px-2 py-1 rounded" onclick="return confirm('Are you sure you want to delete this client?')">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($clients->hasPages())
        <div class="mt-6">
            {{ $clients->links() }}
        </div>
        @endif
    </x-ui.layout.card>

    <!-- Client Summary Cards with Corrected Statistics -->
    <div class="mt-8">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Client Overview</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            @foreach($clients as $client)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ $client->name }}</h3>
                    <span class="text-xs text-gray-500 dark:text-gray-400">ID: {{ $client->id }}</span>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500 dark:text-gray-400">Events:</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ $client->events_count ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500 dark:text-gray-400">Users:</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ $client->users_count ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500 dark:text-gray-400">Status:</span>
                        <span class="font-medium {{ $client->is_active ? 'text-green-600' : 'text-red-600' }}">
                            {{ $client->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
                    <a href="{{ route('analytics.clients.index', $client->id) }}" class="text-xs text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium">View Full Analytics →</a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection