<div class="card mb-4 shadow-sm">
    <div class="card-body">

        {{-- HEADER --}}
        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Impact Factors

        </h4>

            {{-- FORM CONTENT --}}
            <div class="row g-4">

                {{-- Question 1: Relevant Payment --}}
                <div class="col-md-12 radio-lg">
                    <x-ui.radio
                            label="Has the client received a relevant payment (Criminal Injuries Compensation Authority related to abuse, court awarded damages or out of court settlement related to abuse or Advance Payment Scheme payments)?"
                            name="has_received_relevant_payment"
                            wire:model.live="has_received_relevant_payment"
                            :options="[true => 'Yes', false => 'No']"
                    />
                </div>

                @if ($has_received_relevant_payment == true)
                    <div class="col-md-12">
                        <div class="ms-4 ps-3 border-start border-3 border-primary-subtle bg-light rounded py-3 row g-3">
                            <div class="col-md-12">
                                <x-ui.input
                                        label="If Yes, when did the client get the payment?"
                                        type="date"
                                        name="payment_date"
                                        wire:model="payment_date"
                                />
                            </div>
                            <div class="col-md-12">
                                <x-ui.input
                                        label="What organisation paid this to the client?"
                                        name="paying_organisation"
                                        wire:model="paying_organisation"
                                />
                            </div>
                            <div class="col-md-12">
                                <x-ui.input
                                        label="How much did the client receive?"
                                        name="payment_amount"
                                        wire:model="payment_amount"
                                />
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Question 2: Criminal Conviction --}}
                <div class="col-md-12 radio-lg">
                    <x-ui.radio
                            label="Does the client have a criminal conviction for a criminal conviction for rape or murder or received a sentence of imprisonment of 5 years or more for a relevant violent or sexual offence?"
                            name="has_criminal_conviction"
                            wire:model.live="has_criminal_conviction"
                            :options="[true => 'Yes', false => 'No']"
                    />
                </div>
            </div>
    </div>

    {{-- FOOTER --}}
        <div class="card-footer text-end bg-light">
            <button
                    wire:click="saveImpactDetails"
                    class="btn btn-success"
            >
                Save
            </button>
        </div>
</div>