@extends('layouts.app')

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

    {{-- PAGE HEADER --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">
            📌 Usul Mesyuarat Agung (MAT)
        </h1>
        <p class="text-gray-500">
            Notis MAT: {{ $notis->tajuk ?? 'Mesyuarat Agung' }}
        </p>
    </div>

    {{-- FLASH MESSAGE --}}
    @if(session('success'))
        <div class="mb-4 bg-green-50 text-green-700 border border-green-200 rounded p-3">
            {{ session('success') }}
        </div>
    @endif

    {{-- =========================
        TAMBAH USUL BARU
    ========================== --}}
    <div class="bg-white border rounded-lg p-6 mb-8">
        <h2 class="font-semibold mb-4 text-gray-700">
            ➕ Tambah Usul / Cadangan
        </h2>

        <form method="POST" action="{{ route('usul-mat.store', $notis->id) }}">
            @csrf

            {{-- Anggota --}}
            <div>
                <label class="block text-sm font-medium mb-1">
                    Nama Anggota
                </label>
                <select name="anggota_id"
                        class="border rounded px-3 py-2 w-full text-sm"
                        required>
                    <option value="">-- Pilih Anggota --</option>
                    @foreach($anggotas as $a)
                        <option value="{{ $a->id }}">
                            {{ $a->nama }}
                        </option>
                    @endforeach
                </select>
                @error('anggota_id')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid sm:grid-cols-2 gap-4 mt-3">

                {{-- Cadangan --}}
                <div>
                    <label class="block text-sm font-medium mb-1">
                        Usul / Cadangan
                    </label>
                    <textarea name="cadangan"
                              rows="3"
                              class="border rounded px-3 py-2 w-full text-sm"
                              required>{{ old('cadangan') }}</textarea>
                    @error('cadangan')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Ulasan --}}
                <div>
                    <label class="block text-sm font-medium mb-1">
                        Ulasan ALK
                    </label>
                    <textarea name="ulasan_alk"
                              rows="3"
                              class="border rounded px-3 py-2 w-full text-sm"
                              required>{{ old('cadangan') }}</textarea>
                    @error('cadangan')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-4">
                <button type="submit"
                        class="bg-indigo-600 text-white px-4 py-2 rounded text-sm hover:bg-indigo-700">
                    Simpan Usul
                </button>
            </div>
        </form>
    </div>

    {{-- =========================
        SENARAI USUL
    ========================== --}}
    <div class="bg-white border rounded-lg p-6">
        <h2 class="font-semibold mb-4 text-gray-700">
            📋 Senarai Usul Diterima
        </h2>

        @if($usuls->isEmpty())
            <p class="text-gray-500 text-sm">
                Tiada usul direkodkan buat masa ini.
            </p>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm border">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="border px-3 py-2 text-left">Anggota</th>
                            <th class="border px-3 py-2 text-left">Usul / Cadangan</th>
                            <th class="border px-3 py-2 text-left">Ulasan ALK</th>
                            <th class="border px-3 py-2 w-24 text-center">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($usuls as $u)
                        <tr>
                            <td class="border px-3 py-2">
                                {{ $u->anggota->nama }}
                            </td>

                            <td class="border px-3 py-2">
                                {{ $u->cadangan }}
                            </td>

                            <td class="border px-3 py-2">
                                {{ $u->ulasan_alk }}
                            </td>

                            <td class="border px-3 py-2 text-center">
                                <form method="POST"
                                      action="{{ route('usul-mat.destroy', $u->id) }}"
                                      onsubmit="return confirm('Padam usul ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="text-red-500 hover:text-red-700 text-sm">
                                        🗑️ Padam
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <div class="flex items-center justify-end space-x-3 mt-6">
        <a href="{{ route('notis.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