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

<div wire:ignore.self class="modal fade" id="detailRemotaModal" tabindex="-1" aria-labelledby="detailRemotaModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="detailRemotaModalLabel">{{ $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 -->
                    <ul class="nav nav-tabs" id="remotaDetailTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="information-tab" data-bs-toggle="tab" href="#information"
                                role="tab" aria-controls="information" aria-selected="true">Información General</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="cliente-tab" data-bs-toggle="tab" href="#cliente" role="tab"
                                aria-controls="cliente">Cliente</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="vendedor-tab" data-bs-toggle="tab" href="#vendedor" role="tab"
                                aria-controls="vendedor">Vendedor</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="plan-tab" data-bs-toggle="tab" href="#plan" role="tab"
                                aria-controls="plan">Plan</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="plan-tab" data-bs-toggle="tab" href="#socio" role="tab"
                                aria-controls="socio">Socio</a>
                        </li>
                    </ul>
                    <div class="border-0 scroll-mt-3 tab-content">
                        @include('livewire.remota.modal.remota')
                        @include('livewire.remota.modal.cliente')
                        @include('livewire.remota.modal.vendedor')
                        @include('livewire.remota.modal.plan')
                        @include('livewire.remota.modal.socio')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>