@php use App\Http\Resources\CommunicationJob\CommunicationJobBasicResource; @endphp
<div class="row mt-2">
    <div class="col-12">
        <div class="card">
            <div class="card-body p-0">
                <div class="row g-0 h-100">
                    <div class="col-lg-12 border-end">
                        <h4 class="card-title fs-16 mb-0 pt-3 ps-4">{{ __('views.communication.jobs.log_details') }}</h4>
                        <form class="p-4 pt-3">
                            <div class="form-group mb-2">
                                <label for="projectName" class="form-label">UUID:</label>
                                <input readonly type="text" class="form-control" id="projectName" aria-describedby="emailHelp" value="{{$communicationJobLog->uuid}}"
                                       placeholder="{{ __('views.communication.jobs.enter_project_name') }}">
                            </div>
                            <div class="form-group mb-2">
                                <label for="projectName" class="form-label">{{ __('views.communication.jobs.status') }}:</label>
                                <input readonly type="text" class="form-control" id="projectName" aria-describedby="emailHelp" value="{{$communicationJobLog->status_text}}"
                                       placeholder="{{ __('views.communication.jobs.enter_project_name') }}">
                            </div>
                            @if($communicationJobLog->error_message)
                                <div class="form-group mb-2">
                                    <label for="projectName" class="form-label">{{ __('views.communication.jobs.error_message') }}:</label>
                                    <input readonly type="text" class="form-control is-invalid" id="projectName" aria-describedby="emailHelp" value="{{$communicationJobLog->error_message}}"
                                           placeholder="{{ __('views.communication.jobs.enter_project_name') }}">
                                </div>
                            @endif
                            @if($communicationJobLog->communication_id)
                                <div class="form-group mb-2">
                                    <label for="projectName" class="form-label">{{ __('views.communication.jobs.communication_id') }}:</label>
                                    <input readonly type="text" class="form-control" id="projectName" aria-describedby="emailHelp" value="{{$communicationJobLog->communication_id}}"
                                           placeholder="{{ __('views.communication.jobs.enter_project_name') }}">
                                </div>
                            @endif
                        </form>  <!--end form-->
                    </div><!--end col-->
                </div><!--end row-->
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-4 mt-2">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">{{ __('views.communication.jobs.request') }}</h4>
                        <div class="text-secondary mt-2">{{ __('views.communication.jobs.request_description') }}</div>
                    </div><!--end col-->
                </div>  <!--end row-->
            </div>
            <div class="card-body pt-0">
                <div class="">
                    <pre class="rounded language-json"><code id="json-container" class="json"></code></pre>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-4 mt-2">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">{{ __('views.communication.jobs.prepared_data') }}</h4>
                        <div class="text-secondary mt-2">{{ __('views.communication.jobs.prepared_data_description') }}</div>
                    </div><!--end col-->
                </div>  <!--end row-->
            </div>
            <div class="card-body pt-0">
                <div class="">
                    <pre class="rounded language-json"><code id="json-container1" class="json"></code></pre>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-lg-4 mt-2">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">{{ __('views.communication.jobs.response') }}</h4>
                        <div class="text-secondary mt-2">{{ __('views.communication.jobs.response_description') }}</div>
                    </div><!--end col-->
                </div>  <!--end row-->
            </div>
            <div class="card-body pt-0">
                <div class="">
                    <pre class="rounded language-json"><code id="json-container2" class="json"></code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<script>
    const jsonData = @json($communicationJobLog->raw_request);
    const preparedData = @json($communicationJobLog->prepared_data);
    let responseData = @json((new CommunicationJobBasicResource($this->communicationJobLog)));
    responseData.status_text = "{{ __('views.communication.jobs.pending_status') }}";
    document.getElementById("json-container").textContent = JSON.stringify(jsonData, null, 4);
    document.getElementById("json-container1").textContent = JSON.stringify(preparedData, null, 4);
    document.getElementById("json-container2").textContent = JSON.stringify(responseData, null, 4);

    hljs.highlightAll();
</script>