@extends('layouts.admin.master')

@section('content')
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
        <div class="col">
            <a href="{{ route('admin.obrolan') }}">
                <div class="card radius-10 border-start border-4 border-primary">
                    <div class="card-body">
                        <p class="mb-0 text-secondary">Daftar Obrolan</p>
                        <h4 class="my-1 text-primary">{{ number_format($stats['total_conversations']) }}</h4>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-danger">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Akun Diblokir</p>
                    <h4 class="my-1 text-danger">{{ number_format($stats['blocked_members']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <a href="{{ route('admin.anggota') }}">
                <div class="card radius-10 border-start border-4 border-info">
                    <div class="card-body">
                        <p class="mb-0 text-secondary">Kelola Anggota</p>
                        <h4 class="my-1 text-info">{{ number_format($stats['active_participants']) }}</h4>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-success">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Pesan Hari Ini</p>
                    <h4 class="my-1 text-success">{{ number_format($stats['messages_today']) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
            <div>
                <h6 class="mb-1 text-uppercase">Daftar Blokir Obrolan</h6>
                <p class="mb-0 text-secondary">Halaman ini khusus memuat akun anggota yang sedang diblokir dari akses obrolan.</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('admin.obrolan') }}" class="btn btn-outline-secondary btn-sm">
                    <i class='bx bx-conversation me-1'></i> Daftar Obrolan
                </a>
                <a href="{{ route('admin.anggota') }}" class="btn btn-outline-primary btn-sm">
                    <i class='bx bx-user me-1'></i> Daftar Anggota
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Anggota</th>
                            <th>Identitas</th>
                            <th>Role</th>
                            <th>Riwayat Obrolan</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($blockedUsers as $user)
                            <tr data-blocked-row data-user-id="{{ $user->id }}">
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $user->anggota?->nama ?: $user->name }}</div>
                                    <small class="text-secondary">{{ $user->email }}</small>
                                </td>
                                <td>
                                    <div>{{ $user->username ?: '-' }}</div>
                                    <small class="text-secondary">{{ $user->email }}</small>
                                </td>
                                <td>
                                    @forelse ($user->roles as $role)
                                        <span class="badge bg-light text-dark border me-1">{{ $role->name }}</span>
                                    @empty
                                        <span class="text-secondary">-</span>
                                    @endforelse
                                </td>
                                <td>{{ number_format($user->conversations_count) }} thread</td>
                                <td class="text-end">
                                    <button type="button"
                                        class="btn btn-outline-success btn-sm"
                                        data-status-url="{{ route('admin.obrolan.user_status', $user) }}"
                                        data-user-name="{{ $user->name }}"
                                        data-user-action="aktifkan">
                                        <i class='bx bx-check-circle me-1'></i> Aktifkan
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-secondary">
                                    Belum ada akun anggota yang diblokir.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

            const showAlert = (config) => {
                if (window.Swal) {
                    return Swal.fire(config);
                }

                window.alert(config.text || config.title || 'Terjadi sesuatu.');
                return Promise.resolve({ isConfirmed: true });
            };

            document.addEventListener('click', async (event) => {
                const button = event.target.closest('[data-status-url]');
                if (!button) {
                    return;
                }

                const confirmation = await showAlert({
                    icon: 'question',
                    title: 'Aktifkan kembali akun ini?',
                    text: `Akun ${button.dataset.userName || 'anggota'} akan bisa memakai obrolan lagi.`,
                    showCancelButton: true,
                    confirmButtonText: 'Ya, aktifkan',
                    cancelButtonText: 'Batal',
                });

                if (!confirmation.isConfirmed) {
                    return;
                }

                button.disabled = true;

                try {
                    const response = await fetch(button.dataset.statusUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Status akun gagal diperbarui.');
                    }

                    button.closest('[data-blocked-row]')?.remove();
                    showAlert({
                        icon: 'success',
                        title: 'Akun diaktifkan',
                        text: payload.message,
                        timer: 1600,
                        showConfirmButton: false,
                    });
                } catch (error) {
                    showAlert({
                        icon: 'error',
                        title: 'Gagal mengaktifkan akun',
                        text: error.message || 'Terjadi kendala saat mengubah status akun.',
                    });
                } finally {
                    button.disabled = false;
                }
            });
        });
    </script>
@endsection