@extends('layouts.app')

@section('title', 'Modül İzinleri')
@section('page-title', 'Modül İzinleri')

@section('content')
<div class="space-y-6" id="module-permissions-app" data-bulk-update-url="{{ route('module-permissions.bulk-update') }}">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Modül İzinleri</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Roller için modül erişim izinlerini yönetin</p>
        </div>
        <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-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
            <i class="fas fa-save mr-2"></i>
            Tümünü Kaydet
        </button>
    </div>

    <!-- Roles and Modules Grid -->
    <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">
                            Modül
                        </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-[150px]">
                            <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>
                            </div>
                        </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($modules as $moduleKey => $moduleName)
                    <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">
                            {{ $moduleName }}
                        </td>
                        @foreach($roles as $role)
                        @php
                            // Admin rolü için her zaman açık
                            $isAdminRole = strtolower($role->name) === 'admin' || 
                                         strtolower($role->slug ?? '') === 'admin' || 
                                         $role->is_system && strtolower($role->name) === 'admin';
                            $permission = $role->modulePermissions->firstWhere('module_name', $moduleKey);
                            $isEnabled = $isAdminRole ? true : ($permission ? $permission->is_enabled : true); // Varsayılan: açık
                        @endphp
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <label class="relative inline-flex items-center cursor-pointer {{ $isAdminRole ? 'opacity-50 cursor-not-allowed' : '' }}">
                                <input 
                                    type="checkbox" 
                                    class="module-permission-toggle sr-only peer" 
                                    data-role-id="{{ $role->id }}"
                                    data-module-name="{{ $moduleKey }}"
                                    {{ $isEnabled ? 'checked' : '' }}
                                    {{ $isAdminRole ? '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
                </tbody>
            </table>
        </div>
    </div>
</div>

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