<div>
    <x-title :breadcrumbs="[
        ['link' => route('pension-cases.index'), 'title' => 'Pension Cases'],
        ['link' => route('clients.show', $pensionCase->client), 'title' => $pensionCase->client->name_first . ' ' . $pensionCase->client->name_last],
        ['link' => route('pension-cases.view', $pensionCase), 'title' => $pensionCase->case_number ?? $pensionCase->displayId],
    ]">
        {{ $pensionCase->case_number ?? $pensionCase->displayId }}
    </x-title>

    <div class="row">

        {{-- LEFT: CASE CARD --}}
        <div class="col-12 col-md-3">
            <div class="card shadow-sm mb-3">
                <div class="card-body text-center">
                    <div class="mb-2">
                        @if($pensionCase->is_open)
                            <span class="badge bg-success fs-6">Open</span>
                        @else
                            <span class="badge bg-secondary fs-6">Closed</span>
                        @endif
                        @if($pensionCase->vulnerable_client_flag)
                            <span class="badge bg-danger ms-1">Vulnerable</span>
                        @endif
                        @if($pensionCase->do_not_contact)
                            <span class="badge bg-warning text-dark ms-1">DNC</span>
                        @endif
                    </div>

                    <h5 class="fw-bold mb-1">{{ $pensionCase->case_number ?? $pensionCase->displayId }}</h5>

                    @if($pensionCase->sf_case_id)
                        <div class="text-muted small mb-2">SF: {{ $pensionCase->sf_case_id }}</div>
                    @endif

                    <hr>

                    <div class="text-start small">
                        <div class="mb-1">
                            <span class="text-muted">Client:</span>
                            <a href="{{ route('clients.show', $pensionCase->client) }}">
                                {{ $pensionCase->client->name_first }} {{ $pensionCase->client->name_last }}
                            </a>
                        </div>
                        @if($pensionCase->case_owner)
                            <div class="mb-1">
                                <span class="text-muted">Owner:</span> {{ $pensionCase->case_owner }}
                            </div>
                        @endif
                        @if($pensionCase->claims_writer)
                            <div class="mb-1">
                                <span class="text-muted">Claims Writer:</span> {{ $pensionCase->claims_writer }}
                            </div>
                        @endif
                        @if($pensionCase->file_investigator)
                            <div class="mb-1">
                                <span class="text-muted">Investigator:</span> {{ $pensionCase->file_investigator }}
                            </div>
                        @endif
                        @if($pensionCase->priority)
                            <div class="mb-1">
                                <span class="text-muted">Priority:</span> {{ $pensionCase->priority }}
                            </div>
                        @endif
                        @if($pensionCase->opened_at)
                            <div class="mb-1">
                                <span class="text-muted">Opened:</span> {{ $pensionCase->opened_at->format('d/m/Y') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- QUICK ACTIONS --}}
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">Actions</h6>
                    @can('edit', $pensionCase)
                        <a href="{{ route('pension-cases.edit', $pensionCase) }}"
                           class="btn btn-sm btn-outline-primary w-100 mb-2">
                            <i class="mdi mdi-pencil me-1"></i> Edit Case
                        </a>
                    @endcan
                    <a href="{{ route('clients.show', $pensionCase->client) }}"
                       class="btn btn-sm btn-outline-secondary w-100">
                        <i class="mdi mdi-account me-1"></i> View Client
                    </a>
                </div>
            </div>
        </div>

        {{-- CENTER: TABS --}}
        <div class="col-12 col-md-9">
            <div class="card shadow-sm">
                <div class="card-body">

                    {{-- TAB NAV --}}
                    <ul class="nav nav-tabs mb-4 flex-wrap">
                        @foreach([
                            'overview' => 'Overview',
                            'key-details' => 'Key Details',
                            'statuses' => 'Statuses',
                            'financials' => 'Financials',
                            'dates' => 'Dates',
                            'comments' => 'Comments',
                            'interims' => 'Interims',
                            'notes' => 'Notes',
                            'tasks' => 'Tasks',
                            'documents' => 'Documents',
                            'history' => 'History',
                        ] as $tab => $label)
                            <li class="nav-item">
                                <a class="nav-link {{ $activeTab === $tab ? 'active' : '' }}"
                                   style="{{ $activeTab === $tab ? 'border-top: 3px solid #0d6efd; background: white;' : '' }}"
                                   wire:click.prevent="setTab('{{ $tab }}')">
                                    {{ $label }}
                                </a>
                            </li>
                        @endforeach
                    </ul>

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

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

                        {{-- OVERVIEW --}}
                        @if($activeTab === 'overview')
                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <table class="table table-sm">
                                        <tbody>
                                        <tr><th class="text-muted fw-normal w-40">Claim Subject</th><td>{{ $pensionCase->claim_subject ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Claim Basis</th><td>{{ $pensionCase->claim_basis ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Priority</th><td>{{ $pensionCase->priority ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Case Owner</th><td>{{ $pensionCase->case_owner ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Claims Writer</th><td>{{ $pensionCase->claims_writer ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">File Investigator</th><td>{{ $pensionCase->file_investigator ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Fee Structure</th><td>{{ $pensionCase->fee_structure ?? '—' }}</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-12 col-md-6">
                                    @if($pensionCase->additional_claims_info)
                                        <div class="mb-3">
                                            <strong class="d-block text-muted small mb-1">Additional Claims Info</strong>
                                            <p class="mb-0">{{ $pensionCase->additional_claims_info }}</p>
                                        </div>
                                    @endif
                                    @if($pensionCase->detail_of_outstanding_evidence)
                                        <div class="mb-3">
                                            <strong class="d-block text-muted small mb-1">Outstanding Evidence</strong>
                                            <p class="mb-0">{{ $pensionCase->detail_of_outstanding_evidence }}</p>
                                        </div>
                                    @endif
                                    @if($pensionCase->reasons_for_not_proceeding)
                                        <div>
                                            <strong class="d-block text-muted small mb-1">Reasons Not Proceeding</strong>
                                            <p class="mb-0">{{ $pensionCase->reasons_for_not_proceeding }}</p>
                                        </div>
                                    @endif
                                </div>
                            </div>

                        {{-- KEY DETAILS --}}
                        @elseif($activeTab === 'key-details')
                            <table class="table table-sm">
                                <tbody>
                                <tr><th class="text-muted fw-normal w-40">NI Number</th><td>{{ $pensionCase->national_insurance ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">CMC Reference</th><td>{{ $pensionCase->cmc_client_reference ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Underlying Investment</th><td>{{ $pensionCase->underlying_investment ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Investment Library</th><td>{{ $pensionCase->investment_library ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">PCP Subject</th><td>{{ $pensionCase->pcp_subject ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">FSCS Contact Name</th><td>{{ $pensionCase->fscs_contact_name ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">FSCS Contact Ref</th><td>{{ $pensionCase->fscs_contact_reference ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">FSCS Reference</th><td>{{ $pensionCase->fscs_reference ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Car Reg</th><td>{{ $pensionCase->car_reg ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">ATC</th><td>{{ $pensionCase->atc ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">TOB Issued By</th><td>{{ $pensionCase->tob_issued_by ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">SAR To</th><td>{{ $pensionCase->sar_to ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Lead Source CPF</th><td>{{ $pensionCase->lead_source_cpf ?? '—' }}</td></tr>
                                </tbody>
                            </table>

                        {{-- STATUSES --}}
                        @elseif($activeTab === 'statuses')
                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <table class="table table-sm">
                                        <tbody>
                                        <tr><th class="text-muted fw-normal w-40">Settlement Status</th><td>{{ $pensionCase->settlement_status ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Bank Claim Status</th><td>{{ $pensionCase->bank_claim_status ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">FOS Claim Status</th><td>{{ $pensionCase->fos_claim_status ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">FSCS Claim Status</th><td>{{ $pensionCase->fscs_claim_status ?? '—' }}</td></tr>
                                        <tr><th class="text-muted fw-normal">Client Settlement Instruction</th><td>{{ $pensionCase->client_settlement_instruction ?? '—' }}</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-12 col-md-6">
                                    <table class="table table-sm">
                                        <tbody>
                                        <tr><th class="text-muted fw-normal w-50">Vulnerable Client</th><td>@if($pensionCase->vulnerable_client_flag)<span class="badge bg-danger">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">Special Contact Req.</th><td>@if($pensionCase->special_contact_requirements_flag)<span class="badge bg-warning text-dark">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">SMS Opt Out</th><td>@if($pensionCase->sms_opt_out)<span class="badge bg-warning text-dark">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">Do Not Contact</th><td>@if($pensionCase->do_not_contact)<span class="badge bg-danger">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">IFA Referred</th><td>@if($pensionCase->ifa_referred)<span class="badge bg-info">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">Client In Dispute</th><td>@if($pensionCase->client_in_dispute)<span class="badge bg-danger">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">SAR Sent</th><td>@if($pensionCase->sar_sent)<span class="badge bg-success">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">SAR Received</th><td>@if($pensionCase->sar_received)<span class="badge bg-success">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">Fee Capping</th><td>@if($pensionCase->fee_capping_flag)<span class="badge bg-warning text-dark">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        <tr><th class="text-muted fw-normal">ATC Received</th><td>@if($pensionCase->atc_received)<span class="badge bg-success">Yes</span>@else<span class="badge bg-light text-dark">No</span>@endif</td></tr>
                                        </tbody>
                                    </table>
                                    @if($pensionCase->vulnerable_client_details)
                                        <p class="small text-muted mt-2">{{ $pensionCase->vulnerable_client_details }}</p>
                                    @endif
                                    @if($pensionCase->special_contact_requirements_details)
                                        <p class="small text-muted mt-2">{{ $pensionCase->special_contact_requirements_details }}</p>
                                    @endif
                                </div>
                            </div>

                        {{-- FINANCIALS --}}
                        @elseif($activeTab === 'financials')
                            <table class="table table-sm">
                                <tbody>
                                <tr><th class="text-muted fw-normal w-40">Settlement to Date (Raw)</th><td>{{ $pensionCase->settlement_to_date_raw ? '£'.number_format($pensionCase->settlement_to_date_raw, 2) : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Settlement to Date (New)</th><td>{{ $pensionCase->settlement_to_date_new ? '£'.number_format($pensionCase->settlement_to_date_new, 2) : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Projected Future Settlement</th><td>{{ $pensionCase->projected_future_settlement ? '£'.number_format($pensionCase->projected_future_settlement, 2) : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Quantum</th><td>{{ $pensionCase->quantum ? '£'.number_format($pensionCase->quantum, 2) : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">CPFC Fee %</th><td>{{ $pensionCase->cpfc_fee_percentage ? $pensionCase->cpfc_fee_percentage.'%' : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">CPFC Fee Total (Nett)</th><td>{{ $pensionCase->cpfc_fee_total_nett ? '£'.number_format($pensionCase->cpfc_fee_total_nett, 2) : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Our Fees % (Raw)</th><td>{{ $pensionCase->our_fees_percentage_raw ? $pensionCase->our_fees_percentage_raw.'%' : '—' }}</td></tr>
                                </tbody>
                            </table>

                        {{-- DATES --}}
                        @elseif($activeTab === 'dates')
                            <div class="row g-2">
                                @foreach([
                                    'issued_tob_date' => 'TOB Issued',
                                    'tob_in_date' => 'TOB In',
                                    'ifa_referred_date' => 'IFA Referred',
                                    'application_submitted_date' => 'Application Submitted',
                                    'date_requested_evidence' => 'Evidence Requested',
                                    'fos_allocated_date' => 'FOS Allocated',
                                    'fos_app_submitted_date' => 'FOS App Submitted',
                                    'fos_app_written_sent_to_client_date' => 'FOS App Written / Sent to Client',
                                    'fos_complaint_letter_sent_to_client_date' => 'FOS Complaint Letter Sent',
                                    'fos_initial_complaint_sent_date' => 'FOS Initial Complaint Sent',
                                    'fos_under_review_with_investigator_date' => 'FOS Under Review with Investigator',
                                    'fscs_allocated_date' => 'FSCS Allocated',
                                    'sar_received_date' => 'SAR Received',
                                    'sar_reviewed_scanned_date' => 'SAR Reviewed / Scanned',
                                    'application_out_for_signature_date' => 'Application Out for Signature',
                                    'allocated_to_investigator_date' => 'Allocated to Investigator',
                                ] as $field => $label)
                                    <div class="col-12 col-md-6">
                                        <div class="d-flex justify-content-between border-bottom py-1">
                                            <span class="text-muted small">{{ $label }}</span>
                                            <span class="small fw-medium">{{ $pensionCase->$field ? $pensionCase->$field->format('d/m/Y') : '—' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        {{-- COMMENTS --}}
                        @elseif($activeTab === 'comments')
                            <livewire:pension-case.comment-manager :pension-case="$pensionCase"/>

                        {{-- INTERIMS --}}
                        @elseif($activeTab === 'interims')
                            <livewire:pension-case.interim-manager :pension-case="$pensionCase"/>

                        {{-- NOTES --}}
                        @elseif($activeTab === 'notes')
                            <livewire:note-manager :owner="$pensionCase"/>

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

                        {{-- DOCUMENTS --}}
                        @elseif($activeTab === 'documents')
                            <livewire:document-manager :owner="$pensionCase"/>

                        {{-- HISTORY --}}
                        @elseif($activeTab === 'history')
                            <livewire:history :owner="$pensionCase"/>

                        @endif
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
