{{-- EDI専用ロット選択モーダル --}}
<div x-data="ediLotSelectionModal()" 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-4xl 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>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.order_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.total_available"></span>個
                            </div>
                            <div class="text-xs text-blue-600">
                                ※ 賞味期限の古い順に表示されています
                            </div>
                        </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-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' : ''">
                                        {{-- 賞味期限 --}}
                                        <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' : '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>
                                            <div class="text-xs text-gray-500" 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 text-green-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"
                                                   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"
                                                   :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)" 
                                                        class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
                                                        :disabled="lot.available_quantity <= 0">
                                                    最大
                                                </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>
            </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>個
                </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 ediLotSelectionModal() {
    return {
        isOpen: false,
        isLoading: false,
        errorMessage: '',
        modalData: {
            jan_code: '',
            product_name: '',
            order_quantity: 0,
            total_available: 0,
            detail_id: null
        },
        lots: [],
        totalSelectedQty: 0,

        // モーダルを開く
        openModal(janCode, productName, orderQuantity, detailId) {
            this.isOpen = true;
            this.isLoading = true;
            this.errorMessage = '';
            this.modalData = {
                jan_code: janCode,
                product_name: productName,
                order_quantity: orderQuantity,
                total_available: 0,
                detail_id: detailId
            };
            this.lots = [];
            this.totalSelectedQty = 0;

            this.loadLotData();
        },
        
        // モーダルを閉じる
        closeModal() {
            this.isOpen = false;
            this.isLoading = false;
            this.errorMessage = '';
            this.lots = [];
            this.totalSelectedQty = 0;
        },
        
        // ロットデータを読み込み
        async loadLotData() {
            try {
                const response = await fetch('/edi-yodobashi/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({
                        jan_code: this.modalData.jan_code,
                        product_name: this.modalData.product_name,
                        order_quantity: this.modalData.order_quantity
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.modalData.total_available = data.data.total_available;
                    this.lots = data.data.lots;
                    this.updateTotalSelected();
                } else {
                    this.errorMessage = data.message || 'ロットデータの取得に失敗しました。';
                }
            } catch (error) {
                console.error('ロットデータ取得エラー:', error);
                this.errorMessage = 'ロットデータの取得中にエラーが発生しました。';
            } finally {
                this.isLoading = false;
            }
        },
        
        // 選択合計を更新
        updateTotalSelected() {
            this.totalSelectedQty = this.lots.reduce((total, lot) => {
                return total + (lot.selected_quantity || 0);
            }, 0);
        },
        
        // 最大数量を設定
        setMaxQuantity(index) {
            this.lots[index].selected_quantity = this.lots[index].available_quantity;
            this.updateTotalSelected();
        },
        
        // 数量をクリア
        clearQuantity(index) {
            this.lots[index].selected_quantity = 0;
            this.updateTotalSelected();
        },
        
        // ロット選択を保存
        async saveLotSelection() {
            if (this.totalSelectedQty <= 0) {
                alert('出荷数量を選択してください。');
                return;
            }
            
            this.isLoading = true;
            
            try {
                const selectedLots = this.lots.filter(lot => lot.selected_quantity > 0);
                
                const response = await fetch('/edi-yodobashi/lot/save-lot-selection', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        jan_code: this.modalData.jan_code,
                        selected_lots: selectedLots,
                        total_shipment_qty: this.totalSelectedQty
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    // 親画面のロット選択結果を更新
                    if (window.updateLotSelectionResult) {
                        window.updateLotSelectionResult(
                            this.modalData.jan_code,
                            this.totalSelectedQty,
                            data.data.lot_display_text,
                            this.modalData.detail_id
                        );
                    }

                    alert('ロット選択を保存しました。');
                    this.closeModal();
                } else {
                    this.errorMessage = data.message || 'ロット選択の保存に失敗しました。';
                }
            } catch (error) {
                console.error('ロット選択保存エラー:', error);
                this.errorMessage = 'ロット選択の保存中にエラーが発生しました。';
            } finally {
                this.isLoading = false;
            }
        }
    };
}
</script>

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