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

    <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('obat-keluar.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Obat Keluar</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 Pengeluaran</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-[#2F347A]">Edit Obat Keluar</h1>
        </div>

        <form method="POST" action="{{ route('obat-keluar.update', $obatKeluar) }}">
            @csrf
            @method('PUT')
            
            <!-- Pilih Obat -->
            <x-card class="p-6 mb-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Pilih Obat</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-form-select 
                        name="obat_masuk_id" 
                        label="Obat" 
                        :error="$errors->first('obat_masuk_id')"
                        required>
                        <option value="">Pilih Obat</option>
                        @foreach($obats as $obat)
                            <option value="{{ $obat->id }}" 
                                    data-kadaluarsa="{{ $obat->tanggal_kadaluarsa ? $obat->tanggal_kadaluarsa->format('Y-m-d') : '' }}"
                                    data-kode-batch="{{ $obat->kode_batch }}"
                                    {{ old('obat_masuk_id', $obatKeluar->obat_masuk_id) == $obat->id ? 'selected' : '' }}>
                                {{ $obat->nama_obat }} - Stok: {{ $obat->stok }}
                            </option>
                        @endforeach
                    </x-form-select>

                    <x-form-input 
                        name="kode_batch" 
                        label="Kode Batch" 
                        placeholder="Terisi otomatis dari pilihan obat"
                        :value="old('kode_batch', $obatKeluar->kode_batch)"
                        :error="$errors->first('kode_batch')"
                        readonly
                        class="bg-gray-100 cursor-not-allowed"
                        required />

                    <x-form-input 
                        name="barcode" 
                        label="Barcode Obat" 
                        placeholder="Masukkan barcode (opsional)"
                        :value="old('barcode', $obatKeluar->barcode)"
                        :error="$errors->first('barcode')" />

                    <x-form-input 
                        name="jumlah" 
                        label="Jumlah" 
                        type="number"
                        min="1"
                        placeholder="Jumlah obat keluar"
                        :value="old('jumlah', $obatKeluar->jumlah)"
                        :error="$errors->first('jumlah')"
                        required />

                    <x-form-input 
                        name="tujuan_pemakaian" 
                        label="Tujuan Pemakaian" 
                        placeholder="Contoh: Pasien rawat inap, Pasien rawat jalan"
                        :value="old('tujuan_pemakaian', $obatKeluar->tujuan_pemakaian)"
                        :error="$errors->first('tujuan_pemakaian')"
                        required />

                    <x-form-input 
                        name="sumber_dana" 
                        label="Sumber Dana" 
                        placeholder="Masukkan sumber dana (opsional)"
                        :value="old('sumber_dana', $obatKeluar->sumber_dana)"
                        :error="$errors->first('sumber_dana')" />

                    <x-form-input 
                        name="harga" 
                        label="Harga (Rp)" 
                        type="number"
                        min="0"
                        step="100"
                        placeholder="Harga satuan (opsional)"
                        :value="old('harga', $obatKeluar->harga)"
                        :error="$errors->first('harga')" />

                    <x-form-input 
                        name="harga_total" 
                        label="Harga Total (Rp)" 
                        type="number"
                        min="0"
                        step="100"
                        placeholder="Harga total (opsional)"
                        :value="old('harga_total', $obatKeluar->harga_total)"
                        :error="$errors->first('harga_total')" />

                    <x-form-input 
                        name="tanggal_kadaluarsa" 
                        label="Tanggal Kadaluarsa" 
                        type="date"
                        :value="old('tanggal_kadaluarsa', $obatKeluar->tanggal_kadaluarsa->format('Y-m-d'))"
                        :error="$errors->first('tanggal_kadaluarsa')"
                        readonly
                        class="bg-gray-100 cursor-not-allowed"
                        required />
                </div>
            </x-card>

            <!-- Informasi Pengeluaran -->
            <x-card class="p-6 mb-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Informasi Pengeluaran</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-form-input 
                        name="no_pengeluaran" 
                        label="No. Pengeluaran" 
                        placeholder="Nomor pengeluaran"
                        :value="old('no_pengeluaran', $obatKeluar->no_pengeluaran)"
                        :error="$errors->first('no_pengeluaran')" />

                    <x-form-input 
                        name="tanggal_pengeluaran" 
                        label="Tanggal Pengeluaran" 
                        type="date"
                        :value="old('tanggal_pengeluaran', $obatKeluar->tanggal_pengeluaran->format('Y-m-d'))"
                        :error="$errors->first('tanggal_pengeluaran')"
                        required />

                    <x-form-input 
                        name="nama_petugas" 
                        label="Nama Petugas" 
                        placeholder="Nama petugas"
                        :value="old('nama_petugas', $obatKeluar->nama_petugas)"
                        :error="$errors->first('nama_petugas')"
                        required />

                    <x-form-input 
                        name="nama_penerima" 
                        label="Nama Penerima" 
                        placeholder="Nama penerima obat"
                        :value="old('nama_penerima', $obatKeluar->nama_penerima)"
                        :error="$errors->first('nama_penerima')"
                        required />

                    <x-form-input 
                        name="tujuan" 
                        label="Tujuan/Alamat" 
                        placeholder="Tujuan pengiriman"
                        :value="old('tujuan', $obatKeluar->tujuan)"
                        :error="$errors->first('tujuan')" />

                    <x-form-select 
                        name="status" 
                        label="Status" 
                        :error="$errors->first('status')">
                        <option value="proses" {{ old('status', $obatKeluar->status) == 'proses' ? 'selected' : '' }}>Proses</option>
                        <option value="selesai" {{ old('status', $obatKeluar->status) == 'selesai' ? 'selected' : '' }}>Selesai</option>
                        <option value="dibatalkan" {{ old('status', $obatKeluar->status) == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                    </x-form-select>
                </div>
            </x-card>

            <!-- Catatan -->
            <x-card class="p-6 mb-6">
                <x-form-textarea 
                    name="catatan" 
                    label="Catatan" 
                    placeholder="Catatan tambahan (opsional)"
                    rows="3"
                    :value="old('catatan', $obatKeluar->catatan)"
                    :error="$errors->first('catatan')" />
            </x-card>

            <!-- Actions -->
            <div class="flex justify-end gap-4">
                <x-btn type="secondary" href="{{ route('obat-keluar.index') }}">Batal</x-btn>
                <x-btn type="primary">Simpan Perubahan</x-btn>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const obatSelect = document.getElementById('obat_masuk_id');
            if (obatSelect) {
                obatSelect.addEventListener('change', function(e) {
                    const selectedOption = this.options[this.selectedIndex];
                    if (selectedOption) {
                        document.getElementById('kode_batch').value = selectedOption.dataset.kodeBatch || '';

                        if (selectedOption.dataset.kadaluarsa) {
                            document.getElementById('tanggal_kadaluarsa').value = selectedOption.dataset.kadaluarsa;
                        }
                    }
                });
            }
        });
    </script>
    @endpush
</x-app-layout>
