<div class="card">
    <div class="card-body">
        <form>

            <!-- Question 14: Radio Toggle -->
            <div class="row align-items-center py-3 border-bottom">
                <div class="col-md-8">
                    <label class="form-label mb-0 fw-medium">
                        Q14 | Is the client providing documents to confirm their identity?
                    </label>
                </div>
                <div class="col-md-4 d-flex justify-content-md-end mt-2 mt-md-0">
                    <div class="form-check form-check-inline me-4">
                        <input class="form-check-input" type="radio" wire:model.live="isProvidingDocuments" id="docsYes"
                               value="1">
                        <label class="form-check-label" for="docsYes">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" wire:model.live="isProvidingDocuments" id="docsNo"
                               value="0">
                        <label class="form-check-label" for="docsNo">No</label>
                    </div>
                </div>
            </div>

            <!-- Primary Confirmation -->
            <div class="row align-items-center py-3 border-bottom">
                <div class="col-md-8">
                    <label class="form-label mb-0 fw-medium">
                        Q14 | Certified Primary Confirmation of Identity.
                    </label>
                </div>
                <div class="col-md-4 mt-2 mt-md-0">
                    <select wire:model="primaryConfirmation" class="form-select border-secondary-subtle">
                        <option value="">--- please select ---</option>
                        @foreach($primaryOptions as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- List 1 Confirmation -->
            <div class="row align-items-center py-3 border-bottom">
                <div class="col-md-8">
                    <label class="form-label mb-0 fw-medium">
                        Q14 | Certified List 1 Confirmation of Identity.
                    </label>
                </div>
                <div class="col-md-4 mt-2 mt-md-0">
                    <select wire:model="list1Confirmation" class="form-select border-secondary-subtle">
                        <option value="">--- please select ---</option>
                        @foreach($list1Options as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- List 2 Confirmation -->
            <div class="row align-items-center py-3 border-bottom">
                <div class="col-md-8">
                    <label class="form-label mb-0 fw-medium">
                        Q14 | Certified List 2 Confirmation of Identity.
                    </label>
                </div>
                <div class="col-md-4 mt-2 mt-md-0">
                    <select wire:model="list2Confirmation" class="form-select border-secondary-subtle">
                        <option value="">--- please select ---</option>
                        @foreach($list2Options as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

        </form>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-success btn-md" wire:click="save">
            Save
        </button>
    </div>
</div>