@props(['audits'])

<!-- Button with Modern Design -->
<div class="flex justify-start">
    <button onclick="openDrawer()"
        class="flex items-center gap-2 px-3 py-3 bg-gradient-to-r from-blue-500 to-blue-700 text-white font-semibold rounded-lg shadow-md hover:from-blue-600 hover:to-blue-800 transition-transform transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
        </svg>
        <span>Show Audit Trail</span>
    </button>
</div>

<!-- drawer overlay (klik di mana saja untuk menutup drawer) -->
<div id="drawer-overlay" class="fixed inset-0 z-30 hidden bg-black bg-opacity-50 backdrop-blur-sm transition-opacity" onclick="closeDrawer()"></div>

<!-- drawer component -->
<div id="drawer-right" class="fixed top-0 right-0 z-40 h-screen px-4 pt-[4.5rem] overflow-y-auto transition-transform translate-x-full bg-white w-80 sm:w-96 md:w-[30rem] lg:w-[50rem] xl:w-[60rem] dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-right-label">
    <h5 id="drawer-right-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
        <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
        </svg>Audit Trail
    </h5>
    <button type="button" onclick="closeDrawer()" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
        </svg>
        <span class="sr-only">Close menu</span>
    </button>
    <!-- Audit Trail Section -->
    @if($audits->isEmpty())
        <p class="text-sm text-gray-500 dark:text-gray-400">No audit logs available for this request.</p>
    @else
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <thead class="bg-gray-200 dark:bg-gray-700">
                    <tr>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 dark:text-gray-300">User</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 dark:text-gray-300">Changes</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 dark:text-gray-300">Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($audits as $audit)
                        <tr class="border-b dark:border-gray-700 @if($loop->even) bg-gray-50 dark:bg-gray-800 @endif">
                            <td class="py-3 px-4 text-gray-800 dark:text-gray-200">
                                {{ $audit->user ? $audit->user->name : 'System' }}
                            </td>
                            <td class="py-3 px-4 text-gray-800 dark:text-gray-200">
                                <div x-data="{ open: false }">
                                    <button @click="open = !open" class="text-blue-600 underline text-sm">
                                        <span x-show="!open">Lihat Detail</span>
                                        <span x-show="open">Sembunyikan</span>
                                    </button>
                                    <div x-show="open" x-transition class="mt-2 text-xs text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 p-3 rounded space-y-2">
                                        <div><strong>Event:</strong> {{ $audit->event }}</div>
                                        <div><strong>Id:</strong> {{ $audit->auditable_id }}</div>
                                        <div><strong>Model:</strong> {{ $audit->auditable_type }}</div>
                                        <div><strong>URL:</strong> {{ $audit->url }}</div>
                                        <div><strong>IP Address:</strong> {{ $audit->ip_address }}</div>
                                        <div><strong>User Agent:</strong> {{ $audit->user_agent }}</div>
                                        @if (!empty($audit->old_values))
                                            <div>
                                                <strong>Old Values:</strong>
                                                <ul class="list-disc list-inside ml-2">
                                                    @foreach ($audit->old_values as $key => $value)
                                                        <li><strong>{{ $key }}:</strong> {{ $value }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        @if (!empty($audit->new_values))
                                            <div>
                                                <strong>New Values:</strong>
                                                <ul class="list-disc list-inside ml-2">
                                                    @foreach ($audit->new_values as $key => $value)
                                                        <li><strong>{{ $key }}:</strong> {{ $value }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="py-3 px-4 text-gray-800 dark:text-gray-200">
                                {{ $audit->created_at->format('d M Y, H:i') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

<script>
    function openDrawer() {
        const drawer = document.getElementById('drawer-right');
        const overlay = document.getElementById('drawer-overlay');

        drawer.classList.remove('translate-x-full');
        overlay.classList.remove('hidden');
    }

    function closeDrawer() {
        const drawer = document.getElementById('drawer-right');
        const overlay = document.getElementById('drawer-overlay');

        drawer.classList.add('translate-x-full');
        overlay.classList.add('hidden');
    }
</script>