@extends('layouts.app')

@section('title', 'Roller ve İzinler')
@section('page-title', 'Roller ve İzinler')

@section('content')
<div class="space-y-6" id="roles-permissions-app">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Roller ve İzinler</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Roller için izinleri yönetin</p>
        </div>
        <div class="flex items-center space-x-3">
            <form action="{{ route('roles.seed-defaults') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <i class="fas fa-seedling mr-2"></i>
                    Varsayılan Rolleri Yükle
                </button>
            </form>
            <a href="{{ route('roles.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
                <i class="fas fa-plus mr-2"></i>
                Yeni Rol Oluştur
            </a>
            <button id="save-all-permissions" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 dark:bg-green-500 hover:bg-green-700 dark:hover:bg-green-600">
                <i class="fas fa-save mr-2"></i>
                Tümünü Kaydet
            </button>
        </div>
    </div>

    <!-- Roles and Permissions Table -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-900">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider sticky left-0 bg-gray-50 dark:bg-gray-900 z-10 min-w-[200px]">
                            İzin
                        </th>
                        @foreach($roles as $role)
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider min-w-[120px]">
                            <div class="flex flex-col items-center">
                                <div class="w-3 h-3 rounded-full mb-1" style="background-color: {{ $role->color }}"></div>
                                <span>{{ $role->name }}</span>
                                @if($role->is_system)
                                <span class="text-xs text-gray-400 dark:text-gray-500 mt-1">(Sistem)</span>
                                @endif
                            </div>
                        </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($permissions as $group => $groupPermissions)
                    <!-- Group Header -->
                    <tr class="bg-gray-100 dark:bg-gray-900/50">
                        <td colspan="{{ $roles->count() + 1 }}" class="px-6 py-3">
                            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($group ?? 'Diğer') }}</h3>
                        </td>
                    </tr>
                    @foreach($groupPermissions as $permission)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100 sticky left-0 bg-white dark:bg-gray-800 z-10">
                            <div>
                                <div class="font-medium">{{ $permission->name }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    <code class="px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded">{{ $permission->slug }}</code>
                                </div>
                                @if($permission->description)
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $permission->description }}</div>
                                @endif
                            </div>
                        </td>
                        @foreach($roles as $role)
                        @php
                            $hasPermission = $role->permissions->contains($permission->id);
                            $isAdminRole = strtolower($role->name) === 'admin' || 
                                         strtolower($role->slug ?? '') === 'admin' || 
                                         ($role->is_system && strtolower($role->name) === 'admin');
                            // Admin rolü için her zaman açık
                            $isChecked = $isAdminRole ? true : $hasPermission;
                            $isDisabled = $isAdminRole;
                        @endphp
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <label class="relative inline-flex items-center cursor-pointer {{ $isDisabled ? 'opacity-50 cursor-not-allowed' : '' }}" title="{{ $isDisabled ? 'Admin rolü için tüm izinler açıktır' : 'İzni bu role ata/kaldır' }}">
                                <input 
                                    type="checkbox" 
                                    class="permission-toggle sr-only peer" 
                                    data-permission-id="{{ $permission->id }}"
                                    data-role-id="{{ $role->id }}"
                                    {{ $isChecked ? 'checked' : '' }}
                                    {{ $isDisabled ? 'disabled' : '' }}
                                >
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 dark:peer-checked:bg-indigo-500"></div>
                            </label>
                        </td>
                        @endforeach
                    </tr>
                    @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/modules/roles/permissions-manager.js') }}"></script>
@endpush
@endsection