<div>
    <x-title :breadcrumbs="[
        ['link' => route('clients.show', $client), 'title' => $client->name_first . ' ' . $client->name_last],
    ]">
        {{ $client->name_first }} {{ $client->name_last }}

        @can('clients.edit')
            <x-slot:buttons>
                <a href="{{ route('clients.edit', $client) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="mdi mdi-pencil me-1"></i> Edit Client
                </a>
            </x-slot:buttons>
        @endcan
    </x-title>

    <div class="row g-3">

        {{-- LEFT: CLIENT INFO CARD --}}
        <div class="col-12 col-md-3">
            <div class="card shadow-sm mb-3">
                <div class="card-body text-center pb-2">

                    {{-- Avatar --}}
                    <div class="mx-auto mb-3 d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold fs-4"
                         style="width:64px;height:64px;">
                        {{ mb_strtoupper(mb_substr($client->name_first, 0, 1)) }}{{ mb_strtoupper(mb_substr($client->name_last, 0, 1)) }}
                    </div>

                    <h5 class="fw-bold mb-0 lh-sm">
                        {{ $client->name_first }}
                        @if($client->name_middle) {{ $client->name_middle }} @endif
                        {{ $client->name_last }}
                    </h5>
                    @if($client->name_preferred)
                        <div class="text-muted small mb-1">Known as: {{ $client->name_preferred }}</div>
                    @endif
                    @if($client->reference)
                        <span class="badge bg-light text-secondary border small">{{ $client->reference }}</span>
                    @endif
                </div>

                <hr class="my-0">

                <div class="card-body small">
                    {{-- Email --}}
                    <div class="d-flex align-items-start mb-2">
                        <i class="mdi mdi-email-outline text-muted me-2 mt-1" style="min-width:16px"></i>
                        @if($client->email_address)
                            <a href="mailto:{{ $client->email_address }}" class="text-break">{{ $client->email_address }}</a>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </div>

                    {{-- Mobile --}}
                    <div class="d-flex align-items-center mb-2">
                        <i class="mdi mdi-cellphone text-muted me-2" style="min-width:16px"></i>
                        @if($client->phone_number)
                            <a href="tel:{{ preg_replace('/\s+/', '', $client->phone_number) }}">{{ $client->phone_number }}</a>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </div>

                    {{-- Landline --}}
                    @if($client->landline)
                        <div class="d-flex align-items-center mb-2">
                            <i class="mdi mdi-phone-classic text-muted me-2" style="min-width:16px"></i>
                            <a href="tel:{{ preg_replace('/\s+/', '', $client->landline) }}">{{ $client->landline }}</a>
                        </div>
                    @endif

                    {{-- DOB --}}
                    <div class="d-flex align-items-center mb-2">
                        <i class="mdi mdi-cake-variant-outline text-muted me-2" style="min-width:16px"></i>
                        @if($client->date_of_birth)
                            {{ $client->date_of_birth->format('d/m/Y') }}
                            <span class="text-muted ms-1">({{ $client->date_of_birth->age }})</span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </div>

                    {{-- Address --}}
                    @php $currentAddress = $client->addresses()->where('is_current', true)->first() @endphp
                    <div class="d-flex align-items-start">
                        <i class="mdi mdi-home-outline text-muted me-2 mt-1" style="min-width:16px"></i>
                        @if($currentAddress)
                            <div>
                                @foreach(['line_1','line_2','line_3','line_4','line_5','line_6'] as $line)
                                    @if($currentAddress->$line)
                                        <div>{{ $currentAddress->$line }}</div>
                                    @endif
                                @endforeach
                                @if($currentAddress->postcode)
                                    <div class="fw-semibold">{{ $currentAddress->postcode }}</div>
                                @endif
                            </div>
                        @else
                            <span class="text-muted">No address on record</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- RIGHT: CLAIMS + TABBED EXTRAS --}}
        <div class="col-12 col-md-9">

            {{-- Claims --}}
            @if(auth()->user()->canAccessWorkspace('ha'))
                <livewire:client.profile.ha-claims :client="$client" :key="'ha-'.$client->id"/>
            @endif

            @if(auth()->user()->canAccessWorkspace('pension'))
                <livewire:client.profile.pension-cases :client="$client" :key="'pension-'.$client->id"/>
            @endif

            @if(auth()->user()->canAccessWorkspace('wills'))
                <livewire:client.profile.wills-cases :client="$client" :key="'wills-'.$client->id"/>
            @endif

            {{-- Notes / Documents / Address Book in tabs --}}
            <div class="card shadow-sm"
                 x-data="{ tab: 'notes' }">
                <div class="card-header bg-white border-bottom-0 pb-0">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link" :class="tab === 'notes' ? 'active' : ''" href="#"
                               @click.prevent="tab = 'notes'">
                                <i class="mdi mdi-note-text-outline me-1"></i> Notes
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="tab === 'documents' ? 'active' : ''" href="#"
                               @click.prevent="tab = 'documents'">
                                <i class="mdi mdi-file-document-outline me-1"></i> Documents
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="tab === 'address' ? 'active' : ''" href="#"
                               @click.prevent="tab = 'address'">
                                <i class="mdi mdi-map-marker-outline me-1"></i> Address Book
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div x-show="tab === 'notes'" x-cloak>
                        <livewire:note-manager :owner="$client" :key="'notes-'.$client->id"/>
                    </div>
                    <div x-show="tab === 'documents'" x-cloak>
                        <livewire:document-manager :owner="$client" :key="'docs-'.$client->id"/>
                    </div>
                    <div x-show="tab === 'address'" x-cloak>
                        <livewire:address-book :owner="$client" :key="'address-'.$client->id"/>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
