Anons79 Mini Shell

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="header">
                Meta Pixel
            </div>
            <div class="body ">
                <div class="panel-group" id="accordion_1" role="tablist" aria-multiselectable="true">
                    @foreach ($pages as $indexPg => $page)
                       
                        <div class="panel panel-primary">

                            <div class="panel-heading target-page" data-page="{{ route($page['route']) }}" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse-page-{{ Str::slug($page['route']) }}"
                                        aria-expanded="false" aria-controls="collapse-page-{{ Str::slug($page['route']) }}">
                                        {{ $page['name'] }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse-page-{{ Str::slug($page['route']) }}" class="panel-collapse collapse" role="tabpanel"
                                aria-labelledby="heading-page-{{ Str::slug($page['route']) }}">
                                <div class="panel-body">
                                     <input type="hidden" name="page[{{ $indexPg }}]" value="{{ $page['route'] }}">
                                    <ul class="list-group">

                                        @foreach ($page['elements'] as $indexEl => $element)
                                            <input type="hidden" name="element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
                                            <li class="list-group-item target-element" data-page="{{ route($page['route']) }}" data-element="{{ $element['element'] }}">
                                                <p>{{ $element['name'] }}</p>
                                                @php
                                                    $cek = $pixelEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->first();
                                                @endphp
                                                <div class="form-group">
                                                    <label for="pixel_id{{ $indexPg }}_{{ $indexEl }}" class="form-label">Pixel ID</label>
                                                    <div class="form-line">
                                                        <input type="text" id="pixel_id_{{ $indexPg }}_{{ $indexEl }}" name="pixel_id[{{ $indexPg }}][{{ $indexEl }}]"
                                                            class="form-control" placeholder="Pixel ID"
                                                            value="{{ @$cek->pixel_id ?? '' }}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="pixel_event{{ $indexPg }}_{{ $indexEl }}" class="form-label">Event</label>
                                                    <div class="form-line">
                                                        <select name="pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
                                                            class="form-control show-tick" id="autotext">

                                                            @foreach ($events as $event)
                                                                <option value="{{ $event }}" @if(($cek && $cek->pixel_event == $event) || (!$cek && $element['default'] == $event))
                                                                selected @endif>{{$event}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach


                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach
                   
                </div>

                 <button type="submit" class="btn btn-success">Simpan</button>
            </div>
            
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <iframe id="preview" src="{{ route('home') }}" style="border: none; width: 100%;height: 80vh;"></iframe>
        </div>
    </div>
    
</div>



@push('scripts')
    <script>
        $(document).ready(function () {
            var iframe = $("#preview");
            $(document).on('click', '.target-page', function () {
                const page = $(this).data('page');
                if(iframe.attr('src') != page){
                    iframe.attr('src', page);
                }
            })
            $(document).on('click', '.target-element', function () {
                const page = $(this).data('page');
                const element = $(this).data('element');
                if(iframe.attr('src') == page){
                    var iframeContents = iframe.contents();

                    iframeContents.find('body *').removeClass('red-border');
                    

                    var cekBtnGroup = iframeContents.find("table .btn-group.btn-block.open");
                    if((!cekBtnGroup || cekBtnGroup.length <= 0) && iframeContents.find("table .dropdown-toggle").length > 0){
                        iframeContents.find("table .dropdown-toggle").get(0).click();
                    }

                    var targetElement = iframeContents.find(element);
                    

                    if (targetElement.length) {
                        targetElement.addClass('red-border');
                        setTimeout(() => {
                            
                            targetElement.get(0).scrollIntoView({ behavior: 'smooth', block: 'center', })
                        }, 500);
                    }
                } else {
                    iframe.attr('src', page);
                    console.log(iframe.src);
                    iframe.onload = function(){
                        var iframeContents = iframe.contents();
                        iframeContents.find('body *').removeClass('red-border');

                        var cekBtnGroup = iframeContents.find("table .btn-group.btn-block.open");
                        if((!cekBtnGroup || cekBtnGroup.length <= 0) && iframeContents.find("table .dropdown-toggle").length > 0){
                            iframeContents.find("table .dropdown-toggle").get(0).click();
                        }

                        var targetElement = iframeContents.find(element);

                        if (targetElement.length) {
                            // iframeContents.find("html, body").animate({
                            //     scrollTop: targetElement.offset().top
                            // }, 500); // 500ms animation speed
                            targetElement.addClass('red-border');
                            setTimeout(() => {
                                targetElement.get(0).scrollIntoView({ behavior: 'smooth', block: 'center', })
                            }, 500);
                        }
                    }
                }
            })

        });
    </script>
@endpush