@extends('layouts.app')

@section('title', '계획 목록')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
    <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        계획 목록
    </h1>
    <div class="flex flex-wrap items-center gap-2 sm:gap-3">
        <a href="{{ route('roadmap.index') }}" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1 px-3 py-1.5 text-sm bg-white hover:bg-gray-300 text-gray-700 rounded-lg transition">
            <svg class="w-4 h-4" 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>
        <a href="{{ route('roadmap.plans.create') }}" class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition text-center">
            + 새 계획
        </a>
    </div>
</div>

<!-- 필터 영역 -->
<x-filter-collapsible id="filterForm">
    <form id="filterForm" class="flex flex-wrap gap-2 sm:gap-4">
        <!-- 검색 -->
        <div class="flex-1 min-w-0 w-full sm:w-auto">
            <input type="text" name="search" placeholder="계획명, 설명으로 검색..."
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
        </div>

        <!-- 상태 -->
        <div class="w-full sm:w-36">
            <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">전체 상태</option>
                @foreach($statuses as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <!-- 카테고리 -->
        <div class="w-full sm:w-36">
            <select name="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">전체 카테고리</option>
                @foreach($categories as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <!-- 우선순위 -->
        <div class="w-full sm:w-36">
            <select name="priority" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">전체 우선순위</option>
                @foreach($priorities as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <!-- Phase -->
        <div class="w-full sm:w-44">
            <select name="phase" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">전체 Phase</option>
                @foreach($phases as $value => $label)
                <option value="{{ $value }}">{{ Str::before($label, ' —') }}</option>
                @endforeach
            </select>
        </div>

        <!-- 검색 버튼 -->
        <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
            검색
        </button>
    </form>
</x-filter-collapsible>

<!-- 테이블 영역 (HTMX) -->
<div id="plan-table"
     hx-get="/api/admin/roadmap/plans"
     hx-trigger="load, filterSubmit from:body"
     hx-include="#filterForm"
     hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
     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-indigo-600"></div>
    </div>
</div>
@endsection

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

    window.confirmDelete = function(id, name) {
        showDeleteConfirm(`"${name}" 계획`, () => {
            htmx.ajax('DELETE', `/api/admin/roadmap/plans/${id}`, {
                target: '#plan-table',
                swap: 'none',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                htmx.trigger('#plan-table', 'filterSubmit');
            });
        });
    };

    window.confirmRestore = function(id, name) {
        showConfirm(`"${name}" 계획을 복원하시겠습니까?`, () => {
            htmx.ajax('POST', `/api/admin/roadmap/plans/${id}/restore`, {
                target: '#plan-table',
                swap: 'none',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                htmx.trigger('#plan-table', 'filterSubmit');
            });
        }, { title: '복원 확인', icon: 'question' });
    };
</script>
@endpush