@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Preview TikTok Sales Import</h1>
    <p class="mt-1 text-sm text-gray-500">Review the parsed 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 Rows</dt>
        <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ $result['total_rows'] }}</dd>
    </div>
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">Parsed Successfully</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">Total Revenue</dt>
        <dd class="mt-1 text-2xl font-semibold text-gray-900">RM {{ number_format($result['summary']['total_revenue'], 2) }}</dd>
    </div>
    <div class="bg-white overflow-hidden shadow rounded-lg p-5">
        <dt class="text-sm font-medium text-gray-500">Net Settlement</dt>
        <dd class="mt-1 text-2xl font-semibold text-green-600">RM {{ number_format($result['summary']['total_settlement'], 2) }}</dd>
    </div>
</div>

<!-- 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 rows)</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">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Fees</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Settlement</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach(array_slice($result['transactions'], 0, 20) as $transaction)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $transaction['order_id'] }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $transaction['type'] === 'Order' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $transaction['type'] }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $transaction['order_date'] }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">RM {{ number_format($transaction['total_revenue'], 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 text-right">RM {{ number_format($transaction['total_fees'], 2) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 text-right">RM {{ number_format($transaction['net_settlement'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Actions -->
<div class="flex justify-end space-x-3">
    <a href="{{ route('tiktok-sales.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('tiktok-sales.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