@extends('layouts.admin_app')

@section('content')
    <div class="container-fluid" style="max-width: 100%; overflow-x: hidden;">

        {{-- Form Information Card --}}
        <div class="card mb-4 shadow-sm border-0">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center mb-4">
                <i class="fas fa-file-alt me-2"></i>

                <a href="{{ route('submission_jsons.index') }}" class="btn btn-outline-light back-btn">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </a>

            </div>
<div class="card border-0 shadow-sm">
    <div class="card-body p-3">

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Form ID</div>
            <div class="col-8 text-dark">{{ $record->form_id ?? '—' }}</div>
        </div>

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Form Name</div>
            <div class="col-8 text-primary">{{ $record->form->name ?? 'N/A' }}</div>
        </div>

        <hr class="my-2">

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Case ID</div>
            <div class="col-8">{{ $record->recorded_case->id ?? 'No case' }}</div>
        </div>

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Record ID</div>
            <div class="col-8">{{ $record->id ?? 'N/A' }}</div>
        </div>

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Reported Location ID</div>
            <div class="col-8">{{ $record->reported_location_id ?? 'N/A' }}</div>
        </div>

        <div class="row mb-2">
            <div class="col-4 text-muted fw-semibold">Location ID</div>
            <div class="col-8">{{ $record->location_id ?? 'N/A' }}</div>
        </div>

        <div class="row pt-2 border-top">
            <div class="col-4 text-muted fw-semibold">
                Form Involved Sites
            </div>
            <div class="col-8 text-secondary small">
                {{ is_array($record->form_involved_sites)
                    ? implode(', ', $record->form_involved_sites)
                    : ($record->form_involved_sites ?? '—') }}
            </div>
        </div>

    </div>
</div>

        </div>
        <div class="card mb-4 shadow-sm border-0">
            <div class="card-header bg-success text-white d-flex align-items-center">
                {{-- <i class="fas fa-code me-2"></i> --}}
                <h6 class="mb-0 fw-bold">Form JSON Data</h6>
            </div>
            <div class="card-body p-3"
                style="max-height: 450px; overflow-y: auto; overflow-x: auto; background-color: #f8f9fa; border-radius: 0.5rem;">
                <pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;">{{ $record->raw_form }}</pre>
            </div>
        </div>
        <div class="card mb-4 shadow-sm border-0">
            <div class="card-header bg-success text-white d-flex align-items-center">
                {{-- <i class="fas fa-code me-2"></i> --}}
                <h6 class="mb-0 fw-bold">JSON Submission</h6>
            </div>
            <div class="card-body p-3"
                style="max-height: 450px; overflow-y: auto; overflow-x: auto; background-color: #f8f9fa; border-radius: 0.5rem;">
                <pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;">{{ $record->json_submission }}</pre>
            </div>
        </div>

    </div>
@endsection
@section('styles')
    <style>
        .back-btn {
            color: #f8f9fa !important;
            transition: 0.3s;
        }

        .back-btn:hover {
            background-color: #ffffff !important;
            color: #4E73DF !important;
        }
    </style>
@endsection