@extends('layouts.admin')

@section('title', 'Yeni Rol')
@section('page-title', 'Yeni Rol Oluştur')

@section('content')
<div class="mt-4 max-w-3xl">
    <form method="POST" action="{{ route('admin.roller.store') }}">
        @csrf

        <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') }}" required
                       placeholder="örn: ilan-editoru"
                       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">
                @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                <p class="text-xs text-gray-400 mt-1">Küçük harf, tire kullanın. Örn: hr-editor, ilan-yoneticisi</p>
            </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>
            <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>
                        <button type="button" class="text-xs text-primary hover:underline toggle-group-btn">Tümünü Seç</button>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        @foreach($permissions as $permName => $permLabel)
                        <label class="flex items-center gap-2 cursor-pointer group">
                            <input type="checkbox" name="permissions[]" value="{{ $permName }}"
                                   {{ in_array($permName, old('permissions', [])) ? 'checked' : '' }}
                                   class="w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 perm-checkbox">
                            <span class="text-sm text-gray-700 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">
                Rol Oluştur
            </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