@extends('layouts.app')
@section('content')

    @section('title', 'Online Transaction Trail')
    
    <breadcrumb :items="[{'title' : 'Debug Transaksi Online', 'icon' : 'fas fa-file-invoice','url' : {{ json_encode(route('transaction.online.home')) }}}, {'title' : 'Trail', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>

    <div class="container mx-auto p-4 pt-2">

        <x-filter-card 
            title="Online Payment Trail" 
            action="{{ route('transaction.online.trail') }}" 
            :startDate="$startDate"
            :endDate="$endDate"
            :norujukan="$norujukan" 
            :billplzBillId="$billplzBillId"
            :statuses="$statuses"
            :selectedStatus="$selectedStatus"
            :branches="$branches"
            :selectedBranch="$selectedBranch"
        />

        @if (Session::has('errormessage'))
            <div id="errorMessage" class="bg-red-100 border-red-500 text-red-900 text-sm p-4 rounded-lg mb-4" role="alert">
                <div class="flex">
                    <div class="py-1">
                        <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20">
                            <path
                                d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                        </svg>
                    </div>
                    <div>
                        <p class="font-bold">{{ Session::get('errormessage') }}</p>
                    </div>
                </div>
            </div>
        @endif

    </div>


<div class="container mx-auto">
  <div class="flex border-b-4 border-yellow-500">
  	<button class="flex items-center tab-button outer-tab-button active" data-tab="pkb-transactions-summary">
  	    <span>PKB (v2)</span>
  	</button>
  	<button class="flex items-center tab-button outer-tab-button" data-tab="kopkb-transactions-summary">
  	    <span>KOPKB (v3)</span>
  	</button>
  </div>
    @php
        $isGroupedByNorujukan = request()->groupedByNorujukan === 'on' ? true : false;
    @endphp
    <div>
    <div id="pkb-transactions-summary" class="p-4 bg-yellow-50 tab-content outer-tab-content active">
        <div class="flex border-b-4 border-black-600 pb-0 mb-0">
            <button class="tab-button inner-tab-button active flex items-center" data-tab="transactions-online">
                <span>Table transaction_online</span>
                @php
                    $flattenArray = fn($x) => is_array($x) ? array_merge(...array_values($x)) : [$x];
                    
                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transactionsOnline'])) : sizeOf($transactionTrailPKB['transactionsOnline']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionOnlineNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions">
                <span>Table transaction</span>
                @php
                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transaction'])) : sizeOf($transactionTrailPKB['transaction']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="transaksi-keuntungan">
                <span>Table transaksi_keuntungan</span>
                @php
                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['transaksiKeuntungan'])) : sizeOf($transactionTrailPKB['transaksiKeuntungan']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transaksiKeuntunganNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="gldetail">
                <span>Table gldetail</span>
                @php
                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailPKB['glDetail'])) : sizeOf($transactionTrailPKB['glDetail']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $glDetailNumbers }}</span>
            </button>
            
            @php
                $recordNumbers = [
                    $transactionOnlineNumbers,
                    $transactionNumbers,
                    $transaksiKeuntunganNumbers,
                    $glDetailNumbers,
                ];
                
                $uniqueRecordNumbers = array_unique($recordNumbers);
                $diffCount = count($uniqueRecordNumbers) > 1 ? max($uniqueRecordNumbers) - min($uniqueRecordNumbers) : 0;
                
                
            @endphp
            @if($diffCount !== 0)
                <button class="tab-button inner-tab-button tab-button-diff flex text-white items-center" data-tab="diff">
                    <span>Diff</span>
                </button>
            @endif
        </div>

        @php
            $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
        @endphp
        <div id="transactions-online" class="tab-content inner-tab-content active">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.pkb.partials.{$pageVariation}.table-transactions-online")
                </div>
            </div>
        </div>
        <div id="transactions" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.pkb.partials.{$pageVariation}.table-transactions")
                </div>
            </div>
        </div>
        <div id="transaksi-keuntungan" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.pkb.partials.{$pageVariation}.table-transaksi-keuntungan")
                </div>
            </div>
        </div>
        <div id="gldetail" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.pkb.partials.{$pageVariation}.table-gldetail")
                </div>
            </div>
        </div>
        <div id="diff" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.pkb.partials.table-diff")
                </div>
            </div>
        </div>
    </div>
    <div id="kopkb-transactions-summary" class="p-4 bg-yellow-50 tab-content outer-tab-content">
        <div class="flex border-b-4 border-black-600 pb-0 mb-0">
            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions-online-kopkb">
                <span>Table transaction_online</span>
                @php
                    $flattenArray = fn($x) => is_array($x) ? array_merge(...array_values($x)) : [$x];
                    
                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transactionsOnline'])) : sizeOf($transactionTrailKOOP['transactionsOnline']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionOnlineNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="transactions-kopkb">
                <span>Table transaction</span>
                @php
                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transaction'])) : sizeOf($transactionTrailKOOP['transaction']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="transaksi-keuntungan-kopkb">
                <span>Table transaksi_keuntungan</span>
                @php
                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['transaksiKeuntungan'])) : sizeOf($transactionTrailKOOP['transaksiKeuntungan']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transaksiKeuntunganNumbers }}</span>
            </button>
            <button class="tab-button inner-tab-button flex items-center" data-tab="gldetail-kopkb">
                <span>Table gldetail</span>
                @php
                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrailKOOP['glDetail'])) : sizeOf($transactionTrailKOOP['glDetail']);
                @endphp
                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $glDetailNumbers }}</span>
            </button>
            
            @php
                $recordNumbers = [
                    $transactionOnlineNumbers,
                    $transactionNumbers,
                    $transaksiKeuntunganNumbers,
                    $glDetailNumbers,
                ];
                
                $uniqueRecordNumbers = array_unique($recordNumbers);
                $diffCount = count($uniqueRecordNumbers) > 1 ? max($uniqueRecordNumbers) - min($uniqueRecordNumbers) : 0;
                
                
            @endphp
            @if($diffCount !== 0)
                <button class="tab-button inner-tab-button tab-button-diff flex text-white items-center" data-tab="diff-kopkb">
                    <span>Diff</span>
                </button>
            @endif
        </div>

        @php
            $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
        @endphp
        <div id="transactions-online-kopkb" class="tab-content inner-tab-content">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transactions-online")
                </div>
            </div>
        </div>
        <div id="transactions-kopkb" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transactions")
                </div>
            </div>
        </div>
        <div id="transaksi-keuntungan-kopkb" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.kopkb.partials.{$pageVariation}.table-transaksi-keuntungan")
                </div>
            </div>
        </div>
        <div id="gldetail-kopkb" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.kopkb.partials.{$pageVariation}.table-gldetail")
                </div>
            </div>
        </div>
        <div id="diff-kopkb" class="tab-content inner-tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.kopkb.partials.table-diff")
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('additional_scripts')

    <script>
        (function() {
            setTimeout(function() {
                var errorMessage = document.getElementById('errorMessage');
                if (errorMessage) {
                    errorMessage.style.display = 'none';
                }
            }, 3000);
        })();

	document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button.outer-tab-button');
            const tabContents = document.querySelectorAll('.tab-content.outer-tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.getAttribute('data-tab');

		    const activatedContent = document.querySelector('#' + tabId);
		    const innerTabFirst = activatedContent.querySelector('.inner-tab-button');
		    const innerTabAll = activatedContent.querySelectorAll('.inner-tab-button');
		    const innerTabContent = activatedContent.querySelector('.inner-tab-content');

		    innerTabAll.forEach(x => x.classList.remove('active'));
		    innerTabFirst.classList.add('active');
		    innerTabContent.classList.add('active');

                    // Deactivate all tabs
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Activate the clicked tab
                    button.classList.add('active');
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button.inner-tab-button');
            const tabContents = document.querySelectorAll('.tab-content.inner-tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.getAttribute('data-tab');

                    // Deactivate all tabs
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Activate the clicked tab
                    button.classList.add('active');
                    console.log(tabId)
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });

        function scrollContent(tabId, direction) {
            const scrollContainer = document.querySelector(`#${tabId} .scroll-content`);
	    console.log(tabId);
            const scrollAmount = 300; // Adjust this value to control scroll distance

            if (direction === 'left') {
                scrollContainer.scrollLeft -= scrollAmount;
            } else {
                scrollContainer.scrollLeft += scrollAmount;
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            let scrollableContents = document.querySelectorAll('.scroll-content');
            
            scrollableContents.forEach(x => attachScrollEvents(x));


            function attachScrollEvents(scrollableDiv) {
                let isMouseDown = false;
                let startX;
                let scrollLeft;
                let longPressTimer;

                scrollableDiv.addEventListener('mousedown', function(e) {
                    isMouseDown = false;
                    startX = e.pageX - scrollableDiv.offsetLeft;
                    scrollLeft = scrollableDiv.scrollLeft;

                    // Start a timer for long press
                    longPressTimer = setTimeout(() => {
                        isMouseDown = true;
                        scrollableDiv.style.cursor = 'grabbing';
                    }, 200); // Adjust this value to change how long a "long press" is
                });

                scrollableDiv.addEventListener('mouseleave', function() {
                    isMouseDown = false;
                    scrollableDiv.style.cursor = 'grab';
                    clearTimeout(longPressTimer);
                });

                scrollableDiv.addEventListener('mouseup', function() {
                    isMouseDown = false;
                    scrollableDiv.style.cursor = 'grab';
                    clearTimeout(longPressTimer);
                });

                scrollableDiv.addEventListener('mousemove', function(e) {
                    if (!isMouseDown) return;
                    e.preventDefault();
                    const x = e.pageX - scrollableDiv.offsetLeft;
                    const walk = (x - startX) * 8; // Adjust scrolling speed here
                    scrollableDiv.scrollLeft = scrollLeft - walk;
                });
            }
        });
    </script>
@endpush

@push('additional_styles')
    <style>
        .tab-button {
            padding: 10px 15px;
            background-color: #f3f4f6;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .tab-button-diff {
            background-color: #ef4444;
        }

        .tab-button.active {
            background-color: #ffffff;
            border-bottom: 2px solid #3b82f6;
        }
        
        .tab-button-diff.active {
            background-color: #f87171;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .relative {
            position: relative;
        }

        .scroll-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

        .left-arrow {
            left: 0;
        }

        .right-arrow {
            right: 0;
        }

        .scroll-content {
            max-width: 100%;
            overflow-x: auto;
            scroll-behavior: smooth;
        }
    </style>
@endpush
@push('additional_scripts')
    <script>
          document.addEventListener('DOMContentLoaded', function() {
              document.querySelectorAll('.search_billplz_id').forEach(function(element) {
                 element.addEventListener('click', function(event) {
                   document.getElementById('reset-button').dispatchEvent(new Event('click'));
                   let billpliz_id_value = element.parentNode.children[0].innerText.trim();
                   alert('search billplz bill id : '+billpliz_id_value)
                   document.getElementById('billplzBillId').value = billpliz_id_value; 
                   window.scrollTo(0, 0);
                   document.getElementById('filterOnlineTransactionForm').submit();
                   event.stopPropagation();
                 });
              });
          });
          
          
          document.addEventListener('DOMContentLoaded', function() {
              document.querySelectorAll('.search_norujukan').forEach(function(element) {
                 element.addEventListener('click', function(event) {
                   document.getElementById('reset-button').dispatchEvent(new Event('click'));
                   let norujukan = element.parentNode.children[0].innerText.trim();
                   alert('search norujukan : '+norujukan);
                   document.getElementById('norujukan').value = norujukan; 
                   window.scrollTo(0, 0);
                   document.getElementById('filterOnlineTransactionForm').submit();
                   event.stopPropagation();
                 });
              });
          });
    </script>
    @endpush