@extends('layouts.apoteker')

@section('title', 'Daftar Dokumentasi PIO')

@section('content')
<div class="max-w-7xl mx-auto space-y-6 bg-white dark:bg-gray-800 p-6 rounded-xl shadow">

    <div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
        <h1 class="text-2xl font-bold text-primary">📚 Dokumentasi PIO</h1>
        <div class="flex gap-2">


            <a href="{{ route('apoteker.pio.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                ➕ Tambah Baru
            </a>
        </div>
    </div>

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

    <form method="GET" class="mb-4 grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
        {{-- 🔍 Search --}}
        <input type="text"
               name="search"
               value="{{ request('search') }}"
               placeholder="🔍 Cari penanya atau pertanyaan..."
               class="w-full px-4 py-2 rounded border border-gray-300 dark:border-gray-600
                      bg-white dark:bg-gray-700 text-gray-800 dark:text-white
                      placeholder-gray-400 dark:placeholder-gray-400 transition">

        {{-- 📅 Tanggal --}}
        <input type="date"
               name="tanggal"
               value="{{ request('tanggal') }}"
               class="w-full px-4 py-2 rounded border border-gray-300 dark:border-gray-600
                      bg-white dark:bg-gray-700 text-gray-800 dark:text-white transition">

        {{-- 👤 Status Penanya --}}
        <select name="status_penanya"
                class="w-full px-4 py-2 rounded border border-gray-300 dark:border-gray-600
                       bg-white dark:bg-gray-700 text-gray-800 dark:text-white transition">
            <option value="">👤 Semua Kelompok</option>
            @foreach(['Pasien', 'Keluarga Pasien', 'Petugas Kesehatan'] as $status)
                <option value="{{ $status }}" {{ request('status_penanya') === $status ? 'selected' : '' }}>
                    {{ $status }}
                </option>
            @endforeach
        </select>

        {{-- 📌 Jenis Pertanyaan --}}
        <select name="jenis_pertanyaan"
                class="w-full px-4 py-2 rounded border border-gray-300 dark:border-gray-600
                       bg-white dark:bg-gray-700 text-gray-800 dark:text-white transition">
            <option value="">📌 Semua Jenis</option>
            @foreach([
                'Identifikasi Obat','Interaksi Obat','Harga Obat','Kontra Indikasi','Cara Pemakaian',
                'Stabilitas','Dosis','Efek Samping Obat','Penggunaan Terapeutik',
                'Farmakokinetika','Farmakodinamika','Ketersediaan Obat','Lain-lain'
            ] as $jenis)
                <option value="{{ $jenis }}" {{ request('jenis_pertanyaan') === $jenis ? 'selected' : '' }}>
                    {{ $jenis }}
                </option>
            @endforeach
        </select>

        {{-- 🔎 Filter & Reset --}}
        <div class="md:col-span-4 flex justify-end gap-2">
            <button type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                🔎 Filter
            </button>
            <a href="{{ route('apoteker.pio.index') }}"
               class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
                ♻️ Reset
            </a>
        </div>
    </form>


    <div class="overflow-x-auto mt-4 rounded-lg border border-gray-200 dark:border-gray-700">
        <table class="min-w-full table-auto text-sm">
            <thead class="bg-gray-100 dark:bg-gray-700 text-left">
                <tr>
                    <th class="px-4 py-3">#</th>
                    <th class="px-4 py-3">Tanggal</th>
                    <th class="px-4 py-3">Penanya</th>
                    <th class="px-4 py-3">Jenis Pertanyaan</th>
                    <th class="px-4 py-3">Penyampaian</th>
                    <th class="px-4 py-3">Apoteker</th>
                    <th class="px-4 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @forelse ($documents as $doc)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-900 transition">
                        <td class="px-4 py-3">{{ $loop->iteration }}</td>
                        <td class="px-4 py-3">
                            {{ \Carbon\Carbon::parse($doc->waktu_pertanyaan)->format('d M Y H:i') }}
                        </td>
                        <td class="px-4 py-3">
                            <div class="font-semibold">{{ $doc->nama_penanya }}</div>
                            <small class="text-gray-500">{{ $doc->status_penanya }}</small>
                        </td>
                        <td class="px-4 py-3">
                            <ul class="list-disc ml-4">
                                @foreach ($doc->jenis_pertanyaan as $jenis)
                                    <li>{{ $jenis }}</li>
                                @endforeach
                            </ul>
                        </td>
                        <td class="px-4 py-3">{{ $doc->penyampaian_jawaban }}</td>
                        <td class="px-4 py-3">{{ $doc->apoteker->name ?? '-' }}</td>
                        <td class="px-4 py-3 space-x-2">
                            <a href="{{ route('apoteker.pio.show', $doc->id) }}"
                               class="inline-block text-blue-600 hover:underline">
                                Detail
                            </a>
                            <a href="{{ route('apoteker.pio.edit', $doc->id) }}"
                               class="inline-block text-yellow-600 hover:underline">
                                Edit
                            </a>
                            <a href="{{ route('apoteker.pio.export.single.pdf', $doc->id) }}"
                               class="inline-block text-red-600 hover:underline">
                                PDF
                            </a>
                        </td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-6 text-gray-500 dark:text-gray-400">
                            Belum ada dokumentasi yang tersedia.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        <div class="mt-6">
            {{ $documents->withQueryString()->links('pagination::tailwind') }}
        </div>

    </div>
</div>
@endsection