@extends('layouts.app')

@section('content')
    <!-- Order Migration Section -->
    <div class="section">
        <h2>🛒 Sales Order Migration</h2>
        <div class="info-box" style="margin-bottom: 20px;">
            <h3 style="margin-bottom: 10px; color: #1976D2; font-size: 1.1em;">What happens when you click "Start Order Migration"?</h3>
            <p style="margin: 5px 0; color: #1976D2;">The order migration process will:</p>
            <ul style="margin: 10px 0 0 20px; color: #1976D2; line-height: 1.8;">
                <li><strong>Create new orders:</strong> If an order with the same increment_id doesn't exist in Magento 2, it will be created with all its data</li>
                <li><strong>Update existing orders:</strong> If an order with the same increment_id already exists in Magento 2, it will be updated with the latest data from Magento 1</li>
                <li><strong>Migrate order items:</strong> All order items including products, quantities, prices, and options will be migrated</li>
                <li><strong>Migrate order addresses:</strong> Billing and shipping addresses will be migrated</li>
                <li><strong>Migrate order payments:</strong> Payment information and transaction data will be migrated</li>
                <li><strong>Preserve order data:</strong> Order status, timestamps, and customer associations will be preserved</li>
                <li><strong>Generate logs:</strong> Detailed migration logs showing which orders were added, updated, or encountered errors</li>
            </ul>
            <p style="margin: 10px 0 0 0; color: #d32f2f; font-weight: 600;">⚠️ <strong>Warning:</strong> This will modify your Magento 2 database. Make sure you have a backup before proceeding.</p>
        </div>
        
        <div style="margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
            <button id="startOrderMigrationBtn" class="btn btn-primary">
                Start Order Migration
            </button>
        </div>
        
        <!-- Progress Bar -->
        <div id="migrationProgressContainer" style="display: none; margin-top: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span id="progressStatus" style="font-weight: 600; color: #333;">Starting migration...</span>
                <span id="progressPercentage" style="font-weight: 600; color: #1976D2;">0%</span>
            </div>
            <div style="width: 100%; height: 24px; background-color: #e0e0e0; border-radius: 12px; overflow: hidden;">
                <div id="progressBar" style="width: 0%; height: 100%; background: linear-gradient(90deg, #1976D2 0%, #42a5f5 100%); transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.85em; font-weight: 600;"></div>
            </div>
            <div id="progressDetails" style="margin-top: 8px; font-size: 0.9em; color: #666;">
                <span id="currentOrder">-</span> | 
                Added: <span id="progressAdded">0</span> | 
                Updated: <span id="progressUpdated">0</span> | 
                Errors: <span id="progressErrors">0</span>
            </div>
        </div>
    </div>

    <!-- Migration Logs Section -->
    <div class="section" style="margin-top: 30px;">
        <h2>📋 Order Migration Logs</h2>
        <p style="margin-bottom: 15px; color: #666;">Detailed logs showing which orders were added, updated, or encountered errors during migration:</p>
        <div class="log-container" id="orderMigrationLogContainer" style="display: block;">
            <div id="orderMigrationLogContent">
                <div class="log-entry" style="color: #999; font-style: italic;">
                    No order migration logs yet. Click "Start Order Migration" to begin.
                </div>
            </div>
        </div>
    </div>

    <!-- Order Statistics -->
    <div class="section" style="margin-top: 30px;">
        <h2>📊 Order Statistics</h2>
        <div class="stats">
            <div class="stat-card">
                <div class="number" id="statM1Orders">{{ $m1Orders->count() }}</div>
                <div class="label">Magento 1 Orders</div>
            </div>
            <div class="stat-card">
                <div class="number" id="statM2Orders">{{ $m2Orders->count() }}</div>
                <div class="label">Magento 2 Orders</div>
            </div>
            <div class="stat-card">
                <div class="number" id="statM1NotInM2">{{ $m1OrdersNotInM2->count() }}</div>
                <div class="label">M1 Orders Not in M2</div>
            </div>
            <div class="stat-card">
                <div class="number" id="statM2NotInM1">{{ $m2OrdersNotInM1->count() }}</div>
                <div class="label">M2 Orders Not in M1</div>
            </div>
        </div>
    </div>

    <!-- Orders Not in M2 Section -->
    @if($m1OrdersNotInM2->count() > 0)
    <div class="section" style="margin-top: 30px;">
        <h2>⚠️ Magento 1 Orders Not in Magento 2</h2>
        <p>These orders exist in Magento 1 but are missing in Magento 2:</p>
        <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 400px; overflow-y: auto; margin-top: 15px;">
            <table class="products-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Increment ID</th>
                        <th>Customer Email</th>
                        <th>Status</th>
                        <th>Grand Total</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($m1OrdersNotInM2->take(50) as $order)
                        <tr>
                            <td>{{ $order->entity_id }}</td>
                            <td>{{ $order->increment_id ?? 'N/A' }}</td>
                            <td>{{ $order->customer_email ?? 'N/A' }}</td>
                            <td>{{ $order->status ?? 'N/A' }}</td>
                            <td>{{ $order->grand_total ?? 'N/A' }}</td>
                            <td>{{ $order->created_at ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @if($m1OrdersNotInM2->count() > 50)
                <p style="margin-top: 15px; color: #666;">Showing first 50 of {{ $m1OrdersNotInM2->count() }} orders.</p>
            @endif
        </div>
    </div>
    @endif

    <!-- Orders Not in M1 Section -->
    @if($m2OrdersNotInM1->count() > 0)
    <div class="section" style="margin-top: 30px;">
        <h2>⚠️ Magento 2 Orders Not in Magento 1</h2>
        <p>These orders exist in Magento 2 but are missing in Magento 1:</p>
        <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 400px; overflow-y: auto; margin-top: 15px;">
            <table class="products-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Increment ID</th>
                        <th>Customer Email</th>
                        <th>Status</th>
                        <th>Grand Total</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($m2OrdersNotInM1->take(50) as $order)
                        <tr>
                            <td>{{ $order->entity_id }}</td>
                            <td>{{ $order->increment_id ?? 'N/A' }}</td>
                            <td>{{ $order->customer_email ?? 'N/A' }}</td>
                            <td>{{ $order->status ?? 'N/A' }}</td>
                            <td>{{ $order->grand_total ?? 'N/A' }}</td>
                            <td>{{ $order->created_at ?? 'N/A' }}</td>
                            <td>
                                <button 
                                    class="btn btn-danger" 
                                    onclick="deleteM2Order({{ $order->entity_id }}, '{{ addslashes($order->increment_id ?? 'N/A') }}')"
                                    style="padding: 6px 12px; font-size: 0.85em;">
                                    Delete
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @if($m2OrdersNotInM1->count() > 50)
                <p style="margin-top: 15px; color: #666;">Showing first 50 of {{ $m2OrdersNotInM1->count() }} orders.</p>
            @endif
        </div>
    </div>
    @endif
@endsection

{{-- CSS is loaded globally via app.css --}}

@push('scripts')
    @vite(['resources/js/orders.js'])
    <script>
        window.orderRoutes = {
            migrateOrders: '{{ route("orders.migrate-orders") }}',
            deleteOrder: '{{ route("orders.delete-order", ["orderId" => ":id"]) }}',
            migrationProgress: '{{ route("orders.migration-progress") }}',
            statistics: '{{ route("orders.statistics") }}'
        };
    </script>
@endpush