@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto p-4">

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">📢 Senarai Notis Mesyuarat Ahli</h1>
            <p class="text-gray-500 text-sm">Rekod dan pantau semua notis Mesyuarat Ahli Lembaga Koperasi.</p>
        </div>
        <a href="{{ route('notis-ahli.create') }}"
           class="bg-indigo-200 text-indigo-700 px-5 py-2 rounded-md font-semibold hover:bg-indigo-300 transition">
           ➕ Tambah Notis
        </a>
    </div>

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

        <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'))
            <a href="{{ route('notis-ahli.index') }}" class="text-gray-500 hover:underline text-sm">Reset</a>
        @endif
    </form>

    <!-- Table -->
    <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">Bil. Mesyuarat</th>
                    <th class="px-4 py-3">Tahun</th>
                    <th class="px-4 py-3">Tarikh Mesyuarat</th>
                    <th class="px-4 py-3">Tempat</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">{{ $loop->iteration }}</td>

                        <td class="px-4 py-2">{{ $item->bilangan_mesyuarat ?? '-' }}</td>

                        <td class="px-4 py-2">{{ $item->tahun_mesyuarat ?? '-' }}</td>

                        <td class="px-4 py-2">
                            {{ \Carbon\Carbon::parse($item->mesyuarat_tarikh)->format('d/m/Y') }}
                        </td>

                        <td class="px-4 py-2">{{ $item->mesyuarat_tempat }}</td>

                        <td class="px-4 py-2 text-center">
                            <div class="flex items-center justify-center space-x-2">
                                <!-- Edit -->
                                <a href="{{ route('notis-ahli.edit', $item->id) }}"
                                   class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full hover:bg-yellow-200 transition text-xs">
                                    Edit
                                </a>

                                <!-- Delete -->
                                <form action="{{ route('notis-ahli.destroy', $item->id) }}" method="POST"
                                      onsubmit="return confirm('Padam notis ini?')">
                                    @csrf @method('DELETE')
                                    <button type="submit"
                                            class="px-3 py-1 bg-red-100 text-red-600 rounded-full hover:bg-red-200 text-xs transition">
                                        Padam
                                    </button>
                                </form>

                                <!-- PDF -->
                                <a href="{{ route('notis-ahli.pdf', $item->id) }}" target="_blank"
                                   class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 text-xs transition">
                                    PDF
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-6 text-gray-400">
                            Tiada notis direkodkan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-6">{{ $list->links() }}</div>

    <!-- Back -->
    <div class="flex items-center justify-end space-x-3">
        <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>
    </div>  
</div>
@endsection