@extends('layouts.apoteker')

@section('title', 'Edit Data Pasien')

@section('content')
@if ($errors->any())
    <div class="text-red-500 mb-4">
        <ul class="list-disc pl-5">
            @foreach ($errors->all() as $error)
                <li>❌ {{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<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">✏️ Edit Data Pasien</h1>

    <form action="{{ route('apoteker.patients.update', $patient->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        {{-- Info Dasar --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <x-form.input name="nama_lengkap" label="Nama Lengkap" :value="$patient->nama_lengkap" />
            <x-form.input name="umur" label="Umur" type="number" :value="$patient->umur" />
        </div>

        {{-- SOAP --}}
        <x-form.input name="dokter" label="Dokter Pemeriksa" :value="$patient->dokter" />
        <x-form.textarea name="keluhan" label="Keluhan Utama Pasien">{{ $patient->keluhan }}</x-form.textarea>

        {{-- Tekanan Darah --}}
        <div class="grid grid-cols-2 gap-4">
            <x-form.input name="tekanan_sistolik" label="Tekanan Sistolik" type="number" :value="$patient->tekanan_sistolik" />
            <x-form.input name="tekanan_diastolik" label="Tekanan Diastolik" type="number" :value="$patient->tekanan_diastolik" />
        </div>

        {{-- Pemeriksaan --}}
<x-form.input name="tanggal_pemeriksaan" label="Tanggal Pemeriksaan" type="date"
    :value="old('tanggal_pemeriksaan', $patient->tanggal_pemeriksaan ? \Carbon\Carbon::parse($patient->tanggal_pemeriksaan)->format('Y-m-d') : null)" />


        {{-- Riwayat --}}
        <x-form.textarea name="riwayat_penyakit" label="Riwayat Penyakit">{{ $patient->riwayat_penyakit }}</x-form.textarea>
        <x-form.textarea name="riwayat_alergi" label="Riwayat Alergi">{{ $patient->riwayat_alergi }}</x-form.textarea>
        <x-form.textarea name="obat_sekarang" label="Obat yang Sedang Dikonsumsi">{{ $patient->obat_sekarang }}</x-form.textarea>
        <x-form.textarea name="obat_dulu" label="Riwayat Obat Sebelumnya">{{ $patient->obat_dulu }}</x-form.textarea>

        {{-- Parameter Laboratorium --}}
        <h2 class="text-xl font-bold mt-8 text-gray-700 dark:text-gray-200">🧪 Parameter Laboratorium</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@foreach ($labs as $name => $lab)
    <x-form.input name="{{ $name }}" label="{{ $lab['label'] }}"
        :value="old($name, $patient->$name)" />
@endforeach

        </div>

        {{-- AI Planing --}}
        <div class="text-right mt-4">
            <button type="button" onclick="generateAIPlan()" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
                🤖 Generate Ulang dari AI
            </button>
            <div id="ai_loading" class="hidden mt-2 text-sm text-gray-600 dark:text-gray-300">
                ⏳ <span>AI sedang menganalisis data pasien...</span>
            </div>
        </div>

        <x-form.textarea name="assesment" label="Assesment (Analisis / Diagnosis Sementara)">{{ $patient->assesment }}</x-form.textarea>
        <x-form.textarea name="planing" label="Planing (Rencana Tindakan / Terapi)">{{ $patient->planing }}</x-form.textarea>
        <x-form.textarea name="catatan" label="Catatan Tambahan">{{ $patient->catatan }}</x-form.textarea>

        {{-- Tombol Simpan --}}
        <div class="pt-4 flex gap-2">
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                💾 Simpan Perubahan
            </button>
            <a href="{{ route('apoteker.patients.index') }}"
               class="px-6 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 inline-flex items-center">
                ❌ Batal
            </a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function generateAIPlan() {
        const keluhan = document.querySelector('[name="keluhan"]').value;
        const riwayat = document.querySelector('[name="riwayat_penyakit"]').value;
        const alergi = document.querySelector('[name="riwayat_alergi"]').value;
        const obat = document.querySelector('[name="obat_sekarang"]').value;

        const outputAssessment = document.querySelector('[name="assesment"]');
        const outputPlaning = document.querySelector('[name="planing"]');
        const loadingBox = document.getElementById('ai_loading');

        if (!keluhan.trim()) {
            alert('Silakan isi keluhan pasien terlebih dahulu.');
            return;
        }

        loadingBox.classList.remove('hidden');

        fetch(`{{ route('patients.ai.generate') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ keluhan, riwayat, alergi, obat })
        })
        .then(res => res.json())
        .then(data => {
            outputAssessment.value = data.assesment ?? '';
            outputPlaning.value = data.planing ?? '';
        })
        .catch(() => {
            alert('❌ Gagal mengambil rekomendasi dari AI.');
        })
        .finally(() => {
            loadingBox.classList.add('hidden');
        });
    }
</script>
@endpush