<div class="fixed inset-0 flex items-center justify-center z-50">

    {{-- <div class="bg-white max-h-[80vh] overflow-hidden p-6 rounded-lg shadow-lg pointer-events-auto"
    style="width:30vw !important; max-width:none !important;"> --}}

    <div
        class="bg-white rounded-lg shadow-lg pointer-events-auto
               w-full max-w-2xl max-h-[90vh] flex flex-col">

        {{-- @if($records && $records->count()) --}}
        @if(!empty($records) && count($records))
            <div style="max-height:250px; overflow-y:auto; border:1px solid #ccc;">

            {{-- <table class="min-w-full border"> --}}
            <table class="w-full table-fixed border text-sm">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border px-2 py-1 w-2/3">Characteristics</th>
                        <th class="border px-2 py-1 w-1/3">Value</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($records as $record)
                        <tr>
                            <td class="border p-2">
                                {{ $record['name'] }}
                            </td>

                            {{-- <td class="border p-2">
                                <input
                                    type="text"
                                    wire:model.defer="checklist.{{ $record['id'] }}"
                                    wire:model.live="checklist.{{ $record['id'] }}"
                                    class="w-full border rounded px-2 py-1"
                                    placeholder="Enter value"
                                >
                            </td> --}}

                        {{-- <td class="border p-2">
                            @php
                                $status = $this->getCharacteristicStatus($record['id']);
                            @endphp

                            <input
                                type="text"
                                wire:model.live="checklist.{{ $record['id'] }}"
                                class="w-full rounded px-2 py-1 border-2 transition-all duration-200"
                                style="
                                    @if($status === 'Ok')
                                        border-color: #22c55e;
                                        box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
                                    @elseif($status === 'Not Ok')
                                        border-color: #ef4444;
                                        box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
                                    @else
                                        border-color: #d1d5db;
                                    @endif
                                "
                                placeholder="Enter value"
                            >
                        </td> --}}

                        <td class="border p-2">
                        @php
                            $status = $this->getCharacteristicStatus($record['id']);
                        @endphp

                        @if(($record['inspection_type'] ?? null) === 'Visual')

                            <div class="flex gap-4">
                                <label class="flex items-center gap-1">
                                    <input
                                        type="radio"
                                        wire:model.live="checklist.{{ $record['id'] }}"
                                        value="Ok"
                                    >
                                    Ok
                                </label>

                                <label class="flex items-center gap-1">
                                    <input
                                        type="radio"
                                        wire:model.live="checklist.{{ $record['id'] }}"
                                        value="NotOk"
                                    >
                                    Not Ok
                                </label>
                            </div>

                        @else

                            <input
                                type="text"
                                wire:model.live="checklist.{{ $record['id'] }}"
                                class="w-full rounded px-2 py-1 border-2 transition-all duration-200"
                                style="
                                    @if($status === 'Ok')
                                        border-color: #22c55e;
                                        box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
                                    @elseif($status === 'Not Ok')
                                        border-color: #ef4444;
                                        box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
                                    @else
                                        border-color: #d1d5db;
                                    @endif
                                "
                                placeholder="Enter value"
                            >

                        @endif
                    </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p>No records found.</p>
        @endif
        <div class="border-t mt-6 pt-4 flex justify-end gap-3">

            <label class="flex items-center gap-2">
                <input
                    type="checkbox"
                    wire:model.live="selectForNotOk"
                >
                <span>Select for Not Ok</span>
            </label>

            <button
                type="button"
                wire:click="cancel"
                style="background-color:#dc2626; color:white;"
                    class="px-6 py-2 rounded-lg shadow-md"
            >
                Cancel
            </button>
            <button
                type="button"
                wire:click="saveChecklist"
                style="background-color:#16a34a; color:white;"
                {{-- @disabled(!$this->canSaveChecklist()) --}}
                class="px-6 py-2 rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
            >
                Save
            </button>
        </div>
    </div>
</div>
