<x-app-layout>
    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                <h2 class="font-semibold text-2xl text-gray-800 leading-tight">
                    {{ __('Clients & Accounts Registry') }}
                </h2>
                @if(!Auth::user()->isAccountant())
                    <div class="flex flex-wrap items-center gap-2">
                        <a href="{{ route('clients.create') }}" class="inline-flex items-center px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white text-sm font-medium rounded-lg shadow-sm transition duration-150 ease-in-out">
                            <svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {{ __('Add Client') }}
                        </a>
                        <a href="{{ route('custom-accounts.create') }}" class="inline-flex items-center px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium rounded-lg shadow-sm transition duration-150 ease-in-out">
                            <svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                            {{ __('Add Custom Account') }}
                        </a>
                    </div>
                @endif
            </div>
            <!-- Search & Filters -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
                <form action="{{ route('clients.index') }}" method="GET" class="flex flex-col md:flex-row gap-4 items-center justify-between">
                    <input type="hidden" name="tab" value="{{ $tab }}">
                    
                    <div class="relative w-full md:w-96">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                        <input type="text" name="search" value="{{ $search }}" placeholder="Search by name, email, phone..." class="pl-10 block w-full rounded-lg border-gray-300 focus:border-emerald-500 focus:ring focus:ring-emerald-200 focus:ring-opacity-50 text-sm">
                    </div>

                    <div class="flex items-center gap-2 w-full md:w-auto">
                        <button type="submit" class="w-full md:w-auto px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-medium rounded-lg transition duration-150">
                            {{ __('Filter') }}
                        </button>
                        @if($search)
                            <a href="{{ route('clients.index', ['tab' => $tab]) }}" class="w-full md:w-auto px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg text-center transition duration-150">
                                {{ __('Clear') }}
                            </a>
                        @endif
                    </div>
                </form>
            </div>

            <!-- Tab Buttons -->
            <div class="border-b border-gray-200 mb-6 flex">
                <a href="{{ route('clients.index', ['tab' => 'clients', 'search' => $search]) }}" class="py-4 px-6 font-semibold text-sm border-b-2 transition {{ $tab === 'clients' ? 'border-emerald-600 text-emerald-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    {{ __('Clients') }}
                </a>
                <a href="{{ route('clients.index', ['tab' => 'custom', 'search' => $search]) }}" class="py-4 px-6 font-semibold text-sm border-b-2 transition {{ $tab === 'custom' ? 'border-emerald-600 text-emerald-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    {{ __('Custom Accounts') }}
                </a>
            </div>

            <!-- Main Content Grid -->
            @if($tab === 'custom')
                <!-- Custom Accounts Table -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                 <tr>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Account Name') }}</th>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Account Type') }}</th>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Email') }}</th>
                                     <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Opening Balance') }}</th>
                                     <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Actions') }}</th>
                                 </tr>
                             </thead>
                             <tbody class="bg-white divide-y divide-gray-200">
                                 @forelse($customAccounts as $account)
                                     <tr class="hover:bg-gray-50 transition duration-150">
                                         <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                             <a href="{{ route('custom-accounts.show', $account->id) }}" class="text-blue-600 hover:text-blue-800">{{ $account->name }}</a>
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $account->account_type }}</td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $account->email ?? '-' }}</td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-mono text-gray-950 font-semibold">
                                             {{ $currencySymbol }}{{ number_format($account->opening_balance ?? 0.00, 2) }}
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex items-center justify-end gap-2">
                                            <a href="{{ route('custom-accounts.show', $account->id) }}" class="text-blue-600 hover:text-blue-900" title="{{ __('View Details') }}">
                                                {{ __('View') }}
                                            </a>
                                            @if(Auth::user()->isAdmin())
                                                <a href="{{ route('custom-accounts.edit', $account->id) }}" class="text-amber-600 hover:text-amber-900" title="{{ __('Edit') }}">
                                                    {{ __('Edit') }}
                                                </a>
                                                <form action="{{ route('custom-accounts.destroy', $account->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to permanently delete this account?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="text-red-600 hover:text-red-900">{{ __('Delete') }}</button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-10 text-center text-sm text-gray-500">
                                            {{ __('No custom accounts found.') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($customAccounts->count() > 0)
                        <div class="px-6 py-4 bg-gray-50 border-t border-gray-150">
                            {{ $customAccounts->links() }}
                        </div>
                    @endif
                </div>
            @else
                <!-- Clients Table -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Client Name') }}</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Contact Info') }}</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Company') }}</th>
                                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Actions') }}</th>
                                 <tr>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Client Name') }}</th>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Contact Info') }}</th>
                                     <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Company') }}</th>
                                     <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Opening Balance') }}</th>
                                     <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">{{ __('Actions') }}</th>
                                 </tr>
                             </thead>
                             <tbody class="bg-white divide-y divide-gray-200">
                                 @forelse($clients as $client)
                                     <tr class="hover:bg-gray-50 transition duration-150">
                                         <td class="px-6 py-4 whitespace-nowrap">
                                             <div class="flex items-center">
                                                 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-semibold text-sm">
                                                     {{ strtoupper(substr($client->first_name, 0, 1) . substr($client->last_name, 0, 1)) }}
                                                 </div>
                                                 <div class="ml-4">
                                                     <a href="{{ route('clients.show', $client->id) }}" class="text-sm font-semibold text-gray-900 hover:text-emerald-600">
                                                         {{ $client->title }} {{ $client->first_name }} {{ $client->last_name }}
                                                     </a>
                                                     <div class="text-xs text-gray-400">ID: CL-{{ str_pad($client->id, 5, '0', STR_PAD_LEFT) }}</div>
                                                 </div>
                                             </div>
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                             @if($client->email)
                                                 <div class="flex items-center text-gray-600 mb-0.5">
                                                     <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                                     {{ $client->email }}
                                                 </div>
                                             @endif
                                             @if($client->phone || $client->mobile)
                                                 <div class="flex items-center text-gray-500">
                                                     <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.98-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                                                     {{ $client->mobile ?: $client->phone }}
                                                 </div>
                                             @endif
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                             @if($client->company_name)
                                                 <div class="font-medium text-gray-700">{{ $client->company_name }}</div>
                                                 @if($client->company_vat)
                                                     <div class="text-xs text-gray-400">{{ __('VAT:') }} {{ $client->company_vat }}</div>
                                                 @endif
                                             @else
                                                 <span class="text-gray-300">-</span>
                                             @endif
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-mono text-gray-950 font-semibold">
                                             {{ $currencySymbol }}{{ number_format($client->opening_balance ?? 0.00, 2) }}
                                         </td>
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex items-center justify-end gap-3">
                                            <a href="{{ route('clients.show', $client->id) }}" class="text-emerald-600 hover:text-emerald-900" title="{{ __('View Details') }}">
                                                {{ __('View') }}
                                            </a>
                                            @if(!Auth::user()->isAccountant())
                                                <a href="{{ route('clients.edit', $client->id) }}" class="text-amber-600 hover:text-amber-900" title="{{ __('Edit') }}">
                                                    {{ __('Edit') }}
                                                </a>
                                            @endif
                                            @if(Auth::user()->isAdmin())
                                                <form action="{{ route('clients.destroy', $client->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to permanently delete this client?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="text-red-600 hover:text-red-900">{{ __('Delete') }}</button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-10 text-center text-sm text-gray-500">
                                            {{ __('No clients found.') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($clients->count() > 0)
                        <div class="px-6 py-4 bg-gray-50 border-t border-gray-150">
                            {{ $clients->links() }}
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</x-app-layout>
