@push('styles')
    <style>

        .preview-wrap {
            width: 100%;
            height: 75vh;
            padding: 0;
            overflow: hidden;
           
        }

        #preview {
            margin: auto;
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            
            pointer-events: none;
        }

       


    </style>
@endpush

<div class="row">
    <div class="col-md-4" >
        <div class="row" >
            <div class="col-md-12">
                <div class="card">
                    <div class="header" style="padding-bottom: 0px;">
                        Meta Pixel
                        <div class="form-group">
                            <label for="main_meta_pixel_id" class="form-label">Pixel ID</label>
                            <div class="form-line">
                                <input type="text" id="main_meta_pixel_id" name="main_meta_pixel_id"
                                    class="form-control" placeholder="Meta Pixel ID" value="{{ old('main_meta_pixel_id',@$metaEvents->where('source','meta')->first()->pixel_id) }}">
                            </div>
                        </div>
                    </div>
                    <div class="body ">
                        <div class="panel-group" id="accordion_meta" 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']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion_meta" href="#meta-collapse-page-{{ Str::slug($page['route']) }}"
                                                aria-expanded="false" aria-controls="meta-collapse-page-{{ Str::slug($page['route']) }}">
                                                {{ $page['name'] }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="meta-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="meta_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
                                            <ul class="list-group">

                                                @foreach ($page['elements'] as $indexEl => $element)
                                                    <input type="hidden" name="meta_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
                                                    <li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
                                                        <p>{{ $element['name'] }}</p>
                                                        @php
                                                            $cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'meta')->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="meta_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="meta_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
                                                                    class="form-control show-tick" id="autotext">
                                                                    <option value="">Tidak Ada</option>
                                                                    @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>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="header" style="padding-bottom: 0px;">
                        TikTok Pixel
                        <div class="form-group">
                            <label for="main_tiktok_pixel_id" class="form-label">Pixel ID</label>
                            <div class="form-line">
                                <input type="text" id="main_tiktok_pixel_id" name="main_tiktok_pixel_id"
                                    class="form-control" placeholder="Tiktok Pixel ID" value="{{ old('main_tiktok_pixel_id',@$metaEvents->where('source','tiktok')->first()->pixel_id) }}">
                            </div>
                        </div>
                    </div>
                    <div class="body ">
                        <div class="panel-group" id="accordion_tiktok" 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']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion_tiktok" href="#tiktok-collapse-page-{{ Str::slug($page['route']) }}"
                                                aria-expanded="false" aria-controls="tiktok-collapse-page-{{ Str::slug($page['route']) }}">
                                                {{ $page['name'] }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="tiktok-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="tiktok_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
                                            <ul class="list-group">

                                                @foreach ($page['elements'] as $indexEl => $element)
                                                    <input type="hidden" name="tiktok_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
                                                    <li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
                                                        <p>{{ $element['name'] }}</p>
                                                        @php
                                                            $cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'tiktok')->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="tiktok_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="tiktok_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
                                                                    class="form-control show-tick" id="autotext">
                                                                    <option value="">Tidak Ada</option>
                                                                    @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>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="header" style="padding-bottom: 0px;">
                        Google Tag Manager
                        <div class="form-group">
                            <label for="main_gtm_pixel_id" class="form-label">GTM ID</label>
                            <div class="form-line">
                                <input type="text" id="main_gtm_pixel_id" name="main_gtm_pixel_id"
                                    class="form-control" placeholder="GTM ID" value="{{ old('main_gtm_pixel_id',@$metaEvents->where('source','gtm')->first()->pixel_id) }}">
                            </div>
                        </div>
                    </div>
                    <div class="body ">
                        <div class="panel-group" id="accordion_gtm" 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']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion_gtm" href="#gtm-collapse-page-{{ Str::slug($page['route']) }}"
                                                aria-expanded="false" aria-controls="gtm-collapse-page-{{ Str::slug($page['route']) }}">
                                                {{ $page['name'] }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="gtm-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="gtm_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
                                            <ul class="list-group">

                                                @foreach ($page['elements'] as $indexEl => $element)
                                                    <input type="hidden" name="gtm_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
                                                    <li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
                                                        <p>{{ $element['name'] }}</p>
                                                        @php
                                                            $cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'gtm')->first();
                                                        @endphp
                                                        <div class="form-group">
                                                            <label for="pixel_event{{ $indexPg }}_{{ $indexEl }}" class="form-label">Event</label>
                                                            <div class="form-line">
                                                                <select name="gtm_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
                                                                    class="form-control show-tick" id="autotext">
                                                                    <option value="">Tidak Ada</option>
                                                                    @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>
    </div>
    
    <div class="col-md-8">
        <div class="card preview-wrap">
            <iframe id="preview" src="{{ route('home') }}?trackingView=true" ></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