@extends('layouts.app')

@section('title', 'AI 견적 엔진')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <i class="ri-robot-line text-purple-600"></i>
        AI 견적 엔진
    </h1>
    <div class="flex gap-2">
        <a href="{{ route('rd.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition">
            <i class="ri-arrow-left-line"></i> R&D 대시보드
        </a>
        <a href="{{ route('rd.ai-quotation.create') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
            + AI 견적 생성
        </a>
    </div>
</div>

<!-- 필터 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
    <form id="filterForm" class="flex flex-wrap gap-3 items-end">
        <div style="flex: 1 1 200px; max-width: 300px;">
            <label class="block text-xs text-gray-500 mb-1">검색</label>
            <input type="text" name="search" placeholder="제목, 내용 검색..."
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
        </div>
        <div style="flex: 0 0 140px;">
            <label class="block text-xs text-gray-500 mb-1">상태</label>
            <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                <option value="">전체</option>
                @foreach($statuses as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <button type="button" onclick="loadQuotations()" class="px-4 py-2 bg-gray-800 text-white rounded-lg text-sm hover:bg-gray-900 transition">
                검색
            </button>
        </div>
    </form>
</div>

<!-- 테이블 영역 (HTMX) -->
<div id="quotation-table">
    <div class="text-center py-12 text-gray-400">
        <i class="ri-loader-4-line text-2xl animate-spin"></i>
        <p class="mt-2">목록을 불러오는 중...</p>
    </div>
</div>
@endsection

@push('scripts')
<script>
function loadQuotations(page = 1) {
    const form = document.getElementById('filterForm');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    params.set('page', page);

    const url = `{{ url('/api/admin/rd/ai-quotation') }}?${params.toString()}`;

    fetch(url, {
        headers: {
            'HX-Request': 'true',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin'
    })
    .then(r => r.text())
    .then(html => {
        document.getElementById('quotation-table').innerHTML = html;
    })
    .catch(err => {
        document.getElementById('quotation-table').innerHTML =
            '<div class="text-center py-12 text-red-500">목록을 불러오지 못했습니다.</div>';
    });
}

// 초기 로드
document.addEventListener('DOMContentLoaded', () => loadQuotations());
</script>
@endpush