@extends('layouts.app')
@section('title', 'Credit notes')

@section('content')
    <div class="page-head">
        <div><h1>Credit notes</h1><p>{{ $notes->total() }} credit note(s) matching your filters.</p></div>
        <div class="page-actions">
            <a href="{{ route('credit-notes.create') }}" class="btn">+ New credit note</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Total credited', 'value' => money($totals['issued']), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Applied', 'value' => money($totals['applied']), 'variant' => 'good'])
        @include('components.kpi', ['label' => 'Awaiting approval', 'value' => money($totals['pending']), 'variant' => $totals['awaiting'] ? 'warn' : ''])
        @include('components.kpi', ['label' => 'In queue', 'value' => (string) $totals['awaiting']])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Number, reason, customer…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Type</label>
            <select name="type" data-auto-submit>
                <option value="">All</option>
                @foreach ($types as $t)
                    <option value="{{ $t }}" @selected(($filters['type'] ?? '') === $t)>{{ title_case_words($t) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($notes->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128179;',
                    'title' => 'No credit notes yet',
                    'message' => 'Raise one to correct a billing error, goodwill gesture or returned item.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Credit note</th><th>Customer</th><th>Invoice</th><th>Type</th>
                        <th>Reason</th><th class="num">Amount</th><th>Issued</th><th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($notes as $note)
                        <tr>
                            <td class="mono"><a href="{{ route('credit-notes.show', $note) }}">{{ $note->credit_note_number }}</a></td>
                            <td class="small">{{ $note->customer?->display_name ?: '—' }}</td>
                            <td class="small mono">
                                @if ($note->invoice)
                                    <a href="{{ route('invoices.show', $note->invoice) }}">{{ $note->invoice->invoice_number }}</a>
                                @else — @endif
                            </td>
                            <td><span class="badge muted">{{ title_case_words($note->type) }}</span></td>
                            <td class="small">{{ \Illuminate\Support\Str::limit($note->reason, 46) }}</td>
                            <td class="num strong">{{ money($note->amount) }}</td>
                            <td class="small nowrap">{{ $note->issue_date?->format('d M Y') }}</td>
                            <td><span class="badge {{ status_color($note->status) }}">
                                <span class="dot"></span>{{ title_case_words($note->status) }}</span></td>
                            <td class="right nowrap">
                                <a href="{{ route('credit-notes.show', $note) }}" class="btn xs secondary">Open</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($notes->hasPages())<div class="card-foot">{{ $notes->links('partials.pagination') }}</div>@endif
    </div>
@endsection