@extends('form.app')

@section('content')
    {{-- navbar --}}
    <div class="row">
        <div class="col-lg-12">
            <div class="tab-content">
                <div class="tab-pane active" id="info">
                    <div class="card">

                        <div class="card-body">
                            <h4 class="card-title">Event</h4>
                            <p class="card-text">{{ $data->event }}</p>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">Keyword</h4>
                            <p class="card-text">{{ $data->keyword }}</p>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">Request</h4>
                            <pre class="json">{{ $data->request }}</pre>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">Response</h4>
                            <pre class="json">{{ $data->response }}</pre>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $(".json").each(function() {
                try {
                    // Parse the inner text to a JSON object
                    let jsonContent = JSON.parse($(this).text());
                    // Convert back to JSON string with indentation for pretty print
                    $(this).text(JSON.stringify(jsonContent, null, 2));
                } catch (e) {
                    console.error("Invalid JSON format in <pre> element:", e);
                }
            });
        });
    </script>
@endsection