@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') }}" :selectedDate="$date"
            :norujukan="$norujukan" />

        @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 p-4 bg-yellow-50">
        <div class="flex border-b border-gray-200 mb-4">
            <button class="tab-button active" data-tab="transactions-online">Transactions Online</button>
            <button class="tab-button" data-tab="transactions">Transactions</button>
            <button class="tab-button" data-tab="transaksi-keuntungan">Transaksi Keuntungan</button>
            <button class="tab-button" data-tab="gldetail">GL Detail</button>
        </div>

        @php
            $isGroupedByNorujukan = request()->groupedByNorujukan === 'on' ? true : false;
            $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
        @endphp
        <div id="transactions-online" class="tab-content active">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.partials.{$pageVariation}.table-transactions-online")
                </div>
            </div>
        </div>
        <div id="transactions" class="tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.partials.{$pageVariation}.table-transactions")
                </div>
            </div>
        </div>
        <div id="transaksi-keuntungan" class="tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.partials.{$pageVariation}.table-transaksi-keuntungan")
                </div>
            </div>
        </div>
        <div id="gldetail" class="tab-content hidden">
            <div class="relative overflow-hidden">
                <div class="overflow-x-scroll scroll-content">
                    @include("online.trail.partials.{$pageVariation}.table-gldetail")
                </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');
            const tabContents = document.querySelectorAll('.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`);
            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.active {
            background-color: #ffffff;
            border-bottom: 2px solid #3b82f6;
        }

        .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