{{-- Step 3: Owner Information --}}

<div class="d-flex justify-content-between align-items-center mb-3">
    <p class="text-muted small mb-0">Add beneficial owners and/or application signers. ELAP allows a maximum of 2 application signers.</p>
    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnAddOwner">
        <i class="bx bx-plus me-1"></i> Add Owner
    </button>
</div>

<div id="ownersContainer">
    {{-- Owner rows added dynamically via JS --}}
</div>

<div id="noOwnerMsg" class="alert alert-info py-2 small">
    <i class="bx bx-info-circle me-1"></i> Click "Add Owner" to add at least one beneficial owner or officer.
</div>

@push('page_script')
<script>
(function () {
    $(document).on('click', '#btnAddOwner', function () {
        if ($('.owner-row').length > 0) {
            $('#noOwnerMsg').hide();
        }
    });

    $(document).on('click', '.btn-remove-owner', function () {
        if ($('.owner-row').length <= 1) {
            $('#noOwnerMsg').show();
        }
    });
})();
</script>
@endpush