@extends('layouts.app')
@section('title_header')
    Acitivity Log
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Activity Log', 'url' => '/activity']]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    <section class="">
        <div class="card bg-white card-border">
            <div class="card-body">
                <table id="default-table" class="w-full"></table>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <dialog id="my_modal_3" class="modal">
        <div class="modal-box w-11/12 max-w-5xl">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="font-bold text-lg mb-2">Detail Data</h3>
            <div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
                <table class="table w-full" id="modal-detail-table">
                    <thead>
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dynamic rows -->
                    </tbody>
                </table>
            </div>
        </div>
    </dialog>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <script>
        let dataTable;

        function populateModalTable(data) {
            const tableBody = $('#modal-detail-table tbody');
            tableBody.empty();

            if (!data || Object.keys(data).length === 0) {
                tableBody.append(`<tr><td colspan="2" class="text-center">No Data</td></tr>`);
                return;
            }

            const replaceNullWithNA = (value) => {
                return value === null ? 'N/A' : value;
            };

            // Tampilkan properti penting dulu
            const priorityKeys = ['id', 'order_id'];

            priorityKeys.forEach(key => {
                if (data.hasOwnProperty(key)) {
                    tableBody.append(`
                <tr>
                    <td class="font-semibold">${key}</td>
                    <td>${replaceNullWithNA(data[key])}</td>
                </tr>
            `);
                }
            });

            // Tampilkan sisa properti
            Object.entries(data).forEach(([key, value]) => {
                if (!priorityKeys.includes(key)) {
                    tableBody.append(`
                <tr>
                    <td class="font-semibold">${key}</td>
                    <td>${typeof value === 'object' && value !== null ? JSON.stringify(value) : replaceNullWithNA(value)}</td>
                </tr>
            `);
                }
            });
        }

        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "/api/activity-log",
                dataType: "JSON",
                success: function(response) {
                    const logs = response.data || [];

                    const headings = ["No", "User Name", "Aktiviti", "Old", "New", "Date"];
                    const data = logs.map((item, index) => {
                        let activityBadge = '';
                        const activityType = item.activities.toLowerCase();
                        let badgeClass = '';

                        switch (activityType) {
                            case 'created':
                                badgeClass = 'badge-success';
                                break;
                            case 'update':
                                badgeClass = 'badge-warning';
                                break;
                            case 'delete':
                                badgeClass = 'badge-error';
                                break;
                            default:
                                badgeClass = 'badge-info'; // Default badge jika ada tipe lain
                                break;
                        }

                        activityBadge =
                            `<div class="badge ${badgeClass}">${activityType.charAt(0).toUpperCase() + activityType.slice(1)}</div>`;

                        return [
                            index + 1,
                            item.name,
                            activityBadge,
                            `<a href="#" class="link text-blue-500 preview-link" data-json='${JSON.stringify(item.old ?? {})}'>Preview</a>`,
                            `<a href="#" class="link text-blue-500 preview-link" data-json='${JSON.stringify(item.new ?? {})}'>Preview</a>`,
                            item.date
                        ];
                    });

                    const customData = {
                        headings: headings,
                        data: data
                    };

                    if (dataTable) {
                        dataTable.destroy();
                    }

                    dataTable = new simpleDatatables.DataTable("#default-table", {
                        data: customData,
                        searchable: true,
                        perPage: 10,
                        perPageSelect: [5, 10, 20]
                    });

                    // Bind preview link
                    setTimeout(() => {
                        document.querySelectorAll(".preview-link").forEach(link => {
                            link.addEventListener("click", function(e) {
                                e.preventDefault();
                                const jsonData = JSON.parse(this.dataset.json ||
                                    "{}");
                                populateModalTable(jsonData);
                                document.getElementById("my_modal_3")
                                    .showModal();
                            });
                        });
                    }, 500);
                },
                error: function() {
                    toastr.error("Gagal mengambil data activity log.", "Error");
                }
            });
        });
    </script>
@endpush