@extends('layouts.app')
@section('title', 'Data Anggota')

@section('content')

<a href="{{ url('admin/anggota/create') }}" class="btn btn-success mb-3"><i class="bi bi-plus-lg"></i> Tambah Anggota</a>

<div class="card shadow border-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover data-table">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Anggota</th>
                        <th>Email</th>
                        <th>No. HP</th>
                        <th>Tgl. Terdaftar</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($anggota as $key => $a)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($a->foto)
                                    <img src="{{ asset($a->foto) }}" width="40" height="40" class="rounded-circle" style="object-fit:cover">
                                @else
                                    @php
                                        $initials = strtoupper(substr($a->nama, 0, 1));
                                        $colors = ['#4F46E5','#7C3AED','#EC4899','#EF4444','#F59E0B','#10B981','#06B6D4','#8B5CF6','#F97316','#14B8A6'];
                                        $color = $colors[crc32($a->nama) % count($colors)];
                                    @endphp
                                    <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold"
                                         style="width:40px;height:40px;background:{{ $color }};font-size:16px;">
                                        {{ $initials }}
                                    </div>
                                @endif

                                <div>
                                    <div class="fw-semibold">{{ $a->no_anggota }}</div>
                                    <div>{{ $a->nama }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle">
                                {{ $a->email }}
                            </span>
                        </td>
                        <td>{{ $a->no_hp ?? '-' }}</td>
                        <td>{{ $a->tanggal_terdaftar ? $a->tanggal_terdaftar->format('d/m/Y') : '-' }}</td>
                        <td>
                            @if($a->status == 'aktif')
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-danger">Nonaktif</span>
                            @endif
                        </td>
                        <td>
                            <a href="{{ url('admin/anggota/'.$a->id) }}" class="btn btn-info btn-sm" title="Detail"><i class="bi bi-eye"></i></a>
                            <a href="{{ url('admin/anggota/'.$a->id.'/edit') }}" class="btn btn-warning btn-sm" title="Edit"><i class="bi bi-pencil"></i></a>
                            <form method="POST" action="{{ url('admin/anggota/'.$a->id) }}" class="d-inline" onsubmit="return confirm('Hapus anggota {{ $a->nama }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" title="Hapus"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection