@extends('layouts.app')
@section('title', $invoice->invoice_number)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $invoice->invoice_number }}</h1>
            <p>
                <a href="{{ route('customers.show', $invoice->customer) }}">{{ $invoice->customer->display_name }}</a>
                &middot; <span class="badge {{ status_color($invoice->status) }}">{{ $invoice->status }}</span>
                &middot; <span class="badge muted">{{ title_case_words($invoice->type) }}</span>
            </p>
        </div>
        <div class="page-actions">
            <a href="{{ route('invoices.print', $invoice) }}" class="btn secondary" target="_blank">Print / PDF</a>
            @if ($invoice->balance > 0 && ! in_array($invoice->status, ['draft', 'cancelled']))
                <a href="{{ route('payments.create', ['customer' => $invoice->customer_id, 'invoice' => $invoice->id]) }}" class="btn">Record payment</a>
            @endif
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Invoice total', 'value' => money($invoice->total, $invoice->currency), 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Paid to date', 'value' => money($invoice->amount_paid, $invoice->currency), 'variant' => 'good', 'href' => '#payments'])
        @include('components.kpi', ['label' => 'Outstanding', 'value' => money($invoice->balance, $invoice->currency),
            'variant' => $invoice->balance > 0 ? ($invoice->is_overdue ? 'bad' : 'warn') : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Due date', 'value' => $invoice->due_date->format('d M Y'),
            'variant' => $invoice->is_overdue ? 'bad' : '', 'delta' => $invoice->is_overdue ? (int) $invoice->due_date->diffInDays(now()).' days late' : 'Not overdue', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Line items</h3>
                <span class="sub">{{ $invoice->period_start?->format('d M Y') ?? '' }}
                    @if ($invoice->period_end) to {{ $invoice->period_end->format('d M Y') }} @endif</span></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Description</th><th class="num">Qty</th><th class="num">Unit price</th><th class="num">Amount</th></tr></thead>
                        <tbody>
                        @foreach ($invoice->items as $item)
                            <tr>
                                <td>{{ $item->description }}</td>
                                <td class="num">{{ rtrim(rtrim(number_format($item->quantity, 2), '0'), '.') }}</td>
                                <td class="num">{{ money($item->unit_price, $invoice->currency) }}</td>
                                <td class="num strong">{{ money($item->amount, $invoice->currency) }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr><td colspan="3" class="right">Subtotal</td>
                            <td class="num strong">{{ money($invoice->subtotal, $invoice->currency) }}</td></tr>
                        <tr><td colspan="3" class="right">Tax</td>
                            <td class="num strong">{{ money($invoice->tax, $invoice->currency) }}</td></tr>
                        <tr><td colspan="3" class="right">Total</td>
                            <td class="num strong">{{ money($invoice->total, $invoice->currency) }}</td></tr>
                        <tr><td colspan="3" class="right">Paid</td>
                            <td class="num">&minus;{{ money($invoice->amount_paid, $invoice->currency) }}</td></tr>
                        <tr><td colspan="3" class="right">Balance due</td>
                            <td class="num strong">{{ money($invoice->balance, $invoice->currency) }}</td></tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            @if ($invoice->notes)
                <div class="card-foot"><span class="small muted">Notes: {{ $invoice->notes }}</span></div>
            @endif
        </div>

        <div>
            <div class="card mb-2" id="payments">
                <div class="card-head"><h3>Payments applied</h3></div>
                <div class="card-body tight">
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>Reference</th><th>Date</th><th>Method</th><th class="num">Applied</th><th></th></tr></thead>
                            <tbody>
                            @forelse ($invoice->allocations as $allocation)
                                <tr>
                                    <td class="mono"><a href="{{ route('payments.show', $allocation->payment) }}">{{ $allocation->payment?->reference ?? '—' }}</a></td>
                                    <td class="small nowrap">{{ $allocation->payment?->paid_at?->format('d M Y') ?? '—' }}</td>
                                    <td><span class="badge muted">{{ title_case_words($allocation->payment?->method) }}</span></td>
                                    <td class="num strong">{{ money($allocation->amount_allocated, $invoice->currency) }}</td>
                                    <td class="right">
                                        <form method="POST" action="{{ route('payments.reverse', $allocation->payment) }}"
                                              data-confirm="Reverse this payment? The allocation is unwound and the invoice balance restored.">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn xs danger">Reverse</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5">
                                    @include('components.empty-state', ['icon' => '&#128179;', 'title' => 'No payments applied'])
                                </td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card mb-2">
                <div class="card-head"><h3>Invoice control</h3></div>
                <div class="card-body">
                    <div class="btn-group mb-2">
                        @if ($invoice->status === 'draft')
                            <form method="POST" action="{{ route('invoices.issue', $invoice) }}">
                                @csrf
                                <button type="submit" class="btn secondary sm">Issue invoice</button>
                            </form>
                        @endif
                        @if (! in_array($invoice->status, ['cancelled', 'refunded', 'paid']))
                            <button type="button" class="btn secondary sm" data-modal="reminder-modal">Send reminder</button>
                            <form method="POST" action="{{ route('invoices.send', $invoice) }}">
                                @csrf
                                <button type="submit" class="btn secondary sm">Email invoice</button>
                            </form>
                        @endif
                    </div>

                    <div class="btn-group">
                        @if (! in_array($invoice->status, ['cancelled', 'refunded']))
                            <form method="POST" action="{{ route('invoices.cancel', $invoice) }}"
                                  data-confirm="Cancel this invoice? Any payments must be refunded separately.">
                                @csrf
                                <button type="submit" class="btn danger sm">Cancel invoice</button>
                            </form>
                        @endif
                        @if ($invoice->amount_paid > 0)
                            <button type="button" class="btn danger sm" data-modal="refund-modal">Issue refund</button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Metadata</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Invoice number</dt><dd class="mono">{{ $invoice->invoice_number }}</dd>
                        <dt>Issue date</dt><dd>{{ $invoice->issue_date->format('d M Y') }}</dd>
                        <dt>Due date</dt><dd>{{ $invoice->due_date->format('d M Y') }}</dd>
                        <dt>Currency</dt><dd>{{ $invoice->currency }}</dd>
                        <dt>Exchange rate</dt><dd>{{ $invoice->exchange_rate }}</dd>
                        <dt>Branch</dt><dd>{{ $invoice->branch?->name ?: 'Head office' }}</dd>
                        <dt>Service</dt>
                        <dd>@if ($invoice->service)
                                <a href="{{ route('services.show', $invoice->service) }}" class="mono">{{ $invoice->service->service_number }}</a>
                            @else — @endif</dd>
                        <dt>Created by</dt><dd>{{ $invoice->creator?->name ?? 'Billing cycle' }}</dd>
                        @if ($invoice->cancelled_at)
                            <dt>Cancelled</dt><dd>{{ $invoice->cancelled_at->format('d M Y H:i') }} — {{ $invoice->cancellation_reason }}</dd>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="reminder-modal">
        <div class="modal">
            <form method="POST" action="{{ route('invoices.remind', $invoice) }}">
                @csrf
                <div class="modal-head"><h3>Send a payment reminder</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="field mb-1">
                        <label>Reminder template <span class="req">*</span></label>
                        <select name="template_id" required>
                            <option value="">Free-form message</option>
                            @foreach ($templates as $template)
                                <option value="{{ $template->id }}">{{ $template->name }}
                                    <span class="mono tiny">({{ $template->code }})</span></option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field mb-1">
                        <label>Subject <span class="req">*</span></label>
                        <input type="text" name="subject" required value="Payment reminder: {{ $invoice->invoice_number }}">
                    </div>
                    <div class="field">
                        <label>Message <span class="req">*</span></label>
                        <textarea name="message" rows="5" required>Dear {{ $invoice->customer->display_name }},

Our records show invoice {{ $invoice->invoice_number }} for {{ money($invoice->balance, $invoice->currency) }} is {{ $invoice->is_overdue ? 'overdue' : 'due on '.$invoice->due_date->format('d M Y') }}.

Please make payment at your earliest convenience. Reply to this message if you have already paid.

Thank you,
{{ auth()->user()->organization?->name ?? config('nowills.name') }}</textarea>
                    </div>
                    <label class="check mt-1"><input type="checkbox" name="via_sms" value="1"> Also send by SMS</label>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Send reminder</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="refund-modal">
        <div class="modal">
            <form method="POST" action="{{ route('invoices.refund', $invoice) }}">
                @csrf
                <div class="modal-head"><h3>Issue a refund</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field">
                            <label>Refund amount <span class="req">*</span></label>
                            <input type="number" name="amount" step="0.01" min="0.01" max="{{ $invoice->amount_paid }}"
                                   value="{{ $invoice->amount_paid }}" required>
                            <span class="hint">Maximum {{ money($invoice->amount_paid, $invoice->currency) }} already collected.</span>
                        </div>
                        <div class="field">
                            <label>Reason <span class="req">*</span></label>
                            <select name="reason" required>
                                <option value="overpayment">Overpayment</option>
                                <option value="billing_error">Billing error</option>
                                <option value="service_failure">Service failure / SLA credit</option>
                                <option value="duplicate_payment">Duplicate payment</option>
                                <option value="cancellation">Cancellation refund</option>
                                <option value="goodwill">Goodwill</option>
                            </select>
                        </div>
                        <div class="field">
                            <label>Notes <span class="req">*</span></label>
                            <textarea name="notes" rows="3" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn danger">Issue refund</button>
                </div>
            </form>
        </div>
    </div>
@endsection