@extends('layouts.frontend')

@section('title', 'Track Order')

@section('content')
<div class="container py-5">
  <h2 class="text-uppercase mb-4">Track Your Order</h2>
  
  <div class="row">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h5>Order #{{ $order->order_number }}</h5>
        </div>
        <div class="card-body">
          <div class="order-tracking">
            <div class="tracking-step {{ $order->status == 'pending' || $order->status == 'accepted' || $order->status == 'dispatched' || $order->status == 'delivered' ? 'active' : '' }}">
              <div class="step-icon">1</div>
              <div class="step-label">Order Placed</div>
              <div class="step-date">{{ $order->created_at->format('M d, Y') }}</div>
            </div>
            <div class="tracking-step {{ $order->status == 'accepted' || $order->status == 'dispatched' || $order->status == 'delivered' ? 'active' : '' }}">
              <div class="step-icon">2</div>
              <div class="step-label">Order Accepted</div>
            </div>
            <div class="tracking-step {{ $order->status == 'dispatched' || $order->status == 'delivered' ? 'active' : '' }}">
              <div class="step-icon">3</div>
              <div class="step-label">Dispatched</div>
              @if($order->tracking_number)
                <div class="step-info">Tracking: {{ $order->tracking_number }}</div>
              @endif
            </div>
            <div class="tracking-step {{ $order->status == 'delivered' ? 'active' : '' }}">
              <div class="step-icon">4</div>
              <div class="step-label">Delivered</div>
              @if($order->estimated_arrival_date)
                <div class="step-date">Est. Arrival: {{ $order->estimated_arrival_date->format('M d, Y') }}</div>
              @endif
            </div>
          </div>
          
          @if($order->delivery_company)
            <div class="mt-4">
              <p><strong>Delivery Company:</strong> {{ $order->delivery_company }}</p>
            </div>
          @endif
          
          @if($order->tracking_number)
            <div class="mt-3">
              <p><strong>Tracking Number:</strong> {{ $order->tracking_number }}</p>
            </div>
          @endif
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h5>Order Summary</h5>
        </div>
        <div class="card-body">
          <p><strong>Total:</strong> ${{ number_format($order->total_amount, 2) }}</p>
          <p><strong>Status:</strong> <span class="badge bg-{{ $order->status == 'delivered' ? 'success' : ($order->status == 'pending' ? 'warning' : 'info') }}">{{ ucfirst($order->status) }}</span></p>
          <a href="{{ route('orders.show', $order->id) }}" class="btn btn-primary w-100 mt-3">View Order Details</a>
        </div>
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
.order-tracking {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.tracking-step {
  flex: 1;
  text-align: center;
  position: relative;
  opacity: 0.5;
}
.tracking-step.active {
  opacity: 1;
}
.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.tracking-step.active .step-icon {
  background: #d9d577;
  color: white;
}
</style>
@endpush
@endsection