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

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

            @if(!$client)
                <div class="alert alert-warning">
                    No client context — pension cases must be created from a client profile or via the importer.
                </div>
            @else

            {{-- 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-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">
                            <x-ui.input name="claim_subject" label="Claim Subject" wire:model="claim_subject"/>
                        </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 Pension Case
                </x-ui.button>
                <a href="{{ route('pension-cases.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

            @endif

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