<div>
    <x-title :breadcrumbs="[
        ['link' => route('pension-cases.index'), 'title' => 'CPF Cases'],
        ['link' => '#', 'title' => 'New Case'],
    ]">
        New CPF Case
    </x-title>

    <div class="row justify-content-center">
        <div class="col-12 col-md-9">

            {{-- CLIENT --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Client</h5>

                    @if($client)
                        {{-- Existing client (arrived from client profile) --}}
                        <div class="d-flex align-items-start gap-3 flex-wrap">
                            <div class="flex-grow-1">
                                <div class="fw-bold fs-6">
                                    {{ $client->title ? $client->title . ' ' : '' }}{{ $client->name_first }}
                                    @if($client->name_middle) {{ $client->name_middle }} @endif
                                    {{ $client->name_last }}
                                </div>
                                @if($client->name_preferred)
                                    <div class="text-muted small">Known as: {{ $client->name_preferred }}</div>
                                @endif
                                <div class="small d-flex flex-wrap gap-3 mt-1">
                                    @if($client->date_of_birth)
                                        <span><span class="text-muted">DOB:</span> {{ $client->date_of_birth->format('d/m/Y') }}</span>
                                    @endif
                                    @if($client->phone_number)
                                        <span><span class="text-muted">Phone:</span> {{ $client->phone_number }}</span>
                                    @endif
                                    @if($client->email_address)
                                        <span><span class="text-muted">Email:</span> {{ $client->email_address }}</span>
                                    @endif
                                    @if($client->reference)
                                        <span><span class="text-muted">Ref:</span> {{ $client->reference }}</span>
                                    @endif
                                </div>
                            </div>
                            <a href="{{ route('clients.show', $client) }}" class="btn btn-sm btn-outline-secondary" target="_blank">
                                View Client
                            </a>
                        </div>
                    @else
                        {{-- New client fields --}}
                        <div class="row g-3">
                            <div class="col-12 col-md-2">
                                <x-ui.input name="client_title" label="Title *"/>
                            </div>
                            <div class="col-12 col-md-3">
                                <x-ui.input name="client_first_name" label="First Name *"/>
                            </div>
                            <div class="col-12 col-md-3">
                                <x-ui.input name="client_middle_name" label="Middle Name"/>
                            </div>
                            <div class="col-12 col-md-4">
                                <x-ui.input name="client_last_name" label="Last Name *"/>
                            </div>
                            <div class="col-12 col-md-4">
                                <x-ui.input name="client_preferred_name" label="Preferred Name"/>
                            </div>
                            <div class="col-12 col-md-4">
                                <x-ui.input name="client_dob" label="Date of Birth *" type="date"/>
                            </div>
                            <div class="col-12 col-md-4">
                                <x-ui.phone-input name="client_phone" label="Phone *"/>
                            </div>
                            <div class="col-12 col-md-6">
                                <x-ui.input name="client_email" label="Email"/>
                            </div>
                            <div class="col-12 col-md-6">
                                <x-ui.select name="client_lead_source_id" label="Lead Source" :options="$leadSources"/>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- CLAIM TYPE --}}
            <div class="card shadow-sm mb-4 border-primary">
                <div class="card-body">
                    <h5 class="card-title mb-3">Claim Type <span class="text-danger">*</span></h5>
                    <div class="d-flex gap-3 flex-wrap">
                        @foreach(['bank' => 'Bank', 'fscs' => 'FSCS', 'fos' => 'FOS'] as $value => $label)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio"
                                       name="claim_type"
                                       id="claim_type_{{ $value }}"
                                       value="{{ $value }}"
                                       wire:model="claim_type">
                                <label class="form-check-label fw-semibold" for="claim_type_{{ $value }}">
                                    {{ $label }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    @error('claim_type')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- CASE IDENTITY --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Case Identity</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <x-ui.input name="sf_case_id" label="Salesforce Case ID" wire:model="sf_case_id"/>
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.input name="case_number" label="Case Number" wire:model="case_number"/>
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.select name="case_lead_source_id" label="Lead Source (Case)" :options="$leadSources"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="case_owner" label="Case Owner" wire:model="case_owner"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="claims_writer" label="Claims Writer" wire:model="claims_writer"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="file_investigator" label="File Investigator" wire:model="file_investigator"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CLAIM DETAILS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Claim Details</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label small">Claim Subject</label>
                            <select wire:model="claim_subject" class="form-select">
                                <option value="">— Select —</option>
                                @foreach(\App\Support\ClaimSubjects::ALL as $subject)
                                    <option value="{{ $subject }}">{{ $subject }}</option>
                                @endforeach
                            </select>
                            @error('claim_subject')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-6">
                            <x-ui.input name="claim_basis" label="Claim Basis" wire:model="claim_basis"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="priority" label="Priority" wire:model="priority"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="underlying_investment" label="Underlying Investment" wire:model="underlying_investment"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="investment_library" label="Investment Library" wire:model="investment_library"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- STATUSES --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Statuses</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-3">
                            <x-ui.input name="settlement_status" label="Settlement Status" wire:model="settlement_status"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="bank_claim_status" label="Bank Claim Status" wire:model="bank_claim_status"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="fos_claim_status" label="FOS Claim Status" wire:model="fos_claim_status"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="fscs_claim_status" label="FSCS Claim Status" wire:model="fscs_claim_status"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CLIENT IDENTIFIERS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Client Identifiers</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <x-ui.input name="national_insurance" label="NI Number" wire:model="national_insurance"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="cmc_client_reference" label="CMC Client Reference" wire:model="cmc_client_reference"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="fee_structure" label="Fee Structure" wire:model="fee_structure"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- FLAGS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Flags</h5>
                    <div class="row g-3">
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="is_open" label="Case is Open" wire:model="is_open"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="vulnerable_client_flag" label="Vulnerable Client" wire:model="vulnerable_client_flag"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="do_not_contact" label="Do Not Contact" wire:model="do_not_contact"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="sms_opt_out" label="SMS Opt Out" wire:model="sms_opt_out"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="ifa_referred" label="IFA Referred" wire:model="ifa_referred"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="fee_capping_flag" label="Fee Capping" wire:model="fee_capping_flag"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="special_contact_requirements_flag" label="Special Contact Req." wire:model="special_contact_requirements_flag"/>
                        </div>
                    </div>
                    @if($vulnerable_client_flag)
                        <div class="mt-3">
                            <x-ui.input name="vulnerable_client_details" label="Vulnerable Client Details" wire:model="vulnerable_client_details"/>
                        </div>
                    @endif
                    @if($special_contact_requirements_flag)
                        <div class="mt-3">
                            <x-ui.input name="special_contact_requirements_details" label="Special Contact Requirements Details" wire:model="special_contact_requirements_details"/>
                        </div>
                    @endif
                </div>
            </div>

            {{-- SAVE --}}
            <div class="d-flex gap-2 mb-4">
                <x-ui.button wire:click="save" style="success" icon="mdi mdi-content-save">
                    Save CPF Case
                </x-ui.button>
                <a href="{{ route('pension-cases.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

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