@extends('customer.layout')

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

@section('content')
<h4 class="fw-bold mb-4">
    Tracking Order #{{ $order->order_no }}
</h4>

<div class="row g-4">

    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-body">
                <h6 class="fw-bold mb-3">Order Status</h6>

                <ul class="list-group">
                    <li class="list-group-item {{ $order->status === 'pending' ? 'active' : '' }}">
                        Pending
                    </li>
                    <li class="list-group-item {{ $order->status === 'shipped' ? 'active' : '' }}">
                        Shipped
                    </li>
                    <li class="list-group-item {{ $order->status === 'delivered' ? 'active' : '' }}">
                        Delivered
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card shadow-sm">
            <div class="card-body">
                <h6 class="fw-bold mb-3">Live Location</h6>

                <div class="ratio ratio-16x9 rounded overflow-hidden">
                    <iframe
                        src="https://maps.google.com/maps?q={{ urlencode($order->address) }}&output=embed"
                        loading="lazy">
                    </iframe>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection