@extends('layouts.app')

@section('title', '역할 권한 관리')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">역할 권한 관리</h1>
    </div>

    <!-- 역할 선택 버튼 -->
    <div class="bg-white rounded-lg shadow-sm mb-6">
        <div class="px-6 py-4">
            <div class="flex flex-wrap items-center gap-3">
                <span class="text-sm font-medium text-gray-700">역할 선택:</span>
                @foreach($roles as $role)
                    <button
                        type="button"
                        class="role-button px-4 py-2 text-sm font-medium rounded-lg border transition-colors
                               {{ $loop->first ? 'bg-blue-700 text-white border-blue-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' }}"
                        data-role-id="{{ $role->id }}"
                        data-role-name="{{ $role->name }}"
                        hx-get="/api/admin/role-permissions/matrix"
                        hx-target="#permission-matrix"
                        hx-vals='{"role_id": {{ $role->id }}}'
                        onclick="selectRole(this)"
                    >
                        {{ $role->name }}
                    </button>
                @endforeach
            </div>
        </div>
    </div>

    <!-- 액션 버튼 -->
    <div class="bg-white rounded-lg shadow-sm mb-6" id="action-buttons" style="display: none;">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-700" id="selected-role-name">선택된 역할</span>
                <div class="flex items-center gap-2">
                    <input type="hidden" name="role_id" id="roleIdInput" value="">
                    <button
                        type="button"
                        class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
                        hx-post="/api/admin/role-permissions/allow-all"
                        hx-target="#permission-matrix"
                        hx-include="[name='role_id']"
                    >
                        전체 허용
                    </button>
                    <button
                        type="button"
                        class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
                        hx-post="/api/admin/role-permissions/deny-all"
                        hx-target="#permission-matrix"
                        hx-include="[name='role_id']"
                    >
                        전체 거부
                    </button>
                    <button
                        type="button"
                        class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400"
                        hx-post="/api/admin/role-permissions/deny-all"
                        hx-target="#permission-matrix"
                        hx-include="[name='role_id']"
                    >
                        초기화
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 권한 매트릭스 테이블 -->
    <div id="permission-matrix" class="bg-white rounded-lg shadow-sm">
        @include('role-permissions.partials.empty-state')
    </div>

<script>
    function selectRole(button) {
        // 모든 버튼의 활성 상태 제거
        document.querySelectorAll('.role-button').forEach(btn => {
            btn.classList.remove('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');
            btn.classList.add('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
        });

        // 클릭된 버튼 활성화
        button.classList.remove('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
        button.classList.add('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');

        // 역할 정보 저장
        const roleId = button.getAttribute('data-role-id');
        const roleName = button.getAttribute('data-role-name');

        document.getElementById('roleIdInput').value = roleId;
        document.getElementById('selected-role-name').textContent = roleName + ' 역할';

        // 액션 버튼 표시
        document.getElementById('action-buttons').style.display = 'block';
    }

    // 페이지 로드 시 첫 번째 역할 자동 선택
    document.addEventListener('DOMContentLoaded', function() {
        const firstButton = document.querySelector('.role-button');
        if (firstButton) {
            firstButton.click();
        }
    });
</script>
@endsection