@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Group $group */
    /** @var \App\Models\Person $mePerson */
    /** @var array<int, array{from:\App\Models\Person,to:\App\Models\Person,amount:float}> $settlements */
    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: ($group->currency ?? 'USD');
  @endphp

  <div class="min-h-screen safe-bottom animate-in-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-6">
      <x-page-header title="{{ __('Settle up') }}" back />

      <div class="apple-card p-5 text-center">
        <p class="text-[13px] text-muted-foreground mb-1">
          {{ $group->emoji }} {{ $group->name }}
        </p>
        <p class="text-[15px] text-foreground">Record a payment to settle balances.</p>
      </div>

      <div class="apple-card p-5 space-y-5">
        <form method="POST" action="{{ route('app.settle-up.store', ['id' => $group->id]) }}" class="space-y-5">
          @csrf

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <p class="text-[12px] text-muted-foreground mb-2 px-0.5">From</p>
              <select name="from_person_id" class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[15px] text-foreground bg-transparent outline-none focus:ring-2 focus:ring-primary/15" required>
                @foreach ($group->members as $m)
                  <option value="{{ $m->id }}" {{ $m->id === $mePerson->id ? 'selected' : '' }}>{{ $m->avatar }} {{ $m->name }}</option>
                @endforeach
              </select>
            </div>
            <div>
              <p class="text-[12px] text-muted-foreground mb-2 px-0.5">To</p>
              <select name="to_person_id" class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[15px] text-foreground bg-transparent outline-none focus:ring-2 focus:ring-primary/15" required>
                @foreach ($group->members as $m)
                  @if ($m->id !== $mePerson->id)
                    <option value="{{ $m->id }}">{{ $m->avatar }} {{ $m->name }}</option>
                  @endif
                @endforeach
              </select>
            </div>
          </div>

          <div>
            <p class="text-[12px] text-muted-foreground mb-2 px-0.5">Amount</p>
            <input
              type="number"
              step="0.01"
              inputmode="decimal"
              name="amount"
              placeholder="{{ __('0.00') }}"
              class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[18px] font-semibold text-foreground outline-none focus:ring-2 focus:ring-primary/15 tabular-nums"
              required
            />
          </div>

          <div>
            <p class="text-[12px] text-muted-foreground mb-2 px-0.5">{{ __('Paid on') }}</p>
            <input
              type="date"
              name="paid_on"
              value="{{ now()->toDateString() }}"
              class="w-full apple-card-inset px-4 py-3.5 rounded-2xl text-[15px] text-foreground outline-none focus:ring-2 focus:ring-primary/15"
              required
            />
          </div>

          <x-primary-button variant="sheet">{{ __('Record payment') }}</x-primary-button>
        </form>
      </div>

      <section>
        <p class="section-header mb-2 px-1">{{ __('Suggested transfers') }}</p>
        @if (count($settlements) === 0)
          <p class="text-center text-[14px] text-muted-foreground px-2">{{ __('No transfers suggested.') }}</p>
        @else
          <div class="apple-card divide-y divide-border/40">
            @foreach ($settlements as $s)
              <form method="POST" action="{{ route('app.settle-up.store', ['id' => $group->id]) }}" class="px-4 py-3.5 flex items-center justify-between gap-3">
                @csrf
                <input type="hidden" name="from_person_id" value="{{ $s['from']->id }}" />
                <input type="hidden" name="to_person_id" value="{{ $s['to']->id }}" />
                <input type="hidden" name="amount" value="{{ number_format($s['amount'], 2, '.', '') }}" />
                <input type="hidden" name="paid_on" value="{{ now()->toDateString() }}" />
                <div class="flex items-center gap-2 min-w-0">
                  <span class="text-lg shrink-0">{{ $s['from']->avatar }}</span>
                  <span class="text-[14px] text-foreground truncate">{{ $s['from']->name }}</span>
                  <span class="text-[12px] text-muted-foreground shrink-0">→</span>
                  <span class="text-lg shrink-0">{{ $s['to']->avatar }}</span>
                  <span class="text-[14px] text-foreground truncate">{{ $s['to']->name }}</span>
                </div>
                <button type="submit" class="shrink-0 px-3 py-2 rounded-full bg-secondary text-[13px] font-semibold text-foreground tabular-nums">
                  @php
                    $fmt = \App\Support\Money::formatConvertedWithOriginal((float) $s['amount'], $group->currency ?? 'USD', $displayCurrency, $locale);
                  @endphp
                  {{ $fmt['primary'] }}
                </button>
              </form>
            @endforeach
          </div>
        @endif
      </section>
    </div>
  </div>
@endsection