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

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

    @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

    {{-- Daftar Webhook --}}
    @foreach ($webhooks as $wh)
        <div class="card" style="margin-bottom:16px">
            <form method="POST" action="{{ route('admin.webhooks.update', $wh->id) }}">
                @csrf
                @method('PATCH')

                <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
                    <span style="font-weight:700;font-size:1rem">
                        <i class="bi bi-plug-fill"
                            style="color:{{ $wh->active ? 'var(--success)' : 'var(--text-muted)' }}"></i>
                        {{ $wh->name }}
                    </span>
                    <label
                        style="display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted);cursor:pointer">
                        <input type="checkbox" name="active" value="1" {{ $wh->active ? 'checked' : '' }}
                            style="accent-color:var(--accent)">
                        Aktif
                    </label>
                    <div style="margin-left:auto">
                        <form method="POST" action="{{ route('admin.webhooks.destroy', $wh->id) }}"
                            onsubmit="return confirm('Hapus webhook {{ $wh->name }}?')" style="display:inline">
                            @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>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">Nama</label>
                        <input type="text" name="name" class="form-control" value="{{ $wh->name }}" required>
                    </div>
                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">ID Discord Chanel</label>
                        <input type="url" name="url" class="form-control" value="{{ $wh->url }}" required>
                    </div>
                </div>

                {{-- Event Toggles --}}
                <div style="margin-bottom:14px">
                    <div class="form-label" style="margin-bottom:8px">Kirim notif saat:</div>
                    <div style="display:flex;flex-wrap:wrap;gap:10px">
                        @foreach ($eventLabels as $key => $label)
                            <label
                                style="display:flex;align-items:center;gap:7px;font-size:.85rem;
                              background:var(--bg-primary);border:1px solid var(--border);
                              border-radius:6px;padding:6px 12px;cursor:pointer;
                              {{ $wh->$key ? 'border-color:var(--accent);color:var(--text-primary)' : 'color:var(--text-muted)' }}">
                                <input type="checkbox" name="{{ $key }}" value="1"
                                    {{ $wh->$key ? 'checked' : '' }} style="accent-color:var(--accent)">
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="padding:6px 18px;font-size:.85rem">
                    <i class="bi bi-floppy"></i> Simpan Perubahan
                </button>
            </form>
        </div>
    @endforeach

    @if ($webhooks->isEmpty())
        <div class="card" style="text-align:center;padding:40px;color:var(--text-muted)">
            <i class="bi bi-bell-slash" style="font-size:2rem;display:block;margin-bottom:10px"></i>
            Belum ada webhook. Tambahkan lewat form di bawah.
        </div>
    @endif

    <hr class="divider">

    {{-- Form Tambah Webhook Baru --}}
    <div class="card">
        <div class="card-title"><i class="bi bi-plus-circle"></i> Tambah Webhook Baru</div>
        <form method="POST" action="{{ route('admin.webhooks.store') }}">
            @csrf

            <div style="display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:16px">
                <div class="form-group" style="margin-bottom:0">
                    <label class="form-label">Nama Instansi</label>
                    <input type="text" name="name" class="form-control" placeholder="DOJ / Government / Medic"
                        value="{{ old('name') }}" required>
                </div>
                <div class="form-group" style="margin-bottom:0">
                    <label class="form-label">Webhook URL</label>
                    <input type="url" name="url" class="form-control"
                        placeholder="https://discord.com/api/webhooks/..." value="{{ old('url') }}" required>
                </div>
            </div>

            {{-- Toggle aktif --}}
            <div class="form-group" style="margin-bottom:14px">
                <label style="display:flex;align-items:center;gap:8px;font-size:.875rem;cursor:pointer">
                    <input type="checkbox" name="active" value="1" checked style="accent-color:var(--accent)">
                    Aktifkan webhook ini setelah ditambahkan
                </label>
            </div>

            {{-- Event Toggles --}}
            <div style="margin-bottom:16px">
                <div class="form-label" style="margin-bottom:8px">Kirim notif saat:</div>
                <div style="display:flex;flex-wrap:wrap;gap:10px">
                    @foreach ($eventLabels as $key => $label)
                        <label
                            style="display:flex;align-items:center;gap:7px;font-size:.85rem;
                              background:var(--bg-primary);border:1px solid var(--border);
                              border-radius:6px;padding:6px 12px;cursor:pointer">
                            <input type="checkbox" name="{{ $key }}" value="1"
                                {{ old($key, $key === 'on_register' ? '1' : '') ? 'checked' : '' }}
                                style="accent-color:var(--accent)">
                            {{ $label }}
                        </label>
                    @endforeach
                </div>
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Tambah Webhook
            </button>
        </form>
    </div>

    @push('scripts')
        <script>
            // Highlight label saat checkbox diklik
            document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
                if (!cb.name || cb.name === 'active') return;
                cb.addEventListener('change', () => {
                    const label = cb.closest('label');
                    if (!label) return;
                    if (cb.checked) {
                        label.style.borderColor = 'var(--accent)';
                        label.style.color = 'var(--text-primary)';
                    } else {
                        label.style.borderColor = 'var(--border)';
                        label.style.color = 'var(--text-muted)';
                    }
                });
            });
        </script>
    @endpush
@endsection