@extends('layouts.app')

@section('title', '메뉴 수정')

@section('content')
    <div class="max-w-4xl mx-auto">
        <!-- 페이지 헤더 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">📋 메뉴 수정</h1>
            <a href="{{ route('menus.index') }}" class="text-gray-600 hover:text-gray-800">
                ← 목록으로
            </a>
        </div>

        <!-- 폼 카드 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <form id="menuForm" action="/api/admin/menus/{{ $menu->id }}" method="POST">
                @csrf
                @method('PUT')

                <!-- 부모 메뉴 -->
                <div class="mb-4">
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-2">
                        부모 메뉴
                    </label>
                    <select name="parent_id" id="parent_id"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">최상위 메뉴</option>
                        @foreach($parentMenus as $parent)
                            @if($parent->id != $menu->id)
                                <option value="{{ $parent->id }}" {{ $menu->parent_id == $parent->id ? 'selected' : '' }}>
                                    {{ $parent->name }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>

                <!-- 메뉴명 -->
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        메뉴명 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" id="name" required
                           value="{{ old('name', $menu->name) }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- URL -->
                <div class="mb-4">
                    <label for="url" class="block text-sm font-medium text-gray-700 mb-2">
                        URL
                    </label>
                    <input type="text" name="url" id="url"
                           value="{{ old('url', $menu->url) }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="/dashboard">
                </div>

                <!-- 아이콘 -->
                <div class="mb-4">
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-2">
                        아이콘
                    </label>
                    <input type="text" name="icon" id="icon"
                           value="{{ old('icon', $menu->icon) }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="📋">
                </div>

                <!-- 정렬 순서 -->
                <div class="mb-4">
                    <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">
                        정렬 순서
                    </label>
                    <input type="number" name="sort_order" id="sort_order"
                           value="{{ old('sort_order', $menu->sort_order ?? 0) }}" min="0"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 체크박스 그룹 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <!-- 활성 상태 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="is_active" id="is_active" value="1"
                               {{ old('is_active', $menu->is_active) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_active" class="ml-2 text-sm text-gray-700">
                            활성 상태
                        </label>
                    </div>

                    <!-- 숨김 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="hidden" id="hidden" value="1"
                               {{ old('hidden', $menu->hidden) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="hidden" class="ml-2 text-sm text-gray-700">
                            숨김
                        </label>
                    </div>

                    <!-- 외부 링크 -->
                    <div class="flex items-center">
                        <input type="checkbox" name="is_external" id="is_external" value="1"
                               {{ old('is_external', $menu->is_external) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="is_external" class="ml-2 text-sm text-gray-700">
                            외부 링크
                        </label>
                    </div>
                </div>

                <!-- 외부 URL (is_external 체크 시 표시) -->
                <div id="external-url-group" class="mb-4 {{ $menu->is_external ? '' : 'hidden' }}">
                    <label for="external_url" class="block text-sm font-medium text-gray-700 mb-2">
                        외부 URL
                    </label>
                    <input type="text" name="external_url" id="external_url"
                           value="{{ old('external_url', $menu->external_url) }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="https://example.com">
                </div>

                <!-- 버튼 그룹 -->
                <div class="flex justify-end gap-4 mt-6">
                    <a href="{{ route('menus.index') }}"
                       class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                        취소
                    </a>
                    <button type="submit"
                            class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                        수정
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // 외부 링크 체크박스 토글
    document.getElementById('is_external').addEventListener('change', function() {
        const externalUrlGroup = document.getElementById('external-url-group');
        if (this.checked) {
            externalUrlGroup.classList.remove('hidden');
        } else {
            externalUrlGroup.classList.add('hidden');
        }
    });

    // 폼 제출 처리
    document.getElementById('menuForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        try {
            const response = await fetch('/api/admin/menus/{{ $menu->id }}', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                alert(result.message);
                window.location.href = result.redirect;
            } else {
                alert(result.message);
            }
        } catch (error) {
            alert('메뉴 수정 중 오류가 발생했습니다.');
            console.error(error);
        }
    });
</script>
@endpush