@extends('layouts.admin')

@section('title', 'Daftar Personel')

@section('content')
<div class="container mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">👤 Daftar Personel</h1>
        <a href="{{ route('admin.personel.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
            ➕ Tambah Personel
        </a>
    </div>

    @if (session('success'))
        <div class="mb-4 p-3 bg-green-100 text-green-800 rounded shadow">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @forelse ($personels as $personel)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                @if ($personel->photo_url)
                    <img src="{{ $personel->photo_url }}" alt="{{ $personel->name }}"
                         class="w-full h-48 object-cover rounded mb-3">
                @endif
                <h2 class="text-lg font-bold">{{ $personel->name }}</h2>
                <p class="text-sm text-gray-500">{{ $personel->position }}</p>

                {{-- Tombol Edit --}}
                <a href="{{ route('admin.personel.edit', $personel->id) }}"
                   class="inline-block mt-2 text-blue-600 hover:underline text-sm">✏️ Edit</a>

                {{-- Tombol Hapus dengan SweetAlert --}}
                <form action="{{ route('admin.personel.destroy', $personel->id) }}" method="POST"
                      class="inline-block mt-2 ml-4 delete-form">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-red-600 hover:underline text-sm">🗑️ Hapus</button>
                </form>
            </div>
        @empty
            <p class="text-gray-500 dark:text-gray-400 col-span-3 text-center">Belum ada personel.</p>
        @endforelse
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.querySelectorAll('.delete-form').forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data ini akan hilang permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e3342f',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endpush