@extends('layouts.app')
@section('title', $equipment->name . ' - 설비 상세')
@section('content')

<!-- 헤더 -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
    <div class="flex items-center gap-4">
        <a href="{{ route('equipment.index') }}"
           class="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">{{ $equipment->name }}</h1>
            <p class="text-sm text-gray-500 font-mono">{{ $equipment->equipment_code }}</p>
        </div>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $equipment->status_color }}">
            {{ $equipment->status_label }}
        </span>
    </div>
    <a href="{{ route('equipment.edit', $equipment->id) }}"
       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-center">
        수정
    </a>
</div>

<!-- 탭 네비게이션 -->
<div class="border-b border-gray-200 mb-6">
    <nav class="flex space-x-8" id="tabNav">
        <button class="tab-btn border-b-2 border-blue-500 text-blue-600 px-1 py-3 text-sm font-medium" data-tab="basic">
            기본정보
        </button>
        <button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-1 py-3 text-sm font-medium" data-tab="inspection">
            점검항목
        </button>
        <button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-1 py-3 text-sm font-medium" data-tab="repair">
            수리이력
        </button>
    </nav>
</div>

<!-- 탭 콘텐츠 -->
<div id="tab-basic" class="tab-content">
    @include('equipment.partials.tabs.basic-info', ['equipment' => $equipment])
</div>

<div id="tab-inspection" class="tab-content" style="display: none;">
    @include('equipment.partials.tabs.inspection-items', ['equipment' => $equipment])
</div>

<div id="tab-repair" class="tab-content" style="display: none;">
    @include('equipment.partials.tabs.repair-history', ['equipment' => $equipment])
</div>

@endsection

@push('scripts')
<script>
    const equipmentId = {{ $equipment->id }};

    // 탭 전환
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.tab-btn').forEach(b => {
                b.classList.remove('border-blue-500', 'text-blue-600');
                b.classList.add('border-transparent', 'text-gray-500');
            });
            this.classList.remove('border-transparent', 'text-gray-500');
            this.classList.add('border-blue-500', 'text-blue-600');

            document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
            document.getElementById('tab-' + this.dataset.tab).style.display = 'block';
        });
    });

    // 점검항목 추가
    function addTemplate() {
        const form = document.getElementById('templateForm');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        fetch(`/api/admin/equipment/${equipmentId}/templates`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                location.reload();
            } else {
                showToast(data.message, 'error');
            }
        });
    }

    // 점검항목 삭제
    function deleteTemplate(id) {
        showDeleteConfirm('점검항목', () => {
            fetch(`/api/admin/equipment/templates/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    location.reload();
                }
            });
        });
    }

    // 수리이력 삭제
    function deleteRepair(id) {
        showDeleteConfirm('수리이력', () => {
            fetch(`/api/admin/equipment/repairs/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    location.reload();
                }
            });
        });
    }
</script>
@endpush