@extends('layouts.app')

@section('content')

<div class="p-6">

    <div class="flex justify-between items-start mb-6">

        <div>
            <h1 class="text-2xl font-bold text-[#1c1d56]">
                Data Pejabat
            </h1>

            <p class="text-sm text-gray-500 mt-1">
                Kelola data pejabat untuk keperluan penandatanganan dokumen pemanggilan anak.
            </p>
        </div>

        <a href="{{ route('admin.pejabat.create') }}"
           class="bg-[#1c1d56] text-white px-4 py-2 rounded">
            + Tambah
        </a>

    </div>

    <div class="bg-white rounded-xl shadow overflow-hidden">

        <table class="w-full table-auto">

            <thead class="bg-[#1c1d56] text-white">

                <tr>
                    <th class="p-3 text-left">Nama</th>
                    <th class="p-3 text-left">Jabatan</th>
                    <th class="p-3 text-left">Status</th>
                    <th class="p-3 text-center whitespace-nowrap">Aksi</th>
                </tr>

            </thead>

            <tbody>

                @foreach($data as $item)

                    <tr class="border-b hover:bg-gray-50">

                        <td class="p-3">
                            {{ $item->nama_pejabat }}
                        </td>

                        <td class="p-3">
                            {{ $item->jabatan }}
                        </td>

                        {{-- STATUS (dirapihin biar gak “berat” UI-nya) --}}
                        <td class="p-3">

                            <form action="{{ route('admin.admin.pejabat.toggle', $item->id) }}" method="POST"
                                  class="inline-block">

                                @csrf
                                @method('PATCH')

                                <button type="submit"
                                    class="px-2 py-1 rounded text-white text-sm transition hover:opacity-90
                                    {{ $item->aktif ? 'bg-green-600' : 'bg-gray-500' }}">

                                    {{ $item->aktif ? 'Aktif' : 'Nonaktif' }}

                                </button>

                            </form>

                        </td>

                        {{-- AKSI --}}
                        <td class="p-3 whitespace-nowrap">
                            {{-- Tambahkan justify-center agar tombol ke tengah --}}
                            <div class="flex items-center justify-center gap-2"> 

                                <a href="{{ route('admin.pejabat.edit',$item->id) }}"
                                    class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm transition">
                                    Edit
                                </a>

                                <form action="{{ route('admin.pejabat.destroy',$item->id) }}"
                                    method="POST"
                                    onsubmit="return confirm('Yakin mau hapus data ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm transition">
                                        Hapus
                                    </button>
                                </form>

                            </div>
                        </td>

                    </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>

@endsection