@extends('layouts.apoteker')

@section('title', '➕ Tambah Skrining Resep')

@section('content')
@php
    $fields = [
        'Prasyarat Administratif' => [
            'nama_dokter' => 'Nama Dokter',
            'sip' => 'SIP',
            'alamat_dokter' => 'Alamat Dokter',
            'tanggal_resep' => 'Tanggal Penulisan Resep',
            'tanda_tangan' => 'Tanda Tangan/Paraf Penulis Resep',
            'identitas_pasien' => 'Identitas Pasien (Nama, Alamat, Umur, BB, JK)',
            'nama_obat_dosis' => 'Nama Obat, Potensi, Dosis, Jumlah',
            'cara_pemakaian' => 'Cara Pemakaian yang Jelas'
        ],
        'Kesesuaian Farmasetik' => [
            'bentuk_sediaan' => 'Bentuk Sediaan',
            'dosis_obat' => 'Dosis Obat',
            'potensi_obat' => 'Potensi Obat',
            'stabilitas' => 'Stabilitas',
            'inkompatibilitas' => 'Inkompatibilitas',
            'cara_lama_pemberian' => 'Cara dan Lama Pemberian'
        ],
        'Pertimbangan Klinis' => [
            'alergi' => 'Adanya Alergi',
            'efek_samping' => 'Efek Samping',
            'interaksi' => 'Interaksi',
            'kesesuaian_klinis' => 'Kesesuaian (Dosis, Durasi, Jumlah, dll)'
        ]
    ];
@endphp

<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-6" x-data="skriningResepAI()">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">➕ Form Skrining Resep</h1>
    <p class="text-gray-600 dark:text-gray-300">Checklist berdasarkan format evaluasi resep sesuai standar pelayanan kefarmasian.</p>

    <form action="{{ route('apoteker.skrining-resep.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="flex flex-col md:flex-row gap-6 items-start">
          <div class="w-full md:w-2/3">
    <label class="block font-medium text-gray-700 dark:text-gray-200">👤 Pasien</label>
<select name="user_id" id="user_id" required class="select2 w-full rounded border-blue-600 dark:bg-gray-700 text-black">
    <option value="">-- Pilih Pasien --</option>
    @foreach($users as $user) {{-- sebelumnya: $patients --}}
        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
            {{ $user->name }} ({{ $user->ktp ?? 'KTP tidak tersedia' }})
        </option>
    @endforeach
</select>
    @error('user_id')
        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
    @enderror
</div>

            <div class="w-full md:w-1/3">
                <label class="block font-medium text-gray-700 dark:text-gray-200">🖼️ Foto Resep</label>
                <input type="file" name="foto_resep" @change="setPreview($event)" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
                <div class="relative w-full mt-2 h-[350px] border rounded overflow-hidden cursor-zoom-in" @click="window.open(preview, '_blank')">
                    <template x-if="preview">
                        <img :src="preview" class="object-contain w-full h-full">
                    </template>
                </div>
                <button type="button" @click="analyzeWithGpt"
                        class="mt-2 inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded hover:bg-pink-700 transition">
                    🤖 Analisa Otomatis (GPT)
                </button>
                <p class="text-sm text-yellow-400 mt-1" x-text="statusGpt"></p>
                @error('foto_resep')
                    <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="overflow-x-auto">
            <div class="flex flex-wrap justify-between items-center gap-4 text-sm text-gray-700 dark:text-gray-200 mb-2">
                <div class="flex items-center space-x-2">
                    <input type="checkbox" @click="toggleAll" class="form-checkbox">
                    <label>Centang Semua</label>
                </div>
                <div class="flex flex-wrap gap-2">
                    <template x-for="(groupFields, kategori) in kategoriFields" :key="kategori">
                        <button type="button" class="text-blue-600 hover:underline" @click="checkGroup(groupFields)">
                            Centang <span x-text="kategori"></span>
                        </button>
                    </template>
                </div>
            </div>
            <table class="w-full border border-gray-300 text-sm text-left">
                <thead class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-100">
                    <tr>
                        <th class="border p-2">Kategori</th>
                        <th class="border p-2">Kriteria Pemeriksaan</th>
                        <th class="border p-2 text-center">✔</th>
                        <th class="border p-2">Catatan DRP / Medication Error</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fields as $kategori => $group)
                        @foreach($group as $field => $label)
                            <tr>
                                <td class="border p-2">{{ $loop->first ? $kategori : '' }}</td>
                                <td class="border p-2">{{ $label }}</td>
                                <td class="border text-center">
                                    <input type="checkbox" name="{{ $field }}" class="form-checkbox" :checked="result['{{ $field }}']?.checked || false">
                                </td>
                                <td class="border">
                                    <input type="text" name="drp_{{ $field }}" :value="result['{{ $field }}']?.catatan || '{{ old('drp_' . $field) }}'"
                                           class="w-full p-1 border-gray-300 rounded dark:bg-gray-700 dark:text-white">
                                </td>
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex justify-end gap-2 mt-6">
            <a href="{{ route('apoteker.skrining-resep.index') }}"
               class="inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg shadow hover:bg-gray-600 transition">
                ↩️ Batal
            </a>
            <button type="submit"
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
                💾 Simpan
            </button>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.select2').select2({
            placeholder: 'Cari nama pasien...',
            allowClear: true,
            width: '100%'
        });
    });

    function skriningResepAI() {
        return {
            preview: null,
            result: {},
            statusGpt: '',
            kategoriFields: {
                'Prasyarat Administratif': ['nama_dokter','sip','alamat_dokter','tanggal_resep','tanda_tangan','identitas_pasien','nama_obat_dosis','cara_pemakaian'],
                'Kesesuaian Farmasetik': ['bentuk_sediaan','dosis_obat','potensi_obat','stabilitas','inkompatibilitas','cara_lama_pemberian'],
                'Pertimbangan Klinis': ['alergi','efek_samping','interaksi','kesesuaian_klinis']
            },
            setPreview(e) {
                this.preview = URL.createObjectURL(e.target.files[0]);
                this.statusGpt = '';
                this.result = {};
            },
            toggleAll() {
                document.querySelectorAll('input[type=checkbox][name]').forEach(cb => cb.checked = true);
            },
            checkGroup(group) {
                group.forEach(name => {
                    const cb = document.querySelector(`input[name='${name}']`);
                    if (cb) cb.checked = true;
                });
            },
            async analyzeWithGpt() {
                this.statusGpt = '⏳ Mengirim ke GPT...';
                const file = document.querySelector('input[name=foto_resep]').files[0];
                if (!file) return alert('Unggah gambar resep dulu.');

                const formData = new FormData();
                formData.append('image', file);

                try {
                    const res = await fetch("{{ route('analisa.gpt') }}", {
                        method: "POST",
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        body: formData
                    });

                    const data = await res.json();
                    if (!data.success) {
                        this.statusGpt = '⚠️ ' + (data.message || 'Gagal menerima hasil');
                        return;
                    }

                    const json = JSON.parse(data.result);
                    this.result = json;

                    for (const [field, info] of Object.entries(json)) {
                        const cb = document.querySelector(`input[name='${field}']`);
                        const note = document.querySelector(`input[name='drp_${field}']`);

                        if (cb && info.checked) cb.checked = true;
                        if (note && info.catatan) note.value = info.catatan;
                    }

                    this.statusGpt = '✅ Hasil berhasil diterapkan. Silakan periksa ulang.';
                } catch (err) {
                    console.error(err);
                    this.statusGpt = '❌ Error saat menghubungi API.';
                }
            }
        }
    }
</script>
@endsection