@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 mb-1">📜 Senarai Minit Mesyuarat Agung</h1>
            <p class="text-gray-500 text-sm">Lihat, kemaskini, atau muat turun minit mesyuarat koperasi anda.</p>
        </div>
        <a href="{{ route('minit.choose') }}" 
           class="bg-indigo-200 text-indigo-700 px-5 py-2 rounded-md font-semibold hover:bg-indigo-300 transition">
            ➕ Tambah Minit Baru
        </a>
    </div>

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

    <div class="bg-white shadow border border-gray-200 rounded-lg overflow-hidden mt-6 mb-6">
        <div class="overflow-x-auto w-full">
        <table class="min-w-full text-sm text-left text-gray-700">
            <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                <tr>
                    <th class="px-4 py-3">No.</th>
                    <th class="px-4 py-3">Tarikh</th>
                    <th class="px-4 py-3">Tempat</th>
                    <th class="px-4 py-3 text-center">Jumlah Hadir</th>
                    <th class="px-4 py-3 text-center">Tindakan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($list as $index => $m)
                    <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($m->tarikh)->format('d/m/Y') }}</td>
                        <td class="px-4 py-2">{{ $m->tempat }}</td>
                        <td class="px-4 py-2 text-center">{{ $m->jumlah_hadir ?? '-' }}</td>
                        <td class="px-4 py-2 text-center whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('minit.edit', $m->id) }}"
                                class="bg-yellow-100 hover:bg-yellow-200 text-yellow-700 px-3 py-1 rounded-full text-xs font-medium">
                                    Edit
                                </a>

                                <a href="{{ route('minit.pdf', $m->id) }}"
                                target="_blank"
                                class="bg-blue-100 hover:bg-blue-200 text-blue-600 px-3 py-1 rounded-full text-xs font-medium">
                                    📄 Lihat PDF
                                </a>

                                <form action="{{ route('minit.destroy', $m->id) }}"
                                    method="POST"
                                    onsubmit="return confirm('Padam rekod minit ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-full text-xs font-medium">
                                        Padam
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-6 text-gray-400">
                            Tiada minit direkodkan buat masa ini.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>

    <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