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

    @section('title', 'Online Transaction Log')
    
    @push('additional_styles')
        <style>
            .accordion-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-out;
            }

            .accordion-content.show {
                max-height: 1000px;
                /* Adjust this value based on your content */
            }
        </style>
    @endpush
    <breadcrumb :items="[{'title' : 'Debug Transaksi Online', 'icon' : 'fas fa-file-invoice','url' : {{ json_encode(route('transaction.online.home')) }}}, {'title' : 'Log', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>

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

        <x-filter-date-card title="Online Transaction Log"
            action="{{ route('transaction.online.log.index') }}" :selectedDate="$date" />

        @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-log">
           <span>PKB (v2)</span>
       </button>
       <button class="flex items-center tab-button outer-tab-button" data-tab="kopkb-transactions-log">
           <span>KOPKB (v3)</span>
       </button>
    </div>
    <div class="container mx-auto p-4 bg-yellow-50">
    <div id="pkb-transactions-log" class="container mx-auto tab-content active">
        @forelse ($transactionLogPKB as $bill_id => $logs)
            <div class="mb-4">
                <button class="accordion-toggle w-full bg-gray-600 text-gray-100 p-2 text-left focus:outline-none">
                    <h2 class="inline-block">Bill ID: {{ $bill_id }}</h2>
                    @php
                     $isSpareCustomer = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '6' || $logs[0]['status'] == '12';
                     $isArrahnPayCustomer = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '1';
                     $extractedCustomerName = 'error';
                     
                     if($isSpareCustomer) {
                        $extractedCustomerName = 'SPARE';
                     }elseif($isArrahnPayCustomer) {
                        $extractedCustomerName = json_decode($logs[0]['payload'])[3];
                     }
                        
                    @endphp
                    
                    @if($isSpareCustomer)
                        <span class="ml-4 bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800"><h2 class="inline-block">{{ $extractedCustomerName }}</h2></span>
                    @elseif($isArrahnPayCustomer)
                        <span class="ml-4 bg-green-200 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800"><h2 class="inline-block">Customer Name: {{ $extractedCustomerName }}</h2></span>
                    @else
                        <span class="ml-4 bg-red-200 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800"><h2 class="inline-block">{{ $extractedCustomerName }}</h2></span>
                    @endif
                    <span class="acccordian-arrow float-right">&#9660;</span>
                </button>
                <div class="accordion-content hidden">
                        @foreach ($logs as $log)
                        <div class="bg-gray-600 text-white border-black p-0 pl-3 py-1 flex justify-between items-center">
                            @php
                                $formatTime = fn($x) => \Carbon\Carbon::parse($x, 'UTC')->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y g:i:s A');
                            @endphp
                            <span>{{ $formatTime($log['created_at']) }}</span>
                        </div>
                        <div class="bg-gray-500 text-white border-black p-3 flex justify-between items-center">
                            <span>{{ $log['status_label'] }}</span>
                            <span
                                class="inline-block bg-yellow-200 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800">
                                {{ $log['status'] }}
                            </span>
                            <!-- More log details here -->
                        </div>
                        <div class="flex w-full ">
                            <div class="w-1/2 bg-gray-800 text-black border-r border-green-500">
                                <div class="bg-green-600 text-gray-800">Request</div>
                                <div class="pr-3 bg-gray-800 text-green-600">
                                    <pre>{{ json_encode(json_decode($log['payload']), JSON_PRETTY_PRINT) }}</pre>
                                </div>
                            </div>
                            <div class="w-1/2 bg-gray-800 text-black">
                                <div class="bg-green-600 text-gray-800">Response</div>
                                <div class="pl-3 bg-gray-800 text-green-600">
                                    <pre>{{ json_encode(json_decode($log['response']), JSON_PRETTY_PRINT) }}</pre>
                                </div>
                            </div>
                        </div>
                        <br>
                    @endforeach
                </div>
            </div>
            @empty
                <div class="bg-white text-center py-6">
                    No data available for the date selected
                </div>
        @endforelse
        </div>

    <div id="kopkb-transactions-log" class="container mx-auto tab-content">
        @forelse ($transactionLogKOPKB as $bill_id => $logs)
            <div class="mb-4">
                <button class="accordion-toggle w-full bg-gray-600 text-gray-100 p-2 text-left focus:outline-none">
                    <h2 class="inline-block">Bill ID: {{ $bill_id }}</h2>
                    @php
                     $isSpareCustomer = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '6' || $logs[0]['status'] == '12';
                     $isArrahnPayCustomer = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '1';
                     $extractedCustomerName = 'error';
                     
                     if($isSpareCustomer) {
                        $extractedCustomerName = 'SPARE';
                     }elseif($isArrahnPayCustomer) {
                        $extractedCustomerName = json_decode($logs[0]['payload'])[3];
                     }
                        
                    @endphp
                    
                    @if($isSpareCustomer)
                        <span class="ml-4 bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800"><h2 class="inline-block">{{ $extractedCustomerName }}</h2></span>
                    @elseif($isArrahnPayCustomer)
                        <span class="ml-4 bg-green-200 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800"><h2 class="inline-block">Customer Name: {{ $extractedCustomerName }}</h2></span>
                    @else
                        <span class="ml-4 bg-red-200 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800"><h2 class="inline-block">{{ $extractedCustomerName }}</h2></span>
                    @endif
                    <span class="acccordian-arrow float-right">&#9660;</span>
                </button>
                <div class="accordion-content hidden">
                        @foreach ($logs as $log)
                        <div class="bg-gray-600 text-white border-black p-0 pl-3 py-1 flex justify-between items-center">
                            @php
                                $formatTime = fn($x) => \Carbon\Carbon::parse($x, 'UTC')->setTimezone('Asia/Kuala_Lumpur')->format('d/m/Y g:i:s A');
                            @endphp
                            <span>{{ $formatTime($log['created_at']) }}</span>
                        </div>
                        <div class="bg-gray-500 text-white border-black p-3 flex justify-between items-center">
                            <span>{{ $log['status_label'] }}</span>
                            <span
                                class="inline-block bg-yellow-200 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800">
                                {{ $log['status'] }}
                            </span>
                            <!-- More log details here -->
                        </div>
                        <div class="flex w-full ">
                            <div class="w-1/2 bg-gray-800 text-black border-r border-green-500">
                                <div class="bg-green-600 text-gray-800">Request</div>
                                <div class="pr-3 bg-gray-800 text-green-600">
                                    <pre>{{ json_encode(json_decode($log['payload']), JSON_PRETTY_PRINT) }}</pre>
                                </div>
                            </div>
                            <div class="w-1/2 bg-gray-800 text-black">
                                <div class="bg-green-600 text-gray-800">Response</div>
                                <div class="pl-3 bg-gray-800 text-green-600">
                                    <pre>{{ json_encode(json_decode($log['response']), JSON_PRETTY_PRINT) }}</pre>
                                </div>
                            </div>
                        </div>
                        <br>
                    @endforeach
                </div>
            </div>
            @empty
                <div class="bg-white text-center py-6">
                    No data available for the date selected
                </div>
        @endforelse
        
    </div>
    @push('additional_scripts')
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                const accordionToggles = document.querySelectorAll('.accordion-toggle');

                accordionToggles.forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        // Close all other toggles
                        accordionToggles.forEach(otherToggle => {
                            if (otherToggle !== toggle) {
                                const otherContent = otherToggle.nextElementSibling;
                                const otherArrow = otherToggle.querySelector('span.acccordian-arrow');

                                otherContent.classList.add('hidden');
                                otherContent.classList.remove('show');
                                otherContent.style.maxHeight = "0";
                                otherArrow.innerHTML = '&#9660;';
                            }
                        });

                        // Toggle the clicked accordion
                        const content = toggle.nextElementSibling;
                        const arrow = toggle.querySelector('span.acccordian-arrow');

                        content.classList.toggle('hidden');
                        content.classList.toggle('show');

                        if (content.classList.contains('show')) {
                            content.style.maxHeight = content.scrollHeight + "px";
                            arrow.innerHTML = '&#9650;';
                        } else {
                            content.style.maxHeight = "0";
                            arrow.innerHTML = '&#9660;';
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection
@push('additional_scripts')
    <script>
        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');
                });
            });
        });
    </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-button-diff.active {
            background-color: #f87171;
        }

        .tab-content {
            display: none;
        }

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

    </style>
@endpush