@extends('layouts.app')

@section('title', 'Order ' . $order->order_number)

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Order #{{ $order->order_number }}</h1>
            <p class="mt-1 text-sm text-gray-600">Placed on {{ $order->order_date->format('M j, Y g:i A') }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('seller.orders.index') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to Orders
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Order Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Status Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-2xl font-bold text-gray-900">{{ $order->items->sum('quantity') }}</div>
                    <div class="text-sm text-gray-600">Items</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-2xl font-bold text-green-600">${{ number_format($order->total_amount, 2) }}</div>
                    <div class="text-sm text-gray-600">Total Amount</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-sm font-medium {{ $order->getStatusBadgeClass() }} px-2 py-1 rounded-full">
                        {{ ucfirst($order->status) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">Order Status</div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow text-center">
                    <div class="text-sm font-medium {{ $order->getPaymentStatusBadgeClass() }} px-2 py-1 rounded-full">
                        {{ ucfirst($order->payment_status) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">Payment</div>
                </div>
            </div>

            <!-- Order Items -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Order Items</h3>
                </div>
                <div class="p-6">
                    @foreach($order->items as $item)
                        <div class="flex items-center space-x-4 py-4 {{ !$loop->last ? 'border-b border-gray-200' : '' }}">
                            <img src="{{ $item->product->getFirstImageUrl() }}" 
                                 alt="{{ $item->product->name }}"
                                 class="w-16 h-16 object-cover rounded">
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-900">{{ $item->product->name }}</h4>
                                <p class="text-sm text-gray-600">Your Product</p>
                            </div>
                            <div class="text-right">
                                <p class="font-medium text-gray-900">${{ number_format($item->unit_price, 2) }}</p>
                                <p class="text-sm text-gray-600">Qty: {{ $item->quantity }}</p>
                                <p class="font-medium text-green-600">${{ number_format($item->total_price, 2) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Shipping Information -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Shipping Information</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-medium text-gray-900 mb-2">Shipping Address</h4>
                            <p class="text-gray-600 whitespace-pre-line">{{ $order->shipping_address }}</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900 mb-2">Order Notes</h4>
                            <p class="text-gray-600">{{ $order->notes ?: 'No special instructions' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Shipments -->
            @if($order->shipments->count() > 0)
                <div class="bg-white shadow rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Shipment Tracking</h3>
                    </div>
                    <div class="p-6">
                        @foreach($order->shipments as $shipment)
                            <div class="border border-gray-200 rounded-lg p-4 mb-4">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900">{{ $shipment->carrier }}</h4>
                                        <p class="text-sm text-gray-600">Tracking #: {{ $shipment->tracking_number }}</p>
                                    </div>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $shipment->getStatusBadgeClass() }}">
                                        {{ ucfirst($shipment->status) }}
                                    </span>
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <p class="text-gray-600">Shipped Date</p>
                                        <p class="font-medium">{{ $shipment->shipment_date->format('M j, Y') }}</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-600">Est. Delivery</p>
                                        <p class="font-medium">{{ $shipment->estimated_delivery->format('M j, Y') }}</p>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a href="{{ $shipment->getTrackingUrl() }}" 
                                       target="_blank"
                                       class="text-blue-600 hover:text-blue-500 text-sm font-medium">
                                        Track Shipment →
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar - Order Actions -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Order Status Update -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Order Actions</h3>
                </div>
                <div class="p-6 space-y-4">
                    <!-- Status Update -->
                    <form action="{{ route('seller.orders.update-status', $order) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                                Update Order Status
                            </label>
                            <select name="status" id="status" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
                                <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="confirmed" {{ $order->status === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped</option>
                                <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                                <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>
                        <button type="submit" 
                                class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors">
                            Update Status
                        </button>
                    </form>

                    <!-- Create Shipment -->
                    @if($order->status === 'confirmed' || $order->status === 'pending')
                        <button onclick="openShipmentModal()"
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium flex items-center justify-center transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                            Create DHL Shipment
                        </button>
                    @endif

                    <!-- Print Shipping Label -->
                    @if($order->shipments->count() > 0)
                        <a href="{{ route('seller.orders.print-label', $order) }}" 
                           target="_blank"
                           class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium flex items-center justify-center transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                            </svg>
                            Print Shipping Label
                        </a>
                    @endif

                    <!-- Chat with Buyer -->
                    @php
                        $chat = \App\Models\Chat::where('product_id', $order->items->first()->product_id)
                            ->where('buyer_id', $order->buyer_id)
                            ->where('seller_id', $order->seller_id)
                            ->first();
                    @endphp
                    
                    @if($chat)
                        <a href="{{ route('chats.show', $chat) }}" 
                           class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium flex items-center justify-center transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            Chat with Buyer
                        </a>
                    @endif
                </div>
            </div>

            <!-- Buyer Information -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Buyer Information</h3>
                </div>
                <div class="p-6">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="flex-shrink-0">
                            <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                <span class="text-blue-600 font-medium text-sm">
                                    {{ strtoupper(substr($order->buyer->name, 0, 1)) }}
                                </span>
                            </div>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">{{ $order->buyer->name }}</p>
                            <p class="text-sm text-gray-600">{{ $order->buyer->email }}</p>
                            @if($order->buyer->company_name)
                                <p class="text-sm text-gray-500">{{ $order->buyer->company_name }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Shipment Modal -->
<div id="shipmentModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg max-w-md w-full mx-4 max-h-90vh overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Create DHL Shipment</h3>
                <button type="button" onclick="closeShipmentModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <!-- DHL Rates -->
            <div id="dhlRates" class="mb-4 space-y-2">
                <div class="text-center py-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                    <p class="text-sm text-gray-600 mt-2">Loading DHL rates...</p>
                </div>
            </div>

            <form id="shipmentForm" action="{{ route('seller.orders.create-shipment', $order) }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label for="carrier" class="block text-sm font-medium text-gray-700 mb-2">
                            Carrier
                        </label>
                        <select name="carrier" id="carrier" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="DHL">DHL Express</option>
                            <option value="FedEx">FedEx</option>
                            <option value="UPS">UPS</option>
                        </select>
                    </div>

                    <div>
                        <label for="tracking_number" class="block text-sm font-medium text-gray-700 mb-2">
                            Tracking Number
                        </label>
                        <input type="text" name="tracking_number" id="tracking_number" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter tracking number">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="shipment_date" class="block text-sm font-medium text-gray-700 mb-2">
                                Shipment Date
                            </label>
                            <input type="date" name="shipment_date" id="shipment_date" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ date('Y-m-d') }}">
                        </div>
                        <div>
                            <label for="estimated_delivery" class="block text-sm font-medium text-gray-700 mb-2">
                                Estimated Delivery
                            </label>
                            <input type="date" name="estimated_delivery" id="estimated_delivery" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ date('Y-m-d', strtotime('+3 days')) }}">
                        </div>
                    </div>

                    <div>
                        <label for="shipping_cost" class="block text-sm font-medium text-gray-700 mb-2">
                            Shipping Cost ($)
                        </label>
                        <input type="number" name="shipping_cost" id="shipping_cost" required step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00">
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button" onclick="closeShipmentModal()" 
                            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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Create Shipment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openShipmentModal() {
    const modal = document.getElementById('shipmentModal');
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Load DHL rates
    loadDHLRates();
}

function closeShipmentModal() {
    const modal = document.getElementById('shipmentModal');
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

function loadDHLRates() {
    fetch('{{ route("seller.orders.dhl-rates", $order) }}')
        .then(response => response.json())
        .then(data => {
            const ratesContainer = document.getElementById('dhlRates');
            
            if (data.error) {
                ratesContainer.innerHTML = `
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <p class="text-sm text-red-600">Failed to load DHL rates: ${data.error}</p>
                    </div>
                `;
                return;
            }
            
            let ratesHTML = '<h4 class="font-medium text-gray-900 mb-3">DHL Shipping Options</h4>';
            
            data.forEach(rate => {
                ratesHTML += `
                    <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-blue-500 transition-colors"
                         onclick="selectShippingRate('${rate.service}', ${rate.cost})">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="font-medium text-gray-900">${rate.service}</p>
                                <p class="text-sm text-gray-600">${rate.delivery_time}</p>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-green-600">$${rate.cost.toFixed(2)}</p>
                                <button type="button" class="text-blue-600 text-sm font-medium">Select</button>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            ratesContainer.innerHTML = ratesHTML;
        })
        .catch(error => {
            console.error('Error loading DHL rates:', error);
            const ratesContainer = document.getElementById('dhlRates');
            ratesContainer.innerHTML = `
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <p class="text-sm text-yellow-600">Unable to load DHL rates. Please check your connection.</p>
                </div>
            `;
        });
}

function selectShippingRate(service, cost) {
    document.getElementById('carrier').value = 'DHL';
    document.getElementById('shipping_cost').value = cost.toFixed(2);
    
    // Add service note
    const notes = `DHL ${service} - Automatic rate selection`;
    if (!document.querySelector('#notes')) {
        const form = document.getElementById('shipmentForm');
        const notesInput = document.createElement('input');
        notesInput.type = 'hidden';
        notesInput.name = 'notes';
        notesInput.id = 'notes';
        notesInput.value = notes;
        form.appendChild(notesInput);
    } else {
        document.getElementById('notes').value = notes;
    }
}

// Close modal when clicking outside
document.getElementById('shipmentModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeShipmentModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeShipmentModal();
    }
});
</script>

<style>
.max-h-90vh {
    max-height: 90vh;
}
</style>
@endsection