{{-- 業務データ統合インポート専用ロット選択モーダル --}}
<div x-data="businessLotSelectionModal()" x-show="isOpen" x-cloak
     class="fixed inset-0 z-50 overflow-y-auto" 
     @keydown.escape.window="closeModal()">
    
    {{-- オーバーレイ --}}
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
         @click="closeModal()"></div>
    
    {{-- モーダルコンテンツ --}}
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative w-full max-w-5xl bg-white rounded-lg shadow-xl transform transition-all"
             @click.stop>
            
            {{-- ヘッダー --}}
            <div class="flex items-center justify-between p-6 border-b border-gray-200">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">出荷ロット選択</h3>
                    <div class="mt-1 text-sm text-gray-600">
                        <div>商品コード: <span class="font-mono" x-text="modalData.product_code"></span></div>
                        <div>JANコード: <span class="font-mono" x-text="modalData.jan_code"></span></div>
                        <div>商品名: <span x-text="modalData.product_name"></span></div>
                        <div>必要数量: <span x-text="modalData.required_quantity"></span>個</div>
                    </div>
                </div>
                <button @click="closeModal()" 
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
            
            {{-- コンテンツ --}}
            <div class="p-6">
                {{-- ローディング表示 --}}
                <div x-show="isLoading" class="text-center py-8">
                    <i class="fa-solid fa-spinner fa-spin text-2xl text-blue-500"></i>
                    <div class="mt-2 text-gray-600">ロット情報を読み込み中...</div>
                </div>
                
                {{-- エラー表示 --}}
                <div x-show="errorMessage" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
                    <div class="flex">
                        <i class="fa-solid fa-exclamation-triangle text-red-400 mr-2"></i>
                        <div class="text-red-700" x-text="errorMessage"></div>
                    </div>
                </div>
                
                {{-- ロット一覧 --}}
                <div x-show="!isLoading && lots.length > 0">
                    {{-- 選択状況サマリー --}}
                    <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
                        <div class="flex justify-between items-center">
                            <div class="text-sm text-blue-700">
                                選択合計: <span class="font-semibold" x-text="totalSelectedQty"></span>個 / 
                                必要数量: <span class="font-semibold" x-text="modalData.required_quantity"></span>個 / 
                                利用可能: <span class="font-semibold" x-text="modalData.total_available"></span>個
                            </div>
                            <div class="text-xs text-blue-600">
                                ※ 賞味期限の古い順に表示されています（FIFO）
                            </div>
                        </div>
                        <div class="mt-2">
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-600 h-2 rounded-full transition-all duration-300" 
                                     :style="`width: ${modalData.required_quantity > 0 ? Math.min((totalSelectedQty / modalData.required_quantity) * 100, 100) : 0}%`"></div>
                            </div>
                        </div>
                    </div>
                    
                    {{-- 自動選択ボタン --}}
                    <div class="mb-4 flex justify-between items-center">
                        <div class="text-sm text-gray-600">
                            ロット選択操作:
                        </div>
                        <div class="flex space-x-2">
                            <button @click="autoSelectFIFO()" 
                                    class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors">
                                <i class="fa-solid fa-magic mr-1"></i>
                                FIFO自動選択
                            </button>
                            <button @click="clearAllSelections()" 
                                    class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
                                <i class="fa-solid fa-eraser mr-1"></i>
                                全クリア
                            </button>
                        </div>
                    </div>
                    
                    {{-- ロット選択テーブル --}}
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        賞味期限
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        ロット番号
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        倉庫
                                    </th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        在庫数
                                    </th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        引当済
                                    </th>
                                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        利用可能
                                    </th>
                                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        選択数量
                                    </th>
                                    <th class="px-4 py-3 text-center 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, index) in lots" :key="lot.inventory_lot_id">
                                    <tr :class="lot.is_expired ? 'bg-red-50' : (lot.days_until_expiry <= 7 ? 'bg-yellow-50' : '')">
                                        {{-- 賞味期限 --}}
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <span class="text-sm font-mono" 
                                                      :class="lot.is_expired ? 'text-red-600' : (lot.days_until_expiry <= 7 ? 'text-yellow-600' : 'text-gray-900')"
                                                      x-text="lot.expiration_date"></span>
                                                <span x-show="lot.is_expired" 
                                                      class="ml-2 px-2 py-1 text-xs bg-red-100 text-red-800 rounded-full">
                                                    期限切れ
                                                </span>
                                                <span x-show="!lot.is_expired && lot.days_until_expiry <= 7" 
                                                      class="ml-2 px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">
                                                    期限間近
                                                </span>
                                            </div>
                                            <div class="text-xs text-gray-500" x-text="lot.expiration_date_formatted"></div>
                                        </td>
                                        
                                        {{-- ロット番号 --}}
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900" x-text="lot.lot_number || '-'"></div>
                                        </td>
                                        
                                        {{-- 倉庫 --}}
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900" x-text="lot.warehouse_name"></div>
                                        </td>
                                        
                                        {{-- 在庫数 --}}
                                        <td class="px-4 py-3 whitespace-nowrap text-right">
                                            <div class="text-sm text-gray-900" x-text="lot.total_quantity.toLocaleString()"></div>
                                        </td>
                                        
                                        {{-- 引当済 --}}
                                        <td class="px-4 py-3 whitespace-nowrap text-right">
                                            <div class="text-sm text-gray-600" x-text="lot.allocated_quantity.toLocaleString()"></div>
                                        </td>
                                        
                                        {{-- 利用可能 --}}
                                        <td class="px-4 py-3 whitespace-nowrap text-right">
                                            <div class="text-sm font-semibold" 
                                                 :class="lot.available_quantity > 0 ? 'text-green-600' : 'text-red-600'"
                                                 x-text="lot.available_quantity.toLocaleString()"></div>
                                        </td>
                                        
                                        {{-- 選択数量 --}}
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            <input type="number" 
                                                   x-model.number="lot.selected_quantity"
                                                   @input="updateTotalSelected()"
                                                   :max="lot.available_quantity"
                                                   min="0"
                                                   step="1"
                                                   :disabled="lot.available_quantity <= 0"
                                                   class="w-20 px-2 py-1 text-sm border border-gray-300 rounded-md text-center focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                                   :class="lot.selected_quantity > lot.available_quantity ? 'border-red-500 bg-red-50' : ''" />
                                        </td>
                                        
                                        {{-- 操作 --}}
                                        <td class="px-4 py-3 whitespace-nowrap text-center">
                                            <div class="flex justify-center space-x-1">
                                                <button @click="setMaxQuantity(index)" 
                                                        :disabled="lot.available_quantity <= 0"
                                                        class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                                    最大
                                                </button>
                                                <button @click="clearQuantity(index)" 
                                                        class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
                                                    クリア
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                {{-- データなし表示 --}}
                <div x-show="!isLoading && lots.length === 0" class="text-center py-8">
                    <i class="fa-solid fa-inbox text-3xl text-gray-400 mb-2"></i>
                    <div class="text-gray-500">利用可能なロットがありません</div>
                    <div class="text-xs text-gray-400 mt-1">この商品の在庫が不足している可能性があります</div>
                </div>
            </div>
            
            {{-- フッター --}}
            <div class="flex items-center justify-between p-6 border-t border-gray-200 bg-gray-50">
                <div class="text-sm text-gray-600">
                    選択合計: <span class="font-semibold text-blue-600" x-text="totalSelectedQty"></span>個 / 
                    必要数量: <span class="font-semibold text-gray-900" x-text="modalData.required_quantity"></span>個
                    <span x-show="totalSelectedQty < modalData.required_quantity" class="text-red-600 ml-2">
                        (不足: <span x-text="modalData.required_quantity - totalSelectedQty"></span>個)
                    </span>
                    <span x-show="totalSelectedQty >= modalData.required_quantity" class="text-green-600 ml-2">
                        <i class="fa-solid fa-check"></i> 必要数量を満たしています
                    </span>
                </div>
                <div class="flex space-x-3">
                    <button @click="closeModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        キャンセル
                    </button>
                    <button @click="saveLotSelection()" 
                            :disabled="totalSelectedQty <= 0 || isLoading"
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fa-solid fa-save mr-1"></i>
                        選択を保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function businessLotSelectionModal() {
    return {
        isOpen: false,
        isLoading: false,
        errorMessage: '',
        modalData: {
            product_code: '',
            jan_code: '',
            product_name: '',
            required_quantity: 0,
            total_available: 0
        },
        lots: [],
        totalSelectedQty: 0,
        onSaveCallback: null,
        
        // モーダルを開く
        openModal(productCode, janCode, productName, requiredQuantity, existingSelections = [], warehouseId = null, onSaveCallback = null) {
            this.isOpen = true;
            this.isLoading = true;
            this.errorMessage = '';
            this.modalData = {
                product_code: productCode,
                jan_code: janCode,
                product_name: productName,
                required_quantity: requiredQuantity,
                warehouse_id: warehouseId,
                total_available: 0
            };
            this.lots = [];
            this.totalSelectedQty = 0;
            this.onSaveCallback = onSaveCallback;
            
            this.loadLotData(existingSelections);
        },
        
        // モーダルを閉じる
        closeModal() {
            this.isOpen = false;
            this.isLoading = false;
            this.errorMessage = '';
            this.lots = [];
            this.totalSelectedQty = 0;
            this.onSaveCallback = null;
        },
        
        // ロットデータを読み込み
        async loadLotData(existingSelections = []) {
            try {
                const response = await fetch('/csv-import/business/lot/get-lot-data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        product_code: this.modalData.product_code,
                        jan_code: this.modalData.jan_code,
                        required_quantity: this.modalData.required_quantity,
                        warehouse_id: this.modalData.warehouse_id
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.modalData.total_available = data.data.total_available;
                    this.lots = data.data.lots;
                    
                    // 既存の選択を復元
                    this.restoreExistingSelections(existingSelections);
                    
                    this.updateTotalSelected();
                } else {
                    this.errorMessage = data.message || 'ロットデータの取得に失敗しました。';
                }
            } catch (error) {
                console.error('ロットデータ取得エラー:', error);
                this.errorMessage = 'ロットデータの取得中にエラーが発生しました。';
            } finally {
                this.isLoading = false;
            }
        },
        
        // 既存の選択を復元
        restoreExistingSelections(existingSelections) {
            if (!existingSelections || existingSelections.length === 0) {
                return;
            }
            
            existingSelections.forEach(existing => {
                const lot = this.lots.find(l => l.inventory_lot_id === existing.inventory_lot_id);
                if (lot) {
                    lot.selected_quantity = existing.selected_quantity;
                }
            });
        },
        
        // 選択合計を更新
        updateTotalSelected() {
            this.totalSelectedQty = this.lots.reduce((total, lot) => {
                return total + (lot.selected_quantity || 0);
            }, 0);
        },
        
        // 最大数量を設定（必要数量を超えないように制限）
        setMaxQuantity(index) {
            // 現在のロットの選択数量を除いた、他のロットの選択合計を計算
            const otherLotsSelectedQty = this.lots.reduce((total, lot, i) => {
                return i === index ? total : total + (lot.selected_quantity || 0);
            }, 0);
            
            // 残り必要数量を計算
            const remainingRequired = this.modalData.required_quantity - otherLotsSelectedQty;
            
            // 利用可能数量と残り必要数量の小さい方を選択（0以上）
            const maxSelectableQty = Math.min(this.lots[index].available_quantity, Math.max(0, remainingRequired));
            
            this.lots[index].selected_quantity = maxSelectableQty;
            this.updateTotalSelected();
        },
        
        // 数量をクリア
        clearQuantity(index) {
            this.lots[index].selected_quantity = 0;
            this.updateTotalSelected();
        },
        
        // FIFO自動選択
        autoSelectFIFO() {
            // 全てクリア
            this.clearAllSelections();
            
            let remainingQty = this.modalData.required_quantity;
            
            // 賞味期限の古い順（期限切れは除く）で自動選択
            const availableLots = this.lots.filter(lot => !lot.is_expired && lot.available_quantity > 0);
            
            for (const lot of availableLots) {
                if (remainingQty <= 0) break;
                
                const selectQty = Math.min(remainingQty, lot.available_quantity);
                lot.selected_quantity = selectQty;
                remainingQty -= selectQty;
            }
            
            this.updateTotalSelected();
            
            if (remainingQty > 0) {
                alert(`在庫不足のため、${remainingQty}個が不足しています。`);
            }
        },
        
        // 全選択をクリア
        clearAllSelections() {
            this.lots.forEach(lot => {
                lot.selected_quantity = 0;
            });
            this.updateTotalSelected();
        },
        
        // ロット選択を保存
        saveLotSelection() {
            if (this.totalSelectedQty <= 0) {
                alert('出荷数量を選択してください。');
                return;
            }
            
            const selectedLots = this.lots
                .filter(lot => lot.selected_quantity > 0)
                .map(lot => ({
                    inventory_lot_id: lot.inventory_lot_id,
                    expiration_date: lot.expiration_date,
                    lot_number: lot.lot_number,
                    warehouse_name: lot.warehouse_name,
                    selected_quantity: lot.selected_quantity,
                    available_quantity: lot.available_quantity
                }));
            
            console.log('Saving lot selection:', selectedLots);
            
            // コールバック関数を呼び出し
            if (this.onSaveCallback) {
                this.onSaveCallback(selectedLots);
            }
            
            this.closeModal();
        }
    };
}
</script>

<style>
[x-cloak] { display: none !important; }
</style>