@extends('layout.user')

@section('content')
@php
  $gs  = \App\Models\GeneralSetting::first();
  $ink = $gs->text_color ?? '#0f172a';

  $active = $status ?: 'all';

  $counts = (object)[
    'pending' => ($counts->pending ?? 0),
    'processing' => ($counts->processing ?? 0),
    'rejected' => ($counts->rejected ?? 0),
    'completed' => ($counts->completed ?? 0),
    'cancelled' => ($counts->cancelled ?? 0),
    'returned' => ($counts->returned ?? 0),
  ];

  $totalAll = $counts->pending + $counts->processing + $counts->rejected + $counts->completed + $counts->cancelled + $counts->returned;

  $tabs = [
    ['key' => 'all', 'label' => 'All', 'count' => $totalAll],
    ['key' => 'pending', 'label' => 'Pending', 'count' => $counts->pending],
    ['key' => 'processing', 'label' => 'Processing', 'count' => $counts->processing],
    ['key' => 'rejected', 'label' => 'Rejected', 'count' => $counts->rejected],
    ['key' => 'completed', 'label' => 'Completed', 'count' => $counts->completed],
    ['key' => 'cancelled', 'label' => 'Cancelled', 'count' => $counts->cancelled],
    ['key' => 'returned', 'label' => 'Returned', 'count' => $counts->returned],
  ];
@endphp

<style>
:root{
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --ink: {{ $ink }};
}

.blue-border{
  border:1.5px solid var(--blue) !important;
}

#ordersPage a,
#ordersPage a:hover,
#ordersPage a:active,
#ordersPage a:visited{
  text-decoration:none !important;
  -webkit-tap-highlight-color: transparent;
}
#ordersPage a:focus{ outline:none; }

.tab-active{
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  color:#fff;
}
.tab-inactive{
  background:#fff;
  color:#374151;
}

.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  border-radius:999px;
  font-size:11px;
  padding:0 8px;
}

.card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.st{
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
</style>

<div id="ordersPage" class="mx-auto mt-2 max-w-5xl px-2 sm:px-3 md:px-4">
  <div class="mb-3 flex items-center justify-between gap-2">
    <h1 class="text-lg font-semibold" style="color:var(--ink)">My Orders</h1>

    <a href="{{ url()->previous() }}"
       class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm blue-border"
       style="color:var(--blue);background:rgba(37,99,235,.08);">
      <i class="fa-solid fa-arrow-left text-[12px]"></i> Back
    </a>
  </div>

  @php $isAll = $active === 'all'; @endphp
  <a href="{{ route('user.pdorders') }}"
     class="mb-2 block w-full rounded-full px-4 py-2 text-center text-[14px] font-semibold blue-border {{ $isAll ? 'tab-active' : 'tab-inactive' }}">
    {{ $tabs[0]['label'] }}
    <span class="ml-1 tab-badge blue-border"
          style="{{ $isAll ? 'background:rgba(255,255,255,.25);color:#fff' : 'background:#f3f4f6;color:#374151' }}">
      {{ $tabs[0]['count'] }}
    </span>
  </a>

  <div class="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3">
    @foreach(array_slice($tabs, 1) as $t)
      @php $is = $active === $t['key']; @endphp
      <a href="{{ route('user.pdorders',['status'=>$t['key']]) }}"
         class="w-full rounded-full px-3 py-2 text-center text-[13px] font-medium blue-border {{ $is ? 'tab-active' : 'tab-inactive' }}">
        {{ $t['label'] }}
        <span class="ml-1 tab-badge blue-border"
              style="{{ $is ? 'background:rgba(255,255,255,.25);color:#fff' : 'background:#f3f4f6;color:#374151' }}">
          {{ $t['count'] }}
        </span>
      </a>
    @endforeach
  </div>

  @if($orders->isEmpty())
    <div class="rounded-xl bg-white p-6 text-center text-gray-500 blue-border">
      No orders found.
    </div>
  @else
    <div class="grid gap-3">
      @foreach($orders as $o)
        @php
          $p = $o->product;
          $thumb = $p?->banner_photo_url ?: 'https://dummyimage.com/300x200/e5e7eb/9ca3af&text=No+Image';
          $statusLabel = $o->status === 'completed' ? 'approved' : $o->status;
          $statusBadge = [
            'pending' => 'bg-amber-50 text-amber-700 border border-amber-200',
            'processing' => 'bg-indigo-50 text-indigo-700 border border-indigo-200',
            'rejected' => 'bg-rose-50 text-rose-700 border border-rose-200',
            'approved' => 'bg-emerald-50 text-emerald-700 border border-emerald-200',
            'cancelled' => 'bg-rose-50 text-rose-700 border border-rose-200',
            'returned' => 'bg-orange-50 text-orange-700 border border-orange-200',
          ][$statusLabel] ?? 'bg-gray-50 text-gray-700 border border-gray-200';
        @endphp

        <div class="card p-3 blue-border">
          <div class="mb-2 flex justify-end">
            <span class="st {{ $statusBadge }}">
              {{ ucfirst($statusLabel) }}
            </span>
          </div>

          <div class="flex items-center gap-3">
            <div class="h-16 w-24 overflow-hidden rounded-lg bg-gray-50 blue-border">
              <img src="{{ $thumb }}" class="h-full w-full object-cover">
            </div>

            <div class="flex-1">
              <div class="text-[14px] font-semibold" style="color:var(--ink)">
                {{ $p?->title ?? 'Product info unavailable' }}
              </div>
              <div class="mt-1 text-[12px] text-gray-500">
                {{ optional($o->created_at)->format('d M Y, h:i A') }}
              </div>
              <div class="mt-1 text-[12px]" style="color:var(--ink)">
                Qty: <b>{{ $o->qty }}</b> | Size: <b>{{ $o->size ?: '-' }}</b> | Total: <b>Tk{{ number_format($o->grand_total,2) }}</b> | Delivery Charge: <b>Tk{{ number_format((float)$o->delivery_charge,2) }}</b>
              </div>
            </div>
          </div>

          <div class="mt-3 grid gap-2 sm:grid-cols-2">
            <a href="{{ route('user.pdorders.show', $o->id) }}"
               class="inline-flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm blue-border"
               style="color:var(--blue);background:#fff;">
              Details
              <i class="fa-solid fa-arrow-right text-[11px]"></i>
            </a>
            @if($o->tracking_url)
              <a href="{{ $o->tracking_url }}" target="_blank"
                 class="inline-flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm blue-border"
                 style="color:#0f766e;background:#ecfeff;">
                Tracking Link
                <i class="fa-solid fa-up-right-from-square text-[11px]"></i>
              </a>
            @endif
          </div>
        </div>
      @endforeach
    </div>

    <div class="mt-3">
      {{ $orders->links() }}
    </div>
  @endif
</div>
@endsection
