@extends('layouts.admin')

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

@section('content')
<div class="row mb-4">
    <div class="col-md-12">
        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Orders
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- Order Details -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Order Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold w-25">Order Number:</td>
                        <td><code class="fs-5">{{ $order->order_number }}</code></td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Order Date:</td>
                        <td>{{ $order->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Status:</td>
                        <td>
                            <span class="badge {{ $order->status === 'delivered' ? 'bg-success' : ($order->status === 'cancelled' || $order->status === 'refunded' ? 'bg-danger' : 'bg-warning') }} fs-6">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Customer:</td>
                        <td>
                            @if($order->user)
                                <a href="{{ route('admin.users.show', $order->user) }}" class="text-decoration-none">
                                    {{ $order->user->name }}
                                </a>
                                <br>
                                <small class="text-muted">{{ $order->user->email }}</small>
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Payment Method:</td>
                        <td>
                            @php
                                $paymentMethod = $order->transactions->first()?->paymentMethod?->name ?? 'Not Set';
                            @endphp
                            <span class="badge bg-info">{{ $paymentMethod }}</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Shipping Information -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Shipping Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="fw-bold mb-3">Shipping Address</h6>
                        <p class="mb-0">
                            {{ $order->shipping_address }}<br>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-bold mb-3">Billing Address</h6>
                        <p class="mb-0">
                            {{ $order->billing_address }}<br>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Items -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Order Items</h5>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Product</th>
                            <th class="text-end">Price</th>
                            <th class="text-center">Quantity</th>
                            <th class="text-end">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($order->items as $item)
                            <tr>
                                <td>
                                    @if($item->product)
                                        <a href="{{ route('admin.products.show', $item->product) }}" class="text-decoration-none">
                                            {{ $item->product_name }}
                                        </a>
                                        <br>
                                        <small class="text-muted">SKU: {{ $item->product_sku }}</small>
                                    @else
                                        {{ $item->product_name }}
                                        <br>
                                        <small class="text-muted">SKU: {{ $item->product_sku }}</small>
                                    @endif
                                </td>
                                <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($item->price, 2) }}</td>
                                <td class="text-center">{{ $item->quantity }}</td>
                                <td class="text-end fw-bold">{{ \App\Support\Currency::symbol() }}{{ number_format($item->total, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    No items in this order
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Order Tracking -->
        @if($order->tracking && $order->tracking->count() > 0)
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">Order Tracking</h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        @foreach($order->tracking as $track)
                            <div class="timeline-item mb-4">
                                <div class="d-flex">
                                    <div class="timeline-marker me-3">
                                        <span class="badge bg-primary rounded-circle p-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-check"></i>
                                        </span>
                                    </div>
                                    <div class="timeline-content flex-grow-1">
                                        <h6 class="mb-1">{{ ucfirst(str_replace('_', ' ', $track->status)) }}</h6>
                                        <p class="text-muted small mb-1">{{ $track->created_at->format('M d, Y H:i') }}</p>
                                        @if($track->description)
                                            <p class="mb-1">{{ $track->description }}</p>
                                        @endif
                                        @if($track->location)
                                            <small class="text-muted">📍 {{ $track->location }}</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="col-md-4">
        <!-- Order Summary -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Order Summary</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <td class="text-muted">Subtotal:</td>
                        <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->subtotal, 2) }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Tax (10%):</td>
                        <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->tax, 2) }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Shipping:</td>
                        <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->shipping, 2) }}</td>
                    </tr>
                    @if($order->discount > 0)
                        <tr>
                            <td class="text-muted">Discount:</td>
                            <td class="text-end text-success">-{{ \App\Support\Currency::symbol() }}{{ number_format($order->discount, 2) }}</td>
                        </tr>
                    @endif
                    <tr class="border-top border-2">
                        <td class="fw-bold">Total:</td>
                        <td class="text-end fw-bold fs-5 text-primary">{{ \App\Support\Currency::symbol() }}{{ number_format($order->total, 2) }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Update Order Status -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Update Status</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.orders.updateStatus', $order) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="status" class="form-label">Order Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>Processing</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>
                            <option value="refunded" {{ $order->status === 'refunded' ? 'selected' : '' }}>Refunded</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-save me-2"></i>Update Order
                    </button>
                </form>
            </div>
        </div>

        <!-- Order Details Card -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Details</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm table-borderless">
                    <tr>
                        <td class="text-muted small">Created:</td>
                        <td class="small">{{ $order->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted small">Updated:</td>
                        <td class="small">{{ $order->updated_at->format('M d, Y H:i') }}</td>
                    </tr>
                </table>

                <!-- Delete Button -->
                <form action="{{ route('admin.orders.destroy', $order) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this order?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm w-100">
                        <i class="fas fa-trash me-1"></i>Delete Order
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .timeline-item {
        position: relative;
    }

    .timeline-marker {
        min-width: 40px;
    }
</style>
@endsection