@extends('layouts.admin-apoteker')

@section('content')
<div class="space-y-6">

    {{-- Judul dan Tombol Tambah --}}
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📄 Daftar SOP</h1>
        <a href="{{ route('sop.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
            ➕ Tambah SOP
        </a>
    </div>

    {{-- Form Filter --}}
    <form method="GET" class="flex flex-wrap gap-4 items-center bg-white dark:bg-gray-800 p-4 rounded shadow">
        <input type="text" name="search" placeholder="Cari Judul SOP..."
            value="{{ request('search') }}"
            class="border border-gray-300 dark:border-gray-700 px-3 py-2 rounded w-full md:w-auto dark:bg-gray-900 dark:text-white">

        <select name="status" onchange="this.form.submit()"
            class="border border-gray-300 dark:border-gray-700 px-3 py-2 rounded dark:bg-gray-900 dark:text-white">
            <option value="">Semua Status</option>
            <option value="aktif" @selected(request('status') == 'aktif')>Aktif</option>
            <option value="nonaktif" @selected(request('status') == 'nonaktif')>Nonaktif</option>
        </select>

        <button type="submit"
            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            🔍 Filter
        </button>
    </form>

    {{-- Tabel SOP --}}
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded shadow">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-100 dark:bg-gray-700">
                <tr class="text-left text-sm font-semibold text-gray-700 dark:text-white">
                    <th class="px-4 py-2">No</th>
                    <th class="px-4 py-2">Judul</th>
                    <th class="px-4 py-2">Nomor SOP</th>
                    <th class="px-4 py-2">Pembuat</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @forelse ($sops as $index => $sop)
                <tr class="text-sm text-gray-800 dark:text-gray-200">
                    <td class="px-4 py-2">{{ $sops->firstItem() + $index }}</td>
                    <td class="px-4 py-2">{{ $sop->judul }}</td>
                    <td class="px-4 py-2">{{ $sop->nomor_sop }}</td>
                    <td class="px-4 py-2">{{ $sop->user->name }}</td>
                    <td class="px-4 py-2">
                        <span class="px-2 py-1 rounded text-white text-xs {{ $sop->status == 'aktif' ? 'bg-green-500' : 'bg-red-500' }}">
                            {{ ucfirst($sop->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-2 space-x-2 flex items-center">
                        <a href="{{ route('sop.show', $sop) }}" title="Lihat Detail"
                           class="text-blue-600 hover:text-blue-800">🔍</a>
                        <a href="{{ route('sop.edit', $sop) }}" title="Edit SOP"
                           class="text-yellow-500 hover:text-yellow-700">✏️</a>
                        <a href="{{ route('sop.export', $sop) }}" title="Download PDF"
                           class="text-green-600 hover:text-green-800">📄</a>
                        <form action="{{ route('sop.destroy', $sop) }}" method="POST" class="inline delete-form">
                            @csrf
                            @method('DELETE')
                            <button type="submit" title="Hapus SOP" class="text-red-600 hover:text-red-800">
                                🗑️
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center px-4 py-6 text-gray-500 dark:text-gray-400">
                        Belum ada SOP ditemukan.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="mt-4">
        {{ $sops->withQueryString()->links() }}
    </div>

</div>

{{-- SweetAlert2 --}}
@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 SOP ini?',
                text: "Tindakan ini tidak dapat dibatalkan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    this.submit();
                }
            });
        });
    });
</script>
@endpush
@endsection