@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-6 py-10">

    <h1 class="text-2xl font-bold text-gray-800 mb-2">📌 Pilih Notis Mesyuarat ALK</h1>
    <p class="text-gray-500 mb-6">
        Sila pilih notis mesyuarat yang ingin digunakan untuk menjana Minit Mesyuarat ALK.
    </p>

    @if(session('success'))
        <div class="bg-green-100 border border-green-200 text-green-700 px-4 py-2 rounded mb-6">
            {{ session('success') }}
        </div>
    @endif

    <!-- If no available Notis -->
    @if($notisList->count() === 0)
        <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-4 rounded mb-6">
            Tiada notis mesyuarat yang tersedia.  
            <a href="{{ route('notis-alk.create') }}" class="font-semibold text-yellow-800 underline">
                Tambah Notis ALK Baharu
            </a>
        </div>
    @endif

    <div class="bg-white shadow border border-gray-200 rounded-lg overflow-hidden mb-6">
        <table class="min-w-full text-sm text-left text-gray-700">
            <thead class="bg-gray-100 uppercase text-xs text-gray-700">
                <tr>
                    <th class="px-4 py-3">No.</th>
                    <th class="px-4 py-3">Tarikh Mesyuarat</th>
                    <th class="px-4 py-3">Tempat</th>
                    <th class="px-4 py-3">Bil/Tahun</th>
                    <th class="px-4 py-3 text-center">Tindakan</th>
                </tr>
            </thead>

            <tbody>
                @forelse($notisList as $index => $n)
                    <tr class="border-b hover:bg-gray-50 transition">
                        <td class="px-4 py-2">{{ $index + 1 }}</td>

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

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

                        <td class="px-4 py-2">
                            Mesyuarat Bil {{ $n->bilangan_mesyuarat }}/{{ $n->tahun_mesyuarat }}
                        </td>

                        <td class="px-4 py-2 text-center">
                            <a href="{{ route('minit-alk.create', $n->id) }}"
                               class="px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs rounded-lg transition">
                               Pilih
                           </a>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="5" class="text-center py-6 text-gray-400">
                            Tiada Notis Mesyuarat ALK dijumpai.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="flex items-center justify-end space-x-3 mb-6">
        <a href="{{ route('minit-alk.index') }}"
           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