<div >
@include('parts.overlay', ['target' => $loadData ])

<span x-data="{load: @entangle('seption_active')}" wire:init="init">
    <div id="rootContainer" style="display: none;" wire:ignore.self>
        <div x-show="load === 3">
            <div  wire:ignore>
                <livewire:components.vq-upload-quote-data :key="Str::random()" />
            </div>
        </div>

        <div x-show="load === 2">
            <div wire:ignore>
                <livewire:components.vq-select-insurers :key="Str::random()" />
            </div>
        </div>

        <div x-show="load === 1">
            <div wire:ignore>
                <livewire:components.vq-select-customer-vehicle :key="Str::random()" />
            </div>
        </div>
    </div>
</span>

</div>
@push('scripts')
<script>
    window.addEventListener('load', function() {
        document.getElementById('rootContainer').style.display = 'block';

        const element = $('#mydiv');
        element.animate({
            scrollTop: element.prop("scrollHeight")
        }, 500);
     });
</script>


@endpush
