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

        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Beneficiary

            @if ($hasBeneficiary)
            <button class="btn btn-danger btn-sm"
                    wire:click="deleteBeneficiary">
                <i class="mdi mdi-delete"></i>
            </button>
            @else
                <button class="btn btn-primary btn-sm"
                        wire:click="addBeneficiary">
                    <i class="mdi mdi-plus"></i>
                </button>
            @endif
        </h4>
        @if (session()->has('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @unless ($hasBeneficiary)
                <div class="text-center p-5 text-muted">
                    <i class="mdi mdi-note" style="font-size: 48px;"></i>
                    <p class="mt-3 fw-bold">No beneficiary has been added.</p>
                </div>
        @else
            <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-6">
                    <x-ui.input label="Email Address" type="email" name="beneficiary.email" />
                </div>
                <div class="col-md-6">
                    <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>
        @endunless
    </div>

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