@extends('layouts.admin.master')

@section('content')
    @if (session('success'))
        <div class="alert alert-success border-0 bg-success-subtle text-success-emphasis">
            {{ session('success') }}
        </div>
    @endif

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3">
        <div class="col">
            <div class="card radius-10 border-start border-4 border-primary">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Total Grup</p>
                    <h4 class="my-1 text-primary">{{ number_format($stats['total_groups']) }}</h4>
                    <small class="text-secondary">Seluruh grup percakapan yang sudah dibuat.</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-success">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Grup Aktif 7 Hari</p>
                    <h4 class="my-1 text-success">{{ number_format($stats['active_groups']) }}</h4>
                    <small class="text-secondary">Diukur dari pembuatan atau pesan terakhir.</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-info">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Anggota Tergabung</p>
                    <h4 class="my-1 text-info">{{ number_format($stats['group_members']) }}</h4>
                    <small class="text-secondary">Jumlah user unik yang tergabung di grup.</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-warning">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Pesan Dalam Grup</p>
                    <h4 class="my-1 text-warning">{{ number_format($stats['group_messages']) }}</h4>
                    <small class="text-secondary">Total histori pesan untuk seluruh grup.</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-12 col-xl-5">
            <div class="card group-admin-card h-100">
                <div class="card-body">
                    <div class="group-admin-heading">
                        <span>Bangun Grup Baru</span>
                        <h5>Kelola komunitas percakapan anggota</h5>
                        <p>
                            Buat grup obrolan baru untuk tim, divisi, komunitas, atau kebutuhan operator.
                            Setelah dibuat, grup bisa dibuka untuk mengelola anggota dan membaca riwayat pesannya.
                        </p>
                    </div>

                    <form action="{{ route('admin.grup_anggota.store') }}" method="POST" class="group-admin-form">
                        @csrf
                        <div>
                            <label for="name" class="form-label">Nama Grup</label>
                            <input type="text" id="name" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name') }}"
                                placeholder="Contoh: Grup Panitia Tomchat">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label for="participant_ids" class="form-label">Pilih Anggota Awal</label>
                            <select id="participant_ids" name="participant_ids[]"
                                class="form-select @error('participant_ids') is-invalid @enderror"
                                multiple size="10">
                                @foreach ($availableMembers as $member)
                                    <option value="{{ $member->id }}"
                                        @selected(collect(old('participant_ids', []))->contains($member->id))>
                                        {{ $member->anggota?->nama ?: $member->name }}
                                        | {{ $member->username ?: $member->email }}
                                    </option>
                                @endforeach
                            </select>
                            @error('participant_ids')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            @error('participant_ids.*')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Gunakan `Ctrl` atau `Shift` saat memilih banyak anggota. Akun admin pembuat grup otomatis ikut masuk sebagai operator grup.
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class='bx bx-plus-circle me-1'></i> Buat Grup Anggota
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-7">
            <div class="card group-admin-card h-100">
                <div class="card-body">
                    <div class="group-admin-heading">
                        <span>Daftar Grup</span>
                        <h5>Semua grup anggota yang aktif di Tomchat</h5>
                        <p>
                            Gunakan daftar ini untuk membuka detail grup, melihat jumlah anggota, membaca aktivitas terakhir,
                            dan lanjut mengatur komposisi anggota grup dari halaman detail.
                        </p>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Grup</th>
                                    <th>Anggota</th>
                                    <th>Pesan</th>
                                    <th>Aktivitas</th>
                                    <th class="text-end">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($groups as $group)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="fw-semibold">{{ $group->name ?: 'Grup tanpa nama' }}</div>
                                            <small class="text-secondary">
                                                Dibuat oleh {{ $group->creator?->name ?: 'Sistem' }}
                                            </small>
                                        </td>
                                        <td>
                                            <div>{{ number_format($group->participants_count) }} anggota</div>
                                            <small class="text-secondary">
                                                {{ $group->participants->pluck('name')->take(3)->implode(', ') }}
                                                @if ($group->participants->count() > 3)
                                                    +{{ $group->participants->count() - 3 }}
                                                @endif
                                            </small>
                                        </td>
                                        <td>
                                            <div>{{ number_format($group->messages_count) }} pesan</div>
                                            <small class="text-secondary">
                                                {{ \Illuminate\Support\Str::limit($group->latestMessage?->body ?? 'Belum ada pesan.', 42) }}
                                            </small>
                                        </td>
                                        <td>
                                            {{ ($group->last_message_at ?? $group->created_at)?->diffForHumans() }}
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('admin.grup_anggota.show', $group) }}" class="btn btn-outline-primary btn-sm">
                                                <i class='bx bx-network-chart me-1'></i> Kelola Grup
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-secondary">
                                            Belum ada grup anggota yang dibuat.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .group-admin-card {
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        }

        .group-admin-heading span {
            display: inline-block;
            color: #2563eb;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.45rem;
        }

        .group-admin-heading h5 {
            color: #0f172a;
            font-weight: 700;
            margin-bottom: 0.45rem;
        }

        .group-admin-heading p {
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.7;
            margin-bottom: 1.1rem;
        }

        .group-admin-form {
            display: grid;
            gap: 1rem;
        }
    </style>
@endsection