@extends('layouts.app')

@section('title', '권한 수정')

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

        <!-- 폼 -->
        <div id="loadingState" class="bg-white rounded-lg shadow-sm p-6">
            <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>

        <div id="formContainer" class="bg-white rounded-lg shadow-sm p-6" style="display: none;">
            <form id="permissionForm" method="POST">
                @csrf
                @method('PUT')

                <!-- 권한 이름 -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        권한 이름 <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="name"
                           id="name"
                           required
                           placeholder="예: users.view, products.create"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">영문 소문자, 점(.), 하이픈(-), 언더스코어(_)만 사용</p>
                </div>

                <!-- Guard 이름 -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Guard 이름 <span class="text-red-500">*</span>
                    </label>
                    <select name="guard_name"
                            id="guard_name"
                            required
                            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="web">web</option>
                        <option value="api">api</option>
                    </select>
                </div>

                <!-- 테넌트 -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        테넌트
                    </label>
                    <select name="tenant_id"
                            id="tenant_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($tenants as $tenant)
                            <option value="{{ $tenant->id }}">{{ $tenant->company_name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- 할당된 역할 수 (읽기 전용) -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        할당된 역할 수
                    </label>
                    <p id="rolesCount" class="text-gray-900 text-lg font-medium">-</p>
                </div>

                <!-- 버튼 -->
                <div class="flex gap-3">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">
                        수정
                    </button>
                    <a href="{{ route('permissions.index') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg transition">
                        취소
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection

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

    // 권한 정보 로드
    fetch(`/api/admin/permissions/${permissionId}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const permission = data.data;

            // 폼 필드 채우기
            document.getElementById('name').value = permission.name;
            document.getElementById('guard_name').value = permission.guard_name;
            document.getElementById('tenant_id').value = permission.tenant_id || '';
            document.getElementById('rolesCount').textContent = permission.roles?.length || 0;

            // 로딩 숨기고 폼 표시
            document.getElementById('loadingState').style.display = 'none';
            document.getElementById('formContainer').style.display = 'block';
        } else {
            showToast('권한 정보를 불러올 수 없습니다.', 'error');
            window.location.href = '{{ route("permissions.index") }}';
        }
    })
    .catch(error => {
        showToast('권한 정보 로드 중 오류가 발생했습니다.', 'error');
        window.location.href = '{{ route("permissions.index") }}';
    });

    // 폼 제출
    document.getElementById('permissionForm').addEventListener('submit', function(e) {
        e.preventDefault();

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

        fetch(`/api/admin/permissions/${permissionId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                window.location.href = '{{ route("permissions.index") }}';
            } else {
                showToast(data.message || '권한 수정에 실패했습니다.', 'error');
            }
        })
        .catch(error => {
            showToast('권한 수정 중 오류가 발생했습니다.', 'error');
        });
    });
</script>
@endpush