<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">
            Terminal Illness

            @if ($terminal_illness)
                <button
                        class="btn btn-danger btn-sm"
                        wire:click="$set('terminal_illness', false)"
                >
                    <i class="mdi mdi-delete"></i>
                </button>
            @else
                <button
                        class="btn btn-primary btn-sm"
                        wire:click="$set('terminal_illness', true)"
                >
                    <i class="mdi mdi-plus"></i>
                </button>
            @endif
        </h4>

        {{-- EMPTY STATE --}}
        @unless ($terminal_illness)
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-medical-bag" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">
                    No terminal illness has been added for this client
                </p>
            </div>
        @else

            {{-- ============================= --}}
            {{-- ADVANCE PAYMENT SCHEME --}}
            {{-- ============================= --}}
            <div class="row mb-4">
                <div class="col-md-12 radio-lg">
                    <x-ui.radio
                            label="Did the applicant apply to the Advance Payment Scheme on the grounds of terminal illness"
                            name="applied_advance_payment"
                            wire:model.live="applied_advance_payment"
                            :options="[true => 'Yes', false => 'No']"
                    />
                </div>

                {{-- SUB: PERMISSION --}}
                @if ($applied_advance_payment === true)
                    <div class="col-md-12">
                        <div class="ms-4 ps-3 mt-3 border-start border-3 border-primary-subtle bg-light rounded py-3">
                            <x-ui.radio
                                    label="Does the applicant give permission to confirm their health status using their Advance Payment Scheme application"
                                    name="permission_confirm_health"
                                    wire:model.live="permission_confirm_health"
                                    :options="[true => 'Yes', false => 'No']"
                            />
                        </div>
                    </div>
                @endif
            </div>

            {{-- ============================= --}}
            {{-- EVIDENCE PATHWAY --}}
            {{-- ============================= --}}
            <hr>

            <div class="row mb-4">
                <div class="col-md-12 radio-lg">
                    <x-ui.radio
                            label="Does the applicant want to provide a copy of a DS1500 or BASRiS document"
                            name="provide_ds1500"
                            wire:model.live="provide_ds1500"
                            :options="[true => 'Yes', false => 'No']"
                    />
                </div>
            </div>

            {{-- ============================= --}}
            {{-- HEALTHCARE PROFESSIONAL PATH --}}
            {{-- ============================= --}}
            @if ($provide_ds1500 === false)
                <div class="ms-4 ps-3 border-start border-3 border-warning-subtle bg-light rounded py-3">

                    <x-ui.radio
                            label="Does the applicant agree to the Scheme contacting a healthcare professional to confirm the diagnosis"
                            name="agree_contact_healthcare"
                            wire:model.live="agree_contact_healthcare"
                            :options="[true => 'Yes', false => 'No']"
                    />

                    {{-- SUB: AGREED --}}
                    @if ($agree_contact_healthcare === true)
                        <div class="ms-4 ps-3 mt-3 border-start border-3 border-secondary-subtle bg-white rounded py-3">

                            {{-- MEDICAL REF --}}
                            <x-ui.radio
                                    label="Does the applicant know their CHI, NHS or other medical reference number"
                                    name="has_medical_ref"
                                    wire:model.live="has_medical_ref"
                                    :options="[true => 'Yes', false => 'No or not applicable']"
                            />

                            @if ($has_medical_ref === true)
                                <div class="ms-4 mt-3">
                                    <x-ui.input
                                            label="Medical Reference Number"
                                            name="medical_reference_number"
                                            wire:model="medical_reference_number"
                                    />
                                </div>
                            @endif

                            {{-- PROFESSIONAL TYPE --}}
                            <div class="mt-4">
                                <label class="form-label fw-bold">
                                    Type of healthcare professional to contact
                                </label>

                                <x-ui.radio
                                        name="healthcare_professional.type"
                                        wire:model="healthcare_professional.type"
                                        :options="[
                                        'gp' => 'General Practitioner',
                                        'consultant' => 'Hospital or hospice consultant or specialist',
                                        'specialist_nurse' => 'Specialist nurse',
                                        'district_nurse' => 'District or senior practice nurse'
                                    ]"
                                />
                            </div>

                            {{-- DETAILS --}}
                            <div class="row g-3 mt-3">
                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Healthcare professional name"
                                            name="healthcare_professional.name"
                                            wire:model="healthcare_professional.name"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Place of work"
                                            name="healthcare_professional.place"
                                            wire:model="healthcare_professional.place"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Email address"
                                            type="email"
                                            name="healthcare_professional.email"
                                            wire:model="healthcare_professional.email"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Telephone number"
                                            name="healthcare_professional.phone"
                                            wire:model="healthcare_professional.phone"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Address line 1"
                                            name="healthcare_professional.address_1"
                                            wire:model="healthcare_professional.address_1"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Address line 2"
                                            name="healthcare_professional.address_2"
                                            wire:model="healthcare_professional.address_2"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Address line 3"
                                            name="healthcare_professional.address_3"
                                            wire:model="healthcare_professional.address_3"
                                    />
                                </div>

                                <div class="col-md-6">
                                    <x-ui.input
                                            label="Postcode"
                                            name="healthcare_professional.postcode"
                                            wire:model="healthcare_professional.postcode"
                                    />
                                </div>
                            </div>

                        </div>
                    @endif
                </div>
            @endif

        @endif
    </div>

    {{-- FOOTER --}}
    @if ($terminal_illness)
        <div class="card-footer text-end">
            <button
                    wire:click="save"
                    class="btn btn-success"
            >
                Save
            </button>
        </div>
    @endif
</div>
