@extends('layouts.admin-apoteker')

@section('title', 'Monitoring Efek Samping Obat')

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

    {{-- 🔰 Judul dan Tombol --}}
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📋 Monitoring Efek Samping Obat (Naranjo)</h1>
            <p class="text-sm text-gray-600 dark:text-gray-300">Pantau dan evaluasi efek samping obat berbasis algoritma Naranjo.</p>
        </div>
        <div class="flex flex-wrap gap-2">
                        <a href="{{ route('monitorings.export.excel', ['bulan' => request('bulan', now()->format('m')), 'tahun' => request('tahun', now()->year)]) }}"
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded shadow inline-flex items-center gap-2">
                📊 <span>Export Excel</span>
            </a>
            <a href="{{ route('monitorings.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow inline-flex items-center gap-2">
                ➕ <span>Tambah Data</span>
            </a>

        </div>
    </div>

    {{-- ✅ Notifikasi sukses --}}
    @if(session('success'))
        <div class="bg-green-100 border border-green-300 text-green-800 rounded p-3 shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    {{-- 🔎 Form Filter --}}
    <form method="GET" action="{{ route('monitorings.index') }}" class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow flex flex-wrap items-end gap-4">
        <div class="flex flex-col">
            <label for="search" class="text-sm font-medium text-gray-700 dark:text-white mb-1">Cari Pasien</label>
            <input type="text" id="search" name="search" value="{{ request('search') }}"
                   placeholder="Nama pasien..." class="w-64 px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" />
        </div>

        <div class="flex flex-col">
            <label for="date" class="text-sm font-medium text-gray-700 dark:text-white mb-1">Tanggal Observasi</label>
            <input type="date" id="date" name="date" value="{{ request('date') }}"
                   class="w-48 px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" />
        </div>

        <div class="flex gap-2 mt-6">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
                🔎 Cari
            </button>
            <a href="{{ route('monitorings.index') }}" class="bg-gray-300 dark:bg-gray-600 text-black dark:text-white px-4 py-2 rounded shadow hover:bg-gray-400 dark:hover:bg-gray-500">
                ♻️ Reset
            </a>
        </div>
    </form>

    {{-- 📊 Statistik Kategori Naranjo --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded-lg text-blue-900 font-semibold shadow-sm">🔵 Highly Probable: <span class="font-bold">{{ $highly }}</span></div>
        <div class="bg-green-100 p-4 rounded-lg text-green-900 font-semibold shadow-sm">🟢 Probable: <span class="font-bold">{{ $prob }}</span></div>
        <div class="bg-yellow-100 p-4 rounded-lg text-yellow-900 font-semibold shadow-sm">🟡 Possible: <span class="font-bold">{{ $poss }}</span></div>
        <div class="bg-red-100 p-4 rounded-lg text-red-900 font-semibold shadow-sm">🔴 Doubtful: <span class="font-bold">{{ $doubt }}</span></div>
    </div>

    {{-- 📋 Tabel Data --}}
    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow mt-6">
        <table class="min-w-full table-auto border-collapse">
            <thead class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-white">
                <tr>
                    <th class="p-3 text-left border">#</th>
                    <th class="p-3 text-left border">Nama Pasien</th>
                    <th class="p-3 text-left border">Obat Dicurigai</th>
                    <th class="p-3 text-left border">Tanggal</th>
                    <th class="p-3 text-center border">Skor</th>
                    <th class="p-3 text-left border">Kategori</th>
                    <th class="p-3 text-left border">Apoteker</th>
                    <th class="p-3 text-center border">Aksi</th>
                </tr>
            </thead>
            <tbody class="text-sm text-gray-800 dark:text-gray-200">
                @forelse($monitorings as $item)
                <tr class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                    <td class="p-3 border">{{ $loop->iteration + ($monitorings->firstItem() - 1) }}</td>
                    <td class="p-3 border">{{ $item->patient_name }}</td>
                    <td class="p-3 border">{{ $item->drug_suspected }}</td>
                    <td class="p-3 border">{{ \Carbon\Carbon::parse($item->observation_date)->format('d-m-Y') }}</td>
                    <td class="p-3 border text-center font-bold">{{ $item->total_score }}</td>
                    <td class="p-3 border">{{ $item->probability_category }}</td>
                    <td class="p-3 border">{{ optional($item->creator)->name ?? '-' }}</td>
                    <td class="p-3 border text-center space-x-1">
                        <a href="{{ route('monitorings.show', $item) }}" class="px-2 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700" title="Lihat">🔍</a>
                        <a href="{{ route('monitorings.edit', $item) }}" class="px-2 py-1 bg-yellow-400 text-black rounded hover:bg-yellow-500" title="Edit">✏️</a>
                        <a href="{{ route('monitorings.pdf', $item) }}" class="px-2 py-1 bg-gray-600 text-white rounded hover:bg-gray-700" title="PDF">📄</a>
                        <form action="{{ route('monitorings.destroy', $item) }}" method="POST" class="inline-block form-delete">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700" title="Hapus">🗑️</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="p-4 text-center text-gray-500 dark:text-gray-400">Belum ada data.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- 🔁 Pagination --}}
    <div class="mt-6">
        {{ $monitorings->links() }}
    </div>

    {{-- 📘 Keterangan --}}
    <div class="mt-6 text-sm text-gray-500 dark:text-gray-400">
        <p><strong>📘 Keterangan Skor:</strong> ≥9: Highly Probable, 5–8: Probable, 1–4: Possible, 0: Doubtful</p>
    </div>

</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteForms = document.querySelectorAll('.form-delete');
        deleteForms.forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Hapus Data?',
                    text: 'Data yang dihapus tidak dapat dikembalikan!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e3342f',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endsection