@extends('layouts.app')

@section('title', 'Client Management')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h5 class="text-lg font-semibold text-gray-900">Clients</h5>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('clients.create') }}" class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <i class="fas fa-plus mr-2"></i>Add Client
                    </a>
                    <button class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-green-700 bg-white border border-green-300 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" onclick="showImportModal()">
                        <i class="fas fa-upload mr-2"></i>Import
                    </button>
                    <button class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-primary-700 bg-white border border-primary-300 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="exportClients()">
                        <i class="fas fa-download mr-2"></i>Export
                    </button>
                </div>
            </div>
        </div>

        <div class="px-6 py-4 space-y-6">
            <!-- Filters -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Status</label>
                    <select class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" id="status_filter">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Search</label>
                    <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" id="search_filter" placeholder="Search clients...">
                </div>
                <div class="flex items-end">
                    <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="filterClients()">Filter</button>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-primary-600 text-white rounded-lg shadow-sm border border-primary-700">
                    <div class="px-6 py-4">
                        <div class="text-2xl font-bold">{{ $clients->count() }}</div>
                        <div class="text-sm text-primary-100">Total Clients</div>
                    </div>
                </div>
                <div class="bg-green-600 text-white rounded-lg shadow-sm border border-green-700">
                    <div class="px-6 py-4">
                        <div class="text-2xl font-bold">{{ $clients->where('status.name', 'active')->count() }}</div>
                        <div class="text-sm text-green-100">Active</div>
                    </div>
                </div>
                <div class="bg-blue-600 text-white rounded-lg shadow-sm border border-blue-700">
                    <div class="px-6 py-4">
                        <div class="text-2xl font-bold">{{ $clients->sum('locations_count') }}</div>
                        <div class="text-sm text-blue-100">Total Locations</div>
                    </div>
                </div>
                <div class="bg-yellow-600 text-white rounded-lg shadow-sm border border-yellow-700">
                    <div class="px-6 py-4">
                        <div class="text-2xl font-bold">{{ $clients->sum('contracts_count') }}</div>
                        <div class="text-sm text-yellow-100">Active Contracts</div>
                    </div>
                </div>
            </div>

            <!-- Clients Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Client</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Contact Person</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Email</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Phone</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Locations</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Contracts</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Status</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($clients ?? [] as $client)
                            <tr>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-primary-600 text-white flex items-center justify-center">
                                            <i class="fas fa-building"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <div class="font-medium text-gray-900 truncate">{{ $client->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $client->city }}, {{ $client->country }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ $client->contact_person }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ $client->email }}</td>
                                <td class="px-4 py-3 text-sm text-gray-900">{{ $client->phone }}</td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $client->locations_count ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">{{ $client->contracts_count ?? 0 }}</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $client->status->class ?? 'gray' }}-100 text-{{ $client->status->class ?? 'gray' }}-800">
                                        {{ $client->status->name }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="inline-flex rounded-md shadow-sm" role="group">
                                        <button class="inline-flex items-center px-3 py-1.5 border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 rounded-l-md text-xs" onclick="viewClient({{ $client->id }})">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <a href="{{ route('clients.edit', $client->id) }}" class="inline-flex items-center px-3 py-1.5 border border-yellow-300 text-yellow-700 bg-white hover:bg-yellow-50 text-xs">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button class="inline-flex items-center px-3 py-1.5 border border-red-300 text-red-700 bg-white hover:bg-red-50 rounded-r-md text-xs" onclick="deleteClient({{ $client->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-10 text-center text-sm text-gray-500">No clients found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div>
                {{ $clients->links() }}
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function viewClient(id) {
    fetch(`/clients/${id}`)
        .then(response => response.json())
        .then(data => {
            const content = `
                Client: ${data.name}
                Contact Person: ${data.contact_person}
                Email: ${data.email}
                Phone: ${data.phone}
                Status: ${data.status?.name}
                Address: ${data.address}
                ${data.city}, ${data.country} ${data.postal_code}
                Locations: ${data.locations?.length || 0}
                Contracts: ${data.contracts?.length || 0}
            `;
            
            alert(content);
        });
}

function deleteClient(id) {
    if (confirm('Are you sure you want to delete this client?')) {
        fetch(`/clients/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting client: ' + (data.message || 'Unknown error'));
            }
        });
    }
}

function filterClients() {
    const params = new URLSearchParams({
        status: document.getElementById('status_filter').value,
        search: document.getElementById('search_filter').value
    });
    
    window.location.href = `{{ route('clients.index') }}?${params.toString()}`;
}

function exportClients() {
    window.location.href = '/clients/export';
}

function showImportModal() {
    alert('Import functionality will be implemented');
}
</script>
@endsection