@extends('layouts.admin')

@section('heading', 'Order #' . $order->id)
@section('subheading', $order->customer->name ?? '—')

@section('actions')
  <a href="{{ route('orders.index') }}" class="text-sm" style="color:#6b6470;">← Back to orders</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

@if ($errors->any())
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
    {{ $errors->first() }}
  </div>
@endif

<div class="grid grid-cols-3 gap-6">

  <!-- Left: garments + measurements -->
  <div class="col-span-2 space-y-4">
    <div class="card p-6">
      <p class="text-xs font-medium mb-4" style="color:#1A1625;">Garments in this order</p>
      @foreach($order->items as $item)
        <div class="mb-4 pb-4" style="border-bottom:1px dashed #e6e1d8;">
          <div class="flex items-center justify-between mb-2">
            <p class="font-medium text-sm" style="color:#1A1625;">
              {{ $item->garmentType->name }}{{ $item->garmentType->name_ta ? ' / '.$item->garmentType->name_ta : '' }}
              <span class="text-xs font-normal" style="color:#6b6470;">× {{ $item->qty }}</span>
            </p>
            <p class="text-sm font-medium" style="color:#1A1625;">₹{{ number_format($item->total_amount, 0) }}</p>
          </div>

          @if($item->measurements)
            <div class="flex flex-wrap gap-2 mb-2">
              @foreach($item->measurements as $fieldId => $value)
                @if($value)
                  <span class="text-xs px-2 py-1 rounded-full" style="background:#FFF9F0; color:#6b6470;">{{ $value }}</span>
                @endif
              @endforeach
            </div>
          @endif

          @if($item->addons->count())
            <p class="text-xs" style="color:#5E35B1;">
              Addons: {{ $item->addons->pluck('name')->join(', ') }} (+₹{{ number_format($item->addon_total, 0) }})
            </p>
          @endif

          @if($item->notes)
            <p class="text-xs mt-1" style="color:#a19a8f;">Note: {{ $item->notes }}</p>
          @endif
        </div>
      @endforeach
    </div>

    <!-- Payment history -->
    <div class="card p-6">
      <p class="text-xs font-medium mb-4" style="color:#1A1625;">Payment history</p>
      <table class="w-full text-sm">
        <thead>
          <tr class="text-left" style="color:#a19a8f;">
            <th class="pb-2 font-medium text-xs">Date</th>
            <th class="pb-2 font-medium text-xs">Mode</th>
            <th class="pb-2 font-medium text-xs">Collected by</th>
            <th class="pb-2 font-medium text-xs">Notes</th>
            <th class="pb-2 font-medium text-xs text-right">Amount</th>
          </tr>
        </thead>
        <tbody style="color:#1A1625;">
          @forelse($order->payments as $payment)
            <tr class="border-t" style="border-color:#f2ece0;">
              <td class="py-2 text-xs">{{ $payment->created_at->format('d M, h:i A') }}</td>
              <td class="py-2 text-xs uppercase">{{ $payment->mode }}</td>
              <td class="py-2 text-xs">{{ $payment->collector->name ?? '—' }}</td>
              <td class="py-2 text-xs" style="color:#6b6470;">{{ $payment->notes ?? '—' }}</td>
              <td class="py-2 text-right font-medium">₹{{ number_format($payment->amount, 0) }}</td>
            </tr>
          @empty
            <tr><td colspan="5" class="py-4 text-center text-sm" style="color:#a19a8f;">No payments recorded yet.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <!-- Right: summary + collect payment -->
  <div class="space-y-4">
    <div class="card p-6">
      <p class="text-xs font-medium mb-3" style="color:#1A1625;">Summary</p>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between"><span style="color:#6b6470;">Total</span><span class="font-medium">₹{{ number_format($order->total_amount, 0) }}</span></div>
         <div class="flex justify-between"><span style="color:#6b6470;">Discount</span><span>₹{{ number_format($order->discount, 0) }}</span></div>
        @if($order->extra_amount > 0)
          <div class="flex justify-between">
            <span style="color:#6b6470;">Extra charge{{ $order->extra_amount_reason ? ' — '.$order->extra_amount_reason : '' }}</span>
            <span>₹{{ number_format($order->extra_amount, 0) }}</span>
          </div>
        @endif
        <div class="flex justify-between"><span style="color:#6b6470;">Paid so far</span><span style="color:#0F6E56;">₹{{ number_format($order->advance_amount, 0) }}</span></div> 
        <div class="flex justify-between pt-2" style="border-top:1px dashed #e6e1d8;">
          <span class="font-medium" style="color:#1A1625;">Balance due</span>
          <span class="font-medium" style="color:{{ $order->balance_amount > 0 ? '#C2185B' : '#0F6E56' }};">₹{{ number_format($order->balance_amount, 0) }}</span>
        </div>
        @if($order->delivery_date)
          <div class="flex justify-between pt-2"><span style="color:#6b6470;">Delivery</span><span>{{ $order->delivery_date->format('d M Y') }}</span></div>
        @endif
      </div>
    </div>

    @if($order->balance_amount > 0)
      <div class="card p-6">
        <p class="text-xs font-medium mb-3" style="color:#1A1625;">Collect payment</p>
        <form method="POST" action="{{ route('orders.payments.store', $order) }}" class="space-y-3">
          @csrf
          <div>
            <label class="block text-xs mb-1" style="color:#6b6470;">Amount ₹</label>
            <input type="number" name="amount" min="0.01" max="{{ $order->balance_amount }}" step="0.01" required
              class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:#6b6470;">Mode</label>
            <select name="mode" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
              <option value="cash">Cash</option>
              <option value="upi">UPI</option>
              <option value="card">Card</option>
            </select>
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:#6b6470;">Notes</label>
            <input type="text" name="notes" placeholder="Optional"
              class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          </div>
          <button type="submit" class="w-full py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">Record payment</button>
        </form>
      </div>
    @else
      <div class="card p-6 text-center">
        <p class="text-sm font-medium" style="color:#0F6E56;">✓ Fully paid</p>
      </div>
    @endif
  </div>

</div>

@endsection