@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Preview Shipping Labels Import</h1>
    <p class="mt-1 text-sm text-gray-500">Review the extracted data before importing</p>
</div>

<!-- Summary -->
<div class="grid grid-cols-1 gap-5 sm:grid-cols-4 mb-6">
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">Total Pages</dt>
        <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ $result['total_pages'] }}</dd>
    </div>
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">Orders Found</dt>
        <dd class="mt-1 text-2xl font-semibold text-green-600">{{ $result['parsed'] }}</dd>
    </div>
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">COD Orders</dt>
        <dd class="mt-1 text-2xl font-semibold text-yellow-600">{{ $result['summary']['cod_orders'] ?? 0 }}</dd>
    </div>
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">Total Qty</dt>
        <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ $result['summary']['total_qty'] ?? 0 }}</dd>
    </div>
</div>

@if(!empty($result['errors']))
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">Some pages had issues</h3>
            <ul class="mt-2 text-sm text-yellow-700 list-disc list-inside">
                @foreach(array_slice($result['errors'], 0, 5) as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endif

<!-- Preview Table -->
<div class="bg-white shadow rounded-lg overflow-hidden mb-6">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
        <h3 class="text-lg leading-6 font-medium text-gray-900">Data Preview (First 20 records)</h3>
    </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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tracking</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receiver</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Postcode</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Seller SKU</th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">COD</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach(array_slice($result['orders'], 0, 20) as $order)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $order['order_id'] ?? '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $order['tracking_number'] ?? '-' }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ $order['receiver_name'] ?? '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $order['postcode'] ?? '-' }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900 truncate max-w-xs">{{ $order['product_name'] ?? '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">{{ $order['seller_sku'] ?? '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-center">
                        @if($order['is_cod'] ?? false)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">COD</span>
                        @else
                            <span class="text-gray-400">-</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Actions -->
<div class="flex justify-end space-x-3">
    <a href="{{ route('shipping-labels.upload') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
        Cancel
    </a>
    <form action="{{ route('shipping-labels.import') }}" method="POST">
        @csrf
        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
            Confirm Import ({{ $result['parsed'] }} records)
        </button>
    </form>
</div>
@endsection