@extends('admin.layouts.app')

@section('title', 'Yeni Rol | Admin')

@section('content')
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        <div class="mb-4">
            <a href="{{ route('admin.roles.index') }}" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">← Rol listesine dön</a>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <h3 class="text-lg font-medium text-black dark:text-white mb-6">Yeni Rol</h3>

            @if($errors->any())
                <div class="mb-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-4 dark:bg-red-500/10">
                    <ul class="list-disc list-inside space-y-1 text-sm text-red-700 dark:text-red-300">
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.roles.store') }}" class="space-y-6 max-w-2xl">
                @csrf
                <div>
                    <label for="name" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Rol adı <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" required maxlength="100"
                           class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                           placeholder="Örn: İşletme Yöneticisi"/>
                </div>
                <div>
                    <label for="description" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Açıklama</label>
                    <textarea name="description" id="description" rows="2" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-white">{{ old('description') }}</textarea>
                </div>

                <div>
                    <p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">Yetkiler</p>
                    <p class="mb-4 text-xs text-gray-500 dark:text-gray-400">Her bölüm için Tümü seçildiğinde görüntüleme, ekleme, güncelleme ve silme yetkisi verilir.</p>
                    @php
                        $actionOrder = ['view' => 0, 'create' => 1, 'update' => 2, 'delete' => 3];
                        $actionLabels = ['view' => 'Görüntüleme', 'create' => 'Ekleme', 'update' => 'Güncelleme', 'delete' => 'Silme'];
                    @endphp
                    @foreach($permissionsBySection as $sectionKey => $permissions)
                        @php $permissions = $permissions->sortBy(fn($p) => $actionOrder[$p->action] ?? 99)->values(); @endphp
                        <div class="mb-6 rounded-lg border border-gray-200 p-4 dark:border-gray-700" data-section="{{ $sectionKey }}">
                            <p class="mb-3 text-sm font-medium text-gray-800 dark:text-white">{{ $permissions->first()->section_label }}</p>
                            <div class="flex flex-wrap gap-4">
                                <label class="inline-flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox"
                                           class="section-all h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                           @change="const box = $el.closest('[data-section]'); const inputs = box.querySelectorAll('input[name=\'permission_ids[]\']'); const checked = $el.checked; inputs.forEach(i => { i.checked = checked; });"/>
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tümü</span>
                                </label>
                                @foreach($permissions as $perm)
                                    <label class="inline-flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox"
                                               name="permission_ids[]"
                                               value="{{ $perm->id }}"
                                               {{ in_array($perm->id, old('permission_ids', [])) ? 'checked' : '' }}
                                               class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"/>
                                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ $actionLabels[$perm->action] ?? $perm->action }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="flex gap-2 pt-2">
                    <button type="submit" class="rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700">Kaydet</button>
                    <a href="{{ route('admin.roles.index') }}" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">İptal</a>
                </div>
            </form>
        </div>
    </div>
@endsection