@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 g-3">
        <div class="col-12 col-xl-8">
            <div class="card group-detail-card">
                <div class="card-body">
                    <div class="group-detail-header">
                        <div>
                            <span class="group-detail-eyebrow">Detail Grup</span>
                            <h4>{{ $conversation->name ?: 'Grup tanpa nama' }}</h4>
                            <p>
                                Dibuat oleh {{ $conversation->creator?->name ?: 'Sistem' }}.
                                Grup ini berisi {{ number_format($conversation->participants->count()) }} anggota
                                dan menampilkan {{ number_format($messages->count()) }} pesan terakhir.
                            </p>
                        </div>
                        <div class="group-detail-actions">
                            <a href="{{ route('admin.grup_anggota') }}" class="btn btn-outline-secondary btn-sm">
                                <i class='bx bx-arrow-back me-1'></i> Kembali
                            </a>
                        </div>
                    </div>

                    <form action="{{ route('admin.grup_anggota.update', $conversation) }}" method="POST" class="group-rename-form">
                        @csrf
                        <div class="row g-2 align-items-end">
                            <div class="col-12 col-lg-9">
                                <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', $conversation->name) }}">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 col-lg-3">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class='bx bx-save me-1'></i> Simpan Nama
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="group-message-stream mt-4">
                        @forelse ($messages as $message)
                            <article class="group-message-item">
                                <img src="{{ $message->user?->avatarUrl() ?: \App\Models\User::avatarFallbackUrl() }}"
                                    alt="{{ $message->user?->name ?? 'Anggota' }}">
                                <div class="group-message-copy">
                                    <div class="group-message-meta">
                                        <strong>{{ $message->user?->name ?? 'Anggota' }}</strong>
                                        <span>{{ $message->created_at?->format('d M Y, H:i') }}</span>
                                    </div>
                                    <p>{{ $message->body }}</p>
                                </div>
                            </article>
                        @empty
                            <div class="group-empty-state">
                                Belum ada pesan di grup ini. Setelah anggota mulai bercakap, riwayat obrolan akan muncul di sini.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="card group-detail-card mb-3">
                <div class="card-body">
                    <div class="group-detail-side-heading">
                        <span>Tambah Anggota</span>
                        <h6>Masukkan anggota baru ke grup</h6>
                    </div>

                    <form action="{{ route('admin.grup_anggota.member.add', $conversation) }}" method="POST" class="d-grid gap-3">
                        @csrf
                        <div>
                            <label for="participant_ids" class="form-label">Anggota tersedia</label>
                            <select id="participant_ids" name="participant_ids[]"
                                class="form-select @error('participant_ids') is-invalid @enderror"
                                multiple size="9">
                                @foreach ($availableMembers as $member)
                                    <option value="{{ $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>

                        <button type="submit" class="btn btn-outline-primary">
                            <i class='bx bx-user-plus me-1'></i> Tambahkan ke Grup
                        </button>
                    </form>
                </div>
            </div>

            <div class="card group-detail-card mb-3">
                <div class="card-body">
                    <div class="group-detail-side-heading">
                        <span>Anggota Grup</span>
                        <h6>Komposisi peserta aktif</h6>
                    </div>

                    <div class="group-member-list">
                        @foreach ($conversation->participants as $participant)
                            <div class="group-member-item">
                                <img src="{{ $participant->avatarUrl() }}" alt="{{ $participant->name }}">
                                <div class="group-member-copy">
                                    <strong>{{ $participant->anggota?->nama ?: $participant->name }}</strong>
                                    <span>{{ $participant->username ?: $participant->email }}</span>
                                    <small>
                                        {{ $participant->anggota?->nama ?: 'Belum terhubung ke data anggota' }}
                                    </small>
                                </div>
                                @if ((int) $participant->id !== (int) $conversation->created_by)
                                    <form action="{{ route('admin.grup_anggota.member.remove', [$conversation, $participant]) }}" method="POST"
                                        onsubmit="return confirm('Keluarkan anggota ini dari grup?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm">
                                            <i class='bx bx-user-x'></i>
                                        </button>
                                    </form>
                                @else
                                    <span class="badge bg-light text-dark border">Pembuat</span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card group-detail-card border-danger-subtle">
                <div class="card-body">
                    <div class="group-detail-side-heading">
                        <span class="text-danger">Zona Hapus</span>
                        <h6>Hapus grup dari sistem</h6>
                    </div>

                    <p class="text-secondary small mb-3">
                        Menghapus grup akan menghapus hubungan anggota dan seluruh riwayat pesan di grup ini.
                    </p>

                    <form action="{{ route('admin.grup_anggota.delete', $conversation) }}" method="POST"
                        onsubmit="return confirm('Hapus grup ini beserta riwayat pesannya?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger w-100">
                            <i class='bx bx-trash me-1'></i> Hapus Grup
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        .group-detail-header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .group-detail-eyebrow,
        .group-detail-side-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-detail-header h4,
        .group-detail-side-heading h6 {
            color: #0f172a;
            font-weight: 700;
            margin-bottom: 0.35rem;
        }

        .group-detail-header p,
        .group-detail-side-heading + p {
            color: #64748b;
            line-height: 1.7;
            margin-bottom: 0;
        }

        .group-rename-form {
            padding: 1rem;
            margin-top: 1rem;
            border-radius: 1rem;
            background: #f8fafc;
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .group-message-stream {
            display: grid;
            gap: 0.9rem;
            max-height: 42rem;
            overflow-y: auto;
            padding-right: 0.15rem;
        }

        .group-message-item {
            display: flex;
            gap: 0.8rem;
            padding: 0.9rem 1rem;
            border-radius: 1rem;
            background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .group-message-item img,
        .group-member-item img {
            width: 2.7rem;
            height: 2.7rem;
            border-radius: 999px;
            object-fit: cover;
            object-position: center;
            flex-shrink: 0;
        }

        .group-message-copy,
        .group-member-copy {
            min-width: 0;
            flex: 1 1 auto;
        }

        .group-message-meta {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: baseline;
            margin-bottom: 0.35rem;
        }

        .group-message-meta strong,
        .group-member-copy strong {
            color: #0f172a;
            font-size: 0.9rem;
        }

        .group-message-meta span,
        .group-member-copy span,
        .group-member-copy small {
            color: #64748b;
            font-size: 0.76rem;
        }

        .group-message-copy p {
            margin: 0;
            color: #334155;
            font-size: 0.86rem;
            line-height: 1.65;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .group-empty-state {
            padding: 1rem;
            border-radius: 1rem;
            background: #f8fafc;
            border: 1px dashed rgba(148, 163, 184, 0.26);
            color: #64748b;
            font-size: 0.84rem;
        }

        .group-member-list {
            display: grid;
            gap: 0.85rem;
        }

        .group-member-item {
            display: flex;
            gap: 0.8rem;
            align-items: center;
            padding: 0.85rem 0.9rem;
            border-radius: 1rem;
            background: #fff;
            border: 1px solid rgba(148, 163, 184, 0.15);
        }

        @media (max-width: 767.98px) {
            .group-message-meta,
            .group-member-item,
            .group-detail-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
@endsection