@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-white py-4 px-4">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-4">
            <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 rounded-t-xl shadow-lg px-5 py-2">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-users mr-2"></i>
                        Manajemen Keanggotaan
                    </h2>
                    <div class="flex items-center gap-3">
                        <form method="GET" action="{{ route('keanggotaan.index') }}" class="flex items-center gap-2">
                            <select name="status" class="px-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 text-sm" onchange="this.form.submit()">
                                <option value="">Semua Status</option>
                                <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                            <input type="text" 
                                   name="search"
                                   value="{{ request('search') }}"
                                   class="pl-9 pr-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 placeholder-gray-500 text-sm"
                                   placeholder="Cari anggota...">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300"></i>
                            <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg transition-all">
                                <i class="fas fa-search"></i>
                            </button>
                        </form>
                        <a href="{{ route('keanggotaan.create') }}" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg transition-all flex items-center">
                            <i class="fas fa-plus mr-2 text-sm"></i>
                            Tambah Keanggotaan
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                    <button type="button" class="text-green-500 hover:text-green-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-red-800 font-medium">{{ session('error') }}</p>
                    </div>
                    <button type="button" class="text-red-500 hover:text-red-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-4 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm font-medium">Total Anggota</p>
                        <p class="text-2xl font-bold mt-1">{{ $stats['total'] ?? 0 }}</p>
                    </div>
                    <i class="fas fa-users text-3xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-4 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-green-100 text-sm font-medium">Aktif</p>
                        <p class="text-2xl font-bold mt-1">{{ $stats['aktif'] ?? 0 }}</p>
                    </div>
                    <i class="fas fa-check-circle text-3xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl shadow-lg p-4 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-yellow-100 text-sm font-medium">Pending</p>
                        <p class="text-2xl font-bold mt-1">{{ $stats['pending'] ?? 0 }}</p>
                    </div>
                    <i class="fas fa-clock text-3xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-4 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-red-100 text-sm font-medium">Nonaktif</p>
                        <p class="text-2xl font-bold mt-1">{{ $stats['nonaktif'] ?? 0 }}</p>
                    </div>
                    <i class="fas fa-times-circle text-3xl opacity-50"></i>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Anggota</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nomor Anggota</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal Bergabung</th>
                            <th class="px-6 py-2 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse ($keanggotaan as $index => $item)
                            <tr class="hover:bg-indigo-50 transition-colors duration-150">
                                <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ $keanggotaan->firstItem() + $index }}
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-xs font-semibold">
                                            {{ substr($item->user->name ?? 'A', 0, 1) }}
                                        </div>
                                        <div class="ml-2">
                                            <div class="text-sm font-medium text-gray-900">{{ $item->user->name ?? 'N/A' }}</div>
                                            <div class="text-xs text-gray-500">{{ $item->user->email ?? 'N/A' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">
                                        {{ $item->nomor_anggota ?? '-' }}
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    @php
                                        $statusColors = [
                                            'aktif' => 'bg-green-100 text-green-800',
                                            'pending' => 'bg-yellow-100 text-yellow-800',
                                            'nonaktif' => 'bg-red-100 text-red-800',
                                            'ditolak' => 'bg-gray-100 text-gray-800',
                                        ];
                                        $statusColor = $statusColors[$item->status] ?? 'bg-gray-100 text-gray-800';
                                    @endphp
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusColor }}">
                                        {{ ucfirst($item->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar-alt mr-1.5 text-gray-400 text-xs"></i>
                                        {{ $item->tanggal_bergabung ? $item->tanggal_bergabung->format('d M Y') : '-' }}
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap text-center">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <a href="{{ route('keanggotaan.show', $item) }}" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-100 hover:bg-blue-200 text-blue-600 transition-all duration-200 hover:scale-110"
                                           title="Detail">
                                            <i class="fas fa-eye text-xs"></i>
                                        </a>
                                        <a href="{{ route('keanggotaan.edit', $item) }}" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-100 hover:bg-yellow-200 text-yellow-600 transition-all duration-200 hover:scale-110"
                                           title="Edit">
                                            <i class="fas fa-edit text-xs"></i>
                                        </a>
                                        @if(auth()->user()->isAdmin())
                                            <form action="{{ route('keanggotaan.destroy', $item) }}" 
                                                  method="POST" 
                                                  class="inline"
                                                  onsubmit="return confirm('Apakah Anda yakin ingin menghapus keanggotaan ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110"
                                                        title="Hapus">
                                                    <i class="fas fa-trash text-xs"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <div class="bg-gray-100 rounded-full p-6 mb-4">
                                            <i class="fas fa-users text-4xl text-gray-400"></i>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada keanggotaan</h3>
                                        <p class="text-gray-600 mb-4">Belum ada keanggotaan yang ditambahkan</p>
                                        <a href="{{ route('keanggotaan.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all">
                                            <i class="fas fa-plus mr-2"></i>
                                            Tambah Keanggotaan Pertama
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($keanggotaan->count() > 0)
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div class="text-sm text-gray-600">
                            Menampilkan <span class="font-semibold text-gray-900">{{ $keanggotaan->firstItem() }}</span> sampai 
                            <span class="font-semibold text-gray-900">{{ $keanggotaan->lastItem() }}</span> dari 
                            <span class="font-semibold text-gray-900">{{ $keanggotaan->total() }}</span> data
                        </div>
                        <div class="flex items-center">
                            {{ $keanggotaan->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .pagination {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .pagination > li > a,
    .pagination > li > span {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
        color: #6b7280;
        transition: all 0.2s;
    }
    
    .pagination > li > a:hover {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        color: #374151;
    }
    
    .pagination > .active > span,
    .pagination > .active > a {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }
    
    .pagination > .disabled > span,
    .pagination > .disabled > a {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
@endpush