{{--
    This partial view is used by create.blade.php for Penyesuaian Stok.
    It expects:
    - $bahanBakus: Collection of BahanBaku models.
    - $produkJadis: Collection of ProdukJadi models.
    - $penyesuaian (optional): PenyesuaianStok model instance for edit mode (not used in this iteration).
--}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div>
        <label for="tanggal" class="block text-gray-700 text-sm font-bold mb-2">Tanggal Penyesuaian:</label>
        <input type="date" id="tanggal" name="tanggal" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" required value="{{ old('tanggal', $penyesuaian->tanggal ?? date('Y-m-d')) }}">
        @error('tanggal')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="item_type" class="block text-gray-700 text-sm font-bold mb-2">Tipe Item:</label>
        <select id="item_type" name="item_type" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" required>
            <option value="">Pilih Tipe Item</option>
            <option value="bahan_baku" {{ old('item_type', $penyesuaian->item_type ?? '') == 'App\\Models\\BahanBaku' ? 'selected' : '' }}>Bahan Baku</option>
            <option value="produk_jadi" {{ old('item_type', $penyesuaian->item_type ?? '') == 'App\\Models\\ProdukJadi' ? 'selected' : '' }}>Produk Jadi</option>
        </select>
        @error('item_type')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="item_id" class="block text-gray-700 text-sm font-bold mb-2">Pilih Item:</label>
        <select id="item_id" name="item_id" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" required>
            <option value="">Pilih Item (Pilih Tipe Item Dulu)</option>
        </select>
        @error('item_id')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="stok_saat_ini_display" class="block text-gray-700 text-sm font-bold mb-2">Stok Saat Ini:</label>
        <input type="text" id="stok_saat_ini_display" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 bg-gray-100 leading-tight focus:outline-none cursor-not-allowed" readonly value="0.00">
    </div>
    <div>
        <label for="tipe_penyesuaian" class="block text-gray-700 text-sm font-bold mb-2">Tipe Penyesuaian:</label>
        <select id="tipe_penyesuaian" name="tipe_penyesuaian" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" required>
            <option value="">Pilih Tipe Penyesuaian</option>
            <option value="penambahan" {{ old('tipe_penyesuaian', $penyesuaian->tipe_penyesuaian ?? '') == 'penambahan' ? 'selected' : '' }}>Penambahan</option>
            <option value="pengurangan" {{ old('tipe_penyesuaian', $penyesuaian->tipe_penyesuaian ?? '') == 'pengurangan' ? 'selected' : '' }}>Pengurangan</option>
        </select>
        @error('tipe_penyesuaian')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="jumlah" class="block text-gray-700 text-sm font-bold mb-2">Jumlah:</label>
        <input type="number" step="0.01" id="jumlah" name="jumlah" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" placeholder="Contoh: 10.50" required value="{{ old('jumlah', $penyesuaian->jumlah ?? '') }}" min="0.01">
        @error('jumlah')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div class="md:col-span-2">
        <label for="keterangan" class="block text-gray-700 text-sm font-bold mb-2">Keterangan (Alasan Penyesuaian):</label>
        <textarea id="keterangan" name="keterangan" rows="3" class="shadow-sm appearance-none border border-gray-300  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" placeholder="Contoh: Barang rusak, Koreksi hasil stock opname">{{ old('keterangan', $penyesuaian->keterangan ?? '') }}</textarea>
        @error('keterangan')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const itemTypeSelect = document.getElementById('item_type');
        const itemSelect = document.getElementById('item_id');
        const stokSaatIniDisplay = document.getElementById('stok_saat_ini_display');

        // Data dari PHP
        const bahanBakusData = @php echo json_encode($bahanBakus->mapWithKeys(function ($item) { return [$item->id => ['nama' => $item->nama, 'satuan' => $item->satuan, 'stok_saat_ini' => $item->stok_saat_ini]]; })); @endphp;
        const produkJadisData = @php echo json_encode($produkJadis->mapWithKeys(function ($item) { return [$item->id => ['nama' => $item->nama, 'satuan' => $item->satuan, 'stok_saat_ini' => $item->stok_saat_ini]]; })); @endphp;

        function populateItemSelect(selectedType, selectedItemId = null) {
            itemSelect.innerHTML = '<option value="">Pilih Item</option>';
            let dataToUse = {};

            if (selectedType === 'bahan_baku') {
                dataToUse = bahanBakusData;
            } else if (selectedType === 'produk_jadi') {
                dataToUse = produkJadisData;
            }

            for (const id in dataToUse) {
                const option = document.createElement('option');
                option.value = id;
                option.textContent = `${dataToUse[id].nama} (Stok: ${dataToUse[id].stok_saat_ini.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${dataToUse[id].satuan})`;
                option.dataset.stok = dataToUse[id].stok_saat_ini; // Simpan stok di dataset
                itemSelect.appendChild(option);
            }

            // Set selected item if in edit mode or old input
            if (selectedItemId) {
                itemSelect.value = selectedItemId;
                updateStokDisplay(); // Update display for pre-selected item
            } else {
                stokSaatIniDisplay.value = '0.00'; // Reset display if no item selected
            }
        }

        function updateStokDisplay() {
            const selectedOption = itemSelect.options[itemSelect.selectedIndex];
            if (selectedOption && selectedOption.dataset.stok) {
                stokSaatIniDisplay.value = parseFloat(selectedOption.dataset.stok).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            } else {
                stokSaatIniDisplay.value = '0.00';
            }
        }

        // Event Listeners
        itemTypeSelect.addEventListener('change', function() {
            const selectedType = this.value;
            populateItemSelect(selectedType);
            updateStokDisplay(); // Reset display when type changes
        });

        itemSelect.addEventListener('change', updateStokDisplay);

        // Initial load for edit mode or old input
        const oldItemType = '{{ old('item_type', $penyesuaian->item_type ?? '') }}';
        const oldItemId = '{{ old('item_id', $penyesuaian->item_id ?? '') }}';

        if (oldItemType) {
            // Adjust oldItemType to match 'bahan_baku' or 'produk_jadi' strings for JS logic
            const jsItemType = oldItemType.includes('BahanBaku') ? 'bahan_baku' : (oldItemType.includes('ProdukJadi') ? 'produk_jadi' : '');
            itemTypeSelect.value = jsItemType;
            populateItemSelect(jsItemType, oldItemId);
        } else {
            // If no old input, ensure item select is disabled/empty initially
            itemSelect.innerHTML = '<option value="">Pilih Item (Pilih Tipe Item Dulu)</option>';
        }
        updateStokDisplay(); // Ensure stok display is correct on initial load
    });
</script>