@php
    $masterModalId = $modalId ?? ($cfg['modal_id'] ?? 'adminMasterDetailsModal');
    $masterEntityLabel = $entityLabel ?? ($cfg['entity_label'] ?? 'Record');
@endphp
<script>
(function ($) {
    var modalId = @json($masterModalId);
    var entityLabel = @json($masterEntityLabel);
    var escapeHtml = window.pmsEscapeHtml || function (value) {
        return String(value == null ? '' : value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    };

    var fieldOrder = [
        'code',
        'label',
        'name',
        'category',
        'standard',
        'found_places_hint',
        'rows_key',
        'checklist_heading',
        'has_remarks',
        'sort_order',
        'status',
        'created_at',
        'updated_at',
    ];

    var fieldLabels = {
        code: 'Code',
        label: 'Label',
        name: 'Name',
        category: 'Domain / Category',
        standard: 'Standard',
        found_places_hint: 'Found places hint',
        rows_key: 'Rows key',
        checklist_heading: 'Checklist heading',
        has_remarks: 'Remarks column',
        sort_order: 'Sort order',
        status: 'Status',
        created_at: 'Created at',
        updated_at: 'Updated at',
    };

    function formatFieldValue(key, value) {
        if (key === 'status') {
            return value
                ? '<span class="badge badge-success">Active</span>'
                : '<span class="badge badge-secondary">Inactive</span>';
        }
        if (key === 'has_remarks') {
            return value ? 'Show remarks column' : 'Hide remarks column';
        }
        if (value === null || value === undefined || value === '') {
            return '-';
        }
        return escapeHtml(value);
    }

    function renderDetailsBody(data) {
        var html = '<dl class="row mb-0">';
        var rendered = {};

        fieldOrder.forEach(function (key) {
            if (!Object.prototype.hasOwnProperty.call(data, key)) {
                return;
            }
            rendered[key] = true;
            html += '<dt class="col-sm-4">' + escapeHtml(fieldLabels[key] || key) + '</dt>';
            html += '<dd class="col-sm-8">' + formatFieldValue(key, data[key]) + '</dd>';
        });

        Object.keys(data).forEach(function (key) {
            if (key === 'id' || rendered[key]) {
                return;
            }
            var label = fieldLabels[key] || key.replace(/_/g, ' ').replace(/\b\w/g, function (c) {
                return c.toUpperCase();
            });
            html += '<dt class="col-sm-4">' + escapeHtml(label) + '</dt>';
            html += '<dd class="col-sm-8">' + formatFieldValue(key, data[key]) + '</dd>';
        });

        html += '</dl>';
        return html;
    }

    $(document).on('click', '#masterTableCard .details-modal-trigger', function (e) {
        e.preventDefault();
        var $t = $(this);
        if (($t.data('modal-id') || '') !== modalId) {
            return;
        }

        var detailsUrl = $t.data('details-url');
        var id = $t.data('entity-id');
        var name = $t.data('entity-name') || entityLabel;
        var editUrl = $t.data('edit-url');
        var deleteUrl = $t.data('delete-url');

        $('#' + modalId + '-title-name').text(name);
        $('#' + modalId + '-body').html(
            '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading...</p></div>'
        );

        var $editBtn = $('#' + modalId + '-edit-btn');
        var $deleteForm = $('#' + modalId + '-delete-form');
        var $historyBtn = $('#' + modalId + '-history-btn');
        if ($editBtn.length) {
            $editBtn.hide().attr('href', '#');
        }
        if ($deleteForm.length) {
            $deleteForm.hide().attr('action', '#');
        }
        if ($historyBtn.length) {
            $historyBtn.hide().removeData('id').removeData('name').attr('data-id', id).attr('data-name', name);
        }

        $('#' + modalId).modal('show');

        $.ajax({
            url: detailsUrl,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function (res) {
                if (res.status === 200 && res.data) {
                    $('#' + modalId + '-body').html(renderDetailsBody(res.data));
                    if ($editBtn.length && editUrl) {
                        $editBtn.attr('href', editUrl).show();
                    }
                    if ($deleteForm.length && deleteUrl) {
                        $deleteForm.attr('action', deleteUrl).show();
                    }
                    if ($historyBtn.length) {
                        $historyBtn.show();
                    }
                } else {
                    $('#' + modalId + '-body').html('<div class="alert alert-warning">Unable to load details.</div>');
                }
            },
            error: function (xhr) {
                var msg = 'Failed to load details.';
                if (xhr.status === 403) {
                    msg = 'Permission denied.';
                } else if (xhr.status === 404) {
                    msg = entityLabel + ' not found.';
                }
                $('#' + modalId + '-body').html('<div class="alert alert-danger">' + escapeHtml(msg) + '</div>');
            },
        });
    });

    $(document).on('click', '#' + modalId + ' .btn-details-modal-delete', function (e) {
        e.preventDefault();
        var form = $(this).closest('form');
        if (!form.length || typeof Swal === 'undefined') {
            form.trigger('submit');
            return;
        }
        Swal.fire({
            title: 'Are you sure?',
            text: 'You will not be able to revert this!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
        }).then(function (result) {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
})(jQuery);
</script>