@extends('layouts.main')
@include('layouts.datatables')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    {{ $title }}
                </div>
                <div class="d-none">
                    <x-buttons.refresh-small name="activity-log" />
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover table-striped align-middle" id="table-activity-log">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal for viewing JSON data (centered) -->
    <div class="modal fade" id="jsonViewModal" tabindex="-1" aria-labelledby="jsonViewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="jsonViewModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <pre class="mb-0" id="jsonDataContent" style="max-height:400px; overflow:auto; background:#f8f9fa; border-radius:4px; padding:10px;"></pre>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function () {
            const tableActivityLog = $('#table-activity-log').DataTable({
                ajax: {
                    url: @json(route('datatable.activity-log-index')),
                },
                serverSide: true,
                order: [[0, 'desc']],
                columns: [
                    {
                        data: 'id',
                        className: 'text-center',
                    },
                    {
                        title: '{{ __("validation.attributes.action") }}',
                        data: 'action',
                        name: 'action',
                        className: 'text-nowrap text-center',
                    },
                    {
                        title: '{{ __("validation.attributes.module") }}',
                        data: 'module',
                        name: 'module',
                        className: 'text-nowrap text-center',
                    },
                    {
                        title: '{{ __("validation.attributes.description") }}',
                        data: 'description',
                        name: 'description',
                        className: 'text-nowrap',
                    },
                    {
                        title: '{{ __("validation.attributes.old_data") }}',
                        data: 'old_data',
                        name: 'old_data',
                        className: 'text-nowrap',
                        render: function (data, type, row) {
                            if (!data) {
                                return '';
                            }
                            // Show as button that triggers modal
                            const id = row.id + '-old';
                            return `
                                <button
                                    type="button"
                                    class="btn btn-link p-0 text-primary btn-show-json"
                                    data-id="${id}"
                                    data-title="{{ __("validation.attributes.old_data") }}"
                                    data-json="${encodeURIComponent(typeof data === 'string' ? data : JSON.stringify(data))}">
                                    <i class="fa fa-eye"></i> View
                                </button>
                            `;
                        }
                    },
                    {
                        title: '{{ __("validation.attributes.new_data") }}',
                        data: 'new_data',
                        name: 'new_data',
                        className: 'text-nowrap',
                        render: function (data, type, row) {
                            if (!data) {
                                return '';
                            }
                            // Show as button that triggers modal
                            const id = row.id + '-new';
                            return `
                                <button
                                    type="button"
                                    class="btn btn-link p-0 text-success btn-show-json"
                                    data-id="${id}"
                                    data-title="{{ __("validation.attributes.new_data") }}"
                                    data-json="${encodeURIComponent(typeof data === 'string' ? data : JSON.stringify(data))}">
                                    <i class="fa fa-eye"></i> View
                                </button>
                            `;
                        }
                    },
                    {
                        title: '{{ __("module.user") }}',
                        data: 'user',
                        className: 'text-nowrap',
                    }
                ],
                initComplete: function () {
                    $('#datatable-toolbar3').prepend($('#btn-refresh-activity-log'));
                },
            });

            $('#btn-refresh-activity-log').on('click', function () {
                tableActivityLog.draw();
            });
        });

        $(document).on('click', '.btn-show-json', function () {
            // Get the JSON data, title
            const title = $(this).data('title');
            const encodedJson = $(this).data('json');
            let jsonText;
            try {
                jsonText = decodeURIComponent(encodedJson);
            } catch {
                jsonText = encodedJson;
            }
            let formatted = '';
            try {
                // Try to pretty print if it's valid JSON
                formatted = JSON.stringify(JSON.parse(jsonText), null, 2);
            } catch {
                // Fallback to show as-is
                formatted = jsonText;
            }
            $('#jsonViewModalLabel').text(title || 'Detail');
            $('#jsonDataContent').text(formatted);

            // Fix: ensure modal is shown using Bootstrap 5 modal JS API
            const jsonModal = document.getElementById('jsonViewModal');
            if (jsonModal) {
                const modalInstance = bootstrap.Modal.getOrCreateInstance(jsonModal);
                modalInstance.show();
            }
        });
    </script>
@endpush