@extends('layouts.app')

@section('title', $order ? 'Order #'.$order->order_number : 'Track Order')

@php
  $steps = \App\Models\Order::STATUSES;
  $keys = array_keys($steps);
@endphp

@section('content')
@include('partials.page-head', ['title' => 'Track Order', 'subtitle' => 'অর্ডার আইডি ও ফোন নম্বর দিয়ে আপনার অর্ডারের অবস্থা দেখুন', 'crumbs' => ['Track Order' => null]])

<section class="container section">
  <div class="tr-search">
    <div class="tr-search-art">📦</div>
    <form method="POST" action="{{ route('track.lookup') }}" novalidate>
      @csrf
      <h2>আপনার অর্ডার কোথায়?</h2>
      <p>অর্ডার কনফার্মেশনে পাওয়া Order ID এবং যে ফোন নম্বর দিয়ে অর্ডার করেছেন সেটি দিন।</p>
      <div class="tr-fields">
        <div class="f-group {{ $errors->has('order_number') ? 'error' : '' }}">
          <label for="trId">Order ID</label>
          <input id="trId" name="order_number" type="text" value="{{ old('order_number', $prefill) }}" placeholder="যেমন: IZ1001234">
          <div class="f-err">Order ID লিখুন</div>
        </div>
        <div class="f-group {{ $errors->has('phone') ? 'error' : '' }}">
          <label for="trPhone">ফোন নম্বর</label>
          <div class="phone-in"><span class="cc"><i class="flag"></i>+88</span><input id="trPhone" name="phone" type="tel" maxlength="11" value="{{ old('phone') }}" placeholder="01XXXXXXXXX"></div>
          <div class="f-err">{{ $errors->first('phone') ?: 'সঠিক ফোন নম্বর দিন' }}</div>
        </div>
        <button type="submit" class="btn btn-primary">🔍 Track</button>
      </div>
    </form>
  </div>

  @if ($mine->isNotEmpty())
    <div class="tr-mine">
      <span>আপনার সাম্প্রতিক অর্ডার:</span>
      @foreach ($mine as $m)
        <a href="{{ route('track.show', $m) }}" class="{{ $order && $order->order_number === $m->order_number ? 'active' : '' }}">#{{ $m->order_number }} <small>{{ $m->status_label }}</small></a>
      @endforeach
    </div>
  @endif

  <div id="trResult">
    @if (session('not_found'))
      <div class="tr-card tr-notfound">
        <div>🔎</div>
        <h3>"{{ session('not_found') }}" নম্বরের কোনো অর্ডার পাওয়া যায়নি</h3>
        <p>Order ID ও ফোন নম্বর আবার মিলিয়ে দেখুন, অথবা হটলাইনে কল করুন।</p>
      </div>
    @endif

    @if ($order)
      @php
        $stage = $order->stage;
        $cancelled = $stage < 0;
        $history = $order->histories->keyBy('status');
        $eta = $order->created_at->copy()->addDays($order->area === 'inside' ? 2 : 5);
        $pct = $cancelled ? 0 : ($stage / (count($steps) - 1)) * 100;
      @endphp
      <div class="tr-card">
        <div class="tr-head">
          <div>
            <small>Order ID</small>
            <h2>#{{ $order->order_number }}</h2>
            <span class="tr-date">অর্ডারের সময়: {{ $order->created_at->format('j M Y, g:i a') }}</span>
          </div>
          <div class="tr-status {{ $cancelled ? 'cancelled' : ($order->status === 'delivered' ? 'done' : '') }}">
            <span>{{ $cancelled ? '❌' : $steps[$order->status][2] }}</span>
            <div><small>বর্তমান অবস্থা</small><b>{{ $order->status_label }}</b></div>
          </div>
          <div class="tr-eta">
            @if ($cancelled)
              <small>বাতিল হয়েছে</small><b>{{ $order->cancelled_at?->format('D j M') }}</b>
            @elseif ($order->status === 'delivered')
              <small>ডেলিভারি হয়েছে</small><b>{{ ($order->delivered_at ?? $order->updated_at)->format('D j M') }}</b>
            @else
              <small>আনুমানিক ডেলিভারি</small><b>{{ $eta->format('D j M') }}</b>
            @endif
          </div>
        </div>

        @if ($cancelled)
          <div class="tr-cancel-note">এই অর্ডারটি বাতিল করা হয়েছে। পেমেন্ট করে থাকলে ৩-৫ কার্যদিবসের মধ্যে রিফান্ড করা হবে।</div>
        @else
          <div class="tr-progress">
            <div class="tr-line"><i style="width:{{ $pct }}%"></i></div>
            @foreach ($steps as $key => [$label, $bn, $icon])
              @php $i = $loop->index; @endphp
              <div class="tr-step {{ $i < $stage ? 'done' : ($i === $stage ? 'now' : '') }}">
                <span class="dot">{{ $i <= $stage ? ($i === $stage ? $icon : '✓') : $i + 1 }}</span>
                <b>{{ $label }}</b>
                <small>{{ $i <= $stage && isset($history[$key]) ? $history[$key]->created_at->format('j M, g:i a') : '—' }}</small>
              </div>
            @endforeach
          </div>
        @endif

        <div class="tr-body">
          <div class="tr-box">
            <h3>অর্ডারের হিস্ট্রি</h3>
            <ul class="tr-timeline">
              @foreach ($order->histories->sortByDesc('created_at')->values() as $h)
                <li class="{{ $loop->first ? 'now' : '' }}">
                  <span>{{ $h->status === 'cancelled' ? '❌' : ($steps[$h->status][2] ?? '•') }}</span>
                  <div><b>{{ $h->status === 'cancelled' ? 'অর্ডার বাতিল' : ($steps[$h->status][1] ?? $h->status) }}</b><small>{{ $h->created_at->format('j M Y, g:i a') }}@if ($h->note) · {{ $h->note }}@endif</small></div>
                </li>
              @endforeach
            </ul>
          </div>

          <div class="tr-box">
            <h3>ডেলিভারি তথ্য</h3>
            <dl class="tr-info">
              <dt>নাম</dt><dd>{{ $order->customer_name }}</dd>
              <dt>ফোন</dt><dd>{{ $order->masked_phone }}</dd>
              <dt>ঠিকানা</dt><dd>{{ $order->address }}</dd>
              <dt>এরিয়া</dt><dd>{{ $order->area === 'inside' ? 'ঢাকার মধ্যে' : 'ঢাকার বাইরে' }}</dd>
              <dt>পেমেন্ট</dt><dd>{{ $order->payment_label }} ({{ $order->payment_status === 'paid' ? 'Paid' : 'Unpaid' }})</dd>
              @if ($order->note)<dt>নোট</dt><dd>{{ $order->note }}</dd>@endif
            </dl>

            <h3 style="margin-top:20px">পণ্যসমূহ ({{ $order->items->sum('qty') }})</h3>
            <div class="tr-items">
              @foreach ($order->items as $item)
                <div class="tr-item">
                  <span class="thumb">{{ $item->icon ?: '📦' }}</span>
                  <div><b>{{ $item->name }}</b>@if ($item->size || $item->color)<small style="display:block;color:var(--muted)">{{ collect([$item->size ? 'Size: '.$item->size : null, $item->color ? 'Color: '.$item->color : null])->filter()->implode(' · ') }}</small>@endif<small>৳{{ number_format($item->price) }} × {{ $item->qty }}</small></div>
                  <strong>৳{{ number_format($item->total) }}</strong>
                </div>
              @endforeach
            </div>
            <div class="tr-sum">
              <div><span>Subtotal</span><b>৳{{ number_format($order->subtotal) }}</b></div>
              <div><span>ডেলিভারি চার্জ</span><b>৳{{ number_format($order->shipping) }}</b></div>
              @if ($order->discount > 0)<div class="disc"><span>Discount @if ($order->coupon_code)({{ $order->coupon_code }})@endif</span><b>-৳{{ number_format($order->discount) }}</b></div>@endif
              <div class="total"><span>Total</span><b>৳{{ number_format($order->total) }}</b></div>
            </div>
          </div>
        </div>

        <div class="tr-actions">
          <a href="tel:+88{{ preg_replace('/\D/', '', \App\Models\Setting::get('hotline', '')) }}" class="btn btn-outline">📞 হটলাইনে কল করুন</a>
          <button type="button" class="btn btn-outline" onclick="window.print()">🖨️ Invoice প্রিন্ট</button>
          @if ($order->can_cancel)
            <form method="POST" action="{{ route('track.cancel', $order) }}" onsubmit="return confirm('#{{ $order->order_number }} অর্ডারটি বাতিল করতে চান?')" style="display:contents">
              @csrf
              <button type="submit" class="btn btn-outline tr-cancel">✕ অর্ডার বাতিল করুন</button>
            </form>
          @endif
          <a href="{{ route('home') }}" class="btn btn-primary">Continue Shopping →</a>
        </div>
      </div>
    @endif
  </div>
</section>
@endsection

@push('scripts')
<script>
  $("#trPhone")?.addEventListener("input", e => (e.target.value = e.target.value.replace(/\D/g, "")));
  @if ($order || session('not_found'))
    $("#trResult").scrollIntoView({ behavior: "smooth", block: "start" });
  @endif
</script>
@endpush