@extends('layouts.admin-apoteker')

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

@section('content')
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-6">
    <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('skrining-resep.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" x-data="{ preview: null, checkAll: false, checkKategori: {} }">
        @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" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
                    <option value="">-- Pilih Pasien --</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</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="preview = URL.createObjectURL($event.target.files[0])" 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>
                @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="checkAll = !checkAll; document.querySelectorAll('input[type=checkbox][name]').forEach(cb => cb.checked = checkAll)" class="form-checkbox">
                    <label>Centang Semua</label>
                </div>
                <div class="flex flex-wrap gap-2">
                    <template x-for="(groupFields, kategori) in {
                        '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']
                    }" :key="kategori">
                        <button type="button" class="text-blue-600 hover:underline"
                            @click="groupFields.forEach(name => document.querySelector(`input[name='${name}']`).checked = true)">
                            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>
                    @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
                    @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" {{ old($field) ? 'checked' : '' }}>
                            </td>
                            <td class="border">
                                <input type="text" name="drp_{{ $field }}" value="{{ 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('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>
@endsection