{{-- 受注詳細モーダル --}}
<x-modal id="order_detail_{{ $order['edi_order_number'] }}" maxWidth="4xl">
    <main class="p-6">
            
        {{-- ヘッダー --}}
        <div class="pb-4 border-b">
            <h3 class="text-lg font-medium text-gray-900">受注詳細</h3>
        </div>
            
        {{-- 受注ヘッダー情報 --}}
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">EDI受注番号</label>
                <p class="mt-1 text-sm text-gray-900">{{ $order['edi_order_number'] }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">受注日</label>
                <p class="mt-1 text-sm text-gray-900">{{ $order['order_date'] }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">出荷予定日</label>
                <p class="mt-1 text-sm text-gray-900">{{ $order['shipment_date'] ?? '' }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">到着日</label>
                <p class="mt-1 text-sm text-gray-900">{{ $order['delivery_date'] ?? '' }}</p>
            </div>
        </div>
        
        {{-- 配送先情報 --}}
        <div class="mt-6">
            <h4 class="text-md font-medium text-gray-900 mb-3">配送先情報</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">配送先名称</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $order['delivery_name'] }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">電話番号</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $order['delivery_phone'] ?? '' }}</p>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700">配送先住所</label>
                    <p class="mt-1 text-sm text-gray-900">
                        @if(isset($order['delivery_postal_code']))
                            〒{{ $order['delivery_postal_code'] }} 
                        @endif
                        {{ $order['delivery_address'] }}
                    </p>
                </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 w-16">No</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">JANコード</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-right text-xs font-medium text-gray-500 uppercase tracking-wider w-32 whitespace-nowrap">発注数量</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-32 whitespace-nowrap">出荷数量</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {{-- モックデータ表示 --}}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">1</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono">4901234567890</td>
                            <td class="px-6 py-4 text-sm text-gray-900">冷凍食品A（賞味期限管理）500g×12個入</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(10) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(10) }}</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">2</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono">4901234567891</td>
                            <td class="px-6 py-4 text-sm text-gray-900">一般商品B（ロット管理なし）1個</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(20) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(20) }}</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">3</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono">4901234567892</td>
                            <td class="px-6 py-4 text-sm text-gray-900">電子機器C 1台</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(5) }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">{{ number_format(5) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
            
    </main>
    
    <footer class="py-3 px-3 flex gap-3 items-center justify-end border-t">
        <x-button.modal-close data-micromodal-close>閉じる</x-button.modal-close>
    </footer>
</x-modal>