@extends('voyager::master')

@section('page_title', __('voyager::generic.view') .' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <style>
        .json-viewer {
            background-color: #222; /* Darker background for the viewer */
            padding: 15px;
            border-radius: 5px;
            font-size: 14px;
            overflow-x: auto;
            word-wrap: break-word;
            max-width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #json-data,#json-payload {
            background-color: #222; /* Darker background for the viewer */
            padding: 15px;
            border-radius: 5px;
            font-size: 14px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .json-key { color: #d63384; font-weight: bold; }
        .json-string { color: #20c997; }
        .json-value { color: #495057; }
        .json-number { color: #fd7e14; }
        .json-boolean { color: #0d6efd; }
        .json-null { color: #6c757d; }
    </style>
@endsection

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i> {{ __('voyager::generic.viewing') }} {{ ucfirst($dataType->getTranslatedAttribute('display_name_singular')) }}
        &nbsp;
        @can('delete', $dataTypeContent)
            @if($isSoftDeleted)
                <a href="{{ route('voyager.'.$dataType->slug.'.restore', $dataTypeContent->getKey()) }}"
                   title="{{ __('voyager::generic.restore') }}" class="btn btn-default restore"
                   data-id="{{ $dataTypeContent->getKey() }}" id="restore-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                            class="hidden-xs hidden-sm">{{ __('voyager::generic.restore') }}</span>
                </a>
            @else
                <a href="javascript:;" title="{{ __('voyager::generic.delete') }}" class="btn btn-danger delete"
                   data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                            class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                </a>
            @endif
        @endcan
        @can('browse', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
                <i class="glyphicon glyphicon-list"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.return_to_list') }}</span>
            </a>
        @endcan
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered" style="padding-bottom:5px;">
                    <!-- form start -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.reference') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->reference }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.payment_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->payment_id }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.amount') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->amount.' '.$dataTypeContent->currency }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.status') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->status }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.user') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->payment?->payer?->name }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.response_code') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->response_code }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.currency') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->currency }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.paid_currency') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->paid_currency }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.paid_currency_value') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->paid_currency_value }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.response_message') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->response_message }}
                    </div>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.payload') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <div class="json-viewer" style="max-height: 400px;">
                            <!-- Pass the data to JavaScript and display it -->
                            <pre id="json-payload"></pre>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"><i
                                class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}
                        ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="{{ __('voyager::generic.delete_confirm') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    <script type="text/javascript">
        // Pass the data from Blade to JavaScript
        const jsonPayload = @json($dataTypeContent->payload);

        // Format the JSON data with indentation
        const formattedJsonPayload = JSON.stringify(jsonPayload, null, 4);

        // Display formatted JSON in the page
        document.getElementById('json-payload').textContent = formattedJsonPayload;

        // Optionally, apply custom coloring for the JSON elements (key, value, string, etc.)
        const colorizeJsonPerformance = (jsonObj) => {
            try {
                // First, properly parse the input (handling both string and object cases)
                let parsed;
                if (typeof jsonObj === 'string') {
                    // Handle cases where the string might be double-encoded
                    try {
                        parsed = JSON.parse(jsonObj);
                        // If the parsed result is a string, try parsing again
                        if (typeof parsed === 'string') {
                            parsed = JSON.parse(parsed);
                        }
                    } catch (e) {
                        // If parsing fails, try to clean the string
                        const cleaned = jsonObj.replace(/^"|"$/g, '').replace(/\\"/g, '"');
                        parsed = JSON.parse(cleaned);
                    }
                } else {
                    parsed = jsonObj;
                }

                // Custom formatter with proper line breaks and coloring
                const format = (obj, indent = '') => {
                    if (obj === null) return '<span class="json-null">null</span>';
                    if (typeof obj === 'boolean') return `<span class="json-boolean">${obj}</span>`;
                    if (typeof obj === 'number') return `<span class="json-number">${obj}</span>`;
                    if (typeof obj === 'string') return `<span class="json-string">"${obj}"</span>`;

                    if (Array.isArray(obj)) {
                        if (obj.length === 0) return '[]';
                        const items = obj.map(item => `${indent}  ${format(item, indent + '  ')}`).join(',\n');
                        return `[\n${items}\n${indent}]`;
                    }

                    const entries = Object.entries(obj);
                    if (entries.length === 0) return '{}';

                    const formatted = entries.map(([key, value]) => {
                        const formattedKey = `<span class="json-key">"${key}"</span>`;
                        const formattedValue = format(value, indent + '  ');
                        return `${indent}  ${formattedKey}: ${formattedValue}`;
                    }).join(',\n');

                    return `{\n${formatted}\n${indent}}`;
                };

                return format(parsed);
            } catch (e) {
                console.error('JSON formatting error:', e);
                return `<span class="json-error">${typeof jsonObj === 'string' ? jsonObj : JSON.stringify(jsonObj)}</span>`;
            }
        };


        // Apply color styling
        document.getElementById('json-payload').innerHTML = colorizeJsonPerformance(formattedJsonPayload);
    </script>
@stop