<div class="card mb-4">
    <div class="card-body">
        <h4 class="fw-bold mb-3">Beneficiary</h4>

        @if (session()->has('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="mb-4">
            <label class="form-label fw-bold">Do you want to add a beneficiary?</label>
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" wire:model.live="hasBeneficiary" id="beneficiaryYes" value="1">
                    <label class="form-check-label" for="beneficiaryYes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" wire:model.live="hasBeneficiary" id="beneficiaryNo" value="0">
                    <label class="form-check-label" for="beneficiaryNo">No</label>
                </div>
            </div>
        </div>

        @if ($hasBeneficiary)
            <div class="row">
                <div class="col-md-4">
                    <x-ui.input label="First Name" name="beneficiary.first_name" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="Middle Name" name="beneficiary.middle_name" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="Surname" name="beneficiary.surname" />
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <x-ui.input label="Date of Birth" type="date" name="beneficiary.date_of_birth" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="Email Address" type="email" name="beneficiary.email" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="Telephone Number" name="beneficiary.telephone" />
                </div>
            </div>

            <div class="row">
                <div class="col-12 mb-3">
                    <x-ui.input label="Address Line 1" name="beneficiary.address_line_1" />
                </div>
                <div class="col-12 mb-3">
                    <x-ui.input label="Address Line 2 (Optional)" name="beneficiary.address_line_2" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="City/Town" name="beneficiary.address_line_3" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="County/State" name="beneficiary.address_line_4" />
                </div>
                <div class="col-md-4">
                    <x-ui.input label="Postcode" name="beneficiary.postcode" />
                </div>
            </div>
        @endif
    </div>

    @can('claims.edit')
    @if ($hasBeneficiary)
        <div class="card-footer text-end">
        <button
            type="button"
            wire:click="save"
            wire:loading.attr="disabled"
            wire:target="save"
            class="btn btn-success"
        >
            <span wire:loading.remove wire:target="save">
                Save
            </span>

            <span wire:loading wire:target="save">
                Saving...
            </span>
        </button>
        </div>
    @endif
    @endcan
</div>