@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-6 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">➕ Tambah Pelantikan ALK</h1>
    <p class="text-gray-500 mb-6">Daftarkan pelantikan baru untuk Anggota Lembaga Koperasi.</p>

    <form action="{{ route('anggota_jawatan.store') }}" method="POST" class="bg-white border border-gray-200 p-6 rounded-lg shadow-sm space-y-6">
        @csrf

        <div>
            <label class="text-sm font-medium text-gray-600">Nama Anggota</label>
            <select name="anggota_id" class="w-full border rounded px-3 py-2" required>
                <option value="">-- Pilih Anggota --</option>
                @foreach($anggotas as $a)
                    <option value="{{ $a->id }}">{{ $a->nama }} ({{ $a->ic }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="text-sm font-medium text-gray-600">Jawatan</label>
            <select name="jawatan_id" class="w-full border rounded px-3 py-2" required>
                <option value="">-- Pilih Jawatan --</option>
                @foreach($jawatans as $j)
                    <option value="{{ $j->id }}">{{ $j->nama }}</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="text-sm font-medium text-gray-600">Tarikh Lantikan</label>
                <input type="date" name="tarikh_lantikan" class="w-full border rounded px-3 py-2" required>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-600">Tarikh Tamat</label>
                <input type="date" name="tarikh_tamat" class="w-full border rounded px-3 py-2">
            </div>
        </div>

        <div>
            <label class="text-sm font-medium text-gray-600">Tarikh Kursus Wajib</label>
            <input type="date" name="tarikh_kursus_wajib" class="w-full border rounded px-3 py-2">
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="text-sm font-medium text-gray-600">Batch</label>
                <select name="batch" class="w-full border rounded px-3 py-2">
                    <option value="Batch 1">Batch 1</option>
                    <option value="Batch 2">Batch 2</option>
                    <option value="Batch 3">Batch 3</option>
                    <option value="Batch 4">Batch 4</option>
                    <option value="Batch 5">Batch 5</option>
                </select>
            </div>
            <div>
            
                <label class="text-sm font-medium text-gray-600">Status</label>
                <select name="status" class="w-full border rounded px-3 py-2">
                    <option value="Aktif">Aktif</option>
                    <option value="Tidak Aktif">Tidak Aktif</option>
                </select>
            </div>
        </div>

        <div class="flex justify-end space-x-3 border-t pt-4">
            <a href="{{ route('anggota_jawatan.index') }}" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">Kembali</a>
            <button type="submit" class="px-6 py-3 bg-blue-200 text-blue-700 rounded-full hover:bg-blue-300 transition">Simpan</button>
        </div>
    </form>
</div>
@endsection