@extends('layouts.site')
@section('title', 'Track Your Order — pcfy.in')
@section('screen_label', 'Track Order')
@section('page_css')
<link rel="stylesheet" href="{{ asset('css/home-b.css') }}">
@endsection

@section('content')
<div style="background:var(--navy-xdark);color:#fff;padding:28px 0 24px;">
  <div class="container">
    <h1 style="font-family:var(--font-head);font-size:38px;font-weight:800;text-transform:uppercase;letter-spacing:-1px;">
      Track Your <span style="color:var(--accent);">Order</span>
    </h1>
    <p style="color:rgba(255,255,255,.6);font-size:14px;margin-top:8px;">
      Enter your order number and the email or phone used while ordering to see live status.
    </p>
  </div>
</div>

<div class="container" style="padding-top:40px;padding-bottom:60px;">

  {{-- Lookup form --}}
  <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:28px;max-width:560px;margin:0 auto 32px;">
    @if(session('error'))
      <div style="background:#fee2e2;color:#991b1b;border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:16px;">
        {{ session('error') }}
      </div>
    @endif
    @if($errors->any())
      <div style="background:#fee2e2;color:#991b1b;border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:16px;">
        {{ $errors->first() }}
      </div>
    @endif
    <form action="{{ route('track-order.post') }}" method="POST" style="display:flex;flex-direction:column;gap:14px;">
      @csrf
      <div>
        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px;">Order Number *</label>
        <input type="text" name="order_number" required value="{{ old('order_number') }}" placeholder="e.g. ORD-2026-00001"
               style="width:100%;height:42px;padding:0 12px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;outline:none;text-transform:uppercase;">
      </div>
      <div>
        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px;">Email or Phone used while ordering *</label>
        <input type="text" name="contact" required value="{{ old('contact') }}" placeholder="you@example.com or 98765 43210"
               style="width:100%;height:42px;padding:0 12px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;outline:none;">
      </div>
      <button type="submit" class="btn btn-primary" style="height:44px;justify-content:center;">Track Order →</button>
    </form>
  </div>

  @if($searched && $order)
  @php
    $statuses = \App\Models\Order::statuses();
    // 'cancelled' is a terminal state shown separately, not part of the progress timeline
    $timeline = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
    $currentIndex = array_search($order->status, $timeline);
    $isCancelled = $order->status === 'cancelled';
    $latestShipment = $order->shipments->first();
  @endphp

  <div style="max-width:760px;margin:0 auto;">

    {{-- Order header --}}
    <div style="background:var(--navy-xdark);color:#fff;border-radius:12px;padding:20px 24px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
      <div>
        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:4px;">Order Number</div>
        <div style="font-size:20px;font-weight:800;font-family:monospace;">{{ $order->order_number }}</div>
      </div>
      <div style="text-align:right;">
        <div style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:4px;">Placed on</div>
        <div style="font-size:14px;font-weight:600;">{{ $order->created_at->format('d M Y') }}</div>
      </div>
    </div>

    @if($isCancelled)
      <div style="background:#fee2e2;color:#991b1b;border-radius:12px;padding:18px 24px;margin-bottom:20px;font-weight:700;text-align:center;">
        ✕ This order has been cancelled.
      </div>
    @else
    {{-- Interactive status timeline --}}
    <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:28px 24px;margin-bottom:20px;">
      <div style="font-size:14px;font-weight:700;margin-bottom:24px;">Order Status</div>
      <div style="display:flex;align-items:flex-start;">
        @foreach($timeline as $i => $step)
        @php
          $done   = $i < $currentIndex;
          $active = $i === $currentIndex;
          $icon   = match($step) {
            'pending'    => '🕐',
            'confirmed'  => '✓',
            'processing' => '⚙',
            'shipped'    => '🚚',
            'delivered'  => '📦',
            default      => '•',
          };
        @endphp
        <div style="flex:1;text-align:center;position:relative;">
          @if($i > 0)
          <div style="position:absolute;top:19px;left:-50%;width:100%;height:3px;
                       background:{{ $done || $active ? 'var(--accent)' : 'var(--border)' }};z-index:0;"></div>
          @endif
          <div style="position:relative;z-index:1;width:40px;height:40px;border-radius:50%;margin:0 auto 8px;
                       display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
                       background:{{ $done ? 'var(--accent)' : ($active ? 'var(--navy-xdark)' : '#fff') }};
                       color:{{ $done ? '#fff' : ($active ? '#fff' : 'var(--muted)') }};
                       border:3px solid {{ $done ? 'var(--accent)' : ($active ? 'var(--navy-xdark)' : 'var(--border)') }};
                       {{ $active ? 'box-shadow:0 0 0 4px rgba(0,0,0,0.05);' : '' }}">
            {{ $done ? '✓' : $icon }}
          </div>
          <div style="font-size:12px;font-weight:{{ $active ? '800' : '600' }};color:{{ $active ? 'var(--navy-xdark)' : 'var(--muted)' }};">
            {{ \App\Models\Order::statusLabel($step) }}
          </div>
          @if($active)
          <div style="font-size:10px;color:var(--accent);font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.04em;">Current</div>
          @endif
        </div>
        @endforeach
      </div>

      @if($order->estimated_delivery_date && $order->status !== 'delivered')
      <div style="margin-top:24px;background:var(--bg);border-radius:8px;padding:12px 16px;font-size:13px;text-align:center;">
        Estimated delivery: <strong>{{ $order->estimated_delivery_date->format('d M Y') }}</strong>
      </div>
      @endif
    </div>

    {{-- Shipment tracking --}}
    @if($latestShipment)
    <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px;">
      <div style="font-size:14px;font-weight:700;margin-bottom:16px;">Shipment Details</div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;font-size:13px;">
        @if($latestShipment->courier_name)
        <div><div style="color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:2px;">Courier</div><div style="font-weight:600;">{{ $latestShipment->courier_name }}</div></div>
        @endif
        @if($latestShipment->tracking_number)
        <div><div style="color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:2px;">Tracking No.</div><div style="font-weight:600;font-family:monospace;">{{ $latestShipment->tracking_number }}</div></div>
        @endif
        <div><div style="color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:2px;">Status</div><div style="font-weight:600;">{{ \App\Models\OrderShipment::statusLabel($latestShipment->status) }}</div></div>
        @if($latestShipment->estimated_delivery)
        <div><div style="color:var(--muted);font-size:11px;text-transform:uppercase;margin-bottom:2px;">Est. Delivery</div><div style="font-weight:600;">{{ $latestShipment->estimated_delivery->format('d M Y') }}</div></div>
        @endif
      </div>
      @if($latestShipment->tracking_url)
      <a href="{{ $latestShipment->tracking_url }}" target="_blank" rel="noopener"
         style="display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:var(--navy-xdark);color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;">
        Track on courier site →
      </a>
      @endif
      @if($latestShipment->notes)
      <div style="margin-top:12px;font-size:12px;color:var(--muted);font-style:italic;">{{ $latestShipment->notes }}</div>
      @endif
    </div>
    @endif
    @endif

    {{-- Order items --}}
    <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px;">
      <div style="padding:14px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;">Order Items</div>
      <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
          <thead>
            <tr style="background:var(--bg);">
              <th style="text-align:left;padding:10px 16px;font-size:11px;text-transform:uppercase;color:var(--muted);">Product</th>
              <th style="text-align:right;padding:10px 16px;font-size:11px;text-transform:uppercase;color:var(--muted);">Qty</th>
              <th style="text-align:right;padding:10px 16px;font-size:11px;text-transform:uppercase;color:var(--muted);">Unit Price</th>
              <th style="text-align:right;padding:10px 16px;font-size:11px;text-transform:uppercase;color:var(--muted);">Total</th>
            </tr>
          </thead>
          <tbody>
            @foreach($order->items as $item)
            <tr style="border-top:1px solid var(--border);">
              <td style="padding:10px 16px;">
                <div style="font-weight:600;">{{ $item->product_name }}</div>
                @if($item->product_sku)<div style="font-size:11px;color:var(--muted);font-family:monospace;">SKU: {{ $item->product_sku }}</div>@endif
              </td>
              <td style="padding:10px 16px;text-align:right;">{{ $item->quantity }}</td>
              <td style="padding:10px 16px;text-align:right;">₹{{ number_format($item->unit_price/100, 0, '.', ',') }}</td>
              <td style="padding:10px 16px;text-align:right;font-weight:700;">{{ $item->line_total_inr }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div style="padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;">
        <div style="text-align:right;">
          @if($order->gst_amount > 0)
          <div style="font-size:12px;color:var(--muted);">GST ({{ $order->gst_percent }}%): {{ $order->gst_amount_inr }}</div>
          @endif
          @if($order->discount_amount > 0)
          <div style="font-size:12px;color:#dc2626;">{{ $order->discount_label ?: 'Discount' }}: − {{ $order->discount_amount_inr }}</div>
          @endif
          @if($order->shipping_amount > 0)
          <div style="font-size:12px;color:var(--muted);">{{ $order->shipping_label ?: 'Shipping' }}: {{ $order->shipping_amount_inr }}</div>
          @endif
          <div style="font-size:18px;font-weight:800;color:var(--navy-xdark);margin-top:4px;">Grand Total: {{ $order->grand_total_inr }}</div>
        </div>
      </div>
    </div>

    {{-- Payment status --}}
    <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
      <div style="font-size:13px;font-weight:600;">Payment Status</div>
      <span style="display:inline-flex;align-items:center;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
                    background:{{ $order->payment_status === 'paid' ? '#dcfce7' : ($order->payment_status === 'partial' ? '#fef9c3' : '#fee2e2') }};
                    color:{{ $order->payment_status === 'paid' ? '#166534' : ($order->payment_status === 'partial' ? '#854d0e' : '#991b1b') }};">
        {{ \App\Models\Order::paymentLabel($order->payment_status) }}
      </span>
    </div>

  </div>
  @endif

</div>
@endsection