@extends('layouts.admin-apoteker')

@section('title', 'Edit 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">✏️ Edit Dokumentasi PIO</h1>

    <form action="{{ route('pio.update', $doc->id) }}" method="POST">
        @csrf
        @method('PUT')

        {{-- 📅 Tanggal & Waktu --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Tanggal Pertanyaan</label>
                <input type="date" name="waktu_pertanyaan" required class="input w-full"
                    value="{{ old('waktu_pertanyaan', \Carbon\Carbon::parse($doc->waktu_pertanyaan)->format('Y-m-d')) }}">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Jam Pertanyaan</label>
                <input type="time" name="jam_pertanyaan" required class="input w-full"
                    value="{{ old('jam_pertanyaan', \Carbon\Carbon::parse($doc->waktu_pertanyaan)->format('H:i')) }}">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Metode Pertanyaan</label>
                <select name="metode_pertanyaan" class="input w-full" required>
                    @foreach(['Lisan', 'Tertulis', 'Telepon'] as $item)
                        <option value="{{ $item }}" {{ $doc->metode_pertanyaan === $item ? 'selected' : '' }}>{{ $item }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- 🙋 Identitas Penanya --}}
        <div class="mt-6">
            <h2 class="font-bold mb-2">👤 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" placeholder="Nama Penanya" required value="{{ old('nama_penanya', $doc->nama_penanya) }}">
                <input type="text" name="no_telepon" class="input w-full" placeholder="No. Telepon" value="{{ old('no_telepon', $doc->no_telepon) }}">
                <select name="status_penanya" class="input w-full" required>
                    @foreach(['Pasien', 'Keluarga Pasien', 'Petugas Kesehatan'] as $item)
                        <option value="{{ $item }}" {{ $doc->status_penanya === $item ? 'selected' : '' }}>{{ $item }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- 🧍 Data Pasien --}}
        <div class="mt-6">
            <h2 class="font-bold mb-2">🧍 Data Pasien</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <input type="number" name="umur" class="input w-full" placeholder="Umur" required value="{{ old('umur', $doc->umur) }}">
                <input type="number" name="tinggi_cm" class="input w-full" placeholder="Tinggi Badan (cm)" value="{{ old('tinggi_cm', $doc->tinggi_cm) }}">
                <input type="number" name="berat_kg" class="input w-full" placeholder="Berat Badan (Kg)" value="{{ old('berat_kg', $doc->berat_kg) }}">
                <select name="jenis_kelamin" class="input w-full"  required>
                    @foreach(['Laki-laki', 'Perempuan'] as $item)
                        <option value="{{ $item }}" {{ $doc->jenis_kelamin === $item ? 'selected' : '' }}>{{ $item }}</option>
                    @endforeach
                </select>
                <input type="number" name="kehamilan_minggu" class="input w-full" placeholder="Masa Kehamilan (Minggu)" value="{{ old('kehamilan_minggu', $doc->kehamilan_minggu) }}">
                <select name="menyusui" class="input w-full">
                    <option value="1" {{ $doc->menyusui ? 'selected' : '' }}>Menyusui: Ya</option>
                    <option value="0" {{ !$doc->menyusui ? 'selected' : '' }}>Menyusui: Tidak</option>
                </select>
            </div>

            {{-- 🧮 BMI --}}
            <input type="hidden" name="bmi" id="bmi">
            <div class="md:col-span-3 mt-4">
                <label class="block text-sm font-medium mb-1">Indeks Massa Tubuh (BMI)</label>
                <input type="text" id="bmi_display" readonly
                    class="input w-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 cursor-not-allowed">
            </div>
        </div>

        {{-- ❓ Pertanyaan --}}
        <div class="mt-6">
            <label class="block font-bold mb-1">❓ Uraian Pertanyaan</label>
            <textarea name="uraian_pertanyaan" class="input tiny-editor w-full" rows="4" required>{{ old('uraian_pertanyaan', $doc->uraian_pertanyaan) }}</textarea>
        </div>

        {{-- 📌 Jenis Pertanyaan --}}
        <div class="mt-4">
            <label class="block font-bold mb-2">📌 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'];
                    $checked = $doc->jenis_pertanyaan ?? [];
                @endphp
                @foreach($jenisList as $item)
                    <label class="inline-flex items-center space-x-2">
                        <input type="checkbox" name="jenis_pertanyaan[]" value="{{ $item }}"
                               {{ in_array($item, $checked) ? 'checked' : '' }}>
                        <span>{{ $item }}</span>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- 📝 Jawaban --}}
        <div class="mt-6">
            <label class="block font-bold mb-1">📝 Jawaban</label>
            <textarea name="jawaban" class="input tiny-editor w-full" rows="4" required>{{ old('jawaban', $doc->jawaban) }}</textarea>
        </div>

        {{-- 📚 Referensi --}}
        <div class="mt-4">
            <label class="block font-bold mb-1">📚 Referensi</label>
            <textarea name="referensi" class="input tiny-editor w-full" rows="3">{{ old('referensi', $doc->referensi) }}</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" required>
                @foreach(['Segera', 'Dalam 24 jam', 'Lebih dari 24 jam'] as $item)
                    <option value="{{ $item }}" {{ $doc->penyampaian_jawaban === $item ? 'selected' : '' }}>{{ $item }}</option>
                @endforeach
            </select>
            <select name="metode_jawaban" class="input w-full" required>
                @foreach(['Lisan', 'Tertulis', 'Telepon'] as $item)
                    <option value="{{ $item }}" {{ $doc->metode_jawaban === $item ? 'selected' : '' }}>{{ $item }}</option>
                @endforeach
            </select>
            <input type="datetime-local" name="waktu_jawaban" class="input w-full"
                   value="{{ old('waktu_jawaban', \Carbon\Carbon::parse($doc->waktu_jawaban)->format('Y-m-d\TH:i')) }}" required>
        </div>

        {{-- 👤 Penginput --}}
        <div class="mt-6">
            <label class="block text-sm font-medium mb-1">👤 Apoteker Penginput</label>
            <input type="text" class="input w-full bg-gray-100 dark:bg-gray-700 cursor-not-allowed"
                   value="{{ $doc->apoteker->name ?? 'Tidak tersedia' }}" 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 Perubahan
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '.tiny-editor',
        plugins: 'lists link autoresize',
        toolbar: 'undo redo | bold italic underline | bullist numlist | link',
        menubar: false,
        branding: false,
        height: 250,
        skin: document.documentElement.classList.contains('dark') ? 'oxide-dark' : 'oxide',
        content_css: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
    });

    function hitungBMI() {
        const tinggi = parseFloat(document.querySelector('[name="tinggi_cm"]').value);
        const berat = parseFloat(document.querySelector('[name="berat_kg"]').value);
        const bmiField = document.getElementById('bmi');
        const bmiDisplay = document.getElementById('bmi_display');

        if (!isNaN(tinggi) && !isNaN(berat) && tinggi > 0) {
            const tinggiMeter = tinggi / 100;
            const bmi = berat / (tinggiMeter * tinggiMeter);
            const bmiRounded = bmi.toFixed(2);
            bmiField.value = bmiRounded;
            bmiDisplay.value = `${bmiRounded} kg/m²`;
        } else {
            bmiField.value = '';
            bmiDisplay.value = '';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('[name="tinggi_cm"]').addEventListener('input', hitungBMI);
        document.querySelector('[name="berat_kg"]').addEventListener('input', hitungBMI);
        hitungBMI();
    });
</script>
@endpush