@extends('layouts.admin-apoteker')

@section('title', 'Statistik Pasien')

@php use Illuminate\Support\Str; @endphp

@section('content')
<div class="max-w-6xl mx-auto p-6 bg-white dark:bg-gray-800 rounded shadow space-y-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📊 Statistik Parameter Laboratorium</h1>

   {{-- 🔍 Form Filter --}}
   <form method="GET" action="{{ route('patients.statistics') }}" class="bg-white dark:bg-gray-800 rounded p-4 mb-6 shadow space-y-4">
    {{-- 🔍 Baris Pertama: Nama & Tanggal --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
    <label for="nama" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nama Pasien</label>
    <select name="nama" id="nama"
        class="w-full select2 px-3 py-2 border rounded text-gray-700 dark:text-blue-00">
        @if(request('nama'))
            <option value="{{ request('nama') }}" selected>{{ request('nama') }}</option>
        @endif
    </select>
</div>

        <div>
            <label for="dari" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal Dari</label>
            <input type="date" name="dari" id="dari" value="{{ request('dari') }}" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
        </div>
        <div>
            <label for="sampai" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tanggal Sampai</label>
            <input type="date" name="sampai" id="sampai" value="{{ request('sampai') }}" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
        </div>
    </div>

    {{-- ✅ Baris Kedua: Checklist Parameter --}}
    <div x-data="{ checkAll() { document.querySelectorAll('input[name=\'fokus[]\']').forEach(cb => cb.checked = true) },
        uncheckAll() { document.querySelectorAll('input[name=\'fokus[]\']').forEach(cb => cb.checked = false) } }">
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pilih Parameter (centang satu atau lebih):</p>

{{-- 🔘 Tombol Bulk Aksi --}}
<div class="flex gap-2 mb-3">
 <button type="button" @click="checkAll" class="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700 transition">✔️ Centang Semua</button>
 <button type="button" @click="uncheckAll" class="px-3 py-1 bg-red-600 text-white text-xs rounded hover:bg-red-700 transition">❌ Hapus Centang</button>
</div>

{{-- ✅ Checklist Parameter --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
 @php $selectedParams = collect(request('fokus', $allParameters)); @endphp
 @foreach($allParameters as $param)
     <label class="inline-flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-200">
         <input type="checkbox" name="fokus[]" value="{{ $param }}"
             class="rounded border-gray-300 dark:bg-gray-700 dark:border-gray-600"
             {{ $selectedParams->contains($param) ? 'checked' : '' }}>
         <span>{{ Str::headline(str_replace('_', ' ', $param)) }}</span>
     </label>
 @endforeach
</div>
</div>


    {{-- 🔘 Tombol Aksi --}}
    <div class="flex flex-wrap justify-end gap-2 pt-2">
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            🔍 Cari
        </button>
        <a href="{{ route('patients.statistics') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition">
            🔄 Reset
        </a>
    </div>
</form>



    {{-- 📄 Jumlah Data --}}
    @if(empty($labels) || collect($datasets)->sum(fn($ds) => collect($ds['data'])->filter()->count()) === 0)
        <div class="text-red-500 text-center py-4">❌ Tidak ada data yang bisa divisualisasikan.</div>

        {{-- 📊 Tabel Rata-Rata --}}
        <div class="bg-white dark:bg-gray-800 p-4 rounded shadow mt-6">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">📋 Rata-Rata Parameter (Fallback)</h2>
            <table class="min-w-full table-auto border text-sm">
                <thead class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white">
                    <tr>
                        <th class="px-4 py-2 border">Parameter</th>
                        <th class="px-4 py-2 border">Rata-Rata</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($averages as $param => $avg)
                        <tr>
                            <td class="px-4 py-2 border">{{ Str::headline($param) }}</td>
                            <td class="px-4 py-2 border text-center">{{ $avg !== null ? $avg : '–' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="text-sm text-gray-600 dark:text-gray-300">
            <p>🗓️ Jumlah Tanggal Pemeriksaan: <strong>{{ count($labels) }}</strong></p>
            <ul class="list-disc list-inside mt-2">
                @foreach($datasets as $ds)
                    <li>{{ $ds['label'] }}: {{ collect($ds['data'])->filter()->count() }} data tersedia</li>
                @endforeach
            </ul>
        </div>

        {{-- 📈 Grafik --}}
        <div class="bg-white dark:bg-gray-800 p-4 rounded shadow mt-6">


            <canvas id="labChart" height="400"></canvas>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    console.log("ChartJS ready");
                });
                </script>
     {{-- 🧠 Tombol & Tempat Hasil Analisis AI --}}
{{-- 🔘 Tombol dan Tempat Hasil AI --}}
<div class="mt-6">
    <button id="ai-button"
        onclick="generateAIAssessment()"
        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">
        🔁 Hasil Analisis AI
    </button>
    <div id="ai-result" class="mt-6 space-y-4"></div>
</div>


        </div>
    @endif
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>


@if(!empty($labels) && collect($datasets)->sum(fn($ds) => collect($ds['data'])->filter()->count()) > 0)
<script>
    const ctx = document.getElementById('labChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($labels) !!},
            datasets: {!! json_encode($datasets) !!}
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Tren Parameter Laboratorium Pasien'
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            const value = context.raw;
                            return value !== null ? `${context.dataset.label}: ${value}` : `${context.dataset.label}: Tidak ada data`;
                        }
                    }
                },
                legend: { position: 'top' },
                datalabels: {
                    color: '#000',
                    anchor: 'end',
                    align: 'top',
                    font: { weight: 'bold', size: 10 },
                    formatter: function(value) {
                        return value !== null ? value : '';
                    }
                }
            },
            interaction: { mode: 'nearest', axis: 'x', intersect: false },
            scales: {
                x: { title: { display: true, text: 'Tanggal Pemeriksaan' } },
                y: { title: { display: true, text: 'Nilai Parameter' } }
            }
        },
        plugins: [ChartDataLabels]
    });

    // ✅ POINT WAJIB #3: Pastikan dataset tersedia di JS
    const datasets = {!! json_encode($datasets ?? []) !!};
    const labels = {!! json_encode($labels ?? []) !!};

    // ✅ POINT WAJIB #4: Fungsi AI Analysis
    async function generateAIAssessment() {
        const button = document.getElementById('ai-button');
        const result = document.getElementById('ai-result');
        button.innerText = '🔄 Memproses...';
        button.disabled = true;

        if (!datasets.length) {
            result.innerHTML = '<p class="text-red-600">⚠️ Data tren laboratorium tidak tersedia.</p>';
            button.disabled = false;
            return;
        }

        try {
            const response = await fetch("{{ route('patients.statistics.ai') }}", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
    datasets,
    labels,
    nama: '{{ request("nama") }}',
    dari: '{{ request("dari") }}',
    sampai: '{{ request("sampai") }}'
})
            });

            const data = await response.json();

            result.innerHTML = `
                <div class="bg-white dark:bg-gray-800 border-l-4 border-purple-600 p-4 rounded shadow whitespace-pre-line text-sm text-gray-800 dark:text-gray-100">
                    <h3 class="font-bold text-lg text-purple-700 dark:text-purple-300 mb-2">🧠 Analisis Klinis (SOAP)</h3>
                    ${data.assessment ?? '❌ Gagal menerima respons dari AI.'}
                </div>
            `;
        } catch (e) {
            result.innerHTML = '<p class="text-red-600">❌ Terjadi kesalahan saat memuat analisis AI.</p>';
        } finally {
            button.innerText = '🔁 Hasil Analisis AI';
            button.disabled = false;
        }
    }
         $(document).ready(function () {
        console.log("✅ Select2 aktif");

        $('#nama').select2({
            placeholder: '🔍 Cari nama pasien...',
            allowClear: true,
            ajax: {
                url: '{{ route("patients.search.nama") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return {
                        results: data.map(function (item) {
                            return {
                                id: item.nama_lengkap,
                                text: item.nama_lengkap,
                                umur: item.umur,
                                jenis_kelamin: item.jenis_kelamin,
                                tanggal_pemeriksaan: item.tanggal_pemeriksaan
                            };
                        })
                    };
                }
            },
            templateResult: function (data) {
                if (!data.id) return data.text;
                return $(`
                    <div class="text-sm">
                        <div class="font-semibold">${data.text}</div>
                        <div class="text-xs text-gray-500">
                            ${data.jenis_kelamin || '-'}, ${data.umur || '-'} tahun | Kunjungan: ${data.tanggal_pemeriksaan || '-'}
                        </div>
                    </div>
                `);
            },
            templateSelection: function (data) {
                return data.text || data.id;
            }
        });
    });
</script>
@endif
@endsection