@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>

<!-- 테이블 영역 -->
<div id="board-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
    <!-- 로딩 스피너 -->
    <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>
    // 테이블 로드 함수
    function loadTable() {
        fetch('/api/admin/customer-center', {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'HX-Request': 'true'
            }
        })
        .then(response => response.text())
        .then(html => {
            document.getElementById('board-table').innerHTML = html;
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    // 초기 로드
    document.addEventListener('DOMContentLoaded', function() {
        loadTable();
    });
</script>
@endpush