{{--
    欠品商品 一括出荷予定日設定モーダル

    使用画面:
    - トラスコ中山 納期回答入力 (response-input.blade.php)
    - ヨドバシカメラ JANコード別出荷・次回予定入力 (jan-code-shipment-schedule.blade.php)

    機能:
    - 欠品商品（出荷数0）を商品単位で選択
    - 選択商品の全明細に出荷予定日を一括設定（DOM操作のみ、DB更新なし）
    - 既存の[一括更新]ボタンでDB保存
--}}

<div x-data="bulkShortageSettingModal()"
     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="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden"
             @click.stop>

            {{-- ヘッダー --}}
            <div class="bg-gray-50 px-6 py-4 border-b flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-900">
                    <i class="fa-solid fa-boxes-stacked mr-2"></i>
                    欠品商品 出荷予定日設定
                </h3>
                <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 overflow-y-auto" style="max-height: calc(90vh - 140px);">

                {{-- 欠品商品がない場合 --}}
                <template x-if="shortageProducts.length === 0">
                    <div class="text-center py-8 text-gray-500">
                        <i class="fa-solid fa-check-circle text-4xl text-green-500 mb-3"></i>
                        <p>欠品商品はありません</p>
                    </div>
                </template>

                {{-- 欠品商品がある場合 --}}
                <template x-if="shortageProducts.length > 0">
                    <div>
                        {{-- 商品選択エリア --}}
                        <div class="mb-6">
                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                欠品商品を選択
                            </label>
                            <select x-model="selectedJanCode"
                                    @change="onProductSelect()"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">-- 商品を選択してください --</option>
                                <template x-for="product in shortageProducts" :key="product.jan_code">
                                    <option :value="product.jan_code"
                                            :disabled="product.is_set"
                                            :class="{ 'text-gray-400': product.is_set }"
                                            x-text="getProductOptionText(product)">
                                    </option>
                                </template>
                            </select>
                            <div class="text-sm text-gray-500 mt-1">
                                残り <span class="font-bold" x-text="remainingCount"></span>商品
                            </div>
                        </div>

                        {{-- 区切り線 --}}
                        <hr class="my-4" x-show="selectedProduct">

                        {{-- 選択商品の詳細エリア --}}
                        <template x-if="selectedProduct">
                            <div class="bg-gray-50 rounded-lg p-4">
                                {{-- 商品情報 --}}
                                <div class="mb-4">
                                    <h4 class="font-bold text-gray-800 mb-2" x-text="selectedProduct.product_name"></h4>
                                    <div class="text-sm text-gray-600 space-y-1">
                                        <div>JANコード: <span class="font-mono" x-text="selectedProduct.jan_code"></span></div>
                                        <div>対象明細: <span class="font-bold" x-text="selectedProduct.detail_count"></span>件（合計注文数: <span x-text="selectedProduct.total_order_qty.toLocaleString()"></span>個）</div>
                                    </div>
                                </div>

                                {{-- 出荷予定日入力 --}}
                                <div class="bg-white border rounded-lg p-4 mb-4">
                                    <label class="block text-sm font-bold text-gray-700 mb-2">出荷予定日</label>
                                    <input type="date"
                                           x-model="inputShipmentDate"
                                           @change="updatePreview()"
                                           class="w-48 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
                                </div>

                                {{-- プレビュー --}}
                                <template x-if="previewDetails.length > 0 && inputShipmentDate">
                                    <div class="border rounded-lg overflow-hidden">
                                        <div class="bg-blue-50 px-3 py-2 text-sm font-bold text-blue-800">
                                            <i class="fa-solid fa-eye mr-1"></i>
                                            適用される明細
                                        </div>
                                        <div class="max-h-48 overflow-y-auto">
                                            <table class="min-w-full divide-y divide-gray-200">
                                                <thead class="bg-gray-50 sticky top-0">
                                                    <tr>
                                                        <th class="px-3 py-2 text-xs font-medium text-gray-500 text-left">納入先</th>
                                                        <th class="px-3 py-2 text-xs font-medium text-gray-500 text-right">注文数</th>
                                                        <th class="px-3 py-2 text-xs font-medium text-gray-500 text-center">現在</th>
                                                        <th class="px-3 py-2 text-xs font-medium text-gray-500 text-center">設定後の到着予定日</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200 bg-white">
                                                    <template x-for="detail in previewDetails" :key="detail.id">
                                                        <tr class="hover:bg-gray-50">
                                                            <td class="px-3 py-2 text-sm" x-text="detail.delivery_name"></td>
                                                            <td class="px-3 py-2 text-sm text-right" x-text="detail.order_qty.toLocaleString() + '個'"></td>
                                                            <td class="px-3 py-2 text-sm text-center text-gray-400" x-text="detail.current_shipment_date || '未設定'"></td>
                                                            <td class="px-3 py-2 text-sm text-center text-green-600 font-medium" x-text="'→ ' + detail.calculated_arrival_date"></td>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="bg-gray-50 px-3 py-2 text-xs text-gray-500">
                                            ※到着予定日は納入先のリードタイムに基づいて自動計算
                                        </div>
                                    </div>
                                </template>

                                {{-- 注意書き --}}
                                <div class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-xs text-yellow-800">
                                    <i class="fa-solid fa-info-circle mr-1"></i>
                                    [一括更新]ボタンで保存するまでDBには反映されません
                                </div>

                                {{-- 適用ボタン --}}
                                <div class="mt-4 text-right">
                                    <button @click="applyToProduct()"
                                            :disabled="!inputShipmentDate"
                                            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">
                                        <i class="fa-solid fa-check mr-1"></i>
                                        この商品に適用
                                    </button>
                                </div>
                            </div>
                        </template>

                        {{-- 全商品設定完了メッセージ --}}
                        <template x-if="remainingCount === 0 && !selectedProduct">
                            <div class="text-center py-8">
                                <i class="fa-solid fa-check-circle text-4xl text-green-500 mb-3"></i>
                                <p class="text-green-700 font-bold">すべての欠品商品に出荷予定日を設定しました</p>
                                <p class="text-sm text-gray-500 mt-2">[一括更新]ボタンで変更を保存してください</p>
                            </div>
                        </template>
                    </div>
                </template>
            </div>

            {{-- フッター --}}
            <div class="bg-gray-50 px-6 py-4 border-t flex justify-end">
                <button @click="closeModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
                    閉じる
                </button>
            </div>
        </div>
    </div>
</div>

<script>
/**
 * 欠品商品一括出荷予定日設定モーダル Alpine.jsコンポーネント
 */
function bulkShortageSettingModal() {
    return {
        isOpen: false,
        shortageProducts: [],
        selectedJanCode: '',
        selectedProduct: null,
        inputShipmentDate: null,
        previewDetails: [],

        /**
         * モーダルを開く
         */
        openModal() {
            this.isOpen = true;
            this.resetSelection();
            this.shortageProducts = this.collectShortageProductsFromDOM();
        },

        /**
         * 親画面のDOMから欠品商品を収集
         * 出荷数が0の明細をJANコードでグループ化
         */
        collectShortageProductsFromDOM() {
            const products = new Map();

            // 全てのテーブル行をスキャン（data-detail-id属性を持つ行のみ = 1行目）
            document.querySelectorAll('tr[data-detail-id]').forEach(row => {
                const detailId = row.dataset.detailId;

                // 出荷数入力欄を取得（2行目にあるため、次の兄弟要素から取得）
                const nextRow = row.nextElementSibling;
                const shipmentQtyInput = nextRow?.querySelector('input[name*="[shipment_qty]"]');
                if (!shipmentQtyInput) return;

                const shipmentQty = parseInt(shipmentQtyInput.value) || 0;

                // 出荷数が0の明細のみ対象（欠品）
                if (shipmentQty !== 0) return;

                // JANコードを取得（1行目の3列目: font-monoクラスを持つセル）
                const janCodeCell = row.querySelector('td.font-mono');
                const janCode = janCodeCell?.textContent?.trim();
                if (!janCode) return;

                // 商品名を取得（1行目の4列目: rowspan="2"を持つセル）
                const cells = row.querySelectorAll('td');
                let productName = '';
                // セルを順番に確認して商品名を特定
                for (const cell of cells) {
                    if (cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') === '2') {
                        // No列(1列目)と納入先列(2列目)はrowspan="2"だがクラスが異なる
                        // 商品名セルはrowspan="2"で、text-center/text-rightを持たない
                        if (!cell.classList.contains('text-center') && !cell.classList.contains('text-right')) {
                            productName = cell.textContent?.trim() || '';
                            break;
                        }
                    }
                }

                // 注文数を取得（1行目の6列目: text-rightクラスを持つセルのうち2番目）
                // 1行目の構造: No, 納入先, JANコード, 商品名, 在庫数, 注文数, 出荷予定日, 到着予定日, 備考
                const textRightCells = row.querySelectorAll('td.text-right');
                let orderQty = 0;
                if (textRightCells.length >= 2) {
                    // 2番目のtext-rightセルが注文数
                    orderQty = parseInt(textRightCells[1]?.textContent?.replace(/,/g, '')) || 0;
                }

                // グループ化
                if (!products.has(janCode)) {
                    products.set(janCode, {
                        jan_code: janCode,
                        product_name: productName || janCode,
                        detail_ids: [],
                        detail_count: 0,
                        total_order_qty: 0,
                        is_set: false,
                        set_date: null
                    });
                }

                const product = products.get(janCode);
                product.detail_ids.push(detailId);
                product.detail_count++;
                product.total_order_qty += orderQty;
            });

            return Array.from(products.values());
        },

        /**
         * 商品選択時の処理
         */
        onProductSelect() {
            this.inputShipmentDate = null;
            this.previewDetails = [];

            if (!this.selectedJanCode) {
                this.selectedProduct = null;
                return;
            }

            this.selectedProduct = this.shortageProducts.find(p => p.jan_code === this.selectedJanCode);

            if (this.selectedProduct) {
                this.previewDetails = this.collectDetailInfoFromDOM(this.selectedProduct.detail_ids);
            }
        },

        /**
         * 親画面のDOMから明細情報を収集
         */
        collectDetailInfoFromDOM(detailIds) {
            return detailIds.map(detailId => {
                const row = document.querySelector(`tr[data-detail-id="${detailId}"]`);
                if (!row) return null;

                // 納入先を取得（2列目: rowspan="2"、text-center）
                // 1列目(No)も同じ属性を持つため、2番目のセルを取得
                const cells = row.querySelectorAll('td');
                let deliveryName = '';
                let centerCount = 0;
                for (const cell of cells) {
                    if (cell.hasAttribute('rowspan') &&
                        cell.getAttribute('rowspan') === '2' &&
                        cell.classList.contains('text-center')) {
                        centerCount++;
                        if (centerCount === 2) {  // 2番目のセル = 納入先
                            deliveryName = cell.textContent?.trim() || '';
                            break;
                        }
                    }
                }

                // 注文数を取得
                const textRightCells = row.querySelectorAll('td.text-right');
                let orderQty = 0;
                if (textRightCells.length >= 2) {
                    orderQty = parseInt(textRightCells[1]?.textContent?.replace(/,/g, '')) || 0;
                }

                // 現在の出荷予定日を取得
                const shipmentDateInput = row.querySelector('input[name*="[shipment_date]"]');
                const currentShipmentDate = shipmentDateInput?.value || null;

                // リードタイム日数を取得
                const leadTimeDays = parseInt(row.dataset.leadTimeDays) || 0;

                return {
                    id: detailId,
                    delivery_name: deliveryName,
                    order_qty: orderQty,
                    current_shipment_date: currentShipmentDate,
                    lead_time_days: leadTimeDays,
                    calculated_arrival_date: null
                };
            }).filter(d => d !== null);
        },

        /**
         * 到着予定日を計算してプレビューを更新
         * 既存のaddLeadtimeDays関数を使用
         */
        updatePreview() {
            if (!this.inputShipmentDate) {
                this.previewDetails.forEach(d => d.calculated_arrival_date = null);
                return;
            }

            this.previewDetails.forEach(detail => {
                // 既存のaddLeadtimeDays関数を使用（休日カレンダー考慮）
                if (typeof addLeadtimeDays === 'function') {
                    try {
                        const arrivalDate = addLeadtimeDays(this.inputShipmentDate, detail.lead_time_days);
                        detail.calculated_arrival_date = typeof formatDate === 'function'
                            ? formatDate(arrivalDate)
                            : this.formatDateSimple(arrivalDate);
                    } catch (e) {
                        console.error('Error calculating arrival date:', e);
                        detail.calculated_arrival_date = this.calculateSimpleArrivalDate(this.inputShipmentDate, detail.lead_time_days);
                    }
                } else {
                    // フォールバック: 単純な日数加算
                    detail.calculated_arrival_date = this.calculateSimpleArrivalDate(this.inputShipmentDate, detail.lead_time_days);
                }
            });
        },

        /**
         * 単純な日数加算（フォールバック用）
         */
        calculateSimpleArrivalDate(shipmentDateStr, days) {
            const shipDate = new Date(shipmentDateStr);
            shipDate.setDate(shipDate.getDate() + days);
            return this.formatDateSimple(shipDate);
        },

        /**
         * 日付をYYYY/MM/DD形式にフォーマット
         */
        formatDateSimple(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}/${month}/${day}`;
        },

        /**
         * 選択商品に出荷予定日を適用（DOM操作のみ）
         */
        applyToProduct() {
            if (!this.inputShipmentDate || !this.selectedProduct) return;

            // 選択商品の全明細に出荷予定日を設定
            this.selectedProduct.detail_ids.forEach(detailId => {
                const row = document.querySelector(`tr[data-detail-id="${detailId}"]`);
                if (!row) return;

                // 出荷予定日を設定
                const dateInput = row.querySelector('input[name*="[shipment_date]"]');
                if (dateInput) {
                    dateInput.value = this.inputShipmentDate;
                    // 黄色枠を追加（未保存を示す）
                    dateInput.classList.add('border-yellow-300');

                    // 既存のonchangeイベントを発火（到着予定日の自動計算をトリガー）
                    dateInput.dispatchEvent(new Event('change', { bubbles: true }));
                }

                // 到着予定日を更新（既存の関数が実行されない場合のフォールバック）
                const detail = this.previewDetails.find(d => d.id === detailId);
                if (detail && detail.calculated_arrival_date) {
                    const arrivalEl = document.getElementById(`arrival_date_${detailId}`);
                    if (arrivalEl) {
                        arrivalEl.textContent = detail.calculated_arrival_date;
                    }
                }
            });

            // 商品を「設定済み」に変更
            this.selectedProduct.is_set = true;
            this.selectedProduct.set_date = this.inputShipmentDate;

            // 選択をリセット（次の商品を選択できるようにする）
            this.resetSelection();
        },

        /**
         * 残り商品数を取得
         */
        get remainingCount() {
            return this.shortageProducts.filter(p => !p.is_set).length;
        },

        /**
         * 商品選択オプションのテキストを生成
         */
        getProductOptionText(product) {
            if (product.is_set) {
                return `✓ ${product.product_name} - 設定済み（${product.set_date}）`;
            }
            return `${product.product_name}（${product.jan_code}）- ${product.detail_count}件 / 合計${product.total_order_qty.toLocaleString()}個`;
        },

        /**
         * 選択をリセット
         */
        resetSelection() {
            this.selectedJanCode = '';
            this.selectedProduct = null;
            this.inputShipmentDate = null;
            this.previewDetails = [];
        },

        /**
         * モーダルを閉じる
         */
        closeModal() {
            this.isOpen = false;
        }
    };
}

/**
 * モーダルを開くグローバル関数
 */
function openBulkShortageModal() {
    const modalElement = document.querySelector('[x-data*="bulkShortageSettingModal"]');
    if (modalElement) {
        const modal = Alpine.$data(modalElement);
        if (modal) {
            modal.openModal();
        }
    }
}
</script>