@props(['activeTab' => 'overview'])
<div>

    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'overview' ? 'active' : '' }}"
               style="{{ $activeTab === 'overview' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('overview')">
                Overview
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'contact' ? 'active' : '' }}"
               style="{{ $activeTab === 'contact' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('contact')">
                Contact
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'application' ? 'active' : '' }}"
               style="{{ $activeTab === 'application' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('application')">
                Application
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'statements' ? 'active' : '' }}"
               style="{{ $activeTab === 'statements' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('statements')">
                Statements
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'contracts' ? 'active' : '' }}"
               style="{{ $activeTab === 'contracts' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('contracts')">
                Contracts
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'dsars' ? 'active' : '' }}"
               style="{{ $activeTab === 'dsars' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('dsars')">
                DSARs
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'evidence' ? 'active' : '' }}"
               style="{{ $activeTab === 'evidence' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('evidence')">
                Evidence
            </a>
        </li>

        @can('clients.witness.view')
        <li class="nav-item">
            <a wire:navigate class="nav-link" href="{{ route('clients.witness.show', $client) }}">
                Witness Statement
                <span class="mdi mdi-open-in-new small" aria-hidden="true"></span>
            </a>
        </li>
        @endcan

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'documents' ? 'active' : '' }}"
               style="{{ $activeTab === 'documents' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('documents')">
                Documents
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'tasks' ? 'active' : '' }}"
               style="{{ $activeTab === 'tasks' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('tasks')">
                Tasks
            </a>
        </li>

        <li class="nav-item">
            <a wire:navigate class="nav-link {{ $activeTab === 'history' ? 'active' : '' }}"
               style="{{ $activeTab === 'history' ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
               wire:click.prevent="setTab('history')">
                History
            </a>
        </li>
    </ul>

    <div wire:loading wire:target="setTab" class="p-3 w-100">
        @include('components.skeleton.tab-content')
    </div>

    <!-- Actual content panel -->
    <div wire:loading.remove wire:target="setTab" class="fade show">

        @if($activeTab === 'overview')
            <x-client.overview :client="$client"/>

        @elseif($activeTab == 'contact')
            <livewire:contact.contact-hub :model="$client" :wire:key="'client-contact-hub-' . $client->id"/>

        @elseif($activeTab === 'dsars')
            @if($client->claim)
                <livewire:synapse.dsar-identifier
                    :claim="$client->claim"
                    :wire:key="'synapse-dsar-' . $client->claim->id"/>
            @endif
            <livewire:claim.dsars :client="$client"/>

        @elseif($activeTab === 'application')
            <livewire:claim.application.application :client="$client"/>

        @elseif($activeTab === 'statements')
            <livewire:claim.application.statements :client="$client"/>

        @elseif($activeTab === 'contracts')
            <livewire:client.contracts :client="$client"/>

        @elseif($activeTab === 'evidence')
            <livewire:client.client-evidence :client="$client" :wire:key="'client-evidence-' . $client->id"/>

        @elseif($activeTab === 'documents')
            <livewire:document-manager :owner="$client"/>

        @elseif($activeTab === 'tasks')
            <livewire:task.task-assigner :owner="$client"/>

        @elseif($activeTab === 'history')
            <livewire:history :owner="$client"/>

        @endif

    </div>
</div>