@extends('layouts.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('apoteker.patients.statistic') }}" class="bg-white dark:bg-gray-800 rounded p-4 mb-6 shadow space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>

@php
    $selectedUser = null;
    if(request('user_id')) {
        $selectedUser = \App\Models\User::find(request('user_id'));
    }
@endphp

<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 dark:bg-gray-700 dark:text-white">
        @if(request('nama'))
            <option value="{{ request('nama') }}" selected>{{ request('nama') }}</option>
        @endif
    </select>
</div>




            </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>

        {{-- 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:</p>
            <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">✔️ 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">❌ Hapus Centang</button>
            </div>

            <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 justify-end gap-2 pt-4">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">🔍 Cari</button>
            <a href="{{ route('apoteker.patients.statistic') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">🔄 Reset</a>
        </div>
    </form>

    {{-- 📈 Statistik --}}
    @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>
    @else
        {{-- Metadata --}}
        <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</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>

            {{-- Analisis 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">
                    🔁 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 () {
    $('#nama').select2({
        placeholder: '🔍 Cari nama pasien...',
        allowClear: true,
        ajax: {
            url: '{{ route("apoteker.patients.search.nama") }}', // pastikan ini route apoteker
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term };
            },
            processResults: function (data) {
                return {
                    results: data.map(function (item) {
                        return {
                            id: item.id, // nama_lengkap
                            text: item.text, // 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