@extends('layout.user')

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

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

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

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

.card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.status-chip{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.btn-blue{
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  color:#fff;
  border-radius:10px;
  padding:8px 16px;
  font-weight:600;
}
</style>

<div id="orderDetail" class="mx-auto mt-3 max-w-4xl px-3 sm:px-4">
  <div class="mb-4 flex items-center justify-between">
    <h1 class="text-lg font-semibold" style="color:var(--ink)">Order Details</h1>

    <a href="{{ route('user.pdorders') }}"
       class="rounded-lg px-3 py-1.5 text-sm blue-border"
       style="color:var(--blue); background:rgba(37,99,235,.08);">
      <i class="fa fa-arrow-left text-xs"></i> All Orders
    </a>
  </div>

  @php
    $o = $order;
    $p = $order->product;
    $thumb = $p?->banner_photo_url ?: 'https://dummyimage.com/600x400/e5e7eb/9ca3af&text=No+Image';
    $perEarn = max(0, (float)$o->sale_price - (float)$o->admin_price);
    $statusLabel = $o->status === 'completed' ? 'approved' : $o->status;
    $statusClass = [
      '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 space-y-4 p-4 blue-border">
    <div class="flex items-start justify-between">
      <div>
        <div class="text-[16px] font-semibold" style="color:var(--ink)">
          {{ $p?->title ?? 'Product info unavailable' }}
        </div>
        <div class="text-sm text-gray-500">
          Order ID: #{{ $o->id }}
        </div>
      </div>

      <span class="status-chip {{ $statusClass }}">
        {{ ucfirst($statusLabel) }}
      </span>
    </div>

    <div class="overflow-hidden rounded-xl blue-border">
      <img src="{{ $thumb }}" class="h-auto w-full object-cover">
    </div>

    <div class="grid gap-3 sm:grid-cols-2">
      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Wholesale Price</div>
        <div class="text-lg font-semibold" style="color:var(--ink)">
          Tk{{ number_format($o->admin_price,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Sale Price</div>
        <div class="text-lg font-semibold" style="color:var(--ink)">
          Tk{{ number_format($o->sale_price,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Profit per Piece</div>
        <div class="text-lg font-semibold text-green-600">
          Tk{{ number_format($perEarn,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Quantity</div>
        <div class="text-lg font-semibold" style="color:var(--ink)">
          {{ $o->qty }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Size</div>
        <div class="text-lg font-semibold" style="color:var(--ink)">
          {{ $o->size ?: '-' }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Color</div>
        <div class="text-lg font-semibold" style="color:var(--ink)">
          {{ $o->color ?: '-' }}
        </div>
      </div>
    </div>

    <div class="grid gap-3 sm:grid-cols-3">
      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Wholesale Total</div>
        <div class="font-bold" style="color:var(--ink)">
          Tk{{ number_format($o->wholesale_total,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Profit Total</div>
        <div class="font-bold text-green-600">
          Tk{{ number_format($o->earn_total,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Grand Total</div>
        <div class="font-bold text-indigo-700">
          Tk{{ number_format($o->grand_total,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Delivery Charge</div>
        <div class="font-bold text-gray-900">
          Tk{{ number_format((float)$o->delivery_charge,2) }}
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="text-sm text-gray-500">Voucher Charge Status</div>
        <div class="font-bold text-gray-900">
          {{ $o->delivery_charge_deducted ? 'Deducted' : 'Not deducted / refunded' }}
        </div>
      </div>
    </div>

    <div class="grid gap-3 sm:grid-cols-2">
      <div class="rounded-lg p-3 blue-border">
        <div class="mb-2 font-semibold">Customer Info</div>
        <div class="space-y-1 text-sm">
          <div>Name: <b>{{ $o->customer_name }}</b></div>
          <div>Phone: <b>{{ $o->customer_phone }}</b></div>
          <div>Alt Phone: <b>{{ $o->alt_phone ?: '-' }}</b></div>
        </div>
      </div>

      <div class="rounded-lg p-3 blue-border">
        <div class="mb-2 font-semibold">Address</div>
        <div class="text-sm">
          {{ $o->address }} <br>
          Thana: {{ $o->thana }} <br>
          District: {{ $o->district }} <br>
          Division: {{ $o->division }}
        </div>
      </div>
    </div>

    @if($o->tracking_url)
      <div class="rounded-lg p-3 blue-border">
        <div class="mb-2 font-semibold">Tracking</div>
        <a href="{{ $o->tracking_url }}" target="_blank"
           class="inline-flex items-center gap-2 rounded-lg border border-cyan-300 bg-cyan-50 px-3 py-2 text-sm text-cyan-700 hover:bg-cyan-100">
          <i class="fa-solid fa-up-right-from-square text-[11px]"></i>
          Open Tracking Link
        </a>
      </div>
    @endif

    @if(!empty($historyEnabled))
      @php
        $historyItems = $o->statusHistories ?? collect();
        $historyStatusLabel = static function (?string $st): string {
          return match ((string) $st) {
            'completed' => 'Approved',
            'pending' => 'Pending',
            'processing' => 'Processing',
            'rejected' => 'Rejected',
            'cancelled' => 'Cancelled',
            'returned' => 'Returned',
            default => ucfirst((string) $st),
          };
        };
        $historyActionLabel = static function (?string $action): string {
          return match ((string) $action) {
            'status_updated' => 'Status Updated',
            'details_updated' => 'Order Details Updated',
            'tracking_updated' => 'Tracking Link Updated',
            default => ucwords(str_replace('_', ' ', (string) $action)),
          };
        };
      @endphp
      <div class="rounded-lg p-3 blue-border">
        <div class="mb-2 font-semibold">Order Status History ({{ $historyItems->count() }})</div>

        @if($historyItems->isEmpty())
          <div class="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
            No history found yet for this order.
          </div>
        @else
          <div class="space-y-2">
            @foreach($historyItems as $h)
              <div class="rounded-md border border-slate-200 bg-white px-3 py-2">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="text-[12px] font-semibold text-slate-800">
                    {{ $historyActionLabel($h->action) }}
                  </div>
                  <div class="text-[11px] text-gray-500">
                    {{ optional($h->created_at)->format('d M Y, h:i A') }}
                  </div>
                </div>

                @if(!empty($h->from_status) || !empty($h->to_status))
                  <div class="mt-1 text-[12px] text-gray-700">
                    Status: <b>{{ $historyStatusLabel($h->from_status) }}</b> → <b>{{ $historyStatusLabel($h->to_status) }}</b>
                  </div>
                @endif

                <div class="mt-1 text-[12px] text-gray-800">
                  {{ $h->user_message ?: 'Order action updated.' }}
                </div>
              </div>
            @endforeach
          </div>
        @endif
      </div>
    @endif

    <div class="pt-2">
      <a href="{{ route('user.pdorders') }}"
         class="btn-blue inline-flex items-center gap-2 blue-border">
        <i class="fa fa-arrow-left text-xs"></i>
        Back to All Orders
      </a>
    </div>
  </div>
</div>
@endsection
