@extends('layouts.apoteker')

@section('title', 'Form Monitoring Efek Samping Obat')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 shadow rounded space-y-6">

    <h1 class="text-2xl font-bold text-purple-600 dark:text-purple-400 mb-2">
        📝 Form Monitoring Efek Samping Obat (Algoritma Naranjo)
    </h1>

    <form action="{{ route('apoteker.monitorings.store') }}" method="POST" class="space-y-6">
        @csrf
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
        {{-- Pilih Pasien --}}
        <div>
            <label class="block font-medium text-gray-800 dark:text-white mb-1">Pilih 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)
    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
        {{ $user->name }} ({{ $user->ktp ?? 'KTP tidak tersedia' }})
    </option>
@endforeach
            </select>
        </div>

        {{-- Obat Dicurigai --}}
        <div>
            <label class="block font-medium text-gray-800 dark:text-white mb-1">Obat yang Dicurigai</label>
            <input type="text" name="drug_suspected" required
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" />
        </div>

        {{-- Tanggal Observasi --}}
        <div>
            <label class="block font-medium text-gray-800 dark:text-white mb-1">Tanggal Observasi</label>
            <input type="date" name="observation_date" value="{{ date('Y-m-d') }}"
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" />
        </div>

        {{-- Pertanyaan 1–10 --}}
        @php
            $questions = [
                1 => 'Apakah ada laporan efek samping obat yang serupa?',
                2 => 'Apakah efek samping obat terjadi setelah pemberian obat yang dicurigai?',
                3 => 'Apakah efek samping obat membaik setelah obat dihentikan atau obat antagonis khusus diberikan?',
                4 => 'Apakah efek samping obat terjadi berulang setelah obat diberikan kembali?',
                5 => 'Apakah ada alternative penyebab lain yang dapat menjelaskan efek samping?',
                6 => 'Apakah efek samping obat muncul kembali ketika placebo diberikan?',
                7 => 'Apakah obat yang dicurigai terdeteksi di dalam darah/cairan tubuh dengan konsentrasi toksik?',
                8 => 'Apakah efek samping obat bertambah parah ketika dosis ditingkatkan atau membaik saat diturunkan?',
                9 => 'Apakah pasien pernah mengalami efek samping obat yang sama atau mirip sebelumnya?',
                10 => 'Apakah efek samping obat dapat dikonfirmasi dengan bukti objektif?'
            ];
        @endphp

        @for ($i = 1; $i <= 10; $i++)
            <div>
                <label class="block font-medium text-gray-800 dark:text-white mb-1">
                    Pertanyaan {{ $i }}: <span class="text-sm font-normal text-gray-600 dark:text-gray-300">{{ $questions[$i] }}</span>
                </label>
                <select name="answer_{{ $i }}" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
                    <option value="">-- Pilih Jawaban --</option>
                    @php
                        $options = match($i) {
                            2, 4 => [2 => 'Ya (+2)', -1 => 'Tidak (-1)', 0 => 'Tidak Diketahui (0)'],
                            5, 6 => [-1 => 'Ya (-1)', 2 => 'Tidak (+2)', 0 => 'Tidak Diketahui (0)'],
                            default => [1 => 'Ya (+1)', 0 => 'Tidak (0)', 0 => 'Tidak Diketahui (0)'],
                        };
                    @endphp
                    @foreach($options as $val => $label)
                        <option value="{{ $val }}" @selected(old("answer_$i") == $val)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        @endfor

        {{-- Tombol --}}
        <div class="flex justify-end gap-2 pt-4">
            <a href="{{ route('apoteker.monitorings.index') }}" class="bg-gray-300 dark:bg-gray-600 text-black dark:text-white px-4 py-2 rounded shadow hover:bg-gray-400 dark:hover:bg-gray-500">
                🔙 Batal
            </a>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
                💾 Simpan Data
            </button>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<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 () {
        $('#user_id').select2({
            placeholder: 'Cari nama pasien...',
            allowClear: true,
            width: '100%'
        });
    });

    function previewMedia(event) {
        const file = event.target.files[0];
        const container = document.getElementById('preview-container');
        container.innerHTML = '';

        if (file) {
            const url = URL.createObjectURL(file);
            const isVideo = file.type.startsWith('video/');
            const media = document.createElement(isVideo ? 'video' : 'audio');
            media.src = url;
            media.controls = true;
            media.className = 'w-full mt-2 rounded';
            container.appendChild(media);
        }
    }
</script>
@endpush