@extends('layouts.admin')

@section('title', 'Rol Düzenle')
@section('page-title', 'Rol Düzenle')
@section('page-subtitle', $roller->name)

@section('content')
<div class="mt-4 max-w-3xl">
    <div class="mb-4">
        <a href="{{ route('admin.roller.index') }}"
           class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Rol Listesine Dön
        </a>
    </div>
    <form method="POST" action="{{ route('admin.roller.update', $roller) }}">
        @csrf
        @method('PUT')

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Rol Adı <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name', $roller->name) }}" required
                       {{ $roller->name === 'super-admin' ? 'readonly' : '' }}
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('name') border-red-400 @enderror {{ $roller->name === 'super-admin' ? 'bg-gray-50 cursor-not-allowed' : '' }}">
                @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                @if($roller->name === 'super-admin')
                <p class="text-xs text-orange-500 mt-1">super-admin rolünün adı değiştirilemez.</p>
                @endif
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-5">
            <h3 class="font-semibold text-gray-800 mb-4">İzinler</h3>
            @if($roller->name === 'super-admin')
            <div class="flex items-center gap-2 bg-orange-50 border border-orange-200 rounded-lg px-4 py-3 mb-4">
                <svg class="w-4 h-4 text-orange-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <p class="text-xs text-orange-700">super-admin rolü her zaman tüm izinlere sahiptir ve izinleri değiştirilemez.</p>
            </div>
            @endif
            <div class="space-y-5">
                @foreach($permissionGroups as $groupName => $permissions)
                <div class="border border-gray-100 rounded-lg p-4" data-perm-group>
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-sm font-semibold text-gray-700">{{ $groupName }}</h4>
                        @if($roller->name !== 'super-admin')
                        <button type="button" class="text-xs text-primary hover:underline toggle-group-btn">Tümünü Seç</button>
                        @endif
                    </div>
                    <div class="flex flex-wrap gap-3">
                        @foreach($permissions as $permName => $permLabel)
                        <label class="flex items-center gap-2 {{ $roller->name === 'super-admin' ? 'cursor-not-allowed opacity-70' : 'cursor-pointer group' }}">
                            <input type="checkbox" name="permissions[]" value="{{ $permName }}"
                                   {{ $roller->name === 'super-admin' ? 'checked disabled' : (in_array($permName, old('permissions', $rolePermissionNames)) ? 'checked' : '') }}
                                   class="w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 perm-checkbox {{ $roller->name === 'super-admin' ? 'cursor-not-allowed' : '' }}">
                            <span class="text-sm text-gray-700 {{ $roller->name !== 'super-admin' ? 'group-hover:text-gray-900' : '' }}">{{ $permLabel }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit"
                    class="bg-primary text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">
                Güncelle
            </button>
            <a href="{{ route('admin.roller.index') }}" class="text-gray-500 hover:text-gray-700 text-sm">İptal</a>
        </div>
    </form>
</div>

<script nonce="{{ app('csp-nonce') }}">
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggle-group-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var group = btn.closest('[data-perm-group]');
            if (!group) return;
            var checkboxes = group.querySelectorAll('.perm-checkbox');
            var allChecked = Array.from(checkboxes).every(function (cb) { return cb.checked; });
            checkboxes.forEach(function (cb) { cb.checked = !allChecked; });
            btn.textContent = allChecked ? 'Tümünü Seç' : 'Tümünü Kaldır';
        });
    });
});
</script>
@endsection