@extends('layouts.app')
@section('title', 'Track Your Order')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-7">
            <h2 class="section-title text-center">অর্ডার ট্র্যাক করুন</h2>
            <p class="text-center text-muted mb-4">আপনার অর্ডার নম্বর এবং মোবাইল নম্বর দিয়ে ট্র্যাক করুন।</p>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <form action="{{ route('tracking.search') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Order Number</label>
                            <input type="text" name="order_number" class="form-control"
                                placeholder="ORD-XXXXXXXXXX" value="{{ request('order_number') ?? old('order_number') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Mobile Number</label>
                            <input type="text" name="mobile" class="form-control"
                                placeholder="01XXXXXXXXX" value="{{ old('mobile') }}" required>
                        </div>
                        <button type="submit" class="btn btn-danger w-100 py-2 fw-semibold">
                            <i class="bi bi-search me-2"></i>Track Now
                        </button>
                    </form>
                </div>
            </div>

            @if(request()->isMethod('post'))
                @if($order)
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div>
                                <h5 class="fw-bold mb-1">{{ $order->order_number }}</h5>
                                <span class="text-muted">Placed on {{ $order->created_at->format('d M Y') }}</span>
                            </div>
                            <span class="badge bg-{{ $order->status_badge }} fs-6 px-3 py-2">{{ ucfirst($order->status) }}</span>
                        </div>

                        {{-- ORDER ITEMS --}}
                        <div class="mb-4">
                            <h6 class="fw-bold text-muted mb-3">Items</h6>
                            @foreach($order->items as $item)
                            <div class="d-flex justify-content-between mb-1">
                                <span>{{ $item->product_name }} @if($item->variation_details)<small class="text-muted">({{ $item->variation_details }})</small>@endif</span>
                                <span class="fw-semibold">{{ $item->quantity }} × ৳{{ number_format($item->price, 0) }}</span>
                            </div>
                            @endforeach
                            <div class="d-flex justify-content-between mt-2 pt-2 border-top">
                                <strong>Total</strong>
                                <strong style="color:var(--primary)">৳{{ number_format($order->total, 0) }}</strong>
                            </div>
                        </div>

                        {{-- TRACKING TIMELINE --}}
                        <div>
                            <h6 class="fw-bold text-muted mb-3">Tracking History</h6>
                            @if($order->trackingUpdates->count() > 0)
                            <div class="timeline">
                                @foreach($order->trackingUpdates as $update)
                                <div class="d-flex gap-3 mb-3">
                                    <div style="flex-shrink:0">
                                        <div style="width:36px;height:36px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center">
                                            <i class="bi bi-truck text-white" style="font-size:16px"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 border-start ps-3 pb-3" style="border-color:#eee!important">
                                        <div class="fw-semibold" style="color:var(--dark)">{{ $update->status }}</div>
                                        <div class="text-muted" style="font-size:13px">{{ $update->message }}</div>
                                        <div class="text-muted mt-1" style="font-size:12px">{{ $update->created_at->format('d M Y, h:i A') }}</div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="text-center py-3">
                                <i class="bi bi-hourglass-split" style="font-size:36px;color:#ddd"></i>
                                <p class="text-muted mt-2">Your order is being processed. Tracking updates will appear here soon.</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @else
                <div class="alert alert-danger text-center">
                    <i class="bi bi-exclamation-circle me-2"></i>
                    No order found with this order number and mobile number. Please check and try again.
                </div>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection