@extends('layouts.app')

@section('title', 'Group — ' . $group['name'])

@section('content')
<div class="max-w-[1200px] mx-auto px-4 py-6 sm:py-8">
    @include('partials.nav')

    <div class="mt-4 sm:mt-6 mb-6">
        <a href="{{ route('ldap-groups.index') }}" class="text-sm text-cyan-400 hover:text-cyan-300">← Back to groups</a>
        <h1 class="text-2xl font-bold text-white mt-2">{{ $group['name'] }}</h1>
        <p class="text-slate-400 text-sm mt-1">
            {{ $group['type'] }} · sAMAccountName: {{ $group['sam_account_name'] }}
            @if ($group['description'] !== '—') · {{ $group['description'] }} @endif
        </p>
    </div>

    @include('partials.flash')

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        <div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden flex flex-col list-panel">
            <div class="list-panel__toolbar p-4 border-b border-slate-800 flex justify-between items-center">
                <h2 class="font-semibold text-white">Members ({{ count($group['member_usernames']) }})</h2>
            </div>
            <div class="list-panel__scroll">
                <table class="min-w-full text-sm list-table">
                    <thead class="text-slate-300">
                        <tr>
                            <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Username</th>
                            @unless ($group['protected'])
                                <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Action</th>
                            @endunless
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse ($group['member_usernames'] as $member)
                            <tr class="hover:bg-slate-800/40">
                                <td class="px-4 py-3 text-white">{{ $member }}</td>
                                @unless ($group['protected'])
                                    <td class="px-4 py-3">
                                        <form method="POST" action="{{ route('ldap-groups.members.remove', [$group['route_key'], $member]) }}"
                                              onsubmit="return confirm('Remove [{{ $member }}] from group?');">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="confirm" value="1">
                                            <button type="submit" class="rounded bg-red-800 hover:bg-red-700 text-white text-xs px-2 py-1">Remove</button>
                                        </form>
                                    </td>
                                @endunless
                            </tr>
                        @empty
                            <tr><td colspan="2" class="px-4 py-8 text-center text-slate-400">No members.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="space-y-6 notes-panel">
            <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
                <h2 class="font-semibold text-white mb-4">Admin Note</h2>
                <p class="text-slate-400 text-sm mb-3">Catatan internal admin — disimpan di database aplikasi.</p>
                <form method="POST" action="{{ route('ldap-groups.note.update', $group['route_key']) }}" class="space-y-3">
                    @csrf
                    @method('PUT')
                    <textarea name="admin_note" rows="4" maxlength="5000"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">{{ old('admin_note', $group['admin_note'] ?? '') }}</textarea>
                    @error('admin_note')<p class="text-red-400 text-xs">{{ $message }}</p>@enderror
                    <button type="submit" class="w-full rounded-lg bg-cyan-700 hover:bg-cyan-600 px-4 py-2 text-sm text-white">
                        Save Note
                    </button>
                </form>
            </div>

            @unless ($group['protected'])
                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
                    <h2 class="font-semibold text-white mb-4">Tambah Member</h2>
                    <form method="POST" action="{{ route('ldap-groups.members.add', $group['route_key']) }}" class="space-y-3">
                        @csrf
                        <div>
                            <label for="username" class="block text-sm text-slate-300 mb-1">Username</label>
                            <input list="usernames" name="username" id="username" required
                                class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
                            <datalist id="usernames">
                                @foreach ($usernames as $name)
                                    <option value="{{ $name }}">
                                @endforeach
                            </datalist>
                        </div>
                        <button type="submit" class="w-full rounded-lg bg-cyan-700 hover:bg-cyan-600 px-4 py-2 text-sm text-white">
                            Add Member
                        </button>
                    </form>
                </div>

                <div class="bg-slate-900 border border-red-900/50 rounded-2xl p-5">
                    <h2 class="font-semibold text-red-300 mb-4">Hapus Grup</h2>
                    <form method="POST" action="{{ route('ldap-groups.destroy', $group['route_key']) }}"
                          onsubmit="return confirm('PERMANENTLY delete group [{{ $group['name'] }}]?');">
                        @csrf
                        @method('DELETE')
                        <div class="space-y-3">
                            <label class="flex items-center gap-2 text-sm text-slate-300">
                                <input type="checkbox" name="confirm_delete" value="1" required class="rounded">
                                Saya yakin ingin menghapus grup ini
                            </label>
                            <div>
                                <label class="block text-sm text-slate-300 mb-1">
                                    Ketik nama grup: <span class="text-cyan-400">{{ $group['name'] }}</span>
                                </label>
                                <input type="text" name="confirm_group_name" required autocomplete="off"
                                    class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
                            </div>
                            <button type="submit" class="w-full rounded-lg bg-red-800 hover:bg-red-700 px-4 py-2 text-sm text-white">
                                Delete Group
                            </button>
                        </div>
                    </form>
                </div>
            @else
                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
                    <p class="text-amber-300 text-sm">Grup sistem — tidak dapat dimodifikasi atau dihapus.</p>
                </div>
            @endunless

            <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
                <h2 class="text-lg font-semibold text-white mb-4">Catatan</h2>
                <dl class="space-y-3 text-sm text-slate-400">
                    <div>
                        <dt class="font-medium text-cyan-400 mb-1">Daftar member</dt>
                        <dd>Header tabel tetap terlihat saat scroll. Footer halaman tidak ikut bergeser.</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-emerald-400 mb-1">Tambah member</dt>
                        <dd>Ketik username atau pilih dari suggestion. Perubahan langsung ke Active Directory.</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-amber-400 mb-1">Grup protected</dt>
                        <dd>Domain Admins dan grup sistem AD tidak dapat diubah dari aplikasi ini.</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection