<x-app-layout>
    @section('title', 'Edit Resep')

    <div class="space-y-6">
        <!-- Breadcrumb -->
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li>
                    <a href="{{ route('resep.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Resep</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-[#7A7FAE]" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="ml-1 text-[#2F347A] font-medium">Edit Resep</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-[#2F347A]">Edit Resep: {{ $resep->no_resep }}</h1>
        </div>

        <!-- Error Message -->
        @if($errors->any())
            <div class="bg-[#FFD6D6] border border-[#C0392B] text-[#C0392B] px-4 py-3 rounded-lg">
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('resep.update', $resep) }}" x-data="resepForm()">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Left Column - Data Resep & Pasien -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- Data Resep -->
                    <x-card class="p-6">
                        <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Data Resep</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Nama Dokter <span class="text-red-500">*</span></label>
                                <input type="text" name="nama_dokter" value="{{ old('nama_dokter', $resep->nama_dokter) }}" required
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                       placeholder="Nama dokter">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">No. SIP</label>
                                <input type="text" name="no_sip" value="{{ old('no_sip', $resep->no_sip) }}"
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                       placeholder="Nomor Surat Izin Praktik">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Tanggal Resep <span class="text-red-500">*</span></label>
                                <input type="date" name="tanggal_resep" value="{{ old('tanggal_resep', $resep->tanggal_resep->format('Y-m-d')) }}" required
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Penjamin <span class="text-red-500">*</span></label>
                                <select name="jenis_penjamin" required
                                        class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                                    <option value="umum" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'umum' ? 'selected' : '' }}>Umum</option>
                                    <option value="BPJS Kes" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'BPJS Kes' ? 'selected' : '' }}>BPJS Kes</option>
                                    <option value="BPJS Naker" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'BPJS Naker' ? 'selected' : '' }}>BPJS Naker</option>
                                    <option value="Jamkesmas/KIS" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'Jamkesmas/KIS' ? 'selected' : '' }}>Jamkesmas/KIS</option>
                                    <option value="R. Inap" {{ old('jenis_penjamin', $resep->jenis_penjamin) == 'R. Inap' ? 'selected' : '' }}>R. Inap</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Layanan <span class="text-red-500">*</span></label>
                                <select name="jenis_layanan" required
                                        class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                                    <option value="BP" {{ old('jenis_layanan', $resep->jenis_layanan) == 'BP' ? 'selected' : '' }}>BP</option>
                                    <option value="KIA" {{ old('jenis_layanan', $resep->jenis_layanan) == 'KIA' ? 'selected' : '' }}>KIA</option>
                                    <option value="Gigi" {{ old('jenis_layanan', $resep->jenis_layanan) == 'Gigi' ? 'selected' : '' }}>Gigi</option>
                                    <option value="UGD" {{ old('jenis_layanan', $resep->jenis_layanan) == 'UGD' ? 'selected' : '' }}>UGD</option>
                                    <option value="Lainnya" {{ old('jenis_layanan', $resep->jenis_layanan) == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Status <span class="text-red-500">*</span></label>
                                <select name="status" required
                                        class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                                    <option value="proses" {{ old('status', $resep->status) == 'proses' ? 'selected' : '' }}>Proses</option>
                                    <option value="selesai" {{ old('status', $resep->status) == 'selesai' ? 'selected' : '' }}>Selesai</option>
                                    <option value="dibatalkan" {{ old('status', $resep->status) == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                                </select>
                            </div>
                        </div>
                    </x-card>

                    <!-- Data Pasien -->
                    <x-card class="p-6">
                        <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Data Pasien</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">No. RM</label>
                                <input type="text" name="no_rm" value="{{ old('no_rm', $resep->no_rm) }}"
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                       placeholder="Nomor Rekam Medis">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Nama Pasien <span class="text-red-500">*</span></label>
                                <input type="text" name="nama_pasien" value="{{ old('nama_pasien', $resep->nama_pasien) }}" required
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                       placeholder="Masukkan nama pasien">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Alamat</label>
                                <textarea name="alamat_pasien" rows="2"
                                          class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                          placeholder="Alamat pasien">{{ old('alamat_pasien', $resep->alamat_pasien) }}</textarea>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
                                    <select name="jenis_kelamin" required
                                            class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                                        <option value="">-- Pilih --</option>
                                        <option value="L" {{ old('jenis_kelamin', $resep->jenis_kelamin) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                        <option value="P" {{ old('jenis_kelamin', $resep->jenis_kelamin) == 'P' ? 'selected' : '' }}>Perempuan</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-[#2F347A] mb-1">Umur (Tahun) <span class="text-red-500">*</span></label>
                                    <input type="number" name="umur_pasien" value="{{ old('umur_pasien', $resep->umur_pasien) }}" min="0" max="150" required
                                           class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                           placeholder="Umur">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Berat Badan (kg) <span class="text-red-500">*</span></label>
                                <input type="number" name="berat_badan" value="{{ old('berat_badan', $resep->berat_badan) }}" min="0" max="500" step="0.1" required
                                       class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                       placeholder="Berat badan">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Diagnosa <span class="text-red-500">*</span></label>
                                <textarea name="diagnosa" rows="3" required
                                          class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                          placeholder="Diagnosa pasien">{{ old('diagnosa', $resep->diagnosa) }}</textarea>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-[#2F347A] mb-1">Catatan</label>
                                <textarea name="catatan" rows="2"
                                          class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                          placeholder="Catatan tambahan">{{ old('catatan', $resep->catatan) }}</textarea>
                            </div>
                        </div>
                    </x-card>
                </div>

                <!-- Right Column - Medicines -->
                <div class="lg:col-span-2 space-y-6">
                    <x-card class="p-6">
                        <div class="flex items-center justify-between mb-4 pb-2 border-b border-[#E5E7F2]">
                            <h3 class="text-lg font-semibold text-[#2F347A]">Daftar Obat</h3>
                            <button type="button" @click="addItem()" 
                                    class="px-4 py-2 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors text-sm flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                Tambah Obat
                            </button>
                        </div>

                        <div class="space-y-4">
                            <template x-for="(item, index) in items" :key="index">
                                <div class="p-4 bg-[#F4F6FF] rounded-lg space-y-3">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm font-medium text-[#4A538F]" x-text="'Obat #' + (index + 1)"></span>
                                        <button type="button" @click="removeItem(index)" 
                                                x-show="items.length > 1"
                                                class="p-1 text-[#C0392B] hover:bg-[#FFD6D6] rounded transition-colors">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div class="md:col-span-2">
                                            <label class="block text-sm font-medium text-[#2F347A] mb-1">Pilih Obat <span class="text-red-500">*</span></label>
                                            <select :name="'items[' + index + '][obat_masuk_id]'" required
                                                    x-model="item.obat_masuk_id"
                                                    @change="updateObatInfo(index)"
                                                    class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] bg-white text-[#2F347A]">
                                                <option value="">-- Pilih Obat --</option>
                                                @foreach($obats as $obat)
                                                    <option value="{{ $obat->id }}" 
                                                            data-nama="{{ $obat->nama_obat }}"
                                                            data-stok="{{ $obat->stok }}"
                                                            data-satuan="{{ $obat->satuan->nama ?? '' }}">
                                                        {{ $obat->nama_obat }} - Stok: {{ $obat->stok }} {{ $obat->satuan->nama ?? '' }} (Batch: {{ $obat->kode_batch }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-[#2F347A] mb-1">Jumlah <span class="text-red-500">*</span></label>
                                            <input type="number" :name="'items[' + index + '][jumlah]'" 
                                                   x-model="item.jumlah" required min="1"
                                                   class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                                   placeholder="Jumlah">
                                            <p class="text-xs text-[#7A7FAE] mt-1" x-show="item.stok" x-text="'Stok tersedia: ' + item.stok"></p>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-[#2F347A] mb-1">Aturan Pakai</label>
                                            <input type="text" :name="'items[' + index + '][aturan_pakai]'" 
                                                   x-model="item.aturan_pakai"
                                                   class="w-full px-4 py-2.5 border border-[#E5E7F2] rounded-lg focus:ring-2 focus:ring-[#4A538F] focus:border-[#4A538F] text-[#2F347A]"
                                                   placeholder="Contoh: 3x1 sehari">
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <div x-show="items.length === 0" class="text-center py-8 text-[#7A7FAE]">
                            Klik "Tambah Obat" untuk menambahkan obat ke resep
                        </div>
                    </x-card>

                    <!-- Submit Buttons -->
                    <div class="flex gap-3 justify-end">
                        <x-btn type="secondary" href="{{ route('resep.index') }}">Batal</x-btn>
                        <button type="submit" 
                                class="px-6 py-2.5 bg-[#4A538F] text-white rounded-lg hover:bg-[#424B84] transition-colors flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Update Resep
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    @push('scripts')
    @php
        $itemsJson = $resep->items->map(function($item) {
            return [
                'obat_masuk_id' => (string) $item->obat_masuk_id,
                'jumlah' => $item->jumlah,
                'aturan_pakai' => $item->aturan_pakai ?? '',
                'stok' => $item->obatMasuk->stok ?? null
            ];
        })->values()->toArray();
    @endphp
    <script>
        function resepForm() {
            return {
                items: @json($itemsJson),
                
                addItem() {
                    this.items.push({ obat_masuk_id: '', jumlah: 1, aturan_pakai: '', stok: null });
                },
                
                removeItem(index) {
                    this.items.splice(index, 1);
                },
                
                updateObatInfo(index) {
                    const select = document.querySelector(`select[name="items[${index}][obat_masuk_id]"]`);
                    const option = select.options[select.selectedIndex];
                    if (option) {
                        this.items[index].stok = option.dataset.stok || null;
                    }
                }
            }
        }
    </script>
    @endpush
</x-app-layout>
