@extends('layouts.app')
@section('title', 'Admin — Moderator')

@section('content')
<div class="page-title">
    <i class="bi bi-people-fill" style="color:var(--accent)"></i>
    Kelola Moderator
    <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary" style="margin-left:auto;font-size:0.8rem;">
        <i class="bi bi-shield-lock-fill"></i> Role Pool
    </a>
</div>

{{-- Flash --}}
@if(session('success'))
    <div class="alert alert-success"><i class="bi bi-check-circle-fill"></i> {{ session('success') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger">
        <i class="bi bi-exclamation-triangle-fill"></i>
        <ul style="margin:0;padding-left:16px">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
    </div>
@endif

<div style="display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start">

    {{-- Tabel Moderator --}}
    <div class="card">
        <div class="card-title"><i class="bi bi-person-badge"></i> Daftar Moderator</div>

        @if($mods->isEmpty())
            <p class="text-muted" style="font-size:.875rem">Belum ada moderator terdaftar.</p>
        @else
            <table class="table">
                <thead>
                    <tr>
                        <th>Discord ID</th>
                        <th>Nama</th>
                        <th>Ditambahkan</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($mods as $mod)
                    <tr>
                        <td>
                            <code style="font-size:.8rem;background:var(--bg-primary);padding:2px 6px;border-radius:4px">
                                {{ $mod->discord_id }}
                            </code>
                        </td>
                        <td>{{ $mod->name ?? '—' }}</td>
                        <td class="text-muted" style="font-size:.8rem">{{ $mod->created_at->format('d M Y') }}</td>
                        <td>
                            @if($mod->discord_id !== auth()->user()->discord_id)
                                <form method="POST" action="{{ route('admin.mods.destroy', $mod->id) }}"
                                    onsubmit="return confirm('Hapus moderator {{ $mod->name ?? $mod->discord_id }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-secondary"
                                        style="padding:4px 10px;font-size:.8rem;border-color:var(--danger);color:var(--danger)">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            @else
                                <span class="badge badge-approved" style="font-size:.7rem">Kamu</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    {{-- Form Tambah --}}
    <div class="card">
        <div class="card-title"><i class="bi bi-plus-circle"></i> Tambah Moderator</div>
        <form method="POST" action="{{ route('admin.mods.store') }}">
            @csrf
            <div class="form-group">
                <label class="form-label">Discord ID</label>
                <input type="text" name="discord_id" class="form-control" value="{{ old('discord_id') }}"
                    placeholder="816281110039625729" required>
                <div class="form-hint">Harus berupa Discord User ID (bukan username).</div>
            </div>
            <div class="form-group">
                <label class="form-label">Nama (opsional)</label>
                <input type="text" name="name" class="form-control" value="{{ old('name') }}"
                    placeholder="Nama display">
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%">
                <i class="bi bi-person-plus-fill"></i> Tambah Moderator
            </button>
        </form>
    </div>

</div>
@endsection