@extends('layouts.app')
@section('title', $invoice->number)
@section('page', 'invoices')
@section('content')
@php [$l, $c] = $invoice->clientBadge(); $open = $invoice->isOpen() && ! $pendingTransfer; $bal = $invoice->balance(); @endphp
<a class="back" href="{{ route('portal.invoices.index') }}"><i data-icon="arrow-left"></i>All invoices</a>
<div class="page-head">
  <div><h1>{{ $invoice->number }} <span class="badge {{ $pendingTransfer ? 'b-blue' : $c }}" id="inv-status">{{ $pendingTransfer ? 'Transfer pending' : $l }}</span></h1><p>{{ $invoice->project?->name }}{{ $invoice->reference ? ', '.lcfirst($invoice->reference) : '' }}</p></div>
  <div class="actions"><button class="btn" onclick="window.print()"><i data-icon="download"></i>Download PDF</button>@if ($open)<button class="btn btn-primary" data-open="pay-modal" id="pay-btn"><i data-icon="card"></i>Pay {{ money($bal, $invoice->currency) }}</button>@endif</div>
</div>
<div class="grid g-main">
  @include('partials.invoice-doc', ['invoice' => $invoice])
  <div class="stack">
    <section class="panel panel-body">
      <h3>Payment</h3>
      <dl class="kv mt-12"><dt>Amount due</dt><dd class="tnum" id="due-amt">{{ money($bal, $invoice->currency, true) }}</dd><dt>Due date</dt><dd>{{ d_long($invoice->due_date) }}</dd>@if ($card)<dt>Saved card</dt><dd>{{ $card->label() }}</dd>@endif
        @foreach ($invoice->payments->where('status', 'succeeded') as $p)<dt>Paid {{ d_short($p->paid_at) }}</dt><dd class="tnum"><a href="{{ route('portal.payments.show', $p) }}">{{ money($p->amount, $invoice->currency, true) }}</a></dd>@endforeach</dl>
      @if ($open)
        <button class="btn btn-primary btn-block mt-16" data-open="pay-modal">Pay now</button>
      @elseif ($pendingTransfer)
        <p class="small muted mt-16">You chose bank transfer. We'll mark this paid once it arrives, usually in 1 to 2 days.</p>
      @endif
    </section>
    <section class="panel">
      <div class="panel-head"><h2>History</h2></div>
      <ul class="activity" id="inv-history">
        @foreach ($history as $h)
        <li><span class="ic-box {{ $h->event === 'paid' ? 'green' : 'gray' }}"><i data-icon="{{ $h->icon ?: 'clock' }}"></i></span><div class="grow">{{ $h->causer_id === auth()->id() ? preg_replace('/^'.preg_quote(auth()->user()->name, '/').'/', 'You', $h->description) : $h->description }}<time>{{ d_smart($h->created_at, true) }}</time></div></li>
        @endforeach
      </ul>
    </section>
    <section class="panel panel-body">
      <strong>Question about this invoice?</strong>
      <div class="actions mt-12">@if (agency()->assistant?->enabled)<button class="btn btn-sm" data-open-bot data-ask="Do your invoices include VAT?"><i data-icon="sparkles"></i>Ask the assistant</button>@endif<a class="btn btn-sm" href="{{ route('portal.messages.index') }}">Message accounts</a></div>
    </section>
  </div>
</div>

@if ($open)
<div class="modal-bg" id="pay-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="pay-title">
    <div class="modal-head"><h2 id="pay-title">Pay {{ money($bal, $invoice->currency, true) }}</h2><button class="icon-btn sm" data-close aria-label="Close"><i data-icon="x"></i></button></div>
    <form id="pay-form" method="POST" action="{{ route('portal.invoices.pay', $invoice) }}">
      @csrf
      <div class="modal-body">
        @if ($card && $invoice->allow_card)
        <label class="check pm-opt" style="padding:14px;border:1px solid var(--primary);border-radius:10px;background:var(--primary-50)"><input type="radio" name="method" value="saved_card" checked> <span><strong>{{ $card->label() }}</strong><span class="small muted" style="display:block">Expires {{ $card->expiry() }}</span></span></label>
        @endif
        @if ($invoice->allow_card)
        <label class="check pm-opt" style="padding:14px;border:1px solid var(--line);border-radius:10px"><input type="radio" name="method" value="new_card" @checked(! $card)> <span><strong>New card</strong></span></label>
        <div class="field hidden" id="new-card"><label for="cc">Card number</label><input class="input" id="cc" name="card_number" inputmode="numeric" autocomplete="off" placeholder="4242 4242 4242 4242"><span class="help">Demo only. Nothing is charged and the number is not stored.</span></div>
        @endif
        <label class="check pm-opt" style="padding:14px;border:1px solid var(--line);border-radius:10px"><input type="radio" name="method" value="bank_transfer" @checked(! $invoice->allow_card)> <span><strong>Bank transfer</strong><span class="small muted" style="display:block">We'll mark it paid once it arrives, usually 1 to 2 days</span></span></label>
        <p class="small muted"><i data-icon="lock"></i> Payments are processed securely. We never see your full card number.</p>
        <div class="demo-note" style="margin-top:0"><strong>Demo:</strong> no real payment is taken. Paying records a successful payment and emails a receipt.</div>
      </div>
      <div class="modal-foot"><button type="button" class="btn" data-close>Cancel</button><button class="btn btn-primary" type="submit">Pay {{ money($bal, $invoice->currency, true) }}</button></div>
    </form>
  </div>
</div>
@endif
@endsection
@push('scripts')
<script>
document.querySelectorAll(".pm-opt input").forEach(function(r){
  r.addEventListener("change", function(){
    document.querySelectorAll(".pm-opt").forEach(function(l){ var on = l.querySelector("input").checked; l.style.borderColor = on ? "var(--primary)" : "var(--line)"; l.style.background = on ? "var(--primary-50)" : ""; });
    var nc = document.getElementById("new-card"); if (nc) nc.classList.toggle("hidden", r.value !== "new_card" || !r.checked);
  });
});
</script>
@endpush