{{-- 出荷ロット選択モーダル --}}
<div x-data="lotSelectionModal()" x-show="show" x-cloak 
     class="fixed inset-0 z-50 overflow-y-auto">
    
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
        
        <div class="inline-block w-full max-w-4xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
            
            {{-- ヘッダー --}}
            <div class="flex items-center justify-between pb-4 border-b">
                <h3 class="text-lg font-medium text-gray-900">出荷ロット確認</h3>
                <button @click="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            {{-- 商品情報表示 --}}
            <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
                <div class="flex">
                    <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                    </svg>
                    <div class="ml-3">
                        <h4 class="text-sm font-medium text-blue-800">商品情報</h4>
                        <div class="mt-2 text-sm text-blue-700">
                            <p><strong>JANコード:</strong> <span x-text="productData.jan_code"></span></p>
                            <p><strong>商品名:</strong> <span x-text="productData.product_name"></span></p>
                            <p><strong>出荷予定数量:</strong> <span x-text="productData.shipment_qty"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            
            {{-- ロット一覧 --}}
            <div class="mt-6">
                <h4 class="text-md font-medium text-gray-900 mb-3">在庫ロット一覧（賞味期限順）</h4>
                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">選択</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">賞味期限</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ロット番号</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">在庫数量</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">引当可能数量</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">出荷数量</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <template x-for="lot in availableLots" :key="lot.id">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" :value="lot.id" x-model="selectedLots" 
                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="formatDate(lot.expiration_date)"></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="lot.lot_number"></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="lot.quantity"></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="lot.available_quantity"></td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="number" :max="lot.available_quantity" min="0" 
                                               x-model="lotQuantities[lot.id]"
                                               class="w-20 px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
            
            {{-- 合計表示 --}}
            <div class="mt-4 p-3 bg-gray-50 rounded-md">
                <div class="flex justify-between text-sm">
                    <span>出荷予定数量:</span>
                    <span x-text="productData.shipment_qty"></span>
                </div>
                <div class="flex justify-between text-sm font-medium">
                    <span>選択済み合計:</span>
                    <span x-text="getTotalSelectedQuantity()" :class="{'text-red-600': getTotalSelectedQuantity() !== productData.shipment_qty}"></span>
                </div>
            </div>
            
            {{-- フッター --}}
            <div class="mt-6 flex justify-end space-x-3">
                <x-button.secondary @click="closeModal()">キャンセル</x-button.secondary>
                <x-button.primary @click="confirmLotSelection()" 
                                  :disabled="getTotalSelectedQuantity() !== productData.shipment_qty">確定</x-button.primary>
            </div>
        </div>
    </div>
</div>

<script>
function lotSelectionModal() {
    return {
        show: false,
        productData: {},
        availableLots: [],
        selectedLots: [],
        lotQuantities: {},
        
        openModal(productData, availableLots) {
            this.productData = productData;
            this.availableLots = availableLots;
            this.selectedLots = [];
            this.lotQuantities = {};
            this.show = true;
        },
        
        closeModal() {
            this.show = false;
            this.productData = {};
            this.availableLots = [];
            this.selectedLots = [];
            this.lotQuantities = {};
        },
        
        confirmLotSelection() {
            const selections = this.selectedLots.map(lotId => ({
                lot_id: lotId,
                quantity: this.lotQuantities[lotId] || 0
            })).filter(selection => selection.quantity > 0);
            
            this.$dispatch('lot-selected', {
                productId: this.productData.id,
                selections: selections
            });
            
            this.closeModal();
        },
        
        getTotalSelectedQuantity() {
            return Object.values(this.lotQuantities).reduce((total, qty) => total + (parseFloat(qty) || 0), 0);
        },
        
        formatDate(date) {
            return date ? new Date(date).toLocaleDateString('ja-JP') : '-';
        }
    }
}
</script>