@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 class="bg-white rounded-lg shadow-sm p-6">
            <form id="permissionForm" action="/api/admin/permissions" method="POST">
                @csrf

                <!-- 권한 이름 -->
                <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"
                           required
                           placeholder="예: users.view, products.create, orders.delete"
                           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"
                            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" selected>web</option>
                        <option value="api">api</option>
                    </select>
                    <p class="mt-1 text-sm text-gray-500">기본값: web</p>
                </div>

                <!-- 테넌트 -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        테넌트
                    </label>
                    <select name="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 }}" {{ session('selected_tenant_id') == $tenant->id ? 'selected' : '' }}>
                                {{ $tenant->company_name }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-sm text-gray-500">선택하지 않으면 전체 테넌트에서 사용 가능한 마스터 권한</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>
    document.getElementById('permissionForm').addEventListener('submit', function(e) {
        e.preventDefault();

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

        fetch('/api/admin/permissions', {
            method: 'POST',
            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