@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto p-4">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 mb-1">👔 Senarai Anggota Lembaga Koperasi</h1>
            <p class="text-gray-500 text-sm">Maklumat terkini pelantikan ALK bagi koperasi anda.</p>
        </div>
    
        <div class="flex space-x-3 justify-end mb-4">
            <a href="{{ route('jawatan.index') }}"
                class="px-4 py-2 bg-indigo-100 text-indigo-600 rounded-lg hover:bg-indigo-200 transition active:scale-95 shadow-sm">
                ⚙️ Senarai Jawatan
            </a>
            <a href="{{ route('anggota_jawatan.create') }}"
                class="bg-indigo-200 text-indigo-700 px-4 py-2 rounded-md font-semibold hover:bg-indigo-300 transition">
                ➕ Tambah Pelantikan
            </a>
        </div>
    </div>

     <!-- Flash Messages -->
    @if (session('success'))
        <div class="mb-4 rounded-lg border border-green-300 bg-green-50 px-4 py-3 text-green-800">
            <div class="flex items-center gap-2">
                <span>✅</span>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="mb-4 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-800">
            <div class="flex items-center gap-2">
                <span>⚠️</span>
                <span class="font-medium">{{ session('error') }}</span>
            </div>
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-800">
            <ul class="list-disc list-inside space-y-1 text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- 🔍 Search + Filter -->
    <form method="GET" class="mb-4 flex flex-wrap items-center gap-4 mb-4">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="Cari nama, IC, atau jawatan..."
               class="border border-gray-300 rounded-lg px-4 py-2 flex-1 focus:ring-2 focus:ring-indigo-400 outline-none">

        <select name="status" class="border border-gray-300 rounded-lg px7 py-2 text-gray-600 focus:ring-0">
            <option value="Semua" {{ request('status') == 'Semua' ? 'selected' : '' }}>Semua Status</option>
            <option value="Aktif" {{ request('status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
            <option value="Tidak Aktif" {{ request('status') == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
        </select>

        <button type="submit" class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition">Cari</button>

        @if(request('search') || request('status'))
            <a href="{{ route('anggota_jawatan.index') }}" class="text-gray-500 hover:underline text-sm">Reset</a>
        @endif
    </form>
    
    <div class="bg-white shadow-md rounded-lg border border-gray-100 overflow-hidden mb-4">
        <div class="overflow-x-auto w-full">
        <table class="w-full text-sm text-left text-gray-600">
            <thead class="bg-gray-50 border-b border-gray-200 text-gray-700 font-semibold">
                <tr>
                    <th class="px-4 py-3">Bil</th>
                    <th class="px-4 py-3">Nama Penuh</th>
                    <th class="px-4 py-3">No. IC</th>
                    <th class="px-4 py-3">Jawatan</th>
                    <th class="px-4 py-3">Tarikh Lantikan</th>
                    <th class="px-4 py-3">Tarikh Tamat</th>
                    <th class="px-4 py-3">Batch</th>
                    <th class="px-4 py-3 text-center">Status</th>
                    <th class="px-4 py-3 text-center">Tindakan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($list as $item)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2 text-gray-800">{{ $list->firstItem() + $loop->index }}</td>
                        <td class="px-4 py-2">{{ $item->anggota->nama ?? '-' }}</td>
                        <td class="px-4 py-2 whitespace-nowrap">{{ $item->anggota->ic ?? '-' }}</td>
                        <td class="px-4 py-2">{{ $item->jawatan->nama ?? '-' }}</td>
                        <td class="px-4 py-2">{{ \Carbon\Carbon::parse($item->tarikh_lantikan)->format('d/m/Y') }}</td>
                        <td class="px-4 py-2">{{ $item->tarikh_tamat ? \Carbon\Carbon::parse($item->tarikh_tamat)->format('d/m/Y') : '-' }}</td>
                        <td class="px-4 py-2 whitespace-nowrap">{{ $item->batch ?? '-' }}</td>
                        <td class="px-4 py-2 text-center align-middle">
                            <span class="px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap 
                                {{ $item->status == 'Aktif' ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600' }}">
                                {{ $item->status }}
                            </span>
                        </td>
                        <td class="px-4 py-2 text-center">
                            <div class="flex items-center justify-center space-x-2">
                                <a href="{{ route('anggota_jawatan.edit', $item->id) }}"
                                   class="px-3 py-1.5 bg-yellow-100 text-xs text-yellow-700 rounded-full hover:bg-yellow-200 transition"> Edit</a>
                                <form action="{{ route('anggota_jawatan.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Padam pelantikan ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="px-3 py-1.5 bg-red-100 text-xs text-red-600 rounded-full hover:bg-red-200 transition">
                                         Padam
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-6 text-gray-400">Tiada pelantikan ALK direkodkan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>
    <div class="flex justify-between items-center space-x-3 mt-4">
        <a href="{{ route('dashboard') }}" class="px-6 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300 transition font-semibold">← Kembali</a>

        <a href="{{ route('anggota_jawatan.export.pdf') }}" target="_blank"
            class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-all flex items-center gap-2 font-semibold">
                🧾 Export PDF
        </a>
    </div>  
</div>
@endsection