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

    @section('title', 'Bill ID Log : ' . $bill_id)
    
    @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 bg-yellow-50">
        @forelse ($logs 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
                     $extractedCustomerName = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '1' ? json_decode($logs[0]['payload'])[3] : 'error';
                    @endphp
                    @if($extractedCustomerName == 'error')
                        <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>
                    @else
                        <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>
                    @endif
                    <span class="acccordian-arrow float-right">&#9660;</span>
                </button>
                <div class="accordion-content hidden">
                    @foreach ($logs as $log)
                        <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>
        <script>
            // automatically open all accordion
            document.addEventListener('DOMContentLoaded', (event) => {  
                const accordionToggles = document.querySelectorAll('.accordion-toggle');
                
                accordionToggles.forEach(toggle => {
                    toggle.click();
                });
                
            });
        </script>
    @endpush
@endsection