@extends('customer.layout')

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

@section('content')

<h3 class="fw-bold mb-4">Track Your Order</h3>

{{-- ERROR --}}
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        {{ session('error') }}
        <button class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- SEARCH --}}
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <form method="POST" action="{{ route('customer.tracking.search') }}">
            @csrf

            <label class="form-label fw-semibold">Order Number</label>
            <div class="input-group">
                <input type="text"
                       name="order_no"
                       class="form-control"
                       placeholder="ORD-1001"
                       required>
                <button class="btn btn-primary">
                    Track
                </button>
            </div>
        </form>
    </div>
</div>

{{-- RESULT --}}
@if(isset($order))

<div class="card shadow-sm">
    <div class="card-body">

        <h5 class="fw-bold mb-3">
            Order #{{ $order->order_no }}
        </h5>

        <div class="row g-3">

            <div class="col-md-6">
                <strong>Status:</strong><br>
                <span class="badge
                    bg-{{ $order->status === 'delivered' ? 'success' :
                         ($order->status === 'pending' ? 'warning' : 'secondary') }}">
                    {{ ucfirst($order->status) }}
                </span>
            </div>

            <div class="col-md-6">
                <strong>Amount:</strong><br>
                LKR {{ number_format($order->amount,2) }}
            </div>

            <div class="col-md-6">
                <strong>Delivery Address:</strong><br>
                {{ $order->address }}
            </div>

            <div class="col-md-6">
                <strong>Last Update:</strong><br>
                {{ $order->updated_at->format('d M Y, h:i A') }}
            </div>

        </div>

        {{-- TIMELINE --}}
        <hr>

        <ul class="list-group list-group-flush">

            <li class="list-group-item">
                📦 Order Created
            </li>

            <li class="list-group-item">
                🚚 Pickup Scheduled
            </li>

            <li class="list-group-item">
                📍 In Transit
            </li>

            <li class="list-group-item">
                ✅ Delivered
            </li>

        </ul>

    </div>
</div>

@endif

@endsection