ilycats/resources/views/pages/treatments/edit.blade.php

<x-app-layout>
    <div class="max-w-5xl mx-auto space-y-6 pb-12" x-data="treatmentForm()">
        {{-- HEADER --}}
        <div class="flex items-center gap-4">
            <a href="{{ route('treatments.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Rekam Medis</h2>
                <p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Memperbarui Catatan & Penyesuaian Multi-Obat</p>
            </div>
        </div>

        {{-- ALERT INFORMASI STOK --}}
        <div class="p-4 bg-amber-50 border border-amber-100 rounded-2xl flex items-start gap-3">
            <i class="fas fa-sync-alt text-amber-500 mt-1 animate-spin-slow"></i>
            <div>
                <p class="text-xs font-black text-amber-700 uppercase tracking-widest">Sinkronisasi Inventori Otomatis</p>
                <p class="text-[11px] text-amber-600 font-medium leading-relaxed">Sistem akan otomatis mengembalikan stok lama yang tercatat dan memotong stok baru berdasarkan perubahan yang Anda simpan di bawah ini.</p>
            </div>
        </div>

        {{-- GLOBAL ERROR BANNER --}}
        @if ($errors->any())
        <div class="bg-rose-50 border border-rose-200 rounded-2xl p-6 flex items-start gap-4">
            <div class="w-10 h-10 bg-rose-100 text-rose-500 rounded-xl flex items-center justify-center shrink-0">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div>
                <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest mb-1">Gagal Menyimpan Data</h4>
                <ul class="text-[11px] text-rose-500 font-bold list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        <form action="{{ route('treatments.update', $treatment->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf 
            @method('PATCH')
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {{-- LEFT COLUMN: DATA PASIEN --}}
                <div class="lg:col-span-1 space-y-6">
                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-6">
                        <h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-3">Data Pasien</h4>
                        
                        <div class="space-y-4">
                            <div class="space-y-2">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pasien</label>
                                <select name="cat_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
                                    @foreach($cats as $cat)
                                        <option value="{{ $cat->id }}" {{ old('cat_id', $treatment->cat_id) == $cat->id ? 'selected' : '' }}>
                                            {{ $cat->nama_kucing }} ({{ $cat->ras }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="space-y-2">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Pemeriksaan</label>
                                <input type="date" name="tanggal" value="{{ old('tanggal', $treatment->tanggal->format('Y-m-d')) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-indigo-500 transition-all">
                            </div>
                        </div>
                    </div>

                    {{-- PREVIEW FOTO --}}
                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm space-y-4">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Lampiran Foto Bukti</label>
                        <div class="relative group">
                            <div class="w-full h-48 rounded-3xl bg-slate-50 border-2 border-dashed border-slate-200 overflow-hidden shadow-inner flex items-center justify-center">
                                <img id="preview" src="{{ $treatment->foto_bukti ? asset('storage/' . $treatment->foto_bukti) : asset('images/default-cat.svg') }}" class="w-full h-full object-cover">
                            </div>
                            <input type="file" name="foto_bukti" onchange="previewImage(event)" class="mt-3 w-full text-[10px] font-black text-slate-400 file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[9px] file:font-black file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100 cursor-pointer">
                        </div>
                    </div>
                </div>

                {{-- RIGHT COLUMN: HASIL PEMERIKSAAN --}}
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
                        <h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-3">Diagnosa Klinik</h4>
                        
                        <div class="space-y-4">
                            <div class="space-y-2">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Keluhan Utama</label>
                                <input type="text" name="keluhan" value="{{ old('keluhan', $treatment->keluhan) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">
                            </div>
                            <div class="space-y-2">
                                <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Hasil Diagnosa & Tindakan</label>
                                <textarea name="diagnosa" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all">{{ old('diagnosa', $treatment->diagnosa) }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- MULTI MEDICINE SECTION --}}
                    <div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
                        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                            <h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest">Penyesuaian Resep & Stok</h4>
                            <button type="button" @click="addObat" class="px-4 py-2 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all flex items-center gap-2">
                                <i class="fas fa-plus"></i> TAMBAH OBAT LAIN
                            </button>
                        </div>

                        <div class="space-y-4">
                            {{-- Header Table --}}
                            <div class="hidden md:grid grid-cols-12 gap-4 px-4 text-[9px] font-black text-slate-400 uppercase tracking-widest">
                                <div class="col-span-4">Nama Obat</div>
                                <div class="col-span-2 text-center">Jumlah</div>
                                <div class="col-span-1"></div>
                            </div>

                            {{-- Loop Baris Obat (Alpine.js) --}}
                            <template x-for="(item, index) in items" :key="index">
                                <div class="grid grid-cols-1 md:grid-cols-12 gap-3 bg-slate-50 p-4 md:p-2 rounded-2xl items-center border border-slate-100 transition-all">
                                    {{-- Pilih Obat --}}
                                    <div class="col-span-1 md:col-span-4">
                                        <label class="md:hidden text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 block">Obat</label>
                                        <select :name="`items[${index}][medicine_id]`" 
                                                x-model="item.medicine_id"
                                                @change="updateUnit(index)"
                                                required 
                                                class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-emerald-500">
                                            <option value="">-- Pilih --</option>
                                            @foreach($medicines as $med)
                                                <option value="{{ $med->id }}" data-unit="{{ $med->unit }}">
                                                    {{ $med->nama_obat }} (Stok: {{ (float)$med->qty }} {{ $med->unit }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Qty Used --}}
                                    <div class="col-span-1 md:col-span-2">
                                        <label class="md:hidden text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 block">Qty Potong Stok</label>
                                        <div class="relative">
                                            <input type="number" :name="`items[${index}][qty_used]`" x-model="item.qty_used" step="0.01" required 
                                                   class="w-full pl-3 pr-8 py-2 bg-white border border-slate-200 rounded-xl text-xs font-black">
                                            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-[8px] font-black text-slate-300" x-text="item.unit"></span>
                                        </div>
                                    </div>

                                    {{-- Tombol Hapus --}}
                                    <div class="col-span-1 md:col-span-1 text-center mt-2 md:mt-0">
                                        <button type="button" @click="removeItem(index)" x-show="items.length > 1" class="w-8 h-8 inline-flex items-center justify-center bg-rose-50 text-rose-500 rounded-lg hover:bg-rose-500 hover:text-white transition-all">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="w-full py-5 bg-slate-900 text-white text-sm font-black rounded-3xl shadow-xl hover:bg-indigo-600 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
                <i class="fas fa-save"></i> PERBARUI REKAM MEDIS & SINKRONISASI STOK
            </button>
        </form>
    </div>

    @push('scripts')
    
    @php
        // [FIX ERROR SYNTAX BLADE]
        $mappedItems = [];
        $oldItems = old('items');
        
        if ($oldItems) {
            $mappedItems = $oldItems;
        } else {
            if (isset($treatment->details) && $treatment->details->count() > 0) {
                $mappedItems = $treatment->details->map(function($detail) {
                    return [
                        'medicine_id' => $detail->medicine_id,
                        'qty_used'    => (float) $detail->qty_used,
                        'unit'        => $detail->medicine->unit ?? 'UNIT',
                        'dosis'       => $detail->dosis ?? '',
                        'keterangan'  => $detail->keterangan ?? '',
                    ];
                })->toArray();
            } else {
                $mappedItems = [[
                    'medicine_id' => $treatment->medicine_id,
                    'qty_used'    => (float) $treatment->qty_used,
                    'unit'        => $treatment->medicine->unit ?? 'UNIT',
                    'dosis'       => $treatment->dosis ?? '',
                    'keterangan'  => $treatment->keterangan ?? '',
                ]];
            }
        }
    @endphp

    <script>
        function treatmentForm() {
            return {
                items: @json($mappedItems),

                addObat() {
                    this.items.push({
                        medicine_id: '',
                        qty_used: 1,
                        unit: 'UNIT',
                        dosis: '',
                        keterangan: ''
                    });
                },

                removeItem(index) {
                    this.items.splice(index, 1);
                },

                updateUnit(index) {
                    setTimeout(() => {
                        const select = document.querySelectorAll('select[name^="items"]')[index];
                        if (select) {
                            const selectedOption = select.options[select.selectedIndex];
                            const unit = selectedOption.getAttribute('data-unit');
                            this.items[index].unit = unit ? unit : 'UNIT';
                        }
                    }, 10);
                }
            }
        }

        function previewImage(event) {
            const reader = new FileReader();
            reader.onload = function() {
                const output = document.getElementById('preview');
                output.src = reader.result;
            }
            if(event.target.files[0]) {
                reader.readAsDataURL(event.target.files[0]);
            }
        }
    </script>
    @endpush
</x-app-layout>