<div>
    <x-title :breadcrumbs="[
        ['link' => route('wills-cases.index'), 'title' => 'Wills &amp; Trusts'],
        ['link' => route('wills-cases.view', $willsCase), 'title' => $willsCase->case_number ?? $willsCase->displayId],
    ]">
        {{ $willsCase->case_number ?? $willsCase->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($willsCase->is_open)
                            <span class="badge bg-success fs-6">Open</span>
                        @else
                            <span class="badge bg-secondary fs-6">Closed</span>
                        @endif
                        @if($willsCase->ifa_referred)
                            <span class="badge bg-info ms-1">IFA Referred</span>
                        @endif
                    </div>

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

                    <hr>

                    <div class="text-start small">
                        <div class="mb-1">
                            <span class="text-muted">Client:</span>
                            <a href="{{ route('clients.show', $willsCase->client) }}">
                                {{ $willsCase->client->name_first }} {{ $willsCase->client->name_last }}
                            </a>
                        </div>
                        @if($willsCase->opened_at)
                            <div class="mb-1">
                                <span class="text-muted">Opened:</span> {{ $willsCase->opened_at->format('d/m/Y') }}
                            </div>
                        @endif
                        @if($willsCase->closed_at)
                            <div class="mb-1">
                                <span class="text-muted">Closed:</span> {{ $willsCase->closed_at->format('d/m/Y') }}
                            </div>
                        @endif
                        @if($willsCase->occupation)
                            <div class="mb-1">
                                <span class="text-muted">Occupation:</span> {{ $willsCase->occupation }}
                            </div>
                        @endif
                        @if($willsCase->national_insurance)
                            <div class="mb-1">
                                <span class="text-muted">NI:</span> {{ $willsCase->national_insurance }}
                            </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', $willsCase)
                        <a href="{{ route('wills-cases.edit', $willsCase) }}"
                           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', $willsCase->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',
                            'dates'        => 'Dates',
                            'comments'     => 'Comments',
                            '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')
                            <table class="table table-sm">
                                <tbody>
                                <tr><th class="text-muted fw-normal w-40">Case Number</th><td>{{ $willsCase->case_number ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Date/Time Opened</th><td>{{ $willsCase->opened_at ? $willsCase->opened_at->format('d/m/Y H:i') : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Date/Time Closed</th><td>{{ $willsCase->closed_at ? $willsCase->closed_at->format('d/m/Y H:i') : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">IFA Referred Date</th><td>{{ $willsCase->ifa_referred_date ? $willsCase->ifa_referred_date->format('d/m/Y') : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">National Insurance</th><td>{{ $willsCase->national_insurance ?? '—' }}</td></tr>
                                <tr>
                                    <th class="text-muted fw-normal">IFA Referred</th>
                                    <td>
                                        @if($willsCase->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">Fee Structure</th><td>{{ $willsCase->fee_structure ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Occupation</th><td>{{ $willsCase->occupation ?? '—' }}</td></tr>
                                </tbody>
                            </table>

                        {{-- KEY DETAILS --}}
                        @elseif($activeTab === 'key-details')
                            <table class="table table-sm">
                                <tbody>
                                <tr>
                                    <th class="text-muted fw-normal w-40">Date of Birth</th>
                                    <td>
                                        @if($willsCase->client->date_of_birth)
                                            {{ $willsCase->client->date_of_birth->format('d/m/Y') }}
                                            <span class="text-muted">({{ $willsCase->client->date_of_birth->age }})</span>
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                                <tr><th class="text-muted fw-normal">NI Number</th><td>{{ $willsCase->national_insurance ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Case Number</th><td>{{ $willsCase->case_number ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Occupation</th><td>{{ $willsCase->occupation ?? '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Fee Structure</th><td>{{ $willsCase->fee_structure ?? '—' }}</td></tr>
                                <tr>
                                    <th class="text-muted fw-normal">IFA Referred</th>
                                    <td>
                                        @if($willsCase->ifa_referred)
                                            <span class="badge bg-info">Yes</span>
                                        @else
                                            <span class="badge bg-light text-dark">No</span>
                                        @endif
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        {{-- DATES --}}
                        @elseif($activeTab === 'dates')
                            <table class="table table-sm">
                                <tbody>
                                <tr><th class="text-muted fw-normal w-40">Date/Time Opened</th><td>{{ $willsCase->opened_at ? $willsCase->opened_at->format('d/m/Y H:i') : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">Date/Time Closed</th><td>{{ $willsCase->closed_at ? $willsCase->closed_at->format('d/m/Y H:i') : '—' }}</td></tr>
                                <tr><th class="text-muted fw-normal">IFA Referred Date</th><td>{{ $willsCase->ifa_referred_date ? $willsCase->ifa_referred_date->format('d/m/Y') : '—' }}</td></tr>
                                </tbody>
                            </table>

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

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

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

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

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

                        @endif
                    </div>

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

    </div>
</div>
