@extends('layouts.apoteker')

@section('title', 'Edit 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">
        ✏️ Edit Monitoring Efek Samping Obat (Algoritma Naranjo)
    </h1>

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

        @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', $monitoring->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" value="{{ old('drug_suspected', $monitoring->drug_suspected) }}"
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" required />
        </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="{{ old('observation_date', $monitoring->observation_date) }}"
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white" required />
        </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>
                @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
                <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>
                    @foreach($options as $val => $label)
                        <option value="{{ $val }}" @selected(old("answer_$i", $monitoring->{"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">
                💾 Perbarui 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%'
        });
    });
</script>
@endpush