<button x-on:show-detail.window="document.querySelector('[data-bs-target=\'#detailPersonModal\']').click()"
    type="button" data-bs-toggle="modal" data-bs-target="#detailPersonModal" class="d-none"></button>

<div wire:ignore.self class="modal fade" id="detailPersonModal" tabindex="-1" aria-labelledby="detailPersonModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="detailPersonModalLabel">{{ $modalTitle }}</h3>
                <button x-on:hide-modal.window="document.getElementById('btn-close-modal-register').click();"
                    id="btn-close-modal-register" type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col">
                    <!-- Card -->
                    <div class="border-0 scroll-mt-3">
                        <div>
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="fullName" class="col-form-label">Nombres</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="fullName">
                                        {{ $persona?->nombres }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="cedula" class="col-form-label">Cédula</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="cedula">
                                        {{ $persona?->cedula }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="direccion" class="col-form-label">Dirección</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="direccion">
                                        {{ $persona?->direccion }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="telefono" class="col-form-label">Teléfono</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="telefono">
                                        {{ $persona?->telefono }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="telefono_secundario" class="col-form-label">Teléfono Secundario</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="telefono_secundario">
                                        {{ $persona?->telefono_secundario ?? 'N/D' }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="whatsapp" class="col-form-label">Whatsapp</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="whatsapp">
                                        {{ $persona?->whatsapp ?? 'N/D' }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="telegram" class="col-form-label">Telegram</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="telegram">
                                        {{ $persona?->telegram ?? 'N/D' }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->
                            <div class="row mb-4">
                                <div class="col-lg-3">
                                    <label for="correo" class="col-form-label">Correo</label>
                                </div>

                                <div class="col-lg">
                                    <output class="form-control" id="correo">
                                        {{ $persona?->correo }}
                                    </output>
                                </div>
                            </div> <!-- / .row -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>