{{--
    This partial view is used by both create.blade.php and edit.blade.php for Pesanan Penjualan.
    It expects:
    - $pelanggans: Collection of Pelanggan models for the dropdown.
    - $produkJadis: Collection of ProdukJadi models for the dropdown in item rows.
    - $pesananPenjualan (optional): PesananPenjualan model instance for edit mode.
    - $detailPesananPenjualan (optional): Collection of DetailPesananPenjualan models for edit mode.
--}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div>
        <label for="no_po" class="block text-gray-700 text-sm font-bold mb-2">Nomor PO:</label>
        <input type="text" id="no_po" name="no_po" 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: PO-2023-001" required value="{{ old('no_po', $pesananPenjualan->no_po ?? '') }}">
        @error('no_po')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="tanggal_pesanan" class="block text-gray-700 text-sm font-bold mb-2">Tanggal Pesanan:</label>
        <input type="date" id="tanggal_pesanan" name="tanggal_pesanan" 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_pesanan', $pesananPenjualan->tanggal_pesanan ?? date('Y-m-d')) }}">
        @error('tanggal_pesanan')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="pelanggan_id" class="block text-gray-700 text-sm font-bold mb-2">Pelanggan:</label>
        <select id="pelanggan_id" name="pelanggan_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 Pelanggan</option>
            @foreach ($pelanggans as $pelanggan)
                <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id', $pesananPenjualan->pelanggan_id ?? '') == $pelanggan->id ? 'selected' : '' }}>
                    {{ $pelanggan->nama }}
                </option>
            @endforeach
        </select>
        @error('pelanggan_id')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label for="tanggal_estimasi_selesai" class="block text-gray-700 text-sm font-bold mb-2">Tanggal Estimasi Selesai (Opsional):</label>
        <input type="date" id="tanggal_estimasi_selesai" name="tanggal_estimasi_selesai" 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" value="{{ old('tanggal_estimasi_selesai', $pesananPenjualan->tanggal_estimasi_selesai ?? '') }}">
        @error('tanggal_estimasi_selesai')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    @if (isset($pesananPenjualan)) {{-- Hanya tampilkan di mode edit --}}
    <div>
        <label for="status" class="block text-gray-700 text-sm font-bold mb-2">Status Pesanan:</label>
        <select id="status" name="status" 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="baru" {{ old('status', $pesananPenjualan->status ?? '') == 'baru' ? 'selected' : '' }}>Baru</option>
            <option value="diproses" {{ old('status', $pesananPenjualan->status ?? '') == 'diproses' ? 'selected' : '' }}>Diproses</option>
            <option value="siap_kirim" {{ old('status', $pesananPenjualan->status ?? '') == 'siap_kirim' ? 'selected' : '' }}>Siap Kirim</option>
            <option value="selesai" {{ old('status', $pesananPenjualan->status ?? '') == 'selesai' ? 'selected' : '' }}>Selesai</option>
            <option value="dibatalkan" {{ old('status', $pesananPenjualan->status ?? '') == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
        </select>
        @error('status')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
    @endif
    <div class="md:col-span-2">
        <label for="keterangan" class="block text-gray-700 text-sm font-bold mb-2">Keterangan (Opsional):</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="Catatan tambahan tentang pesanan ini">{{ old('keterangan', $pesananPenjualan->keterangan ?? '') }}</textarea>
        @error('keterangan')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
</div>

<h3 class="font-semibold text-gray-800 mb-4 border-b pb-2">Detail Item Pesanan</h3>
<div class="overflow-x-auto  border border-gray-200 mb-4">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-blue-700 text-white text-xs">
            <tr>
                <th scope="col" class="px-3 py-3 text-left text-xs font-medium  uppercase tracking-wider">Produk Jadi</th>
                <th scope="col" class="px-3 py-3 text-center text-xs font-medium  uppercase tracking-wider">Kuantitas</th>
                <th scope="col" class="px-3 py-3 text-center text-xs font-medium  uppercase tracking-wider">Harga Satuan</th>
                <th scope="col" class="px-3 py-3 text-center text-xs font-medium  uppercase tracking-wider">Jumlah</th>
                <th scope="col" class="px-3 py-3 text-center text-xs font-medium  uppercase tracking-wider">Aksi</th>
            </tr>
        </thead>
        <tbody id="order-items-body" class="bg-white divide-y divide-gray-200">
            {{-- Item rows will be added here by JavaScript or pre-filled for edit --}}
            @if (isset($detailPesananPenjualan) && $detailPesananPenjualan->count() > 0)
                @foreach ($detailPesananPenjualan as $index => $detail)
                    <tr class="order-item-row">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            <select name="items[{{ $index }}][produk_jadi_id]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm product-select" required>
                                <option value="">Pilih Produk Jadi</option>
                                @foreach ($produkJadis as $produkJadi)
                                    <option value="{{ $produkJadi->id }}"
                                            data-harga-jual="{{ $produkJadi->harga_jual }}"
                                            data-stok-saat-ini="{{ $produkJadi->stok_saat_ini }}"
                                            data-satuan="{{ $produkJadi->satuan }}"
                                            {{ old("items.{$index}.produk_jadi_id", $detail->produk_jadi_id) == $produkJadi->id ? 'selected' : '' }}>
                                        {{ $produkJadi->nama }} (Stok: {{ number_format($produkJadi->stok_saat_ini, 2, ',', '.') }} {{ $produkJadi->satuan }})
                                    </option>
                                @endforeach
                            </select>
                            @error("items.{$index}.produk_jadi_id")<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <input type="number" step="0.01" name="items[{{ $index }}][kuantitas]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-center quantity-input" value="{{ old("items.{$index}.kuantitas", $detail->kuantitas) }}" min="0.01" required>
                            @error("items.{$index}.kuantitas")<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <input type="number" step="0.01" name="items[{{ $index }}][harga_satuan]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-center price-input" value="{{ old("items.{$index}.harga_satuan", $detail->harga_satuan) }}" min="0" required>
                            @error("items.{$index}.harga_satuan")<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500 item-subtotal">
                            Rp {{ number_format($detail->subtotal, 2, ',', '.') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                            <button type="button" class="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50 transition-colors duration-200 remove-item-btn" title="Hapus Item">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"><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"></path></svg>
                            </button>
                        </td>
                    </tr>
                @endforeach
            @endif
        </tbody>
        <tfoot>
            <tr class="bg-gray-50">
                <td colspan="3" class="px-6 py-3 text-right text-sm font-bold text-gray-800">Total Pesanan:</td>
                <td id="grand-total" class="px-6 py-3 text-center text-sm font-bold text-blue-600">Rp 0,00</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</div>

<button type="button" id="add-item-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2  transition-all duration-200 transform hover:scale-105">
    <i class="fas fa-plus mr-2"></i>
            Add Item
</button>

{{-- Hidden template for new item row --}}
<template id="order-item-template">
    <tr class="order-item-row">
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
            <select name="items[INDEX_PLACEHOLDER][produk_jadi_id]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm product-select" required>
                <option value="">Pilih Produk Jadi</option>
                {{-- Options will be populated by JavaScript --}}
            </select>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            <input type="number" step="0.01" name="items[INDEX_PLACEHOLDER][kuantitas]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-center quantity-input" value="1" min="0.01" required>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            <input type="number" step="0.01" name="items[INDEX_PLACEHOLDER][harga_satuan]" class="block w-full border-gray-300  shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-center price-input" value="0" min="0" required>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500 item-subtotal">
            Rp 0,00
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
            <button type="button" class="text-red-600 hover:text-red-900 p-2  hover:bg-red-50 transition-colors duration-200 remove-item-btn" title="Hapus Item">
                <i class="fas fa-trash-alt mr-2"></i>
        </td>
    </tr>
</template>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const orderItemsBody = document.getElementById('order-items-body');
        const addItemBtn = document.getElementById('add-item-btn');
        const itemTemplate = document.getElementById('order-item-template');
        const grandTotalElement = document.getElementById('grand-total');

        // Data produk jadi dari PHP ke JavaScript, termasuk harga jual dan stok saat ini
        @php
            $mappedProdukJadis = $produkJadis->mapWithKeys(function ($item) {
                return [$item->id => [
                    'nama' => $item->nama,
                    'satuan' => $item->satuan,
                    'harga_jual' => $item->harga_jual,
                    'stok_saat_ini' => $item->stok_saat_ini // Stok saat ini tidak relevan untuk pesanan, tapi bisa ditampilkan
                ]];
            });
            echo "const produkJadisData = " . json_encode($mappedProdukJadis) . ";";
        @endphp

        let itemIndex = orderItemsBody.children.length; // Start index for new rows

        // Function to update subtotal for a single item row and then grand total
        function updateItemSubtotal(row) {
            const productSelect = row.querySelector('.product-select');
            const quantityInput = row.querySelector('.quantity-input');
            const priceInput = row.querySelector('.price-input');
            const itemSubtotalElement = row.querySelector('.item-subtotal');

            const selectedProdukJadiId = productSelect.value;
            const quantity = parseFloat(quantityInput.value) || 0;
            const price = parseFloat(priceInput.value) || 0;
            const subtotal = quantity * price;

            itemSubtotalElement.textContent = 'Rp ' + subtotal.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            updateGrandTotal();
        }

        // Function to update the grand total of all items
        function updateGrandTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.order-item-row').forEach(row => {
                const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
                const price = parseFloat(row.querySelector('.price-input').value) || 0;
                grandTotal += (quantity * price);
            });
            grandTotalElement.textContent = 'Rp ' + grandTotal.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        // Function to add a new item row
        function addNewItemRow(initialProdukJadiId = '', initialKuantitas = '', initialHargaSatuan = '') {
            const clone = itemTemplate.content.cloneNode(true);
            const newRow = clone.querySelector('.order-item-row');

            // Replace placeholder index with actual index
            newRow.innerHTML = newRow.innerHTML.replace(/INDEX_PLACEHOLDER/g, itemIndex);

            const productSelect = newRow.querySelector('.product-select');
            const quantityInput = newRow.querySelector('.quantity-input');
            const priceInput = newRow.querySelector('.price-input');
            const removeItemBtn = newRow.querySelector('.remove-item-btn');

            // Populate produk jadi dropdown
            for (const id in produkJadisData) {
                const produkJadi = produkJadisData[id];
                const option = document.createElement('option');
                option.value = id;
                option.textContent = `${produkJadi.nama} (Stok: ${produkJadi.stok_saat_ini.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${produkJadi.satuan})`;
                productSelect.appendChild(option);
            }

            // Set initial values for edit mode or old input
            if (initialProdukJadiId) {
                productSelect.value = initialProdukJadiId;
                const selectedProdukJadi = produkJadisData[initialProdukJadiId];
                if (selectedProdukJadi) {
                    priceInput.value = initialHargaSatuan || selectedProdukJadi.harga_jual;
                }
            }
            if (initialKuantitas) {
                quantityInput.value = initialKuantitas;
            }


            // Add event listeners for inputs
            productSelect.addEventListener('change', function() {
                const selectedProdukJadi = produkJadisData[this.value];
                if (selectedProdukJadi) {
                    priceInput.value = selectedProdukJadi.harga_jual;
                } else {
                    priceInput.value = 0;
                }
                updateItemSubtotal(newRow);
            });

            quantityInput.addEventListener('input', () => updateItemSubtotal(newRow));
            priceInput.addEventListener('input', () => updateItemSubtotal(newRow));

            // Add event listener for remove button
            removeItemBtn.addEventListener('click', function() {
                newRow.remove();
                updateGrandTotal(); // Recalculate total after removing a row
                updateRowIndexes(); // Update indexes after removing
            });

            orderItemsBody.appendChild(newRow);
            itemIndex++; // Increment index for next row
            updateItemSubtotal(newRow); // Calculate initial subtotal for the new row
            updateRowIndexes(); // Update indexes after adding
        }

        // Function to re-index row names after add/remove
        function updateRowIndexes() {
            Array.from(orderItemsBody.children).forEach((row, idx) => {
                row.querySelectorAll('[name^="items["]').forEach(input => {
                    const currentName = input.getAttribute('name');
                    input.setAttribute('name', currentName.replace(/items\[\d+\]/, `items[${idx}]`));
                });
            });
            itemIndex = orderItemsBody.children.length; // Reset itemIndex based on actual rows
        }


        // Add event listener to the "Tambah Item" button
        if (addItemBtn) {
            addItemBtn.addEventListener('click', () => addNewItemRow());
        }

        // Initial setup for existing rows (on edit page or if old input exists on create)
        document.querySelectorAll('.order-item-row').forEach(row => {
            const productSelect = row.querySelector('.product-select');
            const quantityInput = row.querySelector('.quantity-input');
            const priceInput = row.querySelector('.price-input');

            // Re-attach event listeners for existing rows
            productSelect.addEventListener('change', function() {
                const selectedProdukJadi = produkJadisData[this.value];
                if (selectedProdukJadi) {
                    priceInput.value = selectedProdukJadi.harga_jual;
                } else {
                    priceInput.value = 0;
                }
                updateItemSubtotal(row);
            });
            quantityInput.addEventListener('input', () => updateItemSubtotal(row));
            priceInput.addEventListener('input', () => updateItemSubtotal(row));

            row.querySelector('.remove-item-btn').addEventListener('click', function() {
                row.remove();
                updateGrandTotal();
                updateRowIndexes();
            });

            updateItemSubtotal(row); // Calculate subtotal for pre-filled rows
        });

        // Ensure grand total is calculated on page load
        if (orderItemsBody.children.length === 0 && !('{{ isset($pesananPenjualan) }}' === '1')) {
            // Only add an initial row if there are no existing items and it's not an edit page
            addNewItemRow();
        } else {
            // If there are existing items, just update the grand total
            updateGrandTotal();
        }
    });
</script>