form-worksheet.blade.php

<div class="p-4">
    <x-page-header title="Quality Observation Response"></x-page-header>

    <div class="p-4 tw-panel w-96 mx-auto mb-4 border-b-2 border-blue-600">
        <div class="mb-4 flex flex-wrap">
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Reporter</label>
                    <p class="underline text-blue-600 font-semibold">
                        <a href="mailto:{{$observation['reporter_email']}}">
                            {{$observation['reporter']}}
                        </a>
                    </p>
                </div>
            </div>
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Reporter Email</label>
                    <p>{{$observation['reporter_email']}}</p>
                </div>
            </div>
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Reporter Phone</label>
                    <p>{{$observation['reporter_phone']}}</p>
                </div>
            </div>
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Date of Issue</label>
                    <p>{{($observation['issue_date'])->format('Y-m-d')}}</p>
                </div>
            </div>
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Location of Issue</label>
                    <p>{{$observation['issue_location']}}</p>
                </div>
            </div>
            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Process</label>
                    <p>{{$observation['issue_process']}}</p>
                </div>
            </div>
        </div>

        <div class="mb-4 flex flex-wrap">
            <div class="w-1/3 mb-4">
                <label class="tw-label">Detailed Description of Issue</label>
                <p>{{$observation['description']}}</p>
            </div>

            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Immediate Counter Measure</label>
                    <p>{{$observation['immediate_action']}}</p>
                </div>
            </div>

            <div class="w-1/3 mb-4">
                <div class="field">
                    <label class="tw-label">Uploads</label>
                    <div class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                        <ul class="border border-gray-200 rounded-md">
                            @forelse($observation['uploads'] as $upload)
                                <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
                                    <div class="w-0 flex-1 flex items-center">
                            <span>
                                <a href="{{$upload['path']}}">
                                    @svg('solid/paperclip', 'text-silver-500')
                                </a>
                            </span>
                                        <span class="ml-2 flex-1 w-0 truncate">
                              {{$upload['name']}}
                            </span>
                                    </div>
                                </li>
                            @empty
                                <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
                                    <div class="w-0 flex-1 flex items-center">
                               <span class="ml-2 flex-1 w-0 truncate font-semibold">
                                  No uploads found.
                                </span>
                                    </div>
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="p-4 tw-panel w-96 mx-auto mb-4 border-b-2 border-red-600">
        <div class="mb-4 flex flex-wrap">
            <div class="w-1/4 mb-4">
                <div class="field">
                    <label class="tw-label">Process</label>
                    <select name="process" class="tw-select"
                            wire:model="processId">
                        <option value="">Select ...</option>
                        @foreach($processes as $proc)
                            <option value="{{$proc->id}}">{{$proc->title}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="w-1/4 mb-4">
                <div class="field">
                    <label class="tw-label">Process Owner</label>
                    <input type="search" class="tw-input"
                           wire:model="owner">
                </div>
            </div>
            <div class="w-1/4 mb-4">
                <div class="field">
                    <label class="tw-label">Deficit Category</label>

                    <select name="process" class="tw-select"
                            wire:model="catId">

                        @if($cats)
                            <option value="">Select ...</option>
                            @foreach($cats as $cat)
                                <option value="{{$cat->id}}">{{$cat->cat}}</option>
                            @endforeach
                        @else
                            <option value="">Select a process</option>
                        @endif

                    </select>
                </div>
            </div>
            <div class="w-1/4 mb-4">
                <div class="field">
                    <label class="tw-label">Desired Action</label>
                    <select name="desired_action" class="tw-select">
                        <option value="OFI">OFI</option>
                        <option value="NCR">NCR</option>
                        <option value="Close">Close</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="mb-4 flex justify-center">
            <button class="tw-button bg-blue-500 text-white hover:bg-blue-800"
            wire:click="takeAction">
                <span class="uppercase">submit</span>
            </button>
        </div>
    </div>

    <div class="p-4 tw-panel w-96 mx-auto mb-4 border-b-2 border-green-600">
        &nbsp;
    </div>

</div>