<div>
    <x-title :breadcrumbs="[
        ['link' => route('pension-cases.index'), 'title' => 'CPF Cases'],
        ['link' => route('pension-cases.view', $pensionCase), 'title' => $pensionCase->case_number ?? $pensionCase->displayId],
        ['link' => '#', 'title' => 'Edit'],
    ]">
        Edit CPF Case
    </x-title>

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

            {{-- 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 class="col-12 col-md-4">
                            <x-ui.input name="pcp_subject" label="PCP Subject" wire:model="pcp_subject"/>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Additional Claims Info</label>
                            <textarea class="form-control" wire:model="additional_claims_info" rows="3"></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Detail of Outstanding Evidence</label>
                            <textarea class="form-control" wire:model="detail_of_outstanding_evidence" rows="3"></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Reasons for Not Proceeding</label>
                            <textarea class="form-control" wire:model="reasons_for_not_proceeding" rows="2"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- FSCS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">FSCS Details</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <x-ui.input name="fscs_contact_name" label="FSCS Contact Name" wire:model="fscs_contact_name"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="fscs_contact_reference" label="FSCS Contact Reference" wire:model="fscs_contact_reference"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="fscs_reference" label="FSCS Reference" wire:model="fscs_reference"/>
                        </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 class="col-12">
                            <x-ui.input name="client_settlement_instruction" label="Client Settlement Instruction" wire:model="client_settlement_instruction"/>
                        </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 &amp; References</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-3">
                            <x-ui.input name="national_insurance" label="NI Number" wire:model="national_insurance"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="cmc_client_reference" label="CMC Client Reference" wire:model="cmc_client_reference"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="car_reg" label="Car Reg" wire:model="car_reg"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="atc" label="ATC" wire:model="atc"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="tob_issued_by" label="TOB Issued By" wire:model="tob_issued_by"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.select name="sar_to" label="SAR To" :options="$sarToOptions"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.select name="sar_received_from" label="SAR Received" :options="$sarReceivedOptions"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.select name="lead_source_id" label="Lead Source" :options="$leadSources"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <x-ui.input name="lead_source_cpf" label="Lead Source CPF (legacy)" wire:model="lead_source_cpf"/>
                        </div>
                        <div class="col-12 col-md-3">
                            <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="is_closed" label="Case is Closed" wire:model="is_closed"/>
                        </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="special_contact_requirements_flag" label="Special Contact Req." wire:model="special_contact_requirements_flag"/>
                        </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="do_not_contact" label="Do Not Contact" wire:model="do_not_contact"/>
                        </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="ifa_refer_opted_out" label="IFA Refer Opted Out" wire:model="ifa_refer_opted_out"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="client_in_dispute" label="Client in Dispute" wire:model="client_in_dispute"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="sar_sent" label="SAR Sent" wire:model="sar_sent"/>
                        </div>
                        <div class="col-6 col-md-3">
                            <x-ui.checkbox name="sar_received" label="SAR Received" wire:model="sar_received"/>
                        </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="atc_received" label="ATC Received" wire:model="atc_received"/>
                        </div>
                    </div>
                    @if($vulnerable_client_flag)
                        <div class="mt-3">
                            <label class="form-label">Vulnerable Client Details</label>
                            <textarea class="form-control" wire:model="vulnerable_client_details" rows="2"></textarea>
                        </div>
                    @endif
                    @if($special_contact_requirements_flag)
                        <div class="mt-3">
                            <label class="form-label">Special Contact Requirements Details</label>
                            <textarea class="form-control" wire:model="special_contact_requirements_details" rows="2"></textarea>
                        </div>
                    @endif
                </div>
            </div>

            {{-- FINANCIALS --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Financials</h5>
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <x-ui.input name="settlement_to_date_raw" label="Settlement to Date (Raw)" type="number" wire:model="settlement_to_date_raw"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="settlement_to_date_new" label="Settlement to Date (New)" type="number" wire:model="settlement_to_date_new"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="projected_future_settlement" label="Projected Future Settlement" type="number" wire:model="projected_future_settlement"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="quantum" label="Quantum" type="number" wire:model="quantum"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="cpfc_fee_percentage" label="CPFC Fee %" type="number" wire:model="cpfc_fee_percentage"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="cpfc_fee_total_nett" label="CPFC Fee Total (Nett)" type="number" wire:model="cpfc_fee_total_nett"/>
                        </div>
                        <div class="col-12 col-md-4">
                            <x-ui.input name="our_fees_percentage_raw" label="Our Fees % (Raw)" type="number" wire:model="our_fees_percentage_raw"/>
                        </div>
                    </div>
                </div>
            </div>

            {{-- KEY DATES --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Key Dates</h5>
                    <div class="row g-3">
                        @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-4">
                                <x-ui.input :name="$field" :label="$label" type="date" wire:model="{{ $field }}"/>
                            </div>
                        @endforeach
                    </div>
                </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 Changes
                </x-ui.button>
                <a href="{{ route('pension-cases.view', $pensionCase) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

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