@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-6 pt-6">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 mb-1">📋 Senarai Jawatan</h1>
            <p class="text-gray-500 text-sm">Senarai jawatan rasmi yang digunakan dalam pelantikan ALK koperasi anda.</p>
        </div>
        <a href="{{ route('jawatan.create') }}"
           class="bg-indigo-200 text-indigo-700 px-5 py-2 rounded-md font-semibold hover:bg-indigo-300 transition">
           ➕ Tambah Jawatan
        </a>
    </div>

    <div class="bg-white shadow-md rounded-lg border border-gray-100 overflow-hidden">
        <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-6 py-3">Nama Jawatan</th>
                    <th class="px-6 py-3">Keterangan</th>
                    <th class="px-6 py-3 text-center">Tindakan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($jawatanList as $jawatan)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-3 font-medium text-gray-800">{{ $jawatan->nama }}</td>
                        <td class="px-6 py-3">{{ $jawatan->keterangan ?? '-' }}</td>
                        <td class="px-6 py-3 text-center">
                            <div class="flex items-center justify-center space-x-2">
                                <a href="{{ route('jawatan.edit', $jawatan->id) }}"
                                   class="px-3 py-1.5 bg-yellow-100 text-xs text-yellow-700 rounded-full hover:bg-yellow-200 transition"> Edit</a>
                                <form action="{{ route('jawatan.destroy', $jawatan->id) }}" method="POST" onsubmit="return confirm('Padam jawatan ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="px-3 py-1.5 bg-red-100 text-xs text-red-600 rounded-full hover:bg-red-200 transition">
                                         Padam
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="text-center py-6 text-gray-400">Tiada jawatan direkodkan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>

    <div class="flex justify-end mt-6">
        <a href="{{ route('anggota_jawatan.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