@extends('layouts.admin')

@section('heading', 'Orders')
@section('subheading', 'All orders for your shop.')

@section('actions')
  <a href="{{ route('orders.create') }}" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">+ New order</a>
@endsection

@section('content')

@if (session('status'))
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;">
    {{ session('status') }}
  </div>
@endif

@php
  $stageColors = [
    'received'  => ['bg' => '#EEEDFE', 'text' => '#5E35B1'],
    'cutting'   => ['bg' => '#FAECE7', 'text' => '#993C1D'],
    'stitching' => ['bg' => '#FBEAF0', 'text' => '#993556'],
    'finishing' => ['bg' => '#FAEEDA', 'text' => '#854F0B'],
    'ready'     => ['bg' => '#E1F5EE', 'text' => '#0F6E56'],
    'delivered' => ['bg' => '#E7E4DC', 'text' => '#4A4438'],
  ];
@endphp

<!-- Stage filter tabs -->
<div class="flex flex-wrap gap-2 mb-5">
  <a href="{{ route('orders.index') }}"
     class="text-xs px-3 py-1.5 rounded-full font-medium"
     style="{{ !$activeStage ? 'background:#1A1625; color:white;' : 'background:#f2ece0; color:#6b6470;' }}">
    All
  </a>
  @foreach($stages as $stage)
    <a href="{{ route('orders.index', ['stage' => $stage]) }}"
       class="text-xs px-3 py-1.5 rounded-full font-medium"
       style="{{ $activeStage === $stage ? 'background:'.$stageColors[$stage]['text'].'; color:white;' : 'background:'.$stageColors[$stage]['bg'].'; color:'.$stageColors[$stage]['text'].';' }}">
      {{ ucfirst($stage) }} ({{ $stageCounts[$stage] }})
    </a>
  @endforeach
</div>

<div class="card p-6">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="color:#a19a8f;">
        <th class="pb-3 font-medium text-xs">Order</th>
        <th class="pb-3 font-medium text-xs">Customer</th>
        <th class="pb-3 font-medium text-xs">Garments</th>
        <th class="pb-3 font-medium text-xs">Stage</th>
        <th class="pb-3 font-medium text-xs">Delivery</th>
        <th class="pb-3 font-medium text-xs text-right">Balance</th>
      </tr>
    </thead>
    <tbody style="color:#1A1625;">
      @forelse($orders as $order)
        <tr class="border-t" style="border-color:#f2ece0;">
          <td class="py-3 text-xs" style="color:#6b6470;"><a href="{{ route('orders.show', $order) }}" style="color:#5E35B1; text-decoration:underline;">#{{ $order->id }}</a></td>
          <td class="py-3 font-medium">{{ $order->customer->name ?? '—' }}</td>
          <td class="py-3">{{ $order->items->pluck('garmentType.name')->join(', ') }}</td>
          <td class="py-3">
            <form method="POST" action="{{ route('orders.updateStage', $order) }}">
              @csrf @method('PUT')
              <select name="stage" onchange="this.form.submit()"
                class="text-xs px-2 py-1.5 rounded-full font-medium border-0 outline-none cursor-pointer"
                style="background:{{ $stageColors[$order->stage]['bg'] }}; color:{{ $stageColors[$order->stage]['text'] }};">
                @foreach($stages as $stage)
                  <option value="{{ $stage }}" {{ $order->stage === $stage ? 'selected' : '' }}>{{ ucfirst($stage) }}</option>
                @endforeach
              </select>
            </form>
          </td>
          <td class="py-3">{{ $order->delivery_date?->format('d M') ?? '—' }}</td>
          <td class="py-3 text-right font-medium">₹{{ number_format($order->balance_amount, 0) }}</td>
        </tr>
      @empty
        <tr><td colspan="6" class="py-6 text-center text-sm" style="color:#a19a8f;">No orders yet.</td></tr>
      @endforelse
    </tbody>
  </table>

  <div class="mt-4">{{ $orders->links() }}</div>
</div>

@endsection