<div class="pa-2  rounded-lg">
    <div class="grid grid-cols-1 mt-10">
        <div class="col"><b class="font-light text-xs">Date Created:</b></div>
        <div class="col font-medium">{{  $getRecord()->date_created->format('F j, Y') }}</div>
    </div>

    <div class="grid grid-cols-1 mt-10">
        <div class="mt-2">
            <div class="flex flex-col">
                <div class="col"><b class="font-light text-xs">Dispatch By:</b></div>
                <div class="col font-medium">{{  $getRecord()->user?->name }}</div>
            </div>
        </div>
        <div class="mt-2">
            <div class="flex flex-col">
                <div class="col"><b class="font-light text-xs">Date Dispatched:</b></div>
                <div class="col font-medium">{{  $getRecord()->date_dispatch?->format('F j, Y') }}</div>
            </div>
        </div>
        <div class="mt-2">
            <div class="flex flex-col">
                <div class="col"><b class="font-light text-xs">Received By:</b></div>
                <div class="col font-medium">{{  $getRecord()->received_by }}</div>
            </div>
        </div>
        <div class="mt-2 ">
            <div class="flex flex-col">
                <div class="col"><b class="font-light text-xs">Date Received:</b></div>
                <div class="col font-medium">{{  $getRecord()->date_received?->format('F j, Y') }}</div>
            </div>
        </div>
        <div class="mt-2 ">
            <div class="flex flex-col">
                <div class="flex"><b class="font-normal text-md text-center">Files:</b></div>
            </div>
            @foreach($getRecord()->files as $file)
                <div class="border-b border-gray-400 text-orange-200 px-4 py-3 files-row">
                    <div class="flex flex-col">
                        <div class="col"><b class="font-light text-xs">Description:</b></div>
                        <div class="col font-medium">{{  $file->description }}</div>
                    </div>
                    <div class="mt-2" style="gap: 10rem; display: flex;">
                        <div class="flex flex-col">
                            @if($file->notes->count() > 0)
                                <div class="font-light text-xs">Notes:</div>
                                @foreach($file->notes as $comment)
                                    <div class="col font-medium">{{ $comment->comment }}</div>
                                @endforeach
                            @endif
                        </div>
                        <div class="flex flex-col">
                            @if($file->remarks->count() > 0)
                                <div class="font-light text-xs">Remarks:</div>
                                @foreach($file->remarks as $remark)
                                    <div class="col font-medium">{{ $remark->remark }}</div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
