<!-- 점검항목 탭 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
    <div class="flex justify-between items-center mb-4 pb-2 border-b">
        <h2 class="text-lg font-semibold text-gray-800">점검항목 템플릿</h2>
        <button onclick="document.getElementById('templateModal').classList.remove('hidden')"
                class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-lg text-sm transition">
            + 항목 추가
        </button>
    </div>

    @if($equipment->inspectionTemplates->isNotEmpty())
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700">번호</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-700">점검개소</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-700">점검항목</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700">시기</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700">주기</th>
                        <th class="px-3 py-2 text-left text-sm font-semibold text-gray-700">점검방법</th>
                        <th class="px-3 py-2 text-center text-sm font-semibold text-gray-700">액션</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($equipment->inspectionTemplates as $tmpl)
                        <tr>
                            <td class="px-3 py-2 text-sm text-center">{{ $tmpl->item_no }}</td>
                            <td class="px-3 py-2 text-sm">{{ $tmpl->check_point }}</td>
                            <td class="px-3 py-2 text-sm">{{ $tmpl->check_item }}</td>
                            <td class="px-3 py-2 text-sm text-center">{{ $tmpl->timing_label }}</td>
                            <td class="px-3 py-2 text-sm text-center">{{ $tmpl->check_frequency ?? '-' }}</td>
                            <td class="px-3 py-2 text-sm text-gray-600">{{ $tmpl->check_method ?? '-' }}</td>
                            <td class="px-3 py-2 text-sm text-center">
                                <button onclick="deleteTemplate({{ $tmpl->id }})" class="text-red-600 hover:text-red-900">삭제</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-gray-500 text-center py-8">등록된 점검항목이 없습니다.</p>
    @endif
</div>

<!-- 점검항목 추가 모달 -->
<div id="templateModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50" onclick="document.getElementById('templateModal').classList.add('hidden')"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-lg">
            <div class="flex justify-between items-center p-6 border-b">
                <h3 class="text-lg font-semibold">점검항목 추가</h3>
                <button onclick="document.getElementById('templateModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">&times;</button>
            </div>
            <form id="templateForm" class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">항목번호 <span class="text-red-500">*</span></label>
                        <input type="number" name="item_no" required min="1"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">점검개소 <span class="text-red-500">*</span></label>
                        <input type="text" name="check_point" required placeholder="겉모양"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">점검항목 <span class="text-red-500">*</span></label>
                    <input type="text" name="check_item" required placeholder="청결상태"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">시기</label>
                        <select name="check_timing"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">선택</option>
                            <option value="operating">가동 중</option>
                            <option value="stopped">정지 시</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">주기</label>
                        <input type="text" name="check_frequency" placeholder="1회/일"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">점검방법</label>
                    <textarea name="check_method" rows="2" placeholder="육안 확인"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="flex justify-end gap-3 pt-2">
                    <button type="button" onclick="document.getElementById('templateModal').classList.add('hidden')"
                            class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">취소</button>
                    <button type="button" onclick="addTemplate()"
                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">추가</button>
                </div>
            </form>
        </div>
    </div>
</div>
