@extends('layouts.admin-apoteker')

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

@section('content')
<div class="max-w-5xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6 space-y-6">
    <h1 class="text-2xl font-bold mb-4">🧾 Tambah Dokumentasi PIO</h1>

    <form action="{{ route('pio.store') }}" method="POST">
        @csrf

        {{-- 📅 Tanggal & Waktu --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1 dark:text-white">Tanggal Pertanyaan</label>
                <input type="date" name="waktu_pertanyaan" required class="input w-full text-black">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1 dark:text-white">Jam Pertanyaan</label>
                <input type="time" name="jam_pertanyaan" required class="input w-full text-black">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1 dark:text-white">Metode Pertanyaan</label>
                <select name="metode_pertanyaan" class="input w-full text-black" required>
                    @foreach(['Lisan', 'Tertulis', 'Telepon'] as $item)
                        <option value="{{ $item }}">{{ $item }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- 🙋 Identitas Penanya --}}
        <div class="mt-6">
            <h2 class="font-bold mb-2 dark:text-white">👤 Identitas Penanya</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <input type="text" name="nama_penanya" class="input w-full text-black" placeholder="Nama Penanya" required>
                <input type="text" name="no_telepon" class="input w-full text-black" placeholder="No. Telepon">
                <select name="status_penanya" class="input w-full text-black" required>
                    @foreach(['Pasien', 'Keluarga Pasien', 'Petugas Kesehatan'] as $item)
                        <option value="{{ $item }}">{{ $item }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- 🧍 Data Pasien --}}
        <div class="mt-6">
            <h2 class="font-bold mb-2 dark:text-white">🧍 Data Pasien</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <input type="number" name="umur" class="input w-full text-black" placeholder="Umur (tahun)" required>
                <input type="number" name="tinggi_cm" id="tinggi_cm" class="input w-full text-black" placeholder="Tinggi (cm)" oninput="hitungBMI()">
                <input type="number" name="berat_kg" id="berat_kg" class="input w-full text-black" placeholder="Berat (kg)" oninput="hitungBMI()">
                <select name="jenis_kelamin" class="input w-full text-black" required>
                    <option value="Laki-laki">Laki-laki</option>
                    <option value="Perempuan">Perempuan</option>
                </select>
                <input type="number" name="kehamilan_minggu" class="input w-full text-black" placeholder="Kehamilan (minggu)">
                <select name="menyusui" class="input w-full text-black">
                    <option value="0">Menyusui: Tidak</option>
                    <option value="1">Menyusui: Ya</option>
                </select>
            </div>

            {{-- 🧮 BMI --}}
            <div class="mt-4">
                <label class="block text-sm font-medium mb-1 dark:text-white">Indeks Massa Tubuh (BMI)</label>
                <input type="text" id="bmi_display" readonly
                    class="input w-full bg-gray-100 dark:bg-gray-700 text-black cursor-not-allowed">
                <input type="hidden" name="bmi" id="bmi">
                <p id="bmi_status" class="mt-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400"></p>
            </div>
        </div>

        {{-- ❓ Pertanyaan --}}
        <div class="mt-6">
            <label class="block font-bold mb-1 dark:text-white">❓ Uraian Pertanyaan</label>
            <textarea name="uraian_pertanyaan" class="input tiny-editor w-full text-black" rows="4" required></textarea>
        </div>

        {{-- 📌 Jenis Pertanyaan --}}
        <div class="mt-4">
            <label class="block font-bold mb-2 dark:text-white">📌 Jenis Pertanyaan</label>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                @php
                    $jenisList = ['Identifikasi Obat','Interaksi Obat','Harga Obat','Kontra Indikasi','Cara Pemakaian',
                        'Stabilitas','Dosis','Efek Samping Obat','Penggunaan Terapeutik',
                        'Farmakokinetika','Farmakodinamika','Ketersediaan Obat','Lain-lain'];
                @endphp
                @foreach($jenisList as $item)
                    <label class="inline-flex items-center space-x-2 dark:text-white">
                        <input type="checkbox" name="jenis_pertanyaan[]" value="{{ $item }}">
                        <span>{{ $item }}</span>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- 🧠 Rekomendasi AI --}}
        <div class="text-right mt-6">
            <button type="button" onclick="mintaRekomendasi()"
                    class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">
                🧠 Rekomendasi AI
            </button>
        </div>

        {{-- 💡 Output AI --}}
        <div id="ai_output" class="mt-4 p-4 hidden bg-yellow-50 dark:bg-yellow-900 border border-yellow-300 dark:border-yellow-600 rounded text-sm text-yellow-800 dark:text-yellow-200"></div>

        {{-- 📝 Jawaban --}}
        <div class="mt-6">
            <label class="block font-bold mb-1 dark:text-white">📝 Jawaban</label>
            <textarea name="jawaban" id="jawaban" class="input tiny-editor w-full text-black" rows="4" required></textarea>

        </div>

        {{-- 📚 Referensi --}}
        <div class="mt-4">
            <label class="block font-bold mb-1 dark:text-white">📚 Referensi</label>
            <textarea name="referensi" class="input tiny-editor w-full text-black" rows="3"></textarea>
        </div>

        {{-- 📤 Penyampaian Jawaban --}}
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <select name="penyampaian_jawaban" class="input w-full text-black" required>
                @foreach(['Segera', 'Dalam 24 jam', 'Lebih dari 24 jam'] as $item)
                    <option value="{{ $item }}">{{ $item }}</option>
                @endforeach
            </select>
            <select name="metode_jawaban" class="input w-full text-black" required>
                @foreach(['Lisan', 'Tertulis', 'Telepon'] as $item)
                    <option value="{{ $item }}">{{ $item }}</option>
                @endforeach
            </select>
            <input type="datetime-local" name="waktu_jawaban" class="input w-full text-black" required>
        </div>

        {{-- 👤 Penginput --}}
        <div class="mt-6">
            <label class="block text-sm font-medium mb-1 dark:text-white">👤 Apoteker Penginput</label>
            <input type="text" class="input w-full bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-black"
                   value="{{ Auth::user()->name }}" readonly>
        </div>

        {{-- ✅ Submit --}}
        <div class="mt-8 text-right">
            <a href="{{ route('pio.index') }}" class="btn-secondary px-4 py-2 rounded hover:bg-gray-600">❌ Batal</a>
            <button type="submit" class="btn-primary hover:scale-105 transition">💾 Simpan Dokumentasi</button>
        </div>
    </form>
</div>

<script>
    function hitungBMI() {
        const tinggi = parseFloat(document.getElementById('tinggi_cm').value);
        const berat = parseFloat(document.getElementById('berat_kg').value);
        const bmiInput = document.getElementById('bmi');
        const bmiDisplay = document.getElementById('bmi_display');
        const bmiStatus = document.getElementById('bmi_status');

        if (tinggi > 0 && berat > 0) {
            const tinggiMeter = tinggi / 100;
            const bmi = berat / (tinggiMeter * tinggiMeter);
            bmiInput.value = bmi.toFixed(2);
            bmiDisplay.value = bmi.toFixed(2);

            let status = '';
            if (bmi < 18.5) status = 'Kurus (Underweight)';
            else if (bmi < 25) status = 'Normal';
            else if (bmi < 30) status = 'Gemuk (Overweight)';
            else status = 'Obesitas';

            bmiStatus.innerText = `Status BMI: ${status}`;
        } else {
            bmiInput.value = '';
            bmiDisplay.value = '';
            bmiStatus.innerText = '';
        }
    }

    function mintaRekomendasi() {
        const pertanyaan = document.querySelector('[name="uraian_pertanyaan"]').value;
        const umur = document.querySelector('[name="umur"]').value;
        const jenisKelamin = document.querySelector('[name="jenis_kelamin"]').value;
        const jenis = [...document.querySelectorAll('[name="jenis_pertanyaan[]"]:checked')].map(e => e.value);

        const output = document.getElementById('ai_output');
        output.classList.remove('hidden');
        output.innerHTML = '⏳ Menganalisis dengan AI...';

        fetch('{{ route("pio.ai.rekomendasi") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                pertanyaan, umur, jenis_kelamin: jenisKelamin, jenis_pertanyaan: jenis
            })
        })
        .then(res => res.json())
.then(data => {
    output.innerHTML = `<strong>🧠 Saran AI:</strong><br><div class="mt-2 whitespace-pre-line">${data.rekomendasi}</div>`;

    // Auto salin ke textarea jawaban
    const jawabanField = document.getElementById('jawaban');
    if (jawabanField && !jawabanField.value.trim()) {
        jawabanField.value = data.rekomendasi;
    }
})
        .catch(() => {
            output.innerHTML = '❌ Gagal mengambil rekomendasi dari AI.';
        });
    }
</script>
@endsection