@extends('layouts.app')

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

@section('content')
<div class="hero-section">
    <div class="container">
        <h1 class="display-4 fw-bold">Track Order {{ $order->order_number }}</h1>
        <p class="lead">{{ $order->created_at->format('M d, Y \a\t h:i A') }}</p>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <!-- Order Status Cards -->
            <div class="row mb-5">
                <div class="col-md-6">
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h6 class="text-muted">Order Number</h6>
                            <h4>{{ $order->order_number }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h6 class="text-muted">Order Status</h6>
                            <h4>
                                <span class="badge 
                                    @if($order->status == 'pending') bg-warning
                                    @elseif($order->status == 'processing') bg-info
                                    @elseif($order->status == 'shipped') bg-primary
                                    @elseif($order->status == 'delivered') bg-success
                                    @elseif($order->status == 'cancelled') bg-danger
                                    @endif
                                ">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tracking Timeline -->
            <div class="card border-0 shadow-sm mb-5">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Tracking Timeline</h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <!-- Order Placed -->
                        <div class="timeline-item">
                            <div class="timeline-marker completed">
                                <i class="bi bi-check-circle-fill"></i>
                            </div>
                            <div class="timeline-content">
                                <h6>Order Placed</h6>
                                <p class="text-muted mb-0">{{ $order->created_at->format('M d, Y \a\t h:i A') }}</p>
                            </div>
                        </div>

                        <!-- Processing -->
                        <div class="timeline-item @if(in_array($order->status, ['pending', 'processing', 'shipped', 'delivered'])) completed @endif">
                            <div class="timeline-marker @if(in_array($order->status, ['processing', 'shipped', 'delivered'])) completed @endif">
                                <i class="bi bi-gear-fill"></i>
                            </div>
                            <div class="timeline-content">
                                <h6>Processing</h6>
                                <p class="text-muted mb-0">Your order is being prepared</p>
                            </div>
                        </div>

                        <!-- Shipped -->
                        <div class="timeline-item @if(in_array($order->status, ['shipped', 'delivered'])) completed @endif">
                            <div class="timeline-marker @if(in_array($order->status, ['shipped', 'delivered'])) completed @endif">
                                <i class="bi bi-box-seam-fill"></i>
                            </div>
                            <div class="timeline-content">
                                <h6>Shipped</h6>
                                @if($order->status == 'shipped' || $order->status == 'delivered')
                                    <p class="text-muted mb-0">{{ $order->updated_at->format('M d, Y \a\t h:i A') }}</p>
                                @else
                                    <p class="text-muted mb-0">Waiting to be shipped</p>
                                @endif
                            </div>
                        </div>

                        <!-- Delivered -->
                        <div class="timeline-item @if($order->status == 'delivered') completed @endif">
                            <div class="timeline-marker @if($order->status == 'delivered') completed @endif">
                                <i class="bi bi-check-circle-fill"></i>
                            </div>
                            <div class="timeline-content">
                                <h6>Delivered</h6>
                                @if($order->status == 'delivered')
                                    <p class="text-muted mb-0">{{ $order->updated_at->format('M d, Y \a\t h:i A') }}</p>
                                @else
                                    <p class="text-muted mb-0">Expected delivery date: 
                                        @if($order->expected_delivery_date)
                                            {{ \Carbon\Carbon::parse($order->expected_delivery_date)->format('M d, Y') }}
                                        @else
                                            TBD
                                        @endif
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tracking Information -->
            @if($order->tracking_number)
                <div class="card border-0 shadow-sm mb-5">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">Tracking Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <p class="text-muted mb-1">Tracking Number</p>
                                <p class="h6">{{ $order->tracking_number }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted mb-1">Carrier</p>
                                <p class="h6">{{ $order->carrier ?? 'Standard Shipping' }}</p>
                            </div>
                        </div>
                        @if($tracking)
                            <div class="alert alert-info">
                                <strong>Latest Update:</strong>
                                <p class="mb-0">{{ $tracking['status'] ?? 'No updates available' }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>Tracking not yet available</strong>
                    <p class="mb-0">Your order will receive a tracking number once it has been shipped.</p>
                </div>
            @endif

            <!-- Order Summary -->
            <div class="card border-0 shadow-sm mb-5">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Order Summary</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td><strong>Subtotal:</strong></td>
                                <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->subtotal, 2) }}</td>
                            </tr>
                            @if($order->discount_amount > 0)
                                <tr>
                                    <td><strong>Discount:</strong></td>
                                    <td class="text-end">-{{ \App\Support\Currency::symbol() }}{{ number_format($order->discount_amount, 2) }}</td>
                                </tr>
                            @endif
                            <tr>
                                <td><strong>Shipping:</strong></td>
                                <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->shipping_cost, 2) }}</td>
                            </tr>
                            <tr>
                                <td><strong>Tax:</strong></td>
                                <td class="text-end">{{ \App\Support\Currency::symbol() }}{{ number_format($order->tax, 2) }}</td>
                            </tr>
                            <tr style="border-top: 2px solid #e9ecef;">
                                <td><strong>Total:</strong></td>
                                <td class="text-end"><strong>{{ \App\Support\Currency::symbol() }}{{ number_format($order->total, 2) }}</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Actions -->
            <div class="mb-5">
                <a href="{{ route('user.orders.invoice', $order) }}" class="btn btn-outline-primary me-2">
                    <i class="bi bi-file-pdf"></i> View Invoice
                </a>
                <a href="{{ route('user.orders.show', $order) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Order
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .timeline {
        position: relative;
        padding: 20px 0;
    }
    .timeline-item {
        display: flex;
        margin-bottom: 30px;
        position: relative;
    }
    .timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 20px;
        top: 60px;
        width: 2px;
        height: calc(100% + 10px);
        background: #ddd;
    }
    .timeline-item.completed:not(:last-child)::after {
        background: #28a745;
    }
    .timeline-marker {
        width: 40px;
        height: 40px;
        background: #f8f9fa;
        border: 2px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 20px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }
    .timeline-marker.completed {
        background: #28a745;
        border-color: #28a745;
        color: white;
    }
    .timeline-content {
        margin-left: 20px;
        padding-top: 5px;
    }
    .timeline-content h6 {
        margin: 0 0 5px 0;
        font-weight: 600;
    }
    .timeline-content p {
        margin: 0;
        font-size: 14px;
    }
</style>
@endsection