@extends('layouts.app')
@section('title', '일상점검표')
@section('content')

<!-- 헤더 -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
    <h1 class="text-2xl font-bold text-gray-800">일상점검표</h1>
</div>

<!-- 필터 -->
<x-filter-collapsible id="inspectionFilter" :defaultOpen="true">
    <form id="inspectionFilter" class="flex flex-wrap gap-2 sm:gap-4">
        <div class="shrink-0" style="width: 160px;">
            <label class="block text-xs text-gray-500 mb-1">점검년월</label>
            <input type="month" name="year_month" id="yearMonth" value="{{ now()->format('Y-m') }}"
                   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="shrink-0" style="width: 140px;">
            <label class="block text-xs text-gray-500 mb-1">생산라인</label>
            <select name="production_line"
                    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="스라트">스라트</option>
                <option value="스크린">스크린</option>
                <option value="절곡">절곡</option>
            </select>
        </div>
        <div class="shrink-0" style="width: 200px;">
            <label class="block text-xs text-gray-500 mb-1">설비</label>
            <select name="equipment_id"
                    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>
                @foreach($equipmentList as $eq)
                    <option value="{{ $eq->id }}">{{ $eq->equipment_code }} - {{ $eq->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="self-end">
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition">
                조회
            </button>
        </div>
    </form>
</x-filter-collapsible>

<!-- 점검 그리드 -->
<div id="inspection-grid"
     hx-get="/api/admin/equipment/inspections"
     hx-trigger="load, filterSubmit from:body"
     hx-include="#inspectionFilter"
     hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
     class="bg-white rounded-lg shadow-sm">
    <div class="flex justify-center items-center p-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.getElementById('inspectionFilter').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#inspection-grid', 'filterSubmit');
    });

    function toggleCell(equipmentId, templateItemId, checkDate, cell) {
        fetch('/api/admin/equipment/inspections/detail', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                equipment_id: equipmentId,
                template_item_id: templateItemId,
                check_date: checkDate,
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                cell.textContent = data.data.symbol;
                cell.className = 'inspection-cell cursor-pointer text-center text-lg font-bold select-none ' + data.data.color;
            }
        });
    }
</script>
@endpush
