@extends('layouts.app')

@section('title', 'LDAP Groups — ' . config('app.name'))

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

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 mt-4 sm:mt-6">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-white">LDAP Groups</h1>
            <p class="text-slate-400 mt-1 text-sm">
                Host: <span class="text-cyan-400">{{ $meta['server'] }}</span>
                @if ($meta['domain'])
                    · Domain: <span class="text-cyan-400">{{ $meta['domain'] }}</span>
                @endif
            </p>
        </div>
    </div>

    @include('partials.flash')

    @if ($error)
        <div class="mb-6 rounded-lg bg-red-950/50 border border-red-800 text-red-200 px-4 py-3">{{ $error }}</div>
    @endif

    <div class="flex flex-col xl:flex-row gap-6 items-start xl:items-stretch">
        <div class="flex-1 min-w-0 bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden w-full flex flex-col list-panel xl:sticky xl:top-4">
            <div class="list-panel__toolbar p-4 border-b border-slate-800 flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
                <form method="GET" class="flex flex-wrap gap-2 w-full md:w-auto">
                    <input type="hidden" name="sort" value="{{ $sort }}">
                    <input type="hidden" name="dir" value="{{ $dir }}">
                    <input name="q" value="{{ $search }}" placeholder="Search group or admin note..."
                        class="flex-1 min-w-[10rem] md:w-56 rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
                    <button class="rounded-lg bg-cyan-600 hover:bg-cyan-500 px-4 py-2 text-sm font-medium">Search</button>
                    @if ($search !== '')
                        <a href="{{ route('ldap-groups.index', ['sort' => $sort, 'dir' => $dir]) }}"
                           class="rounded-lg border border-slate-700 px-4 py-2 text-sm text-slate-300 hover:bg-slate-800">Clear</a>
                    @endif
                </form>
                <div class="text-sm text-slate-400">{{ $meta['total'] }} groups</div>
            </div>

            <div class="list-panel__scroll">
                <table class="min-w-full text-sm list-table">
                    <thead class="text-slate-300">
                        <tr>
                            @foreach (['name' => 'Group', 'sam_account_name' => 'sAMAccountName', 'type' => 'Type', 'members_count' => 'Members', 'description' => 'Description'] as $key => $label)
                                @php
                                    $nextDir = ($sort === $key && $dir === 'asc') ? 'desc' : 'asc';
                                    $arrow = $sort === $key ? ($dir === 'asc' ? ' ↑' : ' ↓') : '';
                                @endphp
                                <th class="px-4 py-3 text-left font-medium whitespace-nowrap bg-slate-800 border-b border-slate-700">
                                    <a href="?sort={{ $key }}&dir={{ $nextDir }}&q={{ urlencode($search) }}" class="hover:text-cyan-400">{{ $label }}{{ $arrow }}</a>
                                </th>
                            @endforeach
                            <th class="px-4 py-3 text-left font-medium whitespace-nowrap bg-slate-800 border-b border-slate-700">Admin Note</th>
                            <th class="px-4 py-3 text-left font-medium whitespace-nowrap bg-slate-800 border-b border-slate-700">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse ($groups as $group)
                            <tr class="hover:bg-slate-800/40">
                                <td class="px-4 py-3 font-medium text-white whitespace-nowrap">{{ $group['name'] }}</td>
                                <td class="px-4 py-3 text-slate-300 whitespace-nowrap">{{ $group['sam_account_name'] }}</td>
                                <td class="px-4 py-3 text-slate-300 whitespace-nowrap">{{ $group['type'] }}</td>
                                <td class="px-4 py-3 text-slate-300">{{ $group['members_count'] }}</td>
                                <td class="px-4 py-3 text-slate-300 max-w-xs truncate">{{ $group['description'] }}</td>
                                <td class="px-4 py-3 text-slate-400 max-w-xs truncate text-xs" title="{{ $group['admin_note'] ?? '' }}">
                                    {{ ($group['admin_note'] ?? '') !== '' ? Str::limit($group['admin_note'], 50) : '—' }}
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <a href="{{ route('ldap-groups.show', $group['route_key']) }}"
                                       class="rounded bg-cyan-700 hover:bg-cyan-600 text-white text-xs px-2 py-1">View</a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-4 py-8 text-center text-slate-400">No groups found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <aside class="w-full xl:w-96 shrink-0 space-y-6 xl:sticky xl:top-4 notes-panel">
            <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
                <h2 class="text-lg font-semibold text-white mb-4">Buat Grup Baru</h2>
                <form method="POST" action="{{ route('ldap-groups.store') }}" class="space-y-4"
                      onsubmit="return confirm('Create new LDAP group?');">
                    @csrf
                    <div>
                        <label for="name" class="block text-sm text-slate-300 mb-1">Group Name</label>
                        <input type="text" name="name" id="name" required maxlength="64" pattern="[a-zA-Z0-9 _.-]+"
                            value="{{ old('name') }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
                        @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="description" class="block text-sm text-slate-300 mb-1">Description (opsional)</label>
                        <input type="text" name="description" id="description" maxlength="255"
                            value="{{ old('description') }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
                    </div>
                    <label class="flex items-center gap-2 text-sm text-slate-300">
                        <input type="checkbox" name="confirm_create" value="1" required class="rounded">
                        Saya yakin ingin membuat grup ini
                    </label>
                    <button type="submit" class="w-full rounded-lg bg-emerald-700 hover:bg-emerald-600 px-4 py-2 text-sm font-medium text-white">
                        Create Group
                    </button>
                </form>
            </div>

            <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">Search & sort</dt>
                        <dd>Klik header kolom untuk sort. Search mencakup nama grup dan deskripsi.</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-emerald-400 mb-1">View</dt>
                        <dd>Kelola anggota grup, tambah/hapus member di halaman detail.</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-amber-400 mb-1">Grup protected</dt>
                        <dd>Domain Admins, Enterprise Admins, dll. tidak dapat dihapus atau dimodifikasi.</dd>
                    </div>
                </dl>
            </div>
        </aside>
    </div>
</div>
@endsection