@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\SharedList $list */
    /** @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 ?: '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 list') }}" back />

      <div class="apple-card p-5">
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 rounded-[18px] bg-primary-muted flex items-center justify-center text-2xl shrink-0">
            {{ $list->emoji }}
          </div>
          <div class="min-w-0">
            <p class="text-[15px] font-semibold text-foreground truncate">{{ $list->name }}</p>
            <p class="text-[13px] text-muted-foreground truncate">
              {{ __('Settle balances by recording who paid who.') }}
            </p>
          </div>
        </div>
      </div>

      <section>
        <div class="flex items-center justify-between mb-2 px-1">
          <p class="section-header">Suggested transfers</p>
          <p class="text-[12px] text-muted-foreground">
            {{ __('Tap to record') }}
          </p>
        </div>
        @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.shared-lists.settle.store', ['id' => $list->id]) }}" class="px-4 py-3.5 flex items-center justify-between gap-3 active:scale-[0.98] transition-transform">
                @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() }}" />
                <button type="submit" class="w-full flex items-center justify-between gap-3 text-left">
                  <div class="flex items-center gap-3 min-w-0">
                    <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-lg shrink-0">
                      {{ $s['from']->avatar }}
                    </div>
                    <div class="min-w-0">
                      <p class="text-[14px] font-medium text-foreground truncate">
                        {{ $s['from']->name }}
                        <span class="text-muted-foreground font-normal">→</span>
                        {{ $s['to']->name }}
                      </p>
                      <p class="text-[12px] text-muted-foreground truncate">
                        {{ $s['to']->avatar }} {{ $s['to']->name }}
                      </p>
                    </div>
                  </div>

                  <div class="flex items-center gap-2 shrink-0">
                    <span class="text-[14px] font-semibold tabular-nums text-foreground">
                      @php
                        $fmt = \App\Support\Money::formatConvertedWithOriginal((float) $s['amount'], $displayCurrency, $displayCurrency, $locale);
                      @endphp
                      {{ $fmt['primary'] }}
                    </span>
                    <span class="w-9 h-9 rounded-2xl bg-primary text-primary-foreground flex items-center justify-center">
                      <x-lucide-check class="w-4 h-4" />
                    </span>
                  </div>
                </button>
              </form>
            @endforeach
          </div>
        @endif
      </section>

      <details class="apple-card p-5 group">
        <summary class="list-none flex items-center justify-between cursor-pointer select-none">
          <div class="min-w-0">
            <p class="text-[15px] font-semibold text-foreground">{{ __('Manual payment') }}</p>
            <p class="text-[13px] text-muted-foreground">{{ __('Record any custom transfer.') }}</p>
          </div>
          <x-lucide-chevron-down class="w-5 h-5 text-muted-foreground/70 group-open:rotate-180 transition-transform" />
        </summary>

        <div class="mt-5 space-y-5">
          <form method="POST" action="{{ route('app.shared-lists.settle.store', ['id' => $list->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 ($list->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 ($list->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>
      </details>
    </div>
  </div>
@endsection