@extends('layouts.admin')

@section('title', 'Atur Hak Akses: ' . $role->nama)

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.roles.index') }}" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
            </a>
            <div>
                <div class="flex items-center gap-2">
                    <h1 class="text-xl font-bold text-slate-900 tracking-tight">{{ $role->nama }}</h1>
                    @if($role->is_system)
                        <span class="px-2 py-0.5 rounded-full text-[9px] font-black bg-rose-50 text-rose-700 border border-rose-200">
                            SYSTEM ROLE
                        </span>
                    @endif
                </div>
                <p class="text-xs text-slate-500">Sesuaikan izin akses modul dan kewenangan peran ini</p>
            </div>
        </div>
    </div>

    <!-- Alert Galat Validasi -->
    @if(isset($errors) && $errors->any())
    <div class="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs">
        <div class="flex items-center gap-2 font-bold mb-1">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i>
            <span>Terdapat beberapa kesalahan pengisian formulir:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 ml-2 text-rose-700">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('admin.roles.update', $role->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- INFORMASI DASAR ROLE -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 space-y-4">
            <h3 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center gap-2">
                <i data-lucide="shield" class="w-4 h-4 text-primary-600"></i>
                <span>Informasi Peran (Role)</span>
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-slate-700 mb-1">Nama Peran / Jabatan Akses *</label>
                    <input type="text" name="nama" value="{{ old('nama', $role->nama) }}" required {{ $role->is_system ? 'readonly' : '' }} class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none {{ $role->is_system ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : '' }}">
                    @if($role->is_system)
                        <span class="text-[10px] text-slate-400 mt-1 block">Nama role inti sistem tidak dapat diubah.</span>
                    @endif
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Warna Badge Identitas</label>
                    <div class="flex items-center gap-2">
                        <input type="color" name="warna" value="{{ old('warna', $role->warna ?? '#2563eb') }}" class="w-10 h-10 p-1 rounded-xl border border-slate-200 cursor-pointer">
                        <span class="text-xs text-slate-500">Pilih warna aksen</span>
                    </div>
                </div>

                <div class="md:col-span-3">
                    <label class="block text-xs font-bold text-slate-700 mb-1">Deskripsi Peran & Tanggung Jawab</label>
                    <input type="text" name="deskripsi" value="{{ old('deskripsi', $role->deskripsi) }}" placeholder="Deskripsi tugas dan tanggung jawab" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                </div>
            </div>
        </div>

        <!-- MATRIKS HAK AKSES PER MODUL -->
        <div class="space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                    <h3 class="text-sm font-bold text-slate-900">Hak Akses Modul (Permissions)</h3>
                    <p class="text-xs text-slate-500">Centang izin fitur yang aktif untuk role ini</p>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="toggleAllPermissions(true)" class="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-colors">
                        Pilih Semua
                    </button>
                    <button type="button" onclick="toggleAllPermissions(false)" class="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-colors">
                        Batal Semua
                    </button>
                </div>
            </div>

            @if($role->is_system && in_array($role->slug, ['super_admin', 'admin']))
            <div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 text-xs flex items-center gap-3">
                <i data-lucide="shield-alert" class="w-5 h-5 text-amber-600 shrink-0"></i>
                <div>
                    <strong>Peran Super Administrator:</strong> Memiliki izin mutlak (Bypass All) ke seluruh modul dan fitur baru secara otomatis di tingkat sistem kode.
                </div>
            </div>
            @endif

            <div class="space-y-4">
                @foreach($groupedPermissions as $modul => $perms)
                <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
                    <div class="bg-slate-50/70 px-5 py-3 border-b border-slate-100 flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="w-2.5 h-2.5 rounded-full" style="background-color: {{ $role->warna ?? '#2563eb' }}"></span>
                            <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wider">{{ $modul }}</h4>
                            <span class="text-[10px] text-slate-400 font-semibold">({{ $perms->count() }} Izin)</span>
                        </div>
                        <div class="flex items-center gap-2 text-xs">
                            <button type="button" onclick="toggleModulePermissions('{{ Str::slug($modul) }}', true)" class="text-primary-600 hover:underline font-bold text-[11px]">
                                Centang Modul
                            </button>
                            <span class="text-slate-300">•</span>
                            <button type="button" onclick="toggleModulePermissions('{{ Str::slug($modul) }}', false)" class="text-slate-400 hover:text-slate-600 font-medium text-[11px]">
                                Hapus
                            </button>
                        </div>
                    </div>

                    <div class="p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        @foreach($perms as $p)
                        @php
                            $isChecked = is_array(old('permissions')) 
                                ? in_array($p->id, old('permissions')) 
                                : in_array($p->id, $activePermissionIds);
                        @endphp
                        <label class="flex items-start gap-3 p-3 rounded-xl border {{ $isChecked ? 'border-primary-200 bg-primary-50/20' : 'border-slate-100' }} hover:border-primary-200 hover:bg-primary-50/20 cursor-pointer transition-all select-none">
                            <input type="checkbox" name="permissions[]" value="{{ $p->id }}" data-module="{{ Str::slug($modul) }}" class="perm-checkbox mt-0.5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 w-4 h-4 cursor-pointer" {{ $isChecked ? 'checked' : '' }}>
                            <div class="min-w-0">
                                <span class="text-xs font-bold text-slate-800 block">{{ $p->nama }}</span>
                                <span class="text-[10px] text-slate-400 font-mono block mt-0.5">{{ $p->slug }}</span>
                                <p class="text-[11px] text-slate-500 mt-1 leading-snug">{{ $p->deskripsi }}</p>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Tombol Simpan -->
        <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-200">
            <a href="{{ route('admin.roles.index') }}" class="px-5 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-bold transition-all">
                Batal
            </a>
            <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/30 transition-all flex items-center gap-2">
                <i data-lucide="check" class="w-4 h-4"></i>
                <span>Simpan Perubahan Hak Akses</span>
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    function toggleAllPermissions(checked) {
        document.querySelectorAll('.perm-checkbox').forEach(cb => {
            cb.checked = checked;
        });
    }

    function toggleModulePermissions(moduleSlug, checked) {
        document.querySelectorAll(`.perm-checkbox[data-module="${moduleSlug}"]`).forEach(cb => {
            cb.checked = checked;
        });
    }
</script>
@endpush
@endsection