@extends('layouts.admin.master')

@section('content')
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-5">
        <div class="col">
            <div class="card radius-10 border-start border-4 border-primary">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Total Obrolan</p>
                    <h4 class="my-1 text-primary">{{ number_format($stats['total_conversations']) }}</h4>
                </div>
            </div>
        </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">Total Pesan</p>
                    <h4 class="my-1 text-success">{{ number_format($stats['total_messages']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-warning">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Pesan Hari Ini</p>
                    <h4 class="my-1 text-warning">{{ number_format($stats['messages_today']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-info">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Peserta Aktif</p>
                    <h4 class="my-1 text-info">{{ number_format($stats['active_participants']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <a href="{{ route('admin.obrolan.blocked') }}">
                <div class="card radius-10 border-start border-4 border-danger">
                    <div class="card-body">
                        <p class="mb-0 text-secondary">Daftar Blokir</p>
                        <h4 class="my-1 text-danger">{{ number_format($stats['blocked_members']) }}</h4>
                    </div>
                </div>
            </a>
        </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 Obrolan</h6>
                <p class="mb-0 text-secondary">Halaman ini khusus memuat tabel semua percakapan. Balas thread dilakukan dari halaman detail masing-masing obrolan.</p>
            </div>
            <div class="admin-obrolan-inline-links">
                <a href="{{ route('admin.obrolan.blocked') }}" class="btn btn-outline-danger btn-sm">
                    <i class='bx bx-block me-1'></i> Daftar Blokir
                </a>
                <a href="{{ route('admin.anggota') }}" class="btn btn-outline-secondary btn-sm">
                    <i class='bx bx-user me-1'></i> Kelola 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>Obrolan</th>
                            <th>Peserta</th>
                            <th>Pesan Terbaru</th>
                            <th>Aktivitas</th>
                            <th>Jumlah Pesan</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($conversations as $conversation)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $conversation->title }}</div>
                                    <small class="text-secondary text-uppercase">{{ $conversation->type }}</small>
                                </td>
                                <td>{{ $conversation->participant_line }}</td>
                                <td>{{ $conversation->latest_body }}</td>
                                <td>
                                    <div>{{ $conversation->latest_at_human }}</div>
                                    <small class="text-secondary">{{ $conversation->latest_at }}</small>
                                </td>
                                <td>{{ number_format($conversation->messages_count) }}</td>
                                <td class="text-end">
                                    <a href="{{ route('admin.obrolan.show', $conversation->id) }}" class="btn btn-primary btn-sm">
                                        <i class='bx bx-message-square-dots me-1'></i> Buka Thread
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-secondary">
                                    Belum ada percakapan yang masuk ke sistem.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .admin-obrolan-inline-links {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
    </style>
@endsection