@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;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-width: 100%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    #json-data,#json-performanceData {
        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: #FF8C00; /* Orange for JSON keys */
        font-weight: bold;
    }

    .json-value {
        color: #A5FF00; /* Green for values */
    }

    .json-string {
        color: #FFDD00; /* Yellow for strings */
    }

    .json-number {
        color: #00E5FF; /* Blue for numbers */
    }

    .json-boolean {
        color: #F44336; /* Red for boolean values */
    }

    .json-null {
        color: #9E9E9E; /* Grey for null */
    }
</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('edit', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
                <i class="glyphicon glyphicon-pencil"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
            </a>
        @endcan
        @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.influencer_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->user->name }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.profile_name') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <p>{{ $dataTypeContent->profile_name }}</p>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.platform') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <p>{{ $dataTypeContent->platform }}</p>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.handle') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->handle }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.social_user_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->social_user_id }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.story_fee') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->story_fee }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.post_fee') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->post_fee }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.reel_fee') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->reel_fee }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.video_fee') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->video_fee }}
                    </div>
                    <hr style="margin:0;">
                    <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?->name }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.last_fetched_at') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->last_fetched_at }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.confirmed_code') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->confirmed_code }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.confirmed') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->confirmed }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.confirmed_at') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->confirmed_at }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.last_fetch_success') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->last_fetch_success ? 'true' : 'false' }}
                    </div>
                    @if(!$dataTypeContent->last_fetch_success)
                        <hr style="margin:0;">
                        <div class="panel-heading" style="border-bottom:0;">
                            <h3 class="panel-title">{{ __('voyager::seeders.data_rows.error_message') }}</h3>
                        </div>
                        <div class="panel-body" style="padding-top:0;">
                            {{ $dataTypeContent->error_message }}
                        </div>
                    @endif
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.report_data') }}</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-data"></pre>
                        </div>
                    </div>
                    <hr style="margin:0;">
                    <h1>{{ __('voyager::seeders.data_rows.performance_data') }}</h1>
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.last_fetch_success') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->performanceData?->last_fetch_success ? 'true' : 'false' }}
                    </div>
                    @if(!$dataTypeContent->performanceData?->last_fetch_success)
                        <hr style="margin:0;">
                        <div class="panel-heading" style="border-bottom:0;">
                            <h3 class="panel-title">{{ __('voyager::seeders.data_rows.error_message') }}</h3>
                        </div>
                        <div class="panel-body" style="padding-top:0;">
                            {{ $dataTypeContent->performanceData?->error_message }}
                        </div>
                    @endif
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.performance_data') }}</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-performanceData"></pre>
                        </div>
                    </div>
                    <hr style="margin:0;">
                </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 jsonData = @json($dataTypeContent->report_data);

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

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

        // Optionally, apply custom coloring for the JSON elements (key, value, string, etc.)
        const colorizeJson = (json) => {
            return json
                .replace(/"([^"]+)":/g, `<span class='json-key'>"$1":</span>`)  // Key coloring
                .replace(/"(.*?)"/g, '<span class="json-string">"$1"</span>')  // String coloring
                .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')  // Boolean coloring
                .replace(/\b(null)\b/g, '<span class="json-null">$1</span>')  // Null coloring
                .replace(/\b(\d+)\b/g, '<span class="json-number">$1</span>');  // Number coloring
        };

        // Apply color styling
        document.getElementById('json-data').innerHTML = colorizeJson(formattedJson);
    </script>

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

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

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

        // Optionally, apply custom coloring for the JSON elements (key, value, string, etc.)
        const colorizeJsonPerformance = (json) => {
            return json
                .replace(/"([^"]+)":/g, `<span class='json-key'>"$1":</span>`)  // Key coloring
                .replace(/"(.*?)"/g, '<span class="json-string">"$1"</span>')  // String coloring
                .replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>')  // Boolean coloring
                .replace(/\b(null)\b/g, '<span class="json-null">$1</span>')  // Null coloring
                .replace(/\b(\d+)\b/g, '<span class="json-number">$1</span>');  // Number coloring
        };

        // Apply color styling
        document.getElementById('json-performanceData').innerHTML = colorizeJsonPerformance(formattedJsonPerformance);
    </script>

    @if ($isModelTranslatable)
        <script>
            $(document).ready(function () {
                $('.side-body').multilingual();
            });
        </script>
    @endif
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                // Save form action initial value
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });

    </script>
@stop