@extends('layouts.admin')

@section('title', 'Tambah Role Baru')

@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>
                <h1 class="text-xl font-bold text-slate-900 tracking-tight">Tambah Role Baru</h1>
                <p class="text-xs text-slate-500">Tentukan nama peran dan pilih hak akses modul yang diperbolehkan</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.store') }}" method="POST" class="space-y-6">
        @csrf

        <!-- 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') }}" required placeholder="Contoh: Manager Operasional / Staf Keuangan" 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>
                    <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', '#2563eb') }}" class="w-10 h-10 p-1 rounded-xl border border-slate-200 cursor-pointer">
                        <span class="text-xs text-slate-500">Pilih aksen warna peran</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') }}" placeholder="Contoh: Mengelola operasional harian, validasi shift dan laporan keterlambatan" 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">Konfigurasi Hak Akses Modul (Permissions)</h3>
                    <p class="text-xs text-slate-500">Centang izin fitur yang boleh diakses dan dijalankan oleh 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>

            <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 bg-primary-600"></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)
                        <label class="flex items-start gap-3 p-3 rounded-xl border 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" {{ is_array(old('permissions')) && in_array($p->id, old('permissions')) ? '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 Peran & 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