@php
    use App\Models\ProjectSource;

    $sources = ProjectSource::with('clients')
        ->where('IsActive', 1)
        ->get();
@endphp

<x-admin_layout>
    <div class="container-fluid mt-5">
        <div class="row card p-5 shadow">
            <div class="row">
                <h2 class="text-center">All Clients</h2>
            </div>

            <!-- Tabs -->
            <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                @foreach ($sources as $source)
                    <li class="nav-item">
                        <a class="nav-link @if ($loop->first) active @endif"
                           data-bs-toggle="tab"
                           href="#kt_tab_pane_id{{ $source->SourceID }}">
                            {{ $source->SourceName }}
                        </a>
                    </li>
                @endforeach
            </ul>

            <!-- Tab Content -->
            <div class="tab-content" id="myTabContent">
                @foreach ($sources as $source)
                <div class="tab-pane fade @if ($loop->first) show active @endif"
                    id="kt_tab_pane_id{{ $source->SourceID }}" role="tabpanel">
               
                   <!-- 🔍 Search input -->
                   <input type="text" class="form-control mb-3 client-search" placeholder="Search by client name...">
               
                   <div class="table-responsive">
                       <table class="table table-row-dashed table-row-gray-300 gy-7 client-table">
                           <thead>
                               <tr>
                                   <th>Client ID</th>
                                   <th>Client Name</th>
                               </tr>
                           </thead>
                           <tbody>
                               @forelse ($source->clients as $client)
                                   <tr>
                                       <td>{{ $client->ClientID }}</td>
                                       <td>{{ $client->ClientUser }}</td>
                                   </tr>
                               @empty
                                   <tr>
                                       <td colspan="3">No clients found.</td>
                                   </tr>
                               @endforelse
                           </tbody>
                       </table>
                   </div>
               </div>               
                @endforeach
            </div>
        </div>
    </div>
</x-admin_layout>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInputs = document.querySelectorAll('.client-search');

        searchInputs.forEach(input => {
            input.addEventListener('keyup', function () {
                const searchText = input.value.toLowerCase();
                const table = input.nextElementSibling.querySelector('tbody');
                const rows = table.querySelectorAll('tr');

                rows.forEach(row => {
                    const clientName = row.children[1]?.textContent.toLowerCase();
                    row.style.display = clientName.includes(searchText) ? '' : 'none';
                });
            });
        });
    });
</script>