<div>
    <x-title :breadcrumbs="[
        ['link' => route('ha-claims.index'), 'title' => 'HA Claims'],
        ['link' => route('ha-claims.view', $claim), 'title' => $claim->case_number ?: ('HA Claim #' . $claim->id)],
    ]">
        {{ $claim->case_number ?: 'HA Claim #' . $claim->id }}
    </x-title>

    <div class="row">

        {{-- LEFT: Claim summary + status + tranche --}}
        <div class="col-12 col-md-3">

            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <h5 class="fw-bold mb-1">{{ $claim->case_number ?: '—' }}</h5>
                            @if($claim->status)
                                <span class="badge" style="background-color: {{ $claim->status->color ?? '#6c757d' }}">
                                    {{ $claim->status->display_name }}
                                </span>
                            @endif
                        </div>
                        @can('claims.edit')
                            <a href="{{ route('claims.edit', $client) }}" class="btn btn-sm btn-outline-secondary" title="Edit Claim">
                                <i class="mdi mdi-pencil"></i>
                            </a>
                        @endcan
                    </div>

                    <div class="small text-muted mt-2">
                        <div class="mb-1">
                            <strong>Type:</strong>
                            @if($claim->redress_type === 'FIXED')
                                <span class="badge bg-primary">Fixed</span>
                            @elseif($claim->redress_type === 'INDIVIDUAL')
                                <span class="badge bg-info text-dark">Individual</span>
                            @else
                                —
                            @endif
                        </div>
                        <div class="mb-1">
                            <strong>Created:</strong> {{ $claim->created_at?->format('d/m/Y') ?? '—' }}
                        </div>
                    </div>

                    <hr>

                    @if($client)
                        <div class="small">
                            <strong>Client:</strong><br>
                            <a href="{{ route('clients.show', $client) }}" class="text-body fw-semibold">
                                <i class="mdi mdi-account me-1"></i>{{ $client->name_first }} {{ $client->name_last }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Status editor --}}
            <livewire:claim.edit-status :claim="$claim" />

            {{-- Funding Tranche --}}
            @if($client)
                <div class="card">
                    <div class="card-body">
                        <h5 class="fw-bold mb-2">Funding Tranche</h5>
                        @if($client->tranche()->exists())
                            <p class="mb-0 small">{{ $client->tranche->funder_name }} — {{ $client->tranche->tranche_name }}</p>
                        @else
                            <p class="mb-0 text-muted small">No funding tranche assigned.</p>
                        @endif
                    </div>
                </div>
            @endif

            {{-- Institution Manager --}}
            <livewire:claim.institution-manager :claim="$claim" />

        </div>

        {{-- CENTER + RIGHT: Tabs --}}
        <div class="col-12 col-md-9">

            <ul class="nav nav-tabs mb-4">
                @php
                    $tabs = [
                        'overview'     => 'Overview',
                        'application'  => 'Application',
                        'statements'   => 'Statements',
                        'dsars'        => 'DSARs',
                        'key-dates'     => 'Key Dates',
                        'contracts'     => 'Contracts',
                        'documents'     => 'Documents',
                        'notes'         => 'Notes',
                        'tasks'         => 'Tasks',
                        'history'       => 'History',
                    ];
                @endphp

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

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

            <div wire:loading.remove wire:target="setTab" class="fade show">

                @if($activeTab === 'overview')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="fw-bold mb-3">Case Details</h5>
                                    <dl class="row mb-0 small">
                                        <dt class="col-5">APP Number</dt>
                                        <dd class="col-7">{{ $claim->case_number ?: '—' }}</dd>
                                        <dt class="col-5">Redress Type</dt>
                                        <dd class="col-7">
                                            @if($claim->redress_type === 'FIXED')
                                                <span class="badge bg-primary">Fixed</span>
                                            @elseif($claim->redress_type === 'INDIVIDUAL')
                                                <span class="badge bg-info text-dark">Individual</span>
                                            @else
                                                —
                                            @endif
                                        </dd>
                                        <dt class="col-5">Claim ID</dt>
                                        <dd class="col-7">{{ $claim->claim_id ?: '—' }}</dd>
                                    </dl>
                                    <livewire:tag.tag-assigner :model="$claim" />
                                    <x-client.handler-list :client="$client" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="fw-bold mb-3">Care Settings</h5>
                                    @forelse($claim->careSettings as $setting)
                                        <div class="mb-2 pb-2 border-bottom">
                                            <a href="{{ route('institutions.show', $setting->institution) }}" class="fw-semibold text-dark small">
                                                {{ $setting->institution->display_name }}
                                            </a>
                                            @if($setting->dates)
                                                <div class="text-muted extra-small">{{ $setting->dates }}</div>
                                            @endif
                                        </div>
                                    @empty
                                        <p class="text-muted small">No care settings recorded.</p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

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

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

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

                @elseif($activeTab === 'key-dates')
                    <livewire:claim.key-dates-manager :claim="$claim" />

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

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

                @elseif($activeTab === 'notes')
                    <livewire:note-manager :owner="$claim" />

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

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

                @endif

            </div>

        </div>

    </div>
</div>
