@extends('layouts.admin')

@section('heading', 'Payments')
@section('subheading', 'Every payment collected across all orders.')

@section('content')

<style>
    .payment-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        border: none;
        cursor: pointer;
    }
    .payment-action-view { background: #EEEDFE; color: #5E35B1; }
    .payment-action-edit { background: #FFF9F0; color: #B45309; }
    .payment-action-delete { background: #FCEBEB; color: #C2185B; }
    .payment-action:hover { opacity: .85; }
</style>

{{-- TOTAL --}}
<div class="card p-5 mb-4">
  <p class="text-xs" style="color:#6b6470;">Total collected</p>
  <p class="font-display font-semibold text-2xl" style="color:#0F6E56;">&#8377;{{ number_format($totalCollected, 0) }}</p>
</div>

{{-- SEARCH + FILTER --}}
<div class="card p-5 mb-4">
  <form method="GET" action="{{ route('payments.index') }}">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">

      <div class="lg:col-span-2">
        <label class="block text-xs mb-1" style="color:#6b6470;">Search</label>
        <input type="text" name="search" value="{{ request('search') }}"
          placeholder="Customer, Order ID or reference..."
          class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Payment type</label>
        <select name="payment_type" class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          <option value="">All types</option>
          <option value="advance" @selected(request('payment_type') === 'advance')>Advance</option>
          <option value="balance" @selected(request('payment_type') === 'balance')>Balance</option>
          <option value="full" @selected(request('payment_type') === 'full')>Full</option>
          <option value="refund" @selected(request('payment_type') === 'refund')>Refund</option>
        </select>
      </div>

      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Mode</label>
        <select name="mode" class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          <option value="">All modes</option>
          <option value="cash" @selected(request('mode') === 'cash')>Cash</option>
          <option value="upi" @selected(request('mode') === 'upi')>UPI</option>
          <option value="card" @selected(request('mode') === 'card')>Card</option>
        </select>
      </div>

      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">From date</label>
        <input type="date" name="from_date" value="{{ request('from_date') }}"
          class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">To date</label>
        <input type="date" name="to_date" value="{{ request('to_date') }}"
          class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

    </div>

    <div class="flex items-center gap-2 mt-4">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">
        Search / Filter
      </button>
      <a href="{{ route('payments.index') }}" class="px-4 py-2 rounded-lg text-sm" style="background:#f5f3ee; color:#6b6470;">
        Reset
      </a>
    </div>
  </form>
</div>

{{-- PAYMENT TABLE --}}
<div class="card p-6">
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left" style="color:#a19a8f;">
          <th class="pb-3 font-medium text-xs">Date</th>
          <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">Mode</th>
          <th class="pb-3 font-medium text-xs">Payment type</th>
          <th class="pb-3 font-medium text-xs">Collected by</th>
          <th class="pb-3 font-medium text-xs text-right">Amount</th>
          <th class="pb-3 font-medium text-xs text-center">Actions</th>
        </tr>
      </thead>
      <tbody style="color:#1A1625;">
        @forelse($payments as $payment)
          <tr class="border-t" style="border-color:#f2ece0;">
            <td class="py-3 text-xs">
              {{ $payment->payment_date
                  ? \Carbon\Carbon::parse($payment->payment_date)->format('d M Y')
                  : $payment->created_at->format('d M Y') }}
            </td>
            <td class="py-3">
              <a href="{{ route('orders.show', $payment->order_id) }}" style="color:#5E35B1; text-decoration:underline;">
                #{{ $payment->order_id }}
              </a>
            </td>
            <td class="py-3">{{ optional(optional($payment->order)->customer)->name ?? '—' }}</td>
            <td class="py-3 text-xs uppercase">{{ $payment->mode ?? '—' }}</td>
            <td class="py-3 text-xs">{{ ucfirst($payment->payment_type ?? '—') }}</td>
            <td class="py-3 text-xs">{{ optional($payment->collector)->name ?? '—' }}</td>
            <td class="py-3 text-right font-medium" style="white-space:nowrap;">
              &#8377;{{ number_format($payment->amount, 0) }}
            </td>
            <td class="py-3">
              <div class="flex items-center justify-center gap-2">
                <a href="{{ route('payments.show', $payment->id) }}" class="payment-action payment-action-view">View</a>
                <a href="{{ route('payments.edit', $payment->id) }}" class="payment-action payment-action-edit">Edit</a>
                <form method="POST" action="{{ route('payments.destroy', $payment->id) }}"
                      onsubmit="return confirm('Are you sure you want to delete this payment? This will recalculate the order balance.');"
                      style="display:inline;">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="payment-action payment-action-delete">Delete</button>
                </form>
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="8" class="py-6 text-center text-sm" style="color:#a19a8f;">
              No payments found for the selected filters.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($payments->hasPages())
    <div class="mt-5 pt-4" style="border-top:1px solid #f2ece0;">
      {{ $payments->links() }}
    </div>
  @endif
</div>

@endsection